Perhaps counterintuitively, tidiness is often the adversary of a positive user experience. This truth isn’t immediately obvious, but it is real and important.
the quality of being coherent and intelligible.
the state or quality of being arranged neatly and in order.
Self–service environments, of which the web is one, by necessity need to sacrifice tidiness for discoverability. If filling stations tidied up their checkout area, no one would grab a bar of chocolate while paying for their petrol. Supermarkets could look much cleaner by putting all of their produce in cupboards, but it would take us double the time to do our shopping. And coffee shops would never tempt us to buy a tray bake to wash down our coffee if they didn’t put them prominently on display.
Websites and digital products similarly need to work hard to make it clear to users what is on display and provide them with relevant self–evident options to allow them to make confident and informed choices. Just as in the real–world examples above, digital design needs to support core user needs (helping them find content and complete tasks) as well as encourage upsell and impulse purchases (people who bought X also bought Y).
Despite this imperative there is increasing evidence of some digital design trending towards tidiness at the expense of clarity.
Such trends can only lead us to the conclusion that designers have sacrificed the solving of user problems and the achievement of business goals at the altar of their own tastes. In short – the opposite of design.
It is most prevalent in the design of menus and pages.
An obsession with compacting menus into hamburgers, sleeves and mega menus.
The problems with hidden menus (of any variety), particularly on desktop screens, are well established. To recap the key statistics, when a menu is hidden, discoverability is reduced by almost half, average task time is increased and perceived task difficulty increases.
Pause for a moment to read the headlines of key comparative studies between hidden and non–hidden navigation and ask what possible reason there can be for their use:
- On mobile and on desktop, people are significantly more likely to use the navigation when all or some of the navigation options are visible
- On both desktop and mobile, when the navigation is hidden, it takes participants longer to use it than when it was visible or partly visible
- Both on mobile and desktop, content discoverability is significantly lower when the navigation is hidden
- Hidden navigation leads to significantly higher difficulty ratings than visible or combo navigation
- Users take significantly longer to complete tasks on sites with hidden navigation than they did on sites with visible or combo navigation on both desktop and mobile
The unholy trinity of hidden menus is the following:
- The hamburger menu so called because its three horizontal lines look like a burger – solves a problem for the designer (more space on the screen for pretty stuff) but virtually none for the user (to find things, consider things, know what’s on offer, understand what they might do next)
- Sleeve or drawer navigation, which slides in and out on command – adding additional interactions and unnaturally separating content from navigation
- Mega–menus – which are highly effective in a clear subset of circumstances (particularly in e–commerce) but are overused beyond their core area of usefulness
Menus are such a critical part of supporting user journeys, providing context and confidence, helping users know where they are and what to do next that they should be designed with the same deliberateness of purpose as all other aspects of UX.
Home page designs with a screen–depth deep hero image or video
In the early days of the web, the Google search engine home page was rightly lauded as an exemplar of lean efficient user–focused design. However the page was so lean that some users thought there was more of it to load. Google remedied this by adding a series of links below the search box along with a copyright message, to reinforce that the bottom of the page had been reached.
The difficulty with the illusion of completeness is that it inhibits scrolling, which is almost always a desirable user behaviour, which so should be encouraged through design. So when designers are considering either a full home page image or home page video they need to balance its visual impact with its interaction implications. The pursuit of pixel–perfection, using internet plumbing that was never designed for it means that usually the trade–offs just aren’t worth it.
For instance, home page auto–play video can help reinforce things which are otherwise very difficult to communicate to users as it can be evocative and emotional, creative and differentiating. But that comes at a high price, for instance it can have a detrimental effect on SEO, it has an adverse effect on download speed, it can reduce users’ tendency to scroll or interact. Tellingly, some of the world’s largest digital brands have taken it off their home pages in recent years, including Airbnb and Netflix.
A full screen hero image with a down arrow embedded it in is better than no arrow embedded, but neither is as good as space made at the bottom of the page to show teaser content to let the user know there’s more to come.
Tidiness often contradicts affordance, which is the extent to which a design is natural, discoverable and obvious. And while the allure of design beauty is strong (and all things being equal is desirable) it mustn’t come at the expenses of clarity. Because 25 years of data screams one simple truth at us.
Obvious always wins.