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

A Web Designer, a UI/UX Designer, or Both?

Hello again everybody!  Today we’re gonna delve into a bit of an interesting topic: Web Designer, UI/UX Designer, or both?

You’re a Web Designer that has the ability to create beautiful interfaces.  You know how to utilize colors well, how to use the Gestalt Principles like the back of your hand, and have a keen eye for pixel-perfect design.   The creations you make are extremely aesthetically pleasing.

On the flip side of the coin, you know exactly why everything in your interface is designed the way you have it.  You’re an expert in Color Theory, know Nielsen’s Ten Heuristics, a guru at Conceptual Design, and always think of the User First.  The interfaces you make are not only pleasing to the eye, but provide an excellent experience for users.

So, what exactly are you?

A hero.

Did you learn too much?

Absolutely not!

You’re one of the extreme rarity who know both Design AND UX.  Your skills are invaluable in the world!

So is there any real significance to this?

Other than the fact that you’re highly marketable in the job market, your designs have a higher “class” than just any design.  Your designs are built with a concrete plan supported by real-world data.  You are one of the few who can truly combine both UX and UI.  You are truly a remarkable rarity.

Not only are your designs great to the eye, but they have a true meaning of how they are designed.

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

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, 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 7, Flexibility and Efficiency of Use

IT. IS  COLD.

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

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.

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

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

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.

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

Let’s Talk UI Design: Heuristic 5, Error Prevention

Well hello there everyone!  Today is a beautiful day to post a blog on Heuristic 5 in Jakob Nielsen‘s Heuristics, Error Prevention.  I’ll be going more into the example from my overview post.  Alright, let’s get started!

So, quick recap:

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

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.

Ladies and gentlemen, I chose Dropbox as a prime example of this heuristic.  Dropbox executes well on two ends of this heuristic:  careful design and error confirmation.

dropbox2

The overall page itself presents to you exactly as is:  file storage.  The design is pretty simplistic and clean.  One can easily contrast which file is being hovered over and what file type each file is.  The spacing around each file is padded enough to avoid clicking on the wrong item.  Excellent use of space!

Now…for the error confirmation….

dropbox

Ok, let’s say upon going through the list of options over a specific file (e.g. share, download, copy)  you move a bit too quickly and accidentally hit delete.  Think about that for a second:  what if you deleted that 4 month project you just finished?

Dropbox seamlessly acquits that fear.  Upon an accidental click, a user is prompted with the message above “Are you sure you want to delete…”.  The message is titled with a red remove mark (aha…recognition rather than recall) and in big bold letters “Delete file?”.  Popups can be pretty annoying, but using one in this case is expertly done, as this is a “HEY, LOOK WHAT YOU’RE ABOUT TO DO” situation.

So, the big importance?

People do not like to think, and are prone to errors.  Again, people make mistakes as they are performing actions.  Maybe a wrong link was clicked or a wrong item was selected.  People will panic if there is no way to undo a mistake.  As a designer, it is your job to 1.) create something that can avoid getting to an error point and 2.) Have a backup plan just in case the other methods don’t work.

———–User First, Designer Second———–

Let’s Talk UI Design: Heuristic 4, Consistency and Standards

Hello there, everyone!  Today we shall be talking more about Jakob Nielsen‘s fourth UI heuristic, Consistency and Standards. For this one, I’ll be using a new example than from my post before, and that is the one and only Google.

So, here’s what I spoke about before:

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions”.

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

Okay, okay.  I know I was a little eccentric, but there’s a method to my madness!

google

Alright, so I’m pretty sure most of you recognize this website here.  Google displays an excellent example of this heuristic in play.  The name of the website is right in the middle of the page.  The tab in the upper left corner has the name of the website (Google).  Even the url displays the name of the website.  Everywhere you look, you know you are on Google.  Excellent, excellent use.

Now, why is this of importance?

Users hone in their goal.  Everything else is scannable.  Without clear consistency, users will become confused, frustrated, or lost.  People will focus on the information that relates to their goal, and scan across everything else.  One wrong design aspect along a user’s workflow can cause massive confusion for someone.  It’s already hard to know exactly where you are in an interface.  Do not generate even more confusion when you have the power to lessen it.  Keep it consistent.

Side note:  this is not the only place you can apply this heuristic.  If you have anymore examples please feel free to share!

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