Alright, so last class Dr. V presented to us the 10 heuristics for UI Design by Jakob Nielsen. We talked about them a bit in class, but today I’m gonna speak a little more about them. Check back in later posts about how each of them can apply in Designs!
Visibility of system status
“The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.”
People get confused easily! You need to let users know what is on the page, where they are in the product, or how long til they get to their target destination. Examples of this includes Highlighted Navigation, Breadcrumbs, Loading Percentages, Progress bars.
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.”
Attention: Everybody’s not a computer, a programmer, or a designer. People do NOT speak programming lingo out in the real world (most people, anyway). So….saying things like “Please re-authenticate” at a password error is not gonna fly. Talk like your target audience talks. Know how your audience sees things. For example, say your target audience are employers. Seeing your portfolio as a navigation item, for example, or placing works right on the first page.
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.”
People make mistakes. Let them have a way out, or a way to fix things. For example, displaying information entered before and allow editing before placing an order.
Consistency and standards
“Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions”.
Don’t you dare use two different ways to describe one thing on the same screen! BAD, BAD, BAD! If your navigation item says “Portfolio”, then the page title should be “Portfolio”, the url should say “Portfolio”, and the browser tab should say “Portfolio”.
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.”
Alright, if you can create a design that pushes for no errors, then that would be epic and very good. Shoot for that. Otherwise, if an error does occur, THEN REALLY ASK A USER IF THEY WANT TO DO THAT. For example, accidentally selecting “Delete” instead of rename in Dropbox.
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.”
REMEMBER THIS ONE. REALLY. People do not like to read. So…don’t force them to. People can recognize certain symbols simply because that’s what they’ve learned. Using a house symbol as “Home” or using a Cart symbol as “Cart” for example. A progress bar’s position is another example.
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. “
Some people have more experience than others. Allow shortcuts in your design for these people, because they know what they need and how to get to it. Facebook keeping you logged in, or even messaging a friend on Facebook are two good examples.
Aesthetic and minimalist 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. “
Guys and gals, keep it simple. Don’t feed users more info than they need…meaning DON’T GIVE A HUGE PARAGRAPH EXPLANATION IF IT’S NOT NEEDED. In fact, if you don’t need to explain it because it’s intuitive then don’t explain it! Saying “Create an Account” on a button is a good example.
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.”
Umm….if there is an error, then the people need to know it. Don’t over-complicate it, seriously. Highlighting the text box with the error and saying “Oops, wrong password” is more than enough. Or, even just highlighting the box and using an “X” if that is effective.
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.”
Alright if it’s needed, provide some help. DO IT ONLY IF IT’S NEEDED THOUGH. Make it to where it’s easy to find, and of course relatable. Putting a “?” Bubble next to a search box is an example.
Alright, there ya go everyone! Check back for some design posts on these heuristics!
——User First, Designer Second——
Mad Hatter 