Let’s Talk UX: Why Research and Requirements are Important

uxdesign_maindetailHello everyone!  Today I’ll be talking to you all about why gathering research and defining requirements is important.

Alright, so let’s say your team is building an app for a client.  The client asks for two requirements, and leaves the rest to your team.  Now,  your team holds excellent programmers and designers that utilize the latest tools of their trade to come up with ideas of what this app will do and look like.  Your team begins with making sure the basic features asked for by the client are included, then begin adding feature after feature that may help the end user and looks awesome.  As your team builds the product more and more, you all begin to really fall in love with the product.

The end product is a latest-featured aesthetically-pleasing design that does what the client does and more.

Key point on more.

Six months pass and you receive a rather heated email from your client saying the app is performing far below expectations.  He details out that the target demographic does not buy the app.  You investigate into the issue and find that the extra features were far misaligned with what the target audience’s goals were.

This is why research and requirements are important.

You find that if you had done some research into the target audience then a few key features that were tacked on would be avoided like the plague.  You would’ve known why some features were important and why were definitely not.  You would’ve had a direction of where your ideas should go.  Some things that could help your team in understanding why UX Research and requirements are important:

1. The product is not for you, it’s for the user.  Using your “gut” and going with what you think is good are very wrong driving factors in creating a user centered product.  Understanding your users is absolutely fundamental in creating this product.  What do the users prefer?  What type of things drive a user for the topic of this product?  What sort of problems are users having in order for them to want this type of product?  These are all questions you can extract valuable information from and apply to the creation of the product.  

2. The interface is magic, but wandering aimlessly accomplishes nothing.  The requirements are designed to help you define a “road map” to what direction your product design should go.  Without these a designer or programmer is left with creating indiscriminately, meaning there is no set way on where their designs are heading.  These requirements are to help drive your ideas in the direction your users would prefer based on educated conclusions, rather than aimlessly wandering in a direction.  

So next time you and your team are commissioned in doing a product, try to understand your target audience and define a path first.  Don’t throw features at an interface and hope or think something good will come out of it.

 

——User First, Designer Second—— 

 

Let’s Talk UX: UX Ain’t Just UI!

UXNOTUI

Hello everyone!  Today I’ll be talking a bit about User Experience and the lowdown on how it is not just UI.  

Just before I begin, here’s the website heading the point I’m getting at in this post.  The site has multiple file types and sizes of a side-by-side comparison of UX vs UI.  I recommend checking it out!

Alright, so let’s take a scenario:

You’re a UI/UX Designer speaking with a client about an app.  The client is asking for you to work with the team of programmers who are currently working said app.  The client asks you “tack on the design.”  You inquire about the research or prior planning that’s been done and the client responds with “we had an idea, thought it was good, and went with it.  Just do your design or UX stuff.”

OK.  That’s an issue. 

“User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”
— Jakob Nielsen and Don Norman

Simply put, UX, or User Experience, involves a process.  

UX is not something you can just tack on like a “band-aid” and call it quits.  It involves a multitude of fundamental ideas that must be interwoven into the very essence of the project from the beginning, these ideas being  gathering research, creating personas, information architecture, usability, prototyping, and a wide variety of others.

User Experience has to do with a user’s full experience, not just “how the interface looks.”  It involves every button click users must interact with to reach their target goal, the euphoric (or distressed) feeling they experience while completing an online purchase.  It involves the users’ drawn attention to a specific portfolio piece that fits in with what they are interested in.

UX  involves every aspect of the user’s interaction with an interface, and even outside the interface.  It involves the customer service users experience from the interface owner, the thoughts of returning to said interface tickling at the mind when a need for a product located within that interface arises.  UX is much more than just UI.

Now, don’t get me wrong.  UI, or User Interface, is still a very important component.

Kaplan Test Prep

KaplanKaplan expertly uses UI elements in their website to enforce usability and promote a unique experience for the user by attracting them to key elements on the page.  The contrasting green against the white/purple palette points out the starting point of the site clearly, and emphasizes what is important (in this case, you and where you start!).  Gestalt principle of Continuity is in play using the white lines and arrows that draw the eye to the multiple career choices.

Zurb’s Pattern Tap

patternTapZurb

Zurb’s Pattern Tap uses UI elements in a way that draws you to what you want from this site: the massive library of excellent design examples.  Each example owns its own nicely-sized thumbnail that is small enough to be friendly on load time, but large enough to display the featured design example.

The User Interface is an invaluable piece of UX that must never be forgotten.  It is never just one or the other.  UI is like an entire section of a full UX orchestra;  it can’t be complete without it.

So there you have it.  Remember that UX is not something to be used interchangeably with UI, because it can’t.  It just can’t. 

UX is not UI!

——-User First, Designer Second——-

Comment to James

Response to James’s “Good Design, Reddit”:

Hmm…interesting post. I’d like to disagree with Reddit’s way of organizing things. I think it’s violating Minimalistic Design because of the amount of text that’s just on the main page. Everything is extremely close together and runs as one. Very confusing for the eyes.

I’m also seeing a violation of Proximity because of the closeness of the posts. For me, they seem to run together, and not stand out from each other.

There’s also a Recognition rather than recall violation with the red at the top (error?). What do you think of this in comparison to 9gag?

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

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 Reflect: Cognitive Walkthrough

cwalkHello everyone!  Hope all is well!  Alright, so today I’m going to reflect a bit on some information that I’ve learned from some readings on Cognitive Walkthroughs.

A Cognitive Walkthrough is a method other than a Heuristic Evaluation that can be used to evaluate the usability of an interface that’s been created.  Now, this is done with usability experts, designers, and developers.  With CW’s, you are trying to answer some specific questions (courtesy of Cathleen Wharton):

Will the user try to hit the right effect?

Will the user notice the correct action?

Will the user associate the action with the effect that happened?

The people doing the evaluating  will use these metrics in performing tasks in an interface (this could be a website, an application, a web app, etc.).  Problem-solving is being check here, before users even see this product.

Cognitive Walkthroughs are very task-oriented, whereas Heuristic Evaluations take a bigger scope approach.  Both, however, use rules that are clearly defined.  Usability is the key factor here.  You’re trying to really see “Can people use this?”

Alright, so let’s talk about the ones doing the evaluating:  UX experts, Designers and/or Developers.

…Yeah, there may be a problem here.  In fact, there may be a few:  time pressure, long discussions, and (of course) designer defensiveness.

Sometimes you won’t have all the time in the world to go through a CW.  A session you thought that would take an hour may end up taking 5, and that’s time that should not be wasted.  Discussions about a specific task may run over because people in the session may want to “fix it then and there”.  It’s important to keep in mind that this is an evaluation and supposed to give you info, not fix designs.  

Now designer defensiveness is a different story.  Let’s face it, nobody likes being told their baby is bad.  You’re gonna get designers (or developers) that will justify why something they did was correct and will work.  Again, we’re not trying to make personal attacks on designs, we’re just looking at the usability of the tasks to be performed in the interface.  We’re identifying usability issues, not harpering on designs here.

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