The Unsolicited UX Audit, Ep.1
This is the first in what will become a series of unsolicited UX mini audits. Like many of you I use a variety of apps to help me get work done. If you’re a UX/visual designer or a developer, then I’m sure you’ve had moments, even in your favorite apps, where you’ve thought:
‘…hmm I wish this worked just a little bit differently’.
This series is devoted to these kinds of musings.
Auditee — Buffer.com
Buffer is an awesome app which you can use to help manage your twitter account. Just to be clear, Buffer is excellent. Clearly, it has been created by an amazing group of talented designers and developers. If you spend a reasonable amount of time using twitter, then you owe it to yourself to check Buffer out!
Buffer’s on-boarding deserves special mention. It’s a study in intuitive UX, and makes great use of animation that enhances, rather than distracts.
As amazing as Buffer is, there were a couple of small UI/UX issues which stood out as candidates for possible improvement.
Issue 1 — Rescheduling a Tweet
The first time I encountered this UI, I was momentarily unsure of how to proceed.
The issue here is with 3 UI action items, highlighted above, which have effectively the same level of importance.
The first time I triggered this popup I actually missed the smaller ‘Schedule’ button and instead went
Select a date → Add to Queue
The effect of which was the opposite of what I intended. It immediately added the post to the queue, instead of delaying the post to my selected date.
Solution
I think this interaction would be improved if it were modal. Here’s a quick mockup to illustrate
See a clickable version here.
This is an improvement because at each stage of the UX there is only one interactive element the user is presented with, which guides the user through the process.
Notes: The ‘shake’ animation which highlights the ‘Schedule’ button may not be the best. It may have a negative connotation to some users (indicating a shake of the head). UX-App has a limited number of highlight animations though, so I chose one which was ‘close enough’ to communicate the gist of the idea.
Issue 2 — Mystery Menu
I’m not a fan of mystery menus. The discovery of the card buttons occurs after you have hovered over the card. This isn’t optimal for a number of reasons
- It requires that I hunt around for this option. As a new user, this kind of UI pattern makes me wonder which other buttons/links I’m missing
- It increases the cognitive load, the burden is now on me to remember that this hidden option exists and how to trigger it
- Doesn’t translate well to mobile. Since the concept of mouse hover doesn’t exist on mobile, developers now need to treat these links as a special case on mobile
The UI probably looks a little less pretty when there are multiple cards on screen at once. This seems like a case of visual design taking precedence over usability.
Solution
I’d do away with the mystery menu, and possibly experiment with reducing opacity if visual clutter is an issue.
Don’t hide your UI away (particularly for aesthetic reasons). Whether you love or hate Microsoft’s ribbon interface, it’s based on millions of dollars worth of usability testing, which concluded that: options that are hidden away pose a serious discoverability issue.
Issue 3 — Image Expand Action
This is a textbook example of gratuitous animation. It adds nothing to the interaction, and only serves to slow me down. There’s no ambiguity with regard to where the image came from which makes the animation superfluous.
Solution
The solution is a simple one. Just ditch the animation. Here’s a mockup to illustrate.
And here is a clickable version which you can interact with.
Yaay! I just gained back 200ms of productivity for each click of this UI item.
Conclusion
Admittedly, these are very minor nitpicks in what is otherwise a masterfully designed product.
I’d love to hear your thoughts about these proposed improvements. Do you think the suggestions improved the user experience or made it worse? Either way I’d love to hear what you think!
