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.
Balancing Act
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).
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.
Fig 2. Hyperlinks can work from the blue colour family, presenting underline on hover
Start Vanilla and Build Up
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.
Reverse Styling
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.
Reduce Room for Error
When designing data tables, we often see designs like the one designed in Google Drive (Fig 3).
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.
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.
Be Consistent
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.
Summary
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
