Let’s Talk UI Design: Heuristic 3, User Control and Freedom

Hello there everyone!  Hope the days (or nights) are goin’ well for you!  Today, I’ll be discussing some more in-depth of Jakob Nielsen‘s third UI heuristic, User Control and Freedom.  Again, I’ll be using the example from my Usability Overview post, so if you’re late into the game be sure to check that  out!  The example here will be good ol’ Amazon.com.

Alright, to recap from before:

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.

Ok, so I chose Amazon’s order review page as a good design example of this heuristic.  As you see in the above screenshot, you as the user are given the option to make changes to your billing address, payment method, and shipping address.  You are also able to apply here a gift card code or promotional code if you had not done so before.  (Side note:  the placement of the change links are right next to the information the link will affect.  Excellent use of the Gestalt Principle of Closure!)

Alright, so the importance of this heuristic?

Human error.  We as humans will make mistakes, and it puts us to ease to see that there is a way to either fix our error or exit out of it.  When we are doing something like inputting information, sometimes we’ll put info that’s not right.  We will mess up sometimes.  If we do not have a way to back out or to fix our error we will  panic.

Plainly stated:  We don’t like fear.  No, no we don’t.  So as a designer it’s important for you to create that sense of security and “safety net” for users.  Allow them a way out of their mistake, or at least let them be able to fix it.

——User First, Designer Second——

Let’s Talk UI Design: Heuristic 2, Match between system and the real world

Hello everyone!  Today I discuss heuristic two from Jakob Nielsen‘s 10 Heuristics of User Interface Design.  Consider this post two in the Usability Heuristics Series.  This time, I’m gonna use a different example from before, but in the same context

Again, just to refresh:

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.

Alright, so let’s say you are an employer hiring in the UI Design field.  You are currently going through a list of online student websites submitted in order to pick out candidates to go through the interviewing process.  You are looking for portfolio pieces; products that these students have put together or aided in putting together through some sort of specific design process that stresses on the user’s interaction with said products.

Alright let’s simplify a bit.

You want to see the students’ works.

So what’re you gonna look for?  The portfolio!

You parse through a few websites and stop on one that catches your attention.  There on the home page were this student’s designs interwoven into a beautiful user-friendly site.  You immediately identified the student, what he does, and examples of his work.  Perfect!

Boom!  Classic example here.  Julien Revoye expertly  defines here what the page is using lingo the employers want.  “You want my portfolio?  I’ll give you my portfolio!”  Julien is using the word “Portfolio” not just in his navigation, but in his title as well.  An employer doesn’t have to waste time to find the page because it’s right there, one of the main choices!  

Speaking your audience’s language will definitely go a long way.  Give them what they want,  not what you think they need.

——–User First, Designer Second——–