Let’s talk UX: the Importance of Returning Feedback

Hello all!  Hope the day’s been well for you!  Today I’ll be speaking a bit on returning feedback from your interfaces.

Alright, so let’s say for example that you were speaking to an individual about something.  You both spoke on a rather interesting topic and you just gave your side on the subject and ask what the individual thinks, expecting an answer.  Yet, this individual simply stares at you blankly.  You ask again.  No response. You ask once more, annoyed.  At this point you may do one of three things:  ask again in a more annoyed tone, begin to think something is wrong with the individual, or become frustrated and leave.

Or, in web interface terms, let’s say you filled out a form and hit submit.  Nothing.  You hit it again.  Nothing.  You proceed to hit it multiple times and look around for some sort of message, but you find nothing.

Both of these are examples of situation in which case you, as the user, received no feedback in return.  

It’s highly important that we understand a key point about ourselves:  We. Need. Answers.  When we interact with others, objects, or user interfaces we expect some sort “return on investment.”  If we speak to others we expect a response, be it friendly or non-friendly.  When we push a door, we expect it to open (or not).  When we click or tap a submit button we expect it to give us some sort of response, whether it be a success message or an error message.  When we do not receive any sort of feedback from what we are interacting with then it is a little disorienting; sometimes even alarming.

What  counts as feedback?  Well, almost every interaction a user does requires feedback.

  •  Hovering over a navigation link or an in-page link and displaying a change in link color
  • Changing the page after clicking on a link
  • Submitting a form after a button is clicked
  • Displaying an error message after wrong information has be inputted
  • Highlighted navigation item while on that specific page after navigating to it

Let’s check out an example of feedback more closely:

googleFeedback

Google’s login page utilizes excellent examples of feedback  techniques when you’ve forgotten or input the wrong password.  If you have forgotten your password or changed it and forgotten, the form will inform you whether or not you have changed your password from the one that was inputted or if the password is wrong.  even more so, the password field itself is highlighted with a red border to pinpoint the area in error.

When feedback is provided through our user interfaces we can be fulfilling three of Nielsen’s 10 Heuristics:  Visibility of System Status, Error Recovery, and Error Prevention.

Visibility of System Status – By giving users adequate feedback from their interaction, users will know what is going on as a result of it and understand the situation at hand.  They may know, for example, whether or not they have used a link on Google before.

Google provides feedback of used links by recoloring them if a user has used before, allowing users to make a quicker decision on following a  past link or referring to a different link.

Google provides feedback of used links by recoloring them if a user has used before, allowing users to make a quicker decision on following a past link or referring to a different link.

Error Recovery – In the event that users have made a mistake, displaying feedback detailing the issue at hand will exponentially aid them in diagnosing and recovering from the error.

dropboxError

Dropbox allows a pop up modal to appear once delete file is hit.  Doing this provides users feedback of “hey, you’re about to delete this” and allow them to proceed or recover accordingly.

Error Prevention – Without any feedback given after an interaction, users may try to interact over and over again, whether it be a digital interface or face to face with an individual.  Actions like these may cause more issues, depending on the user interface or individual.  Providing feedback will guide the user in a general direction as to what his or her next action should be.

Microsoft's email service Outlook provides excellent feedback when an image has been uploaded.  Users can see the image transition from uploading to uploaded.  In addition the image is displayed in a very noticeable way, preventing users from multiple uploads.

Microsoft’s email service Outlook provides excellent feedback when an image has been uploaded. Users can see the image transition from uploading to uploaded. In addition the image is displayed in a very noticeable way, preventing users from multiple uploads.

So when you are designing your user interfaces or simply communicating with someone, remember that providing feedback is extremely vital to users.  Without it, users will almost always feel either lost or frustrated.

Don’t cause users stress!

 

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

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

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.

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