The A to Z of UX - D is for Discoverability: A 15-point list to ensuring users find what they need

Updated: Dec 16, 2019

Darren Wilson

Blog title image for discoverability

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). 


Instagram Mobile App with + button to add content
Instagram Mobile App with + button to add content

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.


Instagram website on desktop with no ability to add content in site
Instagram website on desktop with no ability to add content in site

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…?


LinkedIn post on Desktop
LinkedIn post on Desktop

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.


BBC News App with logical grouping of buttons in the Navigation Bar and Menu option clearly visible in prime location
BBC News App with logical grouping of buttons in the Navigation Bar and Menu option clearly visible in prime location

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.


Car Play App, with a simple interface for the now playing content. Common functions are large and familiar. Other content in accessed in other views.
Car Play App, with a simple interface for the now playing content. Common functions are large and familiar. Other content in accessed in other views.

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. 


A Birmingham Car Park Machine with red button for confirming and black button for cancelling.
A Birmingham Car Park Machine with red button for confirming and black button for cancelling.

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


Sky News App showing fraction of information indicating scrolling required
Sky News App showing fraction of information indicating scrolling required


Shazam App showing breadcrumbs for 3 pages, accessed via swiping. Not immediately prominent without text on landing page (middle), however there are additional buttons on the left and right of the screen.
Shazam App showing breadcrumbs for 3 pages, accessed via swiping. Not immediately prominent without text on landing page (middle), however there are additional buttons on the left and right of the screen.

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. 


Toilet flush using two buttons at the same time is not acceptable...
Toilet flush using two buttons at the same time is not acceptable...

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.