10 Guidelines to make your app user-friendly

Maaike Dokter

Mobile applications are everywhere and they can be used for many different purposes. However, creating a usable mobile application that also provides a good user experience is not as easy as it might seem. In the previous article, we talked about how it is important to actively involve your users during your development process, since it can solve usability issues early on in the process.

Besides applying participatory design to your project, you can also follow some generic rules of thumb for creating usable applications. Back in 1994, Jakob Nielsen presented 10 usability heuristics for user interface designs that are still highly relevant today. By implementing these heuristics, your application is more likely to be deemed usable and provide a good user experience.

Visibility of System Status


“The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.”

This heuristic could be implemented by providing feedback to the user when they have performed an action, showing loading times or the amount of time the user has left to response. Moreover, it is important to indicate when options are clickable (e.g. visual buttons) or if there are links present. By including this heuristic, the user can easily see how they can interact with the system and what happens when they interact with the system.


Visibility of System Status

Match Between System and the Real World


“The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.”

It is important to specify the language of the application to the end-user: avoid jargon and unnecessary difficult vocabulary in your application. You can also apply this heuristics when creating menus: the most important tasks should be on top of the list and the exit or logout function should be at the bottom. Also, you can make use of things people encounter in real life: use icons that are frequently used, which people can relate to a specific function. For example, if your mobile application includes the ability to take a picture, you can add the camera icon: this icon is used regularly and people can directly link it to an action. Colours can also be put to use: make dangerous functions (e.g. reset your application) red, since people subconsciously link red to a warning or stop message.

User Control and Freedom


“Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.”

This heuristic is very straightforward, yet not always implemented. Here, it is favourable to be able to move back and forth between form-pages. For example, when buying an item online, the user would like to move back to the items he is
about to purchase or go to a previous page to double-check his entered address. Moreover, it is advised to always allow exits for users so they never get stuck in an action they did not want to perform.

As stated before, heuristics are general rule of thumbs. When specifying this heuristic to the healthcare domain and, specifically, to the target-group of elderly populations, this heuristic should be avoided: allowing for exits and support undo-buttons can generate much confusion with the end-users. If there are too many options available, they want to try them all. Therefore, you should design an application where the user cannot make mistakes or you include preventative measures such as warning messages. This is something you only find out by testing the product, which is why you should always involve your end-users throughout the development phase of your application.

Consistency and Standards


“Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.”

Consistency is extremely important for users: it allows them to quickly understand how an application works and remember it in the future. Consistency can be achieved in many different ways: a consistency in design and color usage, using icons that look and feel similar in design, and repeating labels and titles across screens for identical functions. Be creative in your design, but be consistent in your creativity.

Consistency and Standards

Error Prevention


“Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.”

As stated, it is better to prevent than to cure. Therefore, to implement this heuristic, you could warn users when they are potentially going to make an error. Also, you could implement case-blind input fields when upper/lower case letters are irrelevant and provide feedback on what type of data needs to be entered (e.g. a date in a specific format or a limit of characters that can be entered). By helping users enter data and interact with the system, you are preventing them from making mistakes. This can positively influence the user experience.

Recognition Rather than Recall


“Minimise the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.”

The focus of this heuristic is that users should not have to remember information from one screen to another: important information should be shown to them on their current screen. Moreover, it could help to leave a breadcrumb trail of where they are in the application (e.g. which menu item have they selected). When creating menus, ensure the titles are short and concise and try to implement that the first word of the title is the most important one.

Moreover, important information should not only be conveyed through color since not everyone can see this. When implementing links, ensure they are also underlined or bold faced to show it is a different element than plain text. Also, when using color, make sure the contrast with the background is high enough. You can check this with contrast colour tools: if the contrast is not high enough, not everyone will be able to read the information. Furthermore, allowing breathing space around the text will make it easier to read and follow by the user.

Flexibility and Efficiency of Use


“Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.”

To incorporate this heuristic, you could implement a search functionality so users can quickly find what they are looking for. This search function could also offer advanced options to help advanced users quickly find what they are looking for. Also, you could differentiate between types of users, such as an expert mode and a beginner mode. Another way to achieve this heuristic is by allowing the user to add or pin actions or items so they can easily access it. Adaptation to the user will affect the user experience in a very positive way.

Aesthetic and Minimalistic Design


“Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.”

Aesthetic and minimalistic design tries to limit “over-design.” Therefore, you should avoid including icons that are excessively detailed and images or animations that do not add any value. A lot of applications also struggle with providing too much information, making screens look crowded to the user: avoid this by only providing the information necessary for that specific screen and minimise the amount of text.

Help Users Recognise, Diagnose and Recover from Errors


“Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.”

Unfortunately, not all errors can be avoided in applications. Therefore, it is important to include error messages that can help users recover from their mistakes. Here, errors should be indicated and help should be offered to the user. For example, if they have entered an invalid mail address, an error message should indicate which field had incorrect data (recognise error), that mail addresses need to contain an “@“ sign (e.g. please enter a mail address with the following structure: janedoe@example.com, diagnose error) and allow the user to correct their mistakes (recover from error). By providing more details on where the error was made and how they can correct it, users can more easily interact with systems.

 

It is also advised not to show any error code messages, since this will only confuse the user. However, in some cases, error code messages might be important to identify or diagnose the error. Check with the actual end-users which information they need to recover from their mistakes.

Help and Documentation

Help and Documentation


“Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.”

Including a help function or page within your application could be useful: it could provide users with instructions on how certain functionalities work. Moreover, additional information could be provided on sections of the application. The goal is that applications are intuitive and easy to use, but it never hurts to have some extra tools integrated that could help the user when interacting with the system. The help information should be very easy to find and easy to search through. If possible, the help information should be accessed while working on a task and the user should be able to switch between both screens without losing any information.

These heuristics are rules of thumb, meaning they are not strict guidelines. Different user groups might react differently to user interface designs. Therefore, testing interfaces with users early on during the development stage is crucial. However, these heuristics can also be tested within your own development team. The heuristics provide a good starting point for creating interfaces to the general public. Per project, you have to determine which heuristics are especially relevant to your product and user-group. Using this process, in combination with participatory design, will allow you to quickly build usable interface designs.

Curious how Xablu can help your organization ?