Category Archives: User Experience

Web Form Usability

What’s wrong with this question from a web form I recently came across?

web-form

 

Creating great web forms is not easy. There are so many details to get right, and you really need to consider who your particular audience is. In this case one improvement that could be made would be to order the options in age order instead of alphabetical order. So for example:

  • Under 16
  • 16 – 18
  • Over 18

That said, unless you can’t ask for a specific age for some reason (like user sensitivity or legal requirements), I would recommend simply asking for the user’s age. There is a heavy cognitive load to this question currently, partially because it’s out of order, but also because we don’t usually think of our age in these terms. So a simple “What is your current age” would make it a faster question to answer for most people.

Enhancing Usability With Platform Specific Functionality

When you’re developing an app or website it’s tempting to think in terms of desktop functionality. But if you want an app that works “natively” on the platform it’s on, you need to think about how each platform has unique functionality.

For example on Moody Radio’s website and mobile apps they were originally designed with our stations listed out by state. This worked, but it definitely not optimal as you end up with a long list like this:

List of stations on website
List of stations on website

But recently we updated our homepage of the website and we’re working on updating our mobile apps, so we’re revisiting this. On the website, where you have a mouse, which provides a greater degree of accuracy we added a map:

website-station-map

And as we’ve been planning functionality for the new mobile apps, we’re going to first try and use GPS-based geolocation to offer the closest station and then providing the user an option to see the full list if they want a different station.potrait-local-station-gps-result

Both of these changes should improve the user’s experience by adapting the presentation of our stations to the specific platform’s functionality.

The next time you get ready to design a user interface, don’t forget to think about the different platforms and their unique functionality to enhance the experience.

Back buttons in iPhone apps

Recently we have been working on wireframes for a new version Moody Radio’s mobile app. One of the questions that came up is how to handle the back action. Here is an example from iOS 7’s settings

iphone-ios7-back-button

In this example they’ve chosen to include the title of the page that got you to where you are currently, but in some apps you’ll see the literal word “Back” though. This brought up a few usability questions.

  • When does it make sense to put the title, just an arrow, or the arrow plus “back”?
  • And what do you do if you sometimes have long titles?
  • What value is having the back arrow and text label “back”

We needed to do this consistently across the app, so here are the general guidelines I came up:

  1. If the previous page’s title is consistent (i.e., “settings”, “stations”, etc) use this format:
    < previous page title
  2. If the previous page’s title is not consistent (i.e. the title of a specific episode) use this format:
    <
  3. Never use this format as the text label “back” doesn’t add information any helpful information:
    < Back

 

station-list-test
Example wireframe

Now I just need to test this with a few end users of the app, to make sure my assumptions are correct!

Minimalist Design’s Impact on Usability

One of the benefits I’ve found from spending time helping train people who are not very computer illiterate is it exposes the assumptions we build into our website or applications. A while back Apple updated the Mail app and removed the text labels by default.

apple-mail

Google has done the same in their web interface for Gmail.
gmail-interface-cropped

 

As someone who uses Gmail daily, I appreciate the minimalist layout free of clutter. But when this is introduced to a non-technical user, it causes confusion. I’m concerned that we are sometimes allowing a desire for a minimalist design to go to far. Removing visual clutter and noise like unnecessary gradients and stock images that don’t add anything can be a big help in improving the usability of an application, but if you aren’t careful you can end up removing important visual clues.

Fortunately both Google’s Gmail and Apple’s Mail provide tool tips which helps, but a new user will have to mouse over each icon to find what they are looking for if they can’t make sense of the icons. When designing interfaces we need to be aware of the impact this has on users. For example in both of the screenshots above which icon is for marking a message as spam?

Then again, even using a text label can sometimes be confusing to a user, so you have to use your best judgement based on testing with your target users. And in the case of Apple’s Mail app, you can actually turn the text labels back on which I’ve done for several people who’ve asked me about what the icons mean.

Relaunched New Life Centers website!

This month New Life Centers (a Chicago based non-profit that provides community services in at need neighborhoods) was featured on Moody Radio Chicago. I volunteer my time to help them with their website, so in preparation for being promoted on the radio, we wanted to relaunch the website with a new design.

Randy from brandbecollective.com helped design a great landing page, and I adapted that for the entire website! Here is the new homepage:

new-life-centers

And the landing page for the during the on-air event:

nlcenters-landing-pageYou can checkout the entire website at nlcenters.org

 

 

The Usability of a Toyota Prius

toyota-gear-shift

