Sometimes I end up on a website and I feel as in front of this picture … completely lost! The picture was taken at the Gym of the ETH in Zürich and seems to stay on the border line between order and chaos. Every color represents a game field and every game has different rules, could you play volleyball in this field? I’m not really an athlete and for me it would be complicated, too many things to remember at once. I have to admit it: I have a really short memory! But I found comfort in Psychological studies: I’m not the only one.

George A. Miller in 1956 studied the human short-term memory and observed that the memory span of young adults is approximately of seven items (from 5 to 9). The article, “The magical number seven, plus or minus two: Some limits on our capacity for processing information”, was much discussed and sometimes false interpreted. Later researches demonstrated that short-term memory is not a constant, and many scientists have agreed that the number of 7 is pretty generous, most probably is 3 or 4. For sure from this research on we have the proof that we can remember only a few things (elements or chunks) at a time. No chance for normal people to become as Dustin Hoffman in Rain Man!

The working memory allows us to remember and manipulate information over a short period. When we have to accomplish a task, a verbal or arithmetical exercise, we have to automatically recall some information or rules all at once, and that is what’s called “working memory”. In the field of user experience it’s called “cognitive load”. The cognitive load cannot be eliminated entirely, but should be minimized, at least for what is called “extraneous cognitive load”: a mental process used not to understand the content itself (“intrinsic cognitive load”) but the content organization, graphic, ecc. If these are the assumptions, the proposition “less is more” aquires more sense. User interfaces shouldn’t overload the user’s working memory. Designers shouldn’t require users to keep in mind more than a couple of things and that’s only in the case they cannot arrange them directly on the screen.

Based on tips and rules by Nielsen Norman Group, I will give some examples from my experience as a user:

1 – It’s better to avoid whatever in design, requiring the user to remember information, read text and make unnecessary decisions:

The picture below shows the timetable on the swiss national railways’ website, http://www.sbb.ch/en/home.html:

Sbb Timetable

From the first search form on the home page it’s requested not only the departure and arrival cities, but also the VIA. It was not immediate to understand what is the meaning of VIA (the route – given that more than one are possible), it could be a specific route or an additional stop. Furthermore it turns out that the VIA input is not strictly necessary and makes only the user question for something not crucial. My suggestion would be to avoid extra hurdles for the user and insert this input in the Advanced search, properly explaining how it works.

Here is a better example from the national railway in UK, http://www.nationalrail.co.uk/:

UK National Railway Timetable

In terms of  advanced search the swiss website seems to be far from a good result. There are lots of options, most of them could be better graphically organized or modulated in further steps. Things seem to be too compressed. Overall the form looks complicated and messy.

Swiss national railway - Advanced search

Here a better example from the national railway in UK.

UK national railway - advanced search

2- It’s better to avoid not usable and overused visual solutions

Zürich City Guide Website

This example is extremely interesting, because it takes inspiration from a new trend in user interface: the Hamburger menu. The web is plenty of articles listing pro and cons of this specific sidebar menu. My target here is only to show how an helpful feature born for mobile interfaces is not necessarily usable for the desktop version. In the official Zürich City Guide’s home page, https://www.zuerich.com, the user enjoys a beautiful landscape of the city and a minimal and modern sidebar on the left. At the top of the hamburger menu and below some functions and services identified by icons (not always relevant, as the one for the contact form). The user needs first to be able to recognize the Sidebar Menu button as actionable: this brings, in general, to a lower discoverability. Even if the user is aware of the approach, he looses time to open the menu and search what he’s looking for. The user has not the map of the content at a glance and to move among the sections he is forced to use the hamburger menu. It could as well be possible to add some other usability violations, anticipating the next tip:

  • each icon opens a menu with an hover effect except for the search function, with no apparent motivation.
  • the logo is placed at the right bottom exactly opposite of its “should be” location according to a common mental model.
  • there’s no arrow to indicate it’s possible to scroll down the page, there are only some circles on the right side to operate a slider(normally placed horizontally)… it upsets completely used mental models without a valid or clear motivation.

Here is a better example from the official London City Guide, http://www.visitlondon.com/: it is not an original user interface and it’s not graphically attractive, but the website content architecture is visible right in home page. The user finds immediately what he’s searching for and even better there are a lot of tips and suggestions for the user. This homepage is not nice, but for sure is usable and proactive.

London City Guide Website

3 – It is better to avoid weird and unusual mental models

Imagine you would like to buy a chair for your dining table. You want to search and compare chairs on the Ikea website.

Ikea Website - facets

From the main menu you choose the main department. In the second screen you can select a category inside the main department from two different sections. The most visible is in the content section where categories are listed with title, image and description. The second place is just below the main menu: is represented as a secondary menu (only titles of categories are listed horizontally) but with a completely different style from the main menu. After selecting your choice the next screen shows the products for the category you choose and a new third level menu compares below the second level menu: this presents the available facets and filters for this category. Guess what! This third level menu has another different style. This is too much of a mess for the user! It is disorienting and not consistent.

Ikea Website Menus

Here the user has to think too much about how to navigate across the products and requires a large amount of working memory.

This is a better example from the ecommerce Zalando:

Zalando Website

These are only few examples from my experience. But they are enough to understand why it is so important to put the user at the centre of our design. Even the most cool design can frustrate the user if unusable. If you have other examples to share, write them in the comments, it could be useful for all of us!

If you want to know more:

Don Norman, The design of everyday things

Steve Krug, Don’t make me think

NN/g, https://www.nngroup.com/articles/minimize-cognitive-load/

Mariateresa Fragale

UI designer & Front-end Developer inspired by coffee, cakes and dirty kids. Lover of minimalistic and user centered design with many years of experience in website development. Dreamer and hungry. Based in Switzerland.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.