User-Centered Design for Car Shopping

volkswagenGood evening ladies and gentlemen!  Today I wanna talk to you all about actually using the UCD process outside just design.  I wanna display to you that the UCD process can be used in your everyday life!

Alright, so the example I wanna use is Buying a Car.

Step 1:  Identify the issue

I need a new car because I am sinking too much cash and time into my current one.

Step 1.2: Stakeholders and Audience

The owner of the car will be me, but I will also be planning on taking a loan from the bank.  The bank’s interest would be something I can afford.

Step 2: User Research

What do other people in my predicament do?  I’ll ask around and see what I can come up with.

Step 3: Requirements

So, there is currently a need for a new vehicle that has good ratings with reliability and that is affordable.  I want something this is sporty, yet classy.  No SUVs, but a car.  Something that’s below 20k.

Step 4: Options, options (mmm conceptualizing)

So anything highly expensive (Mercedes, Audi, Cadillac, Lexus) is automatically ruled out.  All SUVs are a no.  There are good affordable cars in Ford or Chevy, but not the sporty style I’m looking for.  Volkswagen has the CC, but it is quite high priced.  Is there a good used one?  How bout Mazda?  The 3’s and 6’s look pretty nice and have good ratings.  Let’s go with the Mazda.

Step 5:  Let’s refine the specs (Look at it up close)

Looks good, nice engine, good purr, good interior, good lights good tires.

Step 6: Let’s test it!

Alright the ride’s pretty nice!  Good handling, good use of lights, good damage protection.  And it’s pretty practical.

Step 7: How’d it do?

Love it!  Good!  Let’s go with it!

Step 8: It’s Mine!

And there you have it!  A brief demonstration of the UCD process having a hand in your life!  I hope you all enjoyed it!

——User First, Designer Second——


Let’s Talk UI Design: The Final Heuristic, Help and Documentation

Ladies and Gentlemen thank you for reaching this final stage of the Heuristic Series.  Up until this point I hope all the information I’ve shared with you will aid all of your future endeavors.  Today we’ll be discussing Jakob Nielsen’s 10th heuristic, Help and Documentation.  For this post I’ll just be using a generic created example.

Alright, quick recap:

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, so let’s for example say you will place a search box in a location where (after rigorous User Research and Data analyzing) you know that this is the optimal place to put it for users to know what it’s for.  Knowing this, you also know that some error can still occur.  So you include next to the search box a help button (Recognition rather than recall in use above!) that, when rolled over or hit, will pop up a little tidbit on what the box is for.

So what’s the importance of this?

We as designers cannot stop every single issue that pops up.  Sometimes when we do something for our main target audience we register that this can still cause some issues with another target audience.  Even if we compromise, sometimes there will still be errors.  So when it’s necessary yes, do add a little help and documentation. It might just go a long way. Ah…and emphasis on little.


——User First, Designer Second——

Let’s Talk UI Design: Heuristic 9, Help Users Recognize, Diagnose, and Recover From Errors

Annnnd we’re off!

Ladies and Gentlemen today we’re gonna be talking about Jakob Nielsen’s Heuristic 9:  Help users recognize, diagnose, and recover from errors.  I’ll be using Beats Music’s sign up form as the example of choice.

So, recap:

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.

Beats Music smoothly used this heuristic in their login form above.

Let’s say for example a user inserts just the first part of his or her email address (sayianfred@, that’s it).  Once the user hits the sign up button the email box glows a bright red outline (excellent contrast), a bright red exclamation point appears (Recognition Rather Than Recall) followed by an off-white message stating that a valid email address is required.

That’s all that’s needed.  With this information the user quickly registers the error, checks his or her email address in the highlighted box, and effectively correct the mistake.  Flawless.

So…why’s this important?

People are not wired for reading, nor do they like being confused.  A mile-long paragraph dictating that “The inserted query did not register correctly in database 52BLAH BLAH BLAH” is useless to a user.  Above all, that’d make them feel stupid.  People do not want to feel this way.  As a designer it is up to you to answer a user’s error with only the feedback that’s necessary to recover from the error.

——User First, Designer Second——

Go Check These Out! Some Posts on Usability Testing and Usability Inspection

Guys and Gals, I’d like you to go check out my friend Kavin’s blog on Usability Testing Metrics.  I thought this was a great blog to keep in your arsenal just in case you forget what kind of information you’re trying to gather from Usability Testing.

