Last fall we launched a new widget, including many new features like User Satisfaction, SmartVote, and an improved Instant Answers flow. Now it’s even better with several design improvements as well as optimizations for mobile websites.
(If you’re already using the new UserVoice widget, these changes have been applied automatically so there’s nothing for you to update! If you’re still using our Classic widget, check out your account’s widget settings to get started with the latest and greatest.)
This post goes into some of the thinking behind the design improvements we’ve made.
Improved context for Instant Answers
Instant Answers is a big win for you and your users – they don’t have to wait for your to respond to their messages to get help, while reducing the amount of one-on-one support you have to provide for common questions.
After a user enters their message or idea, we look to see if there are any articles in your knowledge base that may answer their question or ideas posted by other users that may be related to their feedback. However, we discovered users were sometimes confused about the difference between help articles you created and related feedback submitted by other users. To help address this, we’ve added some additional context, the icons have been updated, article preview text has been extended to two lines, and ideas now display the number of supporters.
When the user was contacting support, drilling into a suggested idea didn’t provide enough context that it was another user’s *suggestion* rather than a help article from the company.
To address this, we removed the confusing “Does this answer your question?” prompt, combined the duplicate “I want this” button with the primary call-to-action button position, and we now prominently display how many other people support the idea (further clarifying that this is a suggestion, not a KB article).
In addition, if an admin response exists, it is now displayed since it can include helpful information for the user, and the open in a new window link is now consistently placed after the centered title.
Cleaned up articles
Similarly, articles now display their related topic and the “Open in a new window” button has been moved to the top (on long articles, it was buried below the scroll line). The prompt has been combined with the primary call-to-action button so that going “back” doesn’t imply that the article didn’t answer their question.
“Pick + Subscribe”
The new SmartVote widget mode presents the users with two ideas and asks them to pick which one they want more. We use this data, along with other demographic traits, to help you prioritize ideas for specific segments of your user base. Picking an idea is different than our legacy voting system, and users aren’t limited to the number of ideas they can pick.
Since users aren’t necessarily interested in getting updates for every idea they pick, we have a separate option for them to subscribe to ideas they pick, but people did not understand the difference between the SmartVote buttons “Pick” and “Pick + I want this”. Even though in other contexts for ideas “I want this” made sense, it was confusing when the user was already saying they wanted to pick an idea. So we changed the primary button label to “Pick + Subscribe”.
Side note: In SmartVote, you may notice that we don’t display an idea’s status, admin response, or link to open the idea in a new window – this is so the user can focus on making a quick decision between two ideas and then move on to the next set which, in turn, gives you more SmartVote data to work with.
Reduced emphasis on optional tasks
On mobile and small widgets, it’s really important to reduce the number of objects competing for the people’s attention. It can be a tough balancing act, as you want to promote the primary action you want a person to take, while also giving them access to other tasks they may want to perform.
To help achieve this, we reduced the prominence of the mode menu, added a light gray background, and made the top-border thicker to help separate the menu from the primary action of the widget at the top.
Consistent button positions, styles, and behaviors
When we first designed the widget we focused separately on the different tasks and flows people needed to go through, but when we brought these different tasks together in the final experience we found that we couldn’t always put similar controls in a consistent place. Sometimes the back button was at the top of the widget while at other times it was at the bottom. To address this, we audited all the inconsistencies, created repeatable UI patterns, and redesigned parts of the widget to accommodate.
Once example was the “Back” button position. Sometimes it was at the top of the widget to make room for other objects, and other times at the bottom of the widget. This is now consistently placed at the bottom left. To allow for this on the contact screen, we had to move the “include a screenshot” option into the message text area.
SmartVote buttons were also inconsistently styled when compared to the rest of the widget. Now, the back button looks like the others, “Pick” is styled as a secondary button, and “Pick + Subscribe” is indicated as the primary call-to-action to encourage users to get notified as the idea progresses.
When suggesting an Instant Answer, we also used to ask yes or no questions, which added a lot of complexity and content to the screen. The “Back” button was labelled “No”, putting too much emphasis on an article or idea not being helpful when the user simply wanted to view other results. Now “back” simply means going “back”, and the primary button includes the call-to-action statement.
Consistent prompt styles
All prompts are now centered and no longer include distracting icons.
Designing for translated content
When designing an interface, it’s easy to forget that when the content is translated it will have a significant impact on the UI. Our widgets is currently translated in over 40 different languages, so we’ve had to make sure that text and buttons can flow to accommodate.
Many of the above optimizations improved the fluid layout, and one other example is putting some buttons on their own line to allow for greater flexibility.
And so much more!
I could probably go on and on with the dozens of other tweaks that went into this update, like improved scrolling affordance, fancy effects, and tiny adjustments – but you get the idea. We enjoy sweating the details so that your users can focus on getting help and sharing feedback without having to figure out a frustrating interface.
If you’re already using the new UserVoice widget, these changes have been applied automatically so there’s nothing for you to update! If you’re still using our Classic widget and want to upgrade to the latest and greated, check out your account’s widget settings to get started.
If you have any feedback on ways we can make the widget even better, please let us know!
Air photo courtesy of Torley