Let’s Talk UI Design: Heuristic 1, Visibility of System Status

Hello again everyone!  Today is post one of the Usability Heuristics series.  I’ll be discussing the first heuristic by Jakob Nielsen, “Visiblity of System Status.  I’ll be using the example I did from my Heuristic Overview post, and that is Zola’s Vintage Clothing and Accessories.

Here’s what I said before:

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.

Alright down to business.  I put down Zola as a good example of this heuristic because it follows this convention to down to a T.  The website’s layout is a simple design.  It primarily uses white with orange as an accent color.  The navigation element is plainly seen in view and doesn’t become “lost in the design” because of its large blockiness and alarming bold color.  With each page I click on I know exactly where I am simply because of that navigation.

So, how does it work and why is it important?

We focus on what we want, not necessarily everything around it. Our goals affect our perception of things.  Sometimes, looking for certain items cause us to go into places we know nothing about.  Keeping the status of the page of which we are on allows us to focus on the task at hand without worry.  We know where we are or what’s the status of the UI.

We won’t become confused and in fear of where we are.  Nobody likes to feel stupid.  People’s experience goals can be anything they want to feel while using a product, and it’s USUALLY ANYTHING BUT STUPID.  As designers, it’s very important that we create something that’s intuitive and easy to recognize.  If a user is feeling “stupid” on our creations, then we have messed up horribly.

——User First, Designer Second——

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