Balancing Discoverability with Aesthetic Design

What is discoverability?

Discoverability refers to the user’s ability to find information on screen. Not only does this include basic elements such as text, images and hyperlinks, it also includes interactive elements such as icons, buttons and input fields. Traditionally, elements like these had a typical or recognisable design. Hyperlinks were blue and underlined, buttons had a solid border with a background gradient and input fields made use of an inset shadow and a solid border also. This often resulted in a low interaction cost experienced by users when visiting and navigating websites.

In recent years however, new trends have appeared, Microsoft infamously introduced ‘Modern UI’ (aka ‘Metro’) and designers spend more time implementing the latest design trend or what’s most popular on Dribbble. This has somewhat diluted the traditional recognised design of standard HTML elements and as a result, interaction costs and discoverability times have increased. In our search for a beautifully designed website we’ve lost sight of usability.

With every website or web application, usability should come first. Users measure products on how easily or successfully they enable them to complete their task. Rarely will they judge a product purely on its appearance, especially if unnecessary design hinders their process. Applications are there to serve a purpose. They’re there to make the lives of the end user easier.

When designing for the web, our design process in my opinion is slightly backward. We start by removing existing styles that are computed by the browser. We remove button gradients and shadows, we remove focus outlines etc. For each design element we remove, we are also removing the familiarity of the element to the end user. As users prefer familiarity, balancing discoverability with aesthetically pleasing UI should not be too difficult. For instance, hyperlinks do not need to completely lose their affordance in favour of a low contrast, currently hip design trend (Fig 1).

Image for post
Image for post

Fig 1. An example of a vanilla hyperlink and hyperlinks we see today

Hyperlinks can be designed to match users expectation, presenting a familiar design that gains affordance during interaction (Fig 2). Traditionally hyperlinks are blue (#0000FF). When designing hyperlinks we do not need to deviate from the blue colour group, we can simply change the shade and tint to select a hue that offers less contrast against white.

Image for post
Image for post

Fig 2. Hyperlinks can work from the blue colour family, presenting underline on hover

Starting your design interface with default browser styling allows you to focus on usability. You judge elements on their importance to the end user. Elements that are most important and are likely to be used most of the time are prioritised above elements that are less likely to be used, less of the time.

At this point, the important elements can be built upon visually. We can use design to enhance their status and position within the page. We can also reduce the visual of the less important elements by removing design from them.

Another approach when trying to achieve a balance between discoverability and aesthetics is the reversal of element styles. If your design is link heavy and a decision has been made allowing you to remove or reduce design on some links, a good technique is reverse styling. Using hyperlinks as the example once more, you can apply the traditional blue underlined design to focus and hover states. We know that users scan pages, we also know how. As the user scans the UI, the familiarity of the traditional design appearing on hover will inform the user that these elements are still hyperlinks.

When designing data tables, we often see designs like the one designed in Google Drive (Fig 3).

Image for post
Image for post

Fig 3. Google Drive table design

Although visually this looks OK, the problem is that it does not communicate to the user which is the clickable element. Is it the item name or is it the entire row? We are still left guessing even when hovering over each row as the design does not respond.

A way to improve this is by making the entire row clickable and adding a hover style to the row (Fig 4). This compensates for the lack of communication the item name offers and also reduces mistake.

Image for post
Image for post

Fig 4. Row hover style

If table links are on cell data only, increasing the element padding or displaying the link as a block will help to reduce possible frustration the user may face if they miss the target link. The relationship between the distance the mouse travels to the target width is known as Fitts’ law. Increasing the element width reduces the likelihood of our users making mistakes.

Once you have adjusted default element styles, try to be consistent with your application. Being consistent helps to reduce user’s anxiety and interaction time. Users spend less time thinking as they’ve become familiar with elements and their behaviour. This evokes positive emotion and increases their pleasure using your application or website.

As with all UI design, a balance is required. Design decisions that sacrafise usability should not be implemented, while maintaining every computed style is likely to leave you with an ugly design where every element fights for attention. Remember we are not designing for ourselves, we are designing for the end user and chances are we won’t be with them to explain our design decisions.

Links
w3 Schools — Hyperlink
NN/g — Interaction Cost
NN/g — Fresh vs. Familiar
NN/g — F-Shaped Pattern Reading
Interaction Design.org — Fitt’s Law

Written by

UI & UX Designer. Passionate about design, health & fitness and wellbeing.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store