Alternatively, if you wanna evaluate your interface yourself or gather some more useful data first then check out my bud Josh Sarver’s post on Cognitive Walkthrough, Streamlined Cognitive Walkthrough, and Focus Groups.  This single post can give you an awesome rundown of each method.

Let’s Talk UI Design: Heuristic 7, Flexibility and Efficiency of Use


Just thought I’d get that off the chest here.  Hello again everyone!  Today we shall be discussing the seventh heuristic in Jakob Nielsen‘s 10 Heuristics of User Interface Design:  Flexibility and Efficiency of Use.  So this time I’ll be using Facebook as an example.

Ok, so to recap:

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.

Now as much as I have with Facebook, this heuristic was excellently put into play.  On your personal profile page, Facebook provides a Friends tab where you can find your friends and do whatever you need (checking profile, shooting a message).  It’s an excellent tool, one that Facebook really thrives off of.  OK, so let’s say I just wanted to send a friend a message.  Instead of diving in click after click to find my friend in the Friend’s tab I could use this nice right panel Facebook has so nicely provided for me that takes one, maybe two clicks.

This is a perfect tool for me, as I am a seasoned Facebook user who really only comes to Facebook for one or two items.  Now, for those who have different goals than I do may use the Friends Tab, but for me who is a user focused on what I need I have the flexibility to choose.

Alright, so importance?

Users are different.  Some users are savvy with an interface, some are not.  Some users have one set of goals, others have a different set.  As a designer, it’s important that you understand that inside your target audience will lie users of these categories.  You cannot design something for everyone, but you can design something effectively for users in your target audience on both sides of the spectrum.


——User First, Designer Second—— 

I’m Thankful

Ok, so real talk today.  I’m going to talk about what I’m thankful for in light of Thanksgiving.

The greatest thing I’m thankful for (besides getting this far in school, my family, my friends) is chance.

Without chance I don’t think anything in my life would be the way it is now.  It was by chance that I met the girl I love now.  I went to go say hi to a friend of mine and there she was.

It was by chance that I came across career opportunities I have coming out of school.  I happened to stop by this place during job fair on my way out and boom I have an opportunity.

It was by chance I came to be a part of an amazing team creating an amazing product in my capstone course.  There were many people that could’ve been chosen for the part, but I along with three awesome people were the ones deemed fit for the job.

It was by chance I came to my place of living.  I happened to be driving by looking for a new place to live for the new school year and I happened to glance over and see a lone apartment building.

I believe everything happens for a reason, and I believe I have been blessed with these chances.

——User First, Designer Second——

Color Theory: Check This Out

Hey everyone, check out this post on Color Theory!  


This post really delves into what each color means.  It’s really interesting to see the differences between the warm colors vs the cool colors.  Even further in that, the warm colors themselves or the cool colors themselves each hold a different meaning.

I think this can help you all out if you want to really understand how to fit colors together and how to use them in your designs.  Happy creating!

——User First, Designer Second——

LET’S TALK UI DESIGN: HEURISTIC 6, Recognition Rather than Recall

Good evening ladies and gents!  Today I’ll be delving into Jakob Nielsen‘s Heuristic 6, Recognition Rather that Recall.  Now, this one is REALLY important (I mean they all are), so I want you to pay attention to this one.  I’ll be using an example I used before: Amazon Shopping Cart.

Let’s recap:

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.

Amazon exceeds expectations well with their checkout process bar.  The long orange bar above the steps with a black cart at end signifies how far you have come in the entire process and where you are now.  The slightly lighter steps (sign in, shipping & payment, gift options) show what have been completed up to this point.  The darker step (along with the cart) displays your position in the checkout process.  Even just the cart icon displays your place in the entire website (e.g. checkout process).  Excellent usage of this heuristic.

Alright, so why is this important?

Ladies and gentlemen, People do not like to read, and recognition is easier than recall.  Think about this for a sec:  reading “View Cart” on a button takes time to go into your head, processing, then an understanding to occur.  That’s a four step process.  That’s hard.  If there is simply an icon of a cart, that registers in a person’s mind as “cart” and immediate understanding occurs.  One to two step process.  See the difference?

Don’t make recognizing something inside an interface harder than recalling what it could mean.  As a designer, you need to create something that comes second nature to a user, or easily taught.

——User First, Designer Second——