Kartki do prototypowania.

Check, test, research – how to design an effective app menu

5 August 2019

Jadwiga Kijak

Senior Researcher

Lidia Kołodziejska

Junior Designer
Jadwiga Kijak Lidia Kołodziejska
Check, test, research – how to design an effective app menu

The main purpose of navigation is providing access to the most important parts of service or application. A well designed encourages users to discover in-depth functions without feeling lost and frustrated.

Why is a good menu so important?

The key element of every navigation is undoubtedly a menu. Its direct influence on business objectives, which should be realized by the digital product, requires research verifying the effectiveness of designed solutions. In the case of a mobile application, the bottom navigation is one of the most crucial elements of an interface (called bottom menu). It enables easy access to the functions that are especially significant from a business and user perspective.

Icons

Icons used on well structured and thought through bottom navigation have a significant meaning. Properly selected and designed they communicate the results of a specific action, increase the clarity of an interface as well as its visual attractiveness.

We distinguish a couple of icon types:

Universal

Those are the icons, with which functionalities user is already associated with, like a house, printer or magnifying glass. However, those are rare, as most of the icons characterize ambiguity.

Universal icons

With conflicting meaning

Those are the icons, which interpretation is presumably obvious, but depending on the usage, they might have a different meaning. This makes it harder to understand them. Often they leave the user confused because expectations and actual meaning of an icon are significantly different. The classic example is a heart icon that means favorite, saved content, or a user wish list, similar to a star icon. This makes the proximity of both in one application, not suitable, due to the conflicting meanings. Another example is a speech bubble icon, it can mean a message or comment.

Icons with conflicting meaning

Unique

Icons, which meaning can be recognized after some thought, or after initial use. The users need to learn them, although often they are not open to that, which might determine that they will avoid using the unknown elements of an interface. An example is an icon strictly related to the industry or brand logo.

Unique icons

The rules of a good design and selection of icons

  1. Use easily recognizable and known to users' icons. According to this rule, it is worth to derive from the tested and universal patterns.
  2. Use icons everywhere, where they can increase usability, aesthetics, and clarity of an interface.
  3. Pay attention to the order and correlation of icons, which can influence each other. The same icons by itself can be interpreted differently in a group.
  4. Take care of integrity and legibility of icons amongst the users from various cultures, especially in the case of projects created for a specific market or globally available once.
  5. Avoid ambiguously or mutually excluding icons. Be guided by a principle, the fewer doubts, the faster the users will reach their goals.
  6. Wherever it is possible, text label the icons. The text label increases the legibility and eliminates possible interpretations dilemmas.
  7. Check, test, research whether the selected icons are the best option for helping the users achieve their goals.

Testing the icons

Knowledge of the basic design rules and the project’s business objectives allows creating the first version of the product. However, it requires validation of our assumptions. There are plenty of ways to assure ourselves that the menu is well designed and will be fully understandable and functional for users. It is worth highlighting that a menu is one of the many elements that we validate during research.

During research, we usually analyze five aspects of the menu and supporting icons:

  • Discoverability - how easily can a user find an icon in the application.
  • Recognizability - does the user understand what an icon means.
  • Meaning transfer - does the user recognize correctly what will happen after interacting with an icon.
  • Attractiveness - is icon aesthetically pleasing for a user.
  • Memorable - is the icon and its meaning easy to remember.

Sorce: Material Design

There are plenty of methods and research techniques, which enables testing of the icons. The selection of the best one is dependent on the wider context of a project or a goal, which we want to achieve during the study, etc. testing only the icons or testing the key features of the application.

The examples of methods and techniques:

  • Usability testing - enables testing prototypes and ready products. As a part of a study users go through the selected task, like purchasing selected products or downloading an invoice;
  • 5-second test - techniques are based on a quick user's look at the icon, followed by the request to describe what it represents and what it means;
  • Time-to-locate tests - measures how quickly users find selected icon;
  • A/B testing - analyzing experiments, which out of alternative projects have the best results;
  • Scaled questions - the list of questions, which evaluate attractiveness.

Testing and generating insights

When we create and test projects for our clients, we always check the key elements, including the navigation of the product. Here are a couple of interesting examples of the bottom many perceptions, which we encountered.

In the first project of an application menu from a field of e-grocery, we used the start icon, which was indicating a list of products to buy, but users understood it as a favorite list. In the following turn of tests, the star was replaced with a list icon. The change was partially accurate because participants understood the individual icon correctly. However, in the context of a whole application it was conflicted, in which way, confusing, with an icon depicting the category of products, what previously was not a problem. Some users were even wondering, whether it does not mean changing the look from tiles to list.

Another example is a menu from a transportation application. We placed the universal magnifying glass icon in the bottom navigation to search for the selected journey, by writing the place of departure and arrival. During usability testing, the individual icon was immediately associated with a designated feature, similarly as a proximal car icon, which users associated with a personal history of travels. However, in the context of whole bottom navigation, the presence of a magnifying glass icon influenced the perception of a car icon, in which way users were expecting both icons to be a search feature for preferred connections.

Another interesting example was the problems the users had with interpreting icons leading to the account data and application settings. Designers, wanting to save space, used the three horizontal dots (meatball menu) icon, combining those functions. During the study, we learned that it does not work as planned, after the initial use of the icon users remembered only one type of information- the user data or settings. Eventually, we redesigned the menu, to split these types of information and assigned each a separate icon.

What did we learn about icons while designing and testing different applications?

  1. Icons read in context.
    They strongly influence each other and the perception of other interface elements.
  2. Universal icons are understandable for most users.
    Those are the icons that we can freely use while designing products and digital services.
  3. Remember, not to widen or change their meaning.
  4. An industry matters.
    Users of a product from a specific industry use a common mental model, including the set of actions that they can use in a selected context. It helps them to read even the most distinct for the industry icons, which are incomprehensible to other users.
  5. We read icons both on a behavioral and cognitive level.
    Users almost parallely think what the icon means and click on it to see what it hides.
  6. The order of icons affects its meaning.
    In our cultural circle, we read icons the same way we read a text, left to right. In makes the order affect the meaning that users associate with them.

Summary

The bottom navigation influence the realization of established business objectives, as well as application usability and user experience. The basis of an effective performance should be a needs analysis and design patterns, which enable us to verify affecting each other design assumptions and the way the user interprets various elements.

In Mobee Dick we collaborate in interdisciplinary teams, interlacing research with design. It is the fastest and the cheapest way to deliver valuable products to the user's hands.