Let’s Talk Heuristics: An Overview

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.”

zola

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.

mySiteHome

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.”  

amazonOrder

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”.

portfolio

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.”

dropbox

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.” 

amazonBar

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. “

facebook

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. “

gmailGo

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.” 

beats

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.”

question  

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——

Advertisements

12 thoughts on “Let’s Talk Heuristics: An Overview

  1. Pingback: Let’s Talk UI Design: Heuristic 1, Visibility of System Status | Mad Hatter
  2. Pingback: Interesting blog posts from students | CGT 512
  3. Pingback: Let’s Talk UI Design: Heuristic 3, User Control and Freedom | Mad Hatter
  4. Pingback: Let’s Talk UI Design: Heuristic 4, Consistency and Standards | Mad Hatter
  5. Pingback: Links and Comments on Classmates’s blogs | yangchencgt512
  6. Pingback: Let’s Talk UI Design: Heuristic 5, Error Prevention | Mad Hatter
  7. Pingback: LET’S TALK UI DESIGN: HEURISTIC 6, Recognition Rather than Recall | Mad Hatter
  8. Pingback: Check This Out: Spencer Edward’s on Nielsen’s Usability Heuristics | cgt512knataraj
  9. Great beat ! I wish to apprentice while you amend your web site,
    how can i subscribe for a blog site? The account aided me a acceptable deal.
    I had been tiny bit acquainted of this your broadcast provided bright clear concept

    Like

  10. I do not know whether it’s just me or if perhaps everyone else encountering issues with your blog.
    It appears as though some of the written text within your
    posts are running off the screen. Can someone else please comment and let me know if this is happening to them as well?

    This may be a problem with my internet browser because I’ve had
    this happen previously. Appreciate it

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s