This is the gear shifter from a Toyota Prius, the 2007 model to be specific, which I drove while on a work trip. If you’ve never driven this car before, let me describe how it works:

  1. The shifter is spring loaded, so it always rests in the position you see it in now. You move it to the “D” position for drive and it returns back to the “resting position”.
  2. There is an indicator on the dash (not pictured)  showing you if you what gear you are in.
  3. If you want to put  the car in park, you push the park button that is light in the picture.

So from a user experience perspective, what are the usability issues with this setup? What’s good about it? And why?

Let’s look at it using some of the parts of a usability heuristic evaluation

Status & Feedback – Is it clear to the user what’s going on at all times?

  • Good: LED on the parking button helps provide feedback to the driver that they are in park
  • Bad: Only the parking button has an indicator to confirm correct selection. Now granted there is certainly a dash indicator too, but could you improve the user experience by having an indicator in both spots?

Relevance & Familiarity – Are you using language that is familiar to the user? Does it line up with other products the user might have encountered?

  • Good: “R”, “N”, “D”, and “P” are all familiar to the average driver, and using the full words for something this common probably isn’t necessary.
  • Bad: While most of the letters on the gear shifter are clear, the “B” option isn’t clear as to what it should do.
  • Bad: On most cars the park option is selected using the same controls as drive, so your average driver stepping into this car won’t know to look for a button. As I’ve told some of my employees in the past, you need a really good reason to break a UI standard, and it’s not apparent what that really good reason is. I’ll add that there might have been a good engineering reason for this choice, but if that is the case you have to be careful that convenient engineering decisions aren’t trumping good usability.

Consistency – Are you consistent within the product in where items like navigation are placed or how buttons look?

  • Bad: The use of a box on the park button is inconsistent with the other letters / options. Using a box helps emphasis, but the designers of this car already separated the park button out from everything else, so is it a necessary inconsistency?

For the items I marked as “bad” keep in mind that this is the perspective of a first time driver. Sometimes you want to optimize for repeat users, so these issues might not be deal breakers depending on your audience and how they interact with your product.

What other good or bad usability things do you observer?

Redbox Kiosk Usability

redbox-screenIf you’ve visited a Redbox kiosk to pickup a DVD you reserved online, and mistakenly gone to the wrong kiosk then you might have seen this error message. In Chicago you’ll frequently find two kiosks side by side, so it’s easy to forget which one you’re supposed to get your DVD from when you arrive there a while after you’ve reserved it. You can click on the image above to get a larger view of the text they display, but looking at that screen, what’s good or bad from a usability perspective?

Here are two things I observed:

  1. It’s unclear that an error has occurred. I actually stood there for a minute thinking the machine was finding the DVD for me still, because I didn’t read the small print. Instead I interpreted it as, “the kiosk is still looking up your reservation and finding the disc inside the kiosk” instead of what they meant which is, “oh no! we can’t find your reservation at this kiosk”
  2. The error message is generic, and not customized to my problem.

A couple of changes I would want to make to this are:

  1. Change the title to be something like, “We can’t located on this kiosk, but….”
  2. If the credit card swiped matches a reservation, check if you can fulfill it from this kiosk anyway, if so don’t even show an error message and just fulfill the reservation.
  3. If the credit card swiped matches a reservation but you can’t fulfill it from this kiosk (that particular disc isn’t available), show the user where they should be going to get it. If it’s the other kiosk, just say that, or if it’s at a different address, show the address and a map of how to get there.
  4. If the credit card swiped doesn’t match any reservation (on any kiosk) display a message such as “I’m sorry we don’t recognize that credit card. Did you happen to use a different credit card for your reservation”
  5. Provide contact information for customer support on the error page

Ultimately the goal is to provide contextualized clues to direct the user to solve their problem rather than ambiguous errors, and whenever possible work around your user’s mistake (i.e. autocorrect).

 

The 10 Parts of a Usability Heuristic Evaluation

Jakob Neilson back in 1995 wrote that there are 10 principles to a usability. If you want to conduct a heuristic evaluation of your product these principles provide a great starting point. So let’s take a look at some questions that you can ask for each principle.

1. Status & Feedback

Is it clear to the user what’s going on at all times? Does your app or website occasionally show a spinning wheel without making clear what’s going on behind the scenes? When the user clicks on something, are you giving them feedback that you received their input and are working on it?

2. Relevance & Familiarity

Are you using language that is familiar to the user? Would someone in your target user base be familiar with the labels you’ve used? Does it line up with other products the user might have encountered?

3. Control & Freedom

Can the user click around the app and explore, or are they forced into a rigid workflow? If you have a series of steps, can they go backwards in the process without loosing progress?

