If you are reading this surely you have heard design jargon like “that app has good usability”; “we have to encourage a user-friendly interface”; “user experience is very important”; “the UI is well designed” “UX this and UX that”; etc. so at this point probably you already have an idea of what UX and UI are, (but if you haven’t you may want to check our article “What is UX and should my company care” before reading this article).
But after you are aware of the importance of UX, how can you tell if a system (app, software, website, device, etc.) has good UX?
Usability being the main ingredient of good UX, is a factor that measures how “usable” a system is, or in other words how easy it is to interact with it to get tasks done by its users, hence a system with a great usability level is frequently called “user-friendly”.
This Usability level can be measured, not by a fancy device but, this is commonly measured by the criteria of a UX Designer and(or) a UX Evaluation Expert following a set of rules called “UX Heuristics”.
And though its true that the personal criteria and threshold for error tolerance can vary from evaluator to evaluator, most of them follow UX Heuristics which can also vary depending on the type of system but, the elemental ones are those defined by Jakob Nielsen (a well recognized authority in the UX field, also author and co-founder of Nielsen Norman Group) as the 10 Principles of User Interaction Design, these are common rules of thumb that any designer should follow when designing or evaluating the usability of a system:
A sense of orientation can always give a user trust in the system when it tells him what’s going on at any time. Knowing the outcome of prior actions is useful for this.
What’s the status?; What section am I in?; Do I have good Wi-Fi reception? How long before this is finished? Am I logged in? Are a few questions that can be answered quickly with a visual indicator.
Examples of these are:
Google Docs’s File Status. Is always telling the user and reassuring if the document has been auto-saved, or if there has been an internet connection problem.
Progress Bar. Is a common way to tell a user how far he/she is from finishing a process.
When a human interacts with a system interface that resembles one he’s already familiar with from the real world, or contains elements from a known environment within his profession, it's easier to associate the purpose of each interaction point within the system’s interface.
This goes the same for language used in system messages and naming conventions, the closest you can be to human natural language when communicating a message or naming a feature, process, status, etc. avoiding using fancy or technical jargon… the better. Try not to encourage users to grab a dictionary in order to understand your message.
Examples of this principle are:
Folder Icons. Visual representation to convey computer file organization.
Drag and Drop Feature. A gesture to facilitate moving objects into a particular area.
This refers to the possibility a user has to correct or undo a mistake without being stuck in a particular system process or stage, making him feel rest assured he can always have “an emergency exit” available if disaster may arise.
Frequently users may try to do things quickly for many reasons, and this can turn into clicking wrong buttons, opening wrong dialogs, skipping required steps. And sometimes it is just the system that reacts in an unexpected way to the user. In any case, the user should always feel he can interact with liberty and a wide margin of error instead of being weary of every action he does, fearing the system can explode!
Examples of this principle are:
Cancel and Undo buttons. Cancel an action, and Undo a system action or status.
Version snapshot. Revert the system to a previous version.
Try to be consistent in language, processes, colors, representations, locations within your system. If you use different words to refer to the same thing; or if a repetitive task is accomplished one way in one place and a different way in another; or if one feature is visually represented by different icons in different places; all of the above can cause confusion and thus, heavier cognitive load, longer learning curves and thus, user frustration and low performance.
Examples of this principle are:
Traffic lights. No matter where in the world, traffic lights always use the same colors.
Browser corner buttons. A browser always uses a cross to close, a dash to minimize and a square to maximize the window (Unless you’re a Mac user which uses 3 colors).
When the system enters a state of error by any reason, it always good to let the user know with clear message (Heuristic #1 Visibility of System Status), but even better is to carefully design the system to minimize errors from occurring at all. And for that we have to address the common cases where the user can face error-prone situations, frequently caused by low attention, hastiness, or a mismatch between the user’s understanding and the interface. This can lead to entering wrong types of data, performing unready actions, running or cancelling a process by mistake, just to name a few.
Examples of this principle are:
Validated forms. To prevent users from entering invalid emails or phone numbers.
Confirmation dialogs. A confirmation option before committing to an action.
Recognition is easier than recalling. For example, if you were asked “Was T. Jefferson the 3rd US president?” Would be easier to answer than “Who was the 3rd US president?”...right? so minimize the need for users to memorize elements, features, actions or options and use clear labels and visual cues for all the frequent tasks, and(or) use recognizable elements that can be associated in a consistent manner so the user shouldn’t have to remember much in order to use. If possible, provide a way of obtaining quick handy help like tooltips or quick pop ups without having to leave the used window to get help.
Examples of this principle are:
Main Menu Icon. The commonly used icon represented by horizontal lines.
Recently viewed products. A common feature in e-commerce that promotes sales.
Providing a way to cater both new and experienced users, is a great way to have flexibility and promote efficient use within a system, and thus greater productivity.
This is accomplished by having UI customization and shortcuts to accelerate task execution in a way that is more comfortable to different users, and of course not forgetting to attend to the basic needs of new users.
Before you start thinking of flat design or any other designer trendy jargon, this is not about graphic style, but about visual content.
The less clutter for a UI the better and easier for users, try to stick with the most important and frequently used features and options as visible elements across each screen of your system and leave off-context features and options hidden or less distracting.
Aesthetics should be taken into consideration of course in order to create a balance between function, usability and eye-candy. Unlike an airplane’s dashboard, almost every system has a way to organize your UI to make sense to users in the appropriate context.
There are sometimes that users inevitably find a way to go on their own and go off-track, or just maybe there is in fact a technical problem with the system and there’s no one to blame, when that happens and a weird message pops up like: “UPLOAD_ERR_INI_SIZE” with no option to continue and no minor clue as to what went wrong. Technical jargon just worsens the situation and creates anxiety. The above would explain the user better if it used something like “Sorry, but the file you’re trying to upload is too large. Make sure it’s under 20 MB and try again”.
So make sure to use clear natural language messages and if possible follow Principle #3 with an emergency exit or at least reinforce it with a visual cue.
If a user rarely needs to use additional documentation in order to use the system, it means it’s well and intuitively designed. But providing it just in case is part of a good practice. This additional help documentation to learn tasks or how to troubleshoot common problems should also follow the recommendation of using clear, concise and well organized content with natural language as well.
A help section with a search feature within the system is a good option. And even better if it includes other media besides text, like graphics, pictures, video and sound.
Any system that can be used by a human, has a usability level. The higher the usability level, the more user-friendly the system is. There are several ways of evaluating this, but the most common and well known are the UX Heuristics based on the 10 Interaction Design Principles.
