A major challenge of web applications, whether on desktop or mobile, is visual complexity. All screens have a limited size and it is often not possible – and not sensible – to place all functions in the visible area.
Because if the web interface is too cluttered and overloaded with interaction and design elements, users often have to look at each element to find what they need. This process of visual inspection is something we UX designers can optimize significantly.
But how exactly can we reduce the complexity of web applications and improve the user’s orientation on the user interface?
In the following, we would like to present three strategies that make it easier for users to find their way around complex applications. All of them involve reducing the number of options in order to get users to their desired destination more quickly.
1. We place things in the right place
The first strategy is about putting things in an expectable place. When we enter a strange kitchen and look for a trash can, many of us will first look under the sink, because experience shows that it is often found there. If we don’t find it there, we gradually open other doors until we do.
Transferred to an online store, we will, for example, look for the shopping cart at the top right first because we are used to finding it there. This habitual behavior also applies to personal settings, the product range or the logout button.
People therefore have certain expectations about where they will find typical web application controls. As designers, we are therefore well advised to place such functions in exactly these places and to use expectable layouts and conventions. This makes it easier for users to find their way around the user interface and increases their satisfaction with the application.
2. We design a clear visual hierarchy
It is also advisable to group related features and functions in a meaningful way – the purpose of which is also clearly and unambiguously identified.
Who hasn’t looked for a missing item in a drawer that looks like the picture on the right? Often we empty the entire drawer to find the missing item. Often only to discover that it is not in there at all.
This shows us that if there is no visual hierarchy, it is very annoying and time consuming to find things. The probability that we abort the search unsuccessfully and irritably is high.
If, on the other hand, the drawer is divided into small compartments in which the items are sorted by similarity as purely as possible, we find what we are looking for much faster.
The same applies to the user interfaces of web applications. If the interaction elements are clearly grouped and located in expected places, we save the user a lot of precious time and nerves.
In a good visual hierarchy, things with the same function are placed close together and separated from other subject groups by white space or lines.
Interaction elements with high relevance or frequency should also be designed to draw the eye. Less important interactions, on the other hand, may be visually restrained or not accessible at first click.
3. We ensure progressive disclosure
The third strategy is progressive disclosure. This means that we initially hide some elements. Which ones, we again decide based on the criteria of relevance and frequency of use.
Let’s look at the example of accounting software. Here, there are functions that are used with high frequency, such as entering invoices or receipts. So we should place these functions prominently in the user interface. The function for the annual accounting closing, on the other hand, has a very low frequency, namely only 1 x per year when the annual closing is due. Therefore, this function does not have to be accessible with a single mouse click and may also be tucked away in a less prominent place in the menu.
Again, an example from the kitchen can help us understand this: Things that are used with high frequency and high relevance are best kept within easy reach – such as plates, pots and cutlery. For the pasta machine or raclette accessories, a top shelf in the wall cupboard will do.
It’s the same with web applications. Functions that are used only rarely or by only a few users can be „hidden“ in tabs, submenus or accordions, for example. These elements then follow the principle of progressive disclosure.
Conclusion
Through these three strategies, we designers reduce the visual complexity of web applications along the lines of a well-organized kitchen: it offers everything we need for cooking and eating, and is always tidy and efficiently structured.