4, 5, 6 – Error Prevention & Handling, Help

What happens when something goes wrong? Are the error messages helpful? Are you warning users about potentially destructive actions (i.e. deleting something)?

7. Consistency

Does your product follow existing conventions (i.e. double clicking vs single clicking)? Are you consistent within the product in where items like navigation are placed or how buttons look?

8. “Don’t Make Me Think” (Recognition vs Recall)

Do you provide relevant instructions to the user at the appropriate time (i.e. displaying password requirements next to the password field). Do you require the user to reenter information unnecessarily?

9. Flexibility & Customization

Do you allow the user to save common actions, settings, or other personalizations?

10. Pleasant Simplicity

Is extra information being displayed (or requested) that could be put elsewhere or in the case of user input be determined in a simpler fashion? (i.e. on a mobile device using GPS instead of asking for a zip code).

Obviously you might want to expand on these for your specific application or business need, but this list get you started!

Sketching, the simple, powerful UX tool

I’ll admit up front that I don’t think of myself as a great sketcher, but it is a great way to brainstorm solutions to user experience issues. It’s purposefully low fidelity, fast, and encourages multiple iterations. I’ve found I can waste a lot of time “trying stuff” if I jump to my computer first, but sketching allows you to iterate quickly without putting a lot of time into detail which is a easy trap to fall into. 

Yesterday, as a brainstorming challenge, I was asked to sketch out a few different approaches to a better airport security experience. I’ll share what I drew up here, but keep in mind that (a) I’m a terrible artist and (b) I tend to use humorous examples first to try and get my brain moving on a problem.

Simplify

Simplify airport security by doing the scanning while everyone is standing on a moving sidewalk. You step on, get scanned and move off at the end, and into the airport. No more hassle with lines and waiting!

Simplify airport security by doing the scanning while everyone is standing on a moving sidewalk. You step on, get scanned and move off at the end, and into the airport. No more hassle with lines and waiting!

Entertain

If you’ve ever stood in a airport security line, you know how boring they can be. So why not provide some entertainment while you’re standing there?

Entertain

Self-Select?

This is just me picking on security :)

idea3

 

 

An Introduction to Usability Heuristic Evaluations

You walk into work on Monday morning, and you’re greeted by the VP of Sales who tells you that your new product (mobile app, web service, etc) is not user-friendly and it’s killing sales, so now you’re tasked with figuring out how to fix it yesterday without any additional budget. What do you do?

The fastest and simplest tool you can pull out at a moment like this is the usability heuristic evaluation! A usability heuristic evaluation is something a team or individual can do on a product to find major usability issues quickly. It’s an effective tool when you need a quick turnaround and have limited resources to get outside input as it provides a framework for focus on, and will help you find the glaring issues. A more full usability review is still a very worthwhile investment, but this will get you started. Before we get into the parts of the evaluation, let’s look at how a few people have defined it:

Heuristic Evaluation…is a discount method for quick, cheap, and easy evaluation of the user interface. The process requires that a small set of testers (or “evaluators”) examine the interface, and judge its compliance with recognised usability principles (the “heuristics”). The goal is the identification of any usability issues so that they can be addressed as part of an iterative design process. (source)

Heuristic evaluation is a form of usability inspection where usability specialists judge whether each element of a user interface follows a list of established usability heuristics (source)

Also before you can jump in and do your evaluation, you need to make sure you’ve got the right constraints set for it. Specifically you’ll want to have already defined what the purpose, objectives, audience, user task, and other constraints for your website or product.

Now that you’ve got a clear idea of what the product should do and for whom, it’s time to set the scope of the evaluation. This will be useful because if it will keep you from getting sidetracked by a bug and instead help you focus for example on how the error is handled and displayed to the user.

Nielsen recommends 10 different criteria for heuristic evaluations: status and feedback, relevance and familiarity, control and freedom, error prevention, error handling, help, consistency, recognition vs recall, flexibility and customization, and pleasant simplicity. I’ll write a separate post with examples of each of these, but for now let’s just look at one example of “control and freedom.”

In Gmail after you hit “Send” to an email it gives you an option to undo sending your message for a few seconds. This simple feature (adding in a minor delay before actually sending the email) like this allows the user to have a greater degree of control and freedom. Also they avoid using a “are you sure” prompt which users inevitably just get in the habit of saying “yes” to without thinking.

gmail-undo-send

Clearly Google thought about their users in this case and how they want to have “control and freedom” in how their emails go out. Have you done a heuristic evaluation of your product yet?

Additional Resources