Darren Wilson
A couple of things have baffled me recently, provoking thoughts about the principle of discoverability.
Firstly, Instagram. We recently joined to market UXcentric to prospective customers. To showcase visually what we do, what we like and where we are.
Most people I know who use it say that as a user experience it’s pretty good. All was fine for me too, snapping from my smartphone or tablet. Albeit the iPad version is a blown up iPhone, rather than a dedicated tablet experience (but that’s another story).
I assumed I could apply the same rationale from my iMac. Click the + button again and link to an image, gif or video in a folder on the Mac. Right?
Apparently not.
Mystified, I posted on social media to get help. Declaring to the world that, as a UX Designer of many years, I couldn’t find (at least what I thought was) a basic, critical function. Gulp.
Turns out the function isn’t on desktop after all. Sure, there are some workarounds. Turn my browser into mobile via developer tools. Use scheduling apps to share content. But they don’t solve the underlying issue that Instagram haven’t fulfilled my need. I’m discombobulated!
Secondly, LinkedIn. Now, I’ve been using it for over 10 years now on various platforms. I'm a fairly active user and know my way around it.
But one thing that’s frustrated me is the lack of ‘Save for later’ type function. Something for when I’m browsing and either don’t have time to comment or am afraid to comment in case there’s anything contentious.
So I posted an idea myself to include a new button on the post widget itself. It seemed to resonate with a lot of other people from the reaction I got.
And then I find out from the comments there’s already a Save function after all! Granted, it’s wasn’t quite the functionality I suggested, but it was there. Can you see it…?
For those who haven’t worked it out, you press the 3 dots icon in the top corner of the post to reveal some contextual options. If the post has an article you can save that to your profile (though with no link to the post), if not then that option is removed.
Seems more obvious when you know right! How on earth could I have missed it? How has everyone else missed it? Because it was too subtle and hidden that’s why.
I, we, clearly needed hitting in the face a bit more with its visibility. Hence the blog, and my thoughts on what can be done to avoid this kind of situation from happening to you.
“By looking, the user can tell the state of the device and the alternatives for action” (Norman, 1994 - The Design of Everyday Things )
What is Discoverability?
Discoverability can be defined as the ability for a user to find content or functionality present in a given experience such as a website, mobile app or in-car technology.
Nielsen Norman Group suggested that the principle can be also further subdivided into:
Users can easily find content or functionality that they assume is present in a website (also known as Findability)
Users encounter new content or functionality that they were not aware of previously.
Having high levels of discoverability enhances the degree of learnability - the ability with which a user can quickly begin to use a product, its features and functionality. This in itself contributes to the overall usability of a product.
How to Provide Good Levels of Discoverability
Follow these simple rules to ensure your users find what they are looking for quickly and easily.
1. Research
Before you even start designing, find out what problems users have and how they will benefit from your idea. Identify what their priorities are, so you can define the correct user requirements.
2. Logical Grouping
Items that have strong relationships, i.e. action buttons, should be located together into logical groups. By structuring screen content into logically, the user will make sense of it much faster and is more likely to find what they need. One example is to use an action or navigation bar. These all do similar functions in one component.
3. Location
Where content is positioned is also important. Position buttons where users can easily find or expect to see them. For example, use a stereotypical position for your menu, close button and Navigation Bar bar. If content is where users expect, the chance of them finding it is hugely increased.
4. Bigger is better
The larger and more prominent the button, the more obvious it becomes and the clearer it is what the user needs to do. The greater the importance of the function or information, the greater prominence it should take.
Larger buttons are also easier to hit which pleases people. This is even more important in safety critical situations such as driving a car. Drivers need confidence to press the button in one action and minimise the amount of time they look away from the road.
5. Simplify
Removing or deprioritising superfluous content allows the genuinely important content to stand out. Always place focus on the primary task and prioritise what a user is most likely to want to do in context.
6. Colour
Colour also helps with association, attracts attention and places emphasis on important content. Colours chosen should match stereotypes where possible i.e. green for action, red for cancel. Not as in this parking machine example.
Colour helps, but it can’t be the only solution. Here, there is added text and a large arrow to help, those who have aggressive forms colour blindness. Red can also be harder to see at night. because the eyes become less sensitive to long wavelength colours.
7. Provide Visual Cues
If there is extra content that you wish to provide your user, then give them an indication that is there in the first place. If not via specific buttons with icons and text, then give them cues to demonstrate there is more to see and do.
There are a few ways to do this:
Breadcrumbs
Showing a fraction of the next/previous/additional page content
Show additional content on entry prior to zooming in on the abridged content
Temporary animation
I have to add that while the Shazam example has breadcrumbs, the prominence is low and it did take me some time to realise there was more functionality, beyond ability to find out what a track is. Room for improvement.
8. Avoid Complex Hidden Interactions
In the push to remove buttons from screens, or physical controls from products, designers are either forced to, or choose to come up with weird and wonderful ways to provide the user with functionality. New gestures. Double presses. Long presses. Press two buttons at the same time.
Some of these are fine, for shortcuts, so long as there is also an additional more intuitive method to perform the same task. What is not acceptable is driving core functionality into a convoluted method of interaction. Either add content, change the design, or ditch some functionality.
Complex interactions involving multiple digits should only be used where there is a need to avoid inadvertent operation, or is for extremely rare functions.
There are complex operations that require multiple digits and yet are stereotypical, i.e. CTRL-ALT-DEL.
Yet even Apple have operations that people may not even know exist.
Double tap space for full stop
Drag keyboard from the middle with left and right thumbs on an iPad, to split the keyboard in two
Drag from 123 to shortcut to a number and auto transition back to QWERTY on release
Drag upwards on symbols to input others i.e. upwards on ?! to get a “
It’s Ok to have shortcuts, but let people know!
9. Familiarity
Using familiar icons and strategies that the user has come into contact with previously provides the user with expectations and predictability. This increases the likelihood of recognition and identifying what the functionality is.
The icon used does not have to be the exact copy, but needs to follow a strong metaphor that is easily understood i.e. shuffle and repeat icons. Else it may need explaining or annotating.
10. Icons & Text Labelling
Where icons are not well understood, they can be supported with text. Over time, the icon and resultant action will be learned, especially if it is frequently used. As such, the text can be displayed as smaller, secondary information alongside a larger, primary icon.
This also helps to reduce screen clutter and allows the user to scan the screen more easily, quickly and effectively.
11. Notifications
If and when something changes that the user needs to be aware of, let them know. Notifications don’t need to be intrusive, depending on how critical they are. So long as there is visibility, the user can choose when to open them at their convenience.
Where relevant, providing numerical cues alongside an app icon or in the status bar is a clean way of adding information. This helps the user in their decision making.
12. Consistency
Be consistent across your ecosystem of different features, screens and applications. This relates to all of the items mentioned in this piece. Using consistency increases predictability of where to look and find what is required.
This reduces the need to learn and increases usability. It also raises confidence in the user that you’ve provided a good experience.
13. Hints & Tips
Depending on how rich a system may be, the interface required to access all of its functions may require many screens and levels of interaction.
As such, the user may not be aware of what is available, or realise that there are quicker ways of performing the same task. In that case, hints and tips may be used to bring it to the user’s attention. They can also be used when errors are made to provide corrective action for users.
Caution should be exercised with this approach however, as they can be annoying. Apply them with some logic and follow how the user interacts with them. If they simply close them, then take their hint!
14. Coachmarks
Having downloaded a new app, or opened a feature for the first time, the user is likely to be at their most open to being given assistance. What is this app all about? What’s new? How do I interact with it? What new gestures are there? What can I do with it? What do these new terms mean?
Providing a soft, high-level and contextual summary of what they have before them can facilitate learning significantly. Especially if there are hidden functions accessed via gestures or more complex interactions.
Flash Scores App showing annotated overlay for important functionality following a new download
15. Test, Test, Test
Once you’re happy with your design, before you release it, test it! See what works and what doesn’t. Use goal-driven tasks to see if and where users struggle and why. Figure out what remedial actions you can take to counteract these problems.
Listen to whether the correct functionality is there for what they require to address their needs. Iterate and re-test as appropriate till you and your users are happy.
Conclusion
You can have the prettiest interface in the world, but if users can’t find what they are looking for, they are going to get annoyed, quickly. Follow a human centred approach to achieve optimal results.
Research what the users are looking to achieve
Design a solution to meet the user requirements, using the tips I’ve provided here
Model and tweak until you and stakeholders are happy
Test with real users, to see whether it works and what can be improved
Change as appropriate, and iterate if required
Oh, and please to those who can make a difference at Instagram, please add a little plus button to your browser experience!
And over at LinkedIn, please add a save button to the post itself and link to that rather than the article.
Get in touch with the author
Darren Wilson
Managing Director at UXcentric
07854 781 908
Comments