2. Jacob Neilsen’s 10 general principles for
interaction design. They’re called heuristics
because they’re broad rules of thumb and not
specific usability guidelines
Jacob Neilsen
Heuristic
Meaning:
Enabling a person
to discover or
learn something
for themselves.
3. Visibility of system status
The system should always keep users
informed about what is going on,
through appropriate feedback within
reasonable time.
Keep users in
the loop.
4.
5.
6.
7.
8.
9.
10.
11. 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. Make
information appear in a natural and
logical order.
Follow real world
conventions.
12.
13.
14.
15.
16.
17. 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.
Support undo
and redo.
18.
19.
20.
21. Consistency and Standards
Users should not have to wonder
whether different words, situations, or
actions mean the same thing.
Follow platform
conventions.
22.
23.
24.
25.
26.
27.
28. Error Prevention
Either eliminate error-prone conditions
or check for them and present users
with a confirmation option before they
commit to the action.
Prevention is
better than cure.
32. Recognition rather than
Recall
Minimize 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.
Make it easily
accessible.
33.
34.
35.
36.
37.
38. Flexibility and Efficiency of
Use
Design for novices
& experts.
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.
39.
40.
41.
42.
43. Aesthetic and Minimalist
Design
Dialogues shouldn’t contain
information which is irrelevant or is
rarely needed. Every extra unit of
information in a dialogue competes
with the relevant units of information
and diminishes their relative visibility.
Less is
more.
44.
45.
46.
47.
48. Help users recognize,
diagnose and recover from
errors
Error messages should be expressed in
plain language (no codes), precisely
indicate the problem, and
constructively suggest a solution.
Be clear and
helpful.
49.
50.
51.
52.
53. 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.
Be the friend
in deed.
Users should always be informed of system operations with easy to understand and highly visible status displayed on the screen within a reasonable amount of time.
Translation: Let the user know what is going on.
The user cannot always see directly inside the system, so it is important to give feedback letting them know answers to questions like, “how far through the sign up process am I?”, “How much of this file is loaded?” and “How long will I have to wait for the next stage?”
Probably the two most important things that site visitors need to know are:
“Where am I?” and
“Where can I go next?”.
Download in progressLoading screenUpload in progressFlight direction
Starting a project on Kickstarter is a complicated process so it’s important that they’ve made it as easy as possible. I can clearly see which sections of the form I have completed and which are still to be done.
Uploading a single photo usually only takes a couple of seconds but, even so, Facebook shows me a progress bar so I know it’s working and I can see when it will be complete.
Traffic lights indicate what needs to be done Countdown timer Also three slots because color blind and accesibility
The lift panel indicated the number of the floor that has been selectedIt also indicates where the lift currently is and its progress towards your floor
Time of the train’s arrivalCountdown timerDestination, stops along the waySpeed
Indicated the stops and indicates which side door will open as well as how far you’ve come in your journey
Designers should endeavor to mirror the language and concepts users would find in the real world based on who their target users are. Presenting information in logical order and piggybacking on user’s expectations derived from their real-world experiences will reduce cognitive strain and make systems easier to use.
Instead of sign up they’ve used, ‘Yes, I want Neil to teach me grow my business’More human than sign up, also that’s probably how you’ll talk in you were to call on the phone. I’d like to learn this course and so on
This is replicating the physical card and it's also ensuring that all the digits are from the right places
The recycle bin icon is called and looks like a dustbin. Something we see everydayThis is fashioned after shelves from a library so its looks familiar
Natural groupings of products in appropriate aisles. All the ketchups go together. All the soaps go together. You don’t see them mixed with each other. When I go grocery shopping I know I’ll find all the juices in the same section. I don’t have to run around wondering whether I’ve missed some juices.
The cartoon is adapted in Hindi language and uses the language that we are familiar with. Shin Chan seems one of our own, not a foreigner with whom we can’t relate.
Offer users a digital space where backward steps are possible, including undoing and redoing previous actions.Freedom to navigate. Exploration without fear.
This is something that is so important and you’ll only realize it's important if it weren't there. Imagine if you had uploaded some document by mistake and the only way to undo that action was to write an actual physical letter to some admin at Google. That’s how things worked back in the old days. Now it's simpler. People make mistakes so allow them to recover. Ask for a confirmation if it might be dangerous.
Undo is another cool function to have. You can either ask for confirmation or allow undo depending on the context. If you’ve used photoshop you know the everything is recorded there. Because when you’re going to make changes, the details will vary. It might be a small section or it might be the whole thing. Either way you can pick the specific part and modify it.
Whitener allows redo. The test drive is a confirmation before actually buying the car
Same with clothes. The concept of the trial room. They also have return policy sometimes. Which is confirmation and redo.
Interface designers should ensure that both the graphic elements and terminology are maintained across similar platforms. For example, an icon that represents one category or concept should not represent a different concept when used on a different screen.
The physical keyboard and the onscreen keyboard look the same. The sign in icon/ profile icon/ icon for homepage etc. are usually in the same area.
The menu structure is the same across microsoft’s varios applications
The menu is same in all their branches
The play and the pause button are same on both youtube and vimeo. The main function button is kept across different platforms.
Play music and gaana too have the same play and pause button, also within the app
This is from a project that we’re currently working on where the users will have to byheart that goal, target and projections have different meanings and remember the meanings too.It would have been simpler if they would have kept different terms or Added simple prefixes like Monthly Yealy goal, monthly goal and daily goal or something like that because they’re all goals at the end of the day
Whenever possible, design systems so that potential errors are kept to a minimum. Users do not like being called upon to detect and remedy problems, which may on occasion be beyond their level of expertise. Eliminating or flagging actions that may result in errors are two possible means of achieving error prevention.
They’re letting you know whether your password fits the required convention as you’re typing it and confirming that you’re on the right trackThats another way of preventing an error as they tell you that the item is already in your cart
Gmail prompts you if you mention attachments and try to send the mail without attaching any file.Preventing the error from occurring.Here google’s helping you by showing a list of related elements without you having to correct the spelling or searching something odd which you didn't want.
The passport verification is a long procedure. Your form is checked at the reception counter. In case of errors, the guy asks you to bring the files or copies of originals. Then there’s another round of checking. And another and another and another till you’re finally at the exit. They do it thoroughly so you won't have any future problems.
Minimize cognitive load by maintaining task-relevant information within the display while users explore the interface. Human attention is limited and we are only capable of maintaining around five items in our short-term memory at one time. Due to the limitations of short-term memory, designers should ensure users can simply employ recognition instead of recalling information across parts of the dialogue. Recognizing something is always easier than recall because recognition involves perceiving cues that help us reach into our vast memory and allowing relevant information to surface. For example, we often find the format of multiple choice questions easier than short answer questions on a test because it only requires us to recognize the answer rather than recall it from our memory.
The emergency exit should be clearly marked as emergency exit.I remember the last time I was on a flight, the attendant announced that window 8 and window 12 are also emergency exits and I thought it important to memorize those numbers in case of an emergency. They should have just marked it instead so that I don’t have to remember the seat numbersHere foursquare is helping by giving you options. What is it that you’re looking for or can look for. Instead of you having to type out each category
Bing keeps your search history so you can easily recognize what you were looking for the last time and whether you’d like to search for that information again.
Amazon keeps a track of your window shopping footsteps and prompt you next time you’re looking for somethingIt also shows your related items that might be of interest to youThis is not usability this is experience. Making it a bit delightful.
If they would have just given you a token, you’ll have had to memorize the number or the section in which you’re bag is kept or point to your bag so they could have given it back to youIn this example they’re showing the token number and the counter where it will be served.
In our office canteen they give you the coupon but they take it at the counter so you have to remeber your token number which is a bit annoying
That’s the tailor’s way of recognizing your dress materialHe can easily find yours by looking at those little pieces
Helps to find the answer as one among the given options Here you’ve to eliminate the wrong answer by recognizing the right one rather than having to completely remember the right answer
With increased use comes the demand for less interactions that allow faster navigation. This can be achieved by using abbreviations, function keys, hidden commands and macro facilities. Users should be able to customize or tailor the interface to suit their needs so that frequent actions can be achieved through more convenient means.
For those who are unaware of the vicious internet and its first born child demands there’s the regular way to sign upFor all those who have previously suffered at the hands of the devil and learnt hard lessons there is advanced settings
Keyboard shortcuts for experts. This is also helps in case your mouse refuses to work
You have training wheels for beginners which can be later removed as the user becomes an expert in balancing
You have the auto mode for beginnersAnd every other mode for prfoessionals
Your camera comes with a basic lens but as you get better you can upgrade to the variety of different lens options the company provides
Keep clutter to a minimum. All unnecessary information competes for the user's limited attentional resources, which could inhibit user’s memory retrieval of relevant information. Therefore, the display must be reduced to only the necessary components for the current tasks, whilst providing clearly visible and unambiguous means of navigating to other content.
Classic example is google. Just gives you a simple input field this is why you fear nothing and ask google everything.Think about asking your parents such questions. There are so many things that will stop you from even asking a question because there are a lot of lines and a lot to read between those invisible lines. This weather app has the precise screen which gives you a dashboard style of information and a detailed version as well
The image on the right is the organized simple version of the image on the left. Look at how many words you’re brain has to process, remember and probably even start making notes on it to figure it out.It matters how your layout guides the user through a visual hierarchy
Everything has been given the same visual weightMy eyes have to take an entire tour of the ticket before coming to spot where the most important information is All I need to know id which seat I’ll be occupying.Some highlight would have drawn my attention
This example gives it to you straightCinema 1 stands out and H8 stands out immediately
Designers should assume users are unable to understand technical terminology, therefore, error messages should almost always be expressed in plain language to ensure nothing gets lost in translation.
It important how you help the user. Just telling them something went wrong doesn’t help.Tell them what’s wrong and don’t write a love letter explaining the problem. They don’t need to know the details.Tell them how to solve the problem so they can achieve their goals.
Here’s a mailchimp example that shows the error message, in a clear and concise manner along with offering help
Earlier they just used to show error 404User’s don’t know what that meansThen I remember googling what that meantThings shouldn’t be this difficult
This is a fun and simple example
The number you have dialled is incorrect. Please check the number and try again. This message helps the user understand how to go ahead in their journey
Ideally, we want users to navigate the system without having to resort to documentation. However, depending on the type of solution, documentation may be necessary. When users require help, ensure it is easily located, specific to the task at hand and worded in a way that will guide them through the necessary steps towards a solution to the issue they are facing.
FAQs are great because they are a set of problems that a lot of users might need help withGetting started, how to make an account, how to upload ,how to this, how to that
This is another way of teaching the users how things work by showing them the controls and giving them a walkthrough while also showing them all they can do on the app
Whether or not you’re a first timer in an airport, it always helps to have help.Though it is well designed, sometimes you maybe overwhelmed or confused.You go to the help desk and they sort you out.
Reception is another form of help desk, you can ask and fortunately its placed right at the entrance so you don’t get lost in a foreign place
Sure you can explore and find the brands and the stores on your own but if you’re short on time or specific a map helps.Also gives you an overview of the entire mall
Helps you locating your position in the park. Helps a lot since there is network problems as you go higher up.
The obstacles the user has to face if something is poorly designedThe goal is simple to pass the testNo grouping of buttons or labelling or sectioningOn the other hand, overtime the user learns to use that poorly designed system as well. To a point that it seems natural.So. its our responsibility that we do our best.