7

10 Rules of Thumb for UI/UX Design

 2 years ago
source link: https://uxplanet.org/rules-of-thumb-for-ui-ux-design-4d7a053d781
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

These are some of the famous rules discovered by Jakob Nielsen and they are popularly known as Jakob Nielsen’s 10 Usability Heuristics because they are broad rules of thumb and not specific usability guidelines.

in this article, I’ll discuss these principles/rules in brief with some examples so that you can understand them easily and get something valuable out of them.

#1: Visibility of system status

The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

The first of Jakob Nielsen’s ten heuristics — visibility of system status — relates to so much more than user-interface design. At its essence, it is about communication and transparency, which are critical to many aspects of life. People strive for predictability and control, and, in most cases, more information translates to better decision-making.

Only by knowing what the current system status is can you change it — that is, you can figure out what you need to do next in order to reach your goal.

#2: Match between system and the real world

1*wq-GSFZOtrF27fvFKGgwTg.png?q=20
rules-of-thumb-for-ui-ux-design-4d7a053d781

The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.

By nature, human beings find comfort in familiarity. It is for this reason that Jakob Nielsen’s second usability heuristic, the match between the system and the real world, is so important. The principle states:

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.

#3: User control and freedom

1*xrexwdQghCAAVmQuSI7rKg.png?q=20
rules-of-thumb-for-ui-ux-design-4d7a053d781

Users often perform actions by mistake. They need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process.

Part of a great user experience is nurturing users’ feeling of control over the user interface (UI) they happen to be using. Users should be able to quickly correct mistakes or backtrack on choices made. The ability to easily get out of trouble encourages exploration, which facilitates learning and the discovery of features. It also increases overall use and sales (in the case of exploring a product space). Conversely, when the UI doesn’t support these actions, users feel trapped and typically report dissatisfaction.

There are several UI controls that typically allow people to go back to the previous state of the system:

  • A Backlink, which returns users to a previous page or screen
  • A Cancel link, which allows the user to quit a task or multi-step process
  • A Close link, which allows users to close a new view
  • An Undo option (and a corresponding redo option) to allow users to backtrack on a change to a UI element

#4: Consistency and standards

1*9VUrB9oLnujsjTK92asRwA.png?q=20
rules-of-thumb-for-ui-ux-design-4d7a053d781

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

Think about the websites and applications you use: they all rely on well-established conventions. Blue underlined text is clickable, the shopping-cart icon shows the items you plan to purchase, the site logo is in the top left corner, a magnifier-glass icon stands for search — these are all examples of conventions that are used all the time in digital products and that make users’ lives easier.

Advocating for consistency and standards may seem like we’re pushing for all applications to look and act the same, but that’s not the case. Rather, when websites and applications adhere to standards, users know what to expect, learnability is increased, and confusion is reduced.

#5: Error prevention

1*PsWmxkZZWF7EcLBViShNew.png?q=20
rules-of-thumb-for-ui-ux-design-4d7a053d781

Good error messages are important, but the best designs carefully prevent problems 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.

A crucial point in discussing user errors is where to assign the blame for the error. The term “user error” implies that the user is at fault for having done something wrong. Not so. The designer is at fault for making it too easy for the user to commit the error. Therefore, the solution to user errors is not to scold users, ask them to try harder, or give them more extensive training. The answer is to redesign the system to be less error-prone.

#6: Recognition rather than recall

1*kY-SyXu4t9MQJisx71Gjqw.png?q=20
rules-of-thumb-for-ui-ux-design-4d7a053d781

Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.

Psychologists like to make the distinction between two types of memory retrieval: recognition versus recall. Think of meeting a person on the street. You can often tell quite easily if you have seen her before, but coming up with her name (if the person is familiar) is a lot harder. The first process is recognition (you recognize the person as familiar); the second involves recall. Recognition refers to our ability to “recognize” an event or piece of information as being familiar, while recall designates the retrieval of related details from memory.

#7: Flexibility and efficiency of use

1*4Ruv9P_gfFxYXen2prf1Ag.png?q=20
rules-of-thumb-for-ui-ux-design-4d7a053d781

Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

I am not an accomplished cook. I can follow a recipe and get reasonably edible results, but it takes me a long time and a lot of concentration. If I don’t prepare for cooking by reading through a full, detailed recipe, laying out all of the ingredients beforehand in groups that will be used together, and googling a few advanced techniques, I’ll be left with a burned dinner. I have a few friends that know what they’re doing in the kitchen and I’m always amazed at all the little shortcuts they take when cooking. The first time I cooked with my friend Nick many years ago, I was laboriously cutting up basil leaves, putting a ton of concentration into trying to keep the slices of similar size and not chop off my fingers in the process. Nick walked over, grabbed a handful of basil leaves, tucked them one inside another and gently rolled it like a tiny cigar. He then quickly sliced his bundle of basil a few times, getting perfect consistency in the cuts and taking almost no time at all. He then gave me a wink and moved on to another part of the recipe while I stood there, gobsmacked at how efficient and precise he was.

Like in the kitchen, in UX we must accommodate people with a variety of competencies. Our systems should be flexible enough to allow users to complete a given task using a variety of methods. Flexible systems are efficient because people can choose the method that works best for them. The 7th of the 10 usability heuristics says that we should prioritize flexibility and efficiency of use through the use of shortcuts and accelerators — unseen by the novice user — which speed up the interaction for expert users. This approach allows a system to cater to both inexperienced and experienced users.

#8: Aesthetic and minimalist design

1*__t1r6WUL1JYPjGB5VtkWg.png?q=20
rules-of-thumb-for-ui-ux-design-4d7a053d781

Interfaces should not contain information that is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.’

This heuristic doesn’t mean you have to use a flat design — it’s about making sure you’re keeping the content and visual design focused on the essentials. Ensure that the visual elements of the interface support the user’s primary goals.

#9: Help users recognize, diagnose, and recover from errors

1*l7zkNlFvPmTLA2YS0n1X3g.png?q=20
rules-of-thumb-for-ui-ux-design-4d7a053d781

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

This heuristic doesn’t mean you have to use a flat design — it’s about making sure you’re keeping the content and visual design focused on the essentials. Ensure that the visual elements of the interface support the user’s primary goals.

#10: Help and documentation

1*bHw8As0S4bM6WwAB_E-cSw.png?q=20
rules-of-thumb-for-ui-ux-design-4d7a053d781

It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.

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.

Websites and applications can offer two types of help: proactive and reactive. Proactive help is provided before the user has encountered a problem, in order to prevent issues. It includes onboarding tutorials and contextual tips. In contrast, reactive help includes materials such as documentation, videos, or even tutorials for those situations when users have an issue and they seek out advice to address it. (Even though some users may consume such materials proactively, it is rare that they do so.)

Download a free poster of Jakob’s 10 Usability Heuristics at the bottom of this article under Downloads. You can download the summary poster in 3 sizes: full poster size, A4, and letter. You can also download the full set of 11 posters (10 Usability Heuristics and the summary poster.

Article Inspired By Ten Usability Heuristics by Jakob Nielson


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK