Web Form Usability

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



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.

Evaluating New Platforms


As a product manager inevitably you’ll be asked to research and evaluate new platforms and new partnerships from time to time. Recently I was asked to consider how NextRadio could fit into Moody Radio’s platform strategy, so I sat down with my contact at NextRadio and we walked through their platform.

Platform Evaluation

Key Performance Indicators (KPI’s)

When I’m evaluating a potential platform for Moody Radio the first thing I keep in mind are some of the KPI’s we care about as a non-profit.

  • Listenership
  • Donations
  • Awareness / New Audience Development

Market Reception

Next, I’m interested from hearing from the platform provider about their market reception. Building a platform is easy, and in this case we’re looking at a multisided market. For NextRadio they have at least 4 sides to their market:

  • Smartphone users
  • Smartphone manufacturers
  • Carriers (i.e., Verizon, AT&T, T-Mobile)
  • Broadcasters (i.e. NPR, ESPN)

Because we’re a niche broadcaster, I’m interested in the size of their audience and those users’ engagement level. I’m also interested in the uptake of their potential market (how many of their potential users are users?). This will help us gauge the health of the platform from the consumer’s perspective. The other factors, manufacturers, carriers, and broadcasters helps me understand the potential growth of the platform, but to me it’s secondary to the first factor, because too often the “industry” can get ahead of what consumers want. Too often we can think we have a great idea and you can attend industry conferences where everyone is desperately trying to tell each other how relevant our products are, but it’s clear the consumers don’t agree. To avoid the echo chamber of the industry and value consumer uptake multiple times higher than industry uptake of a platform (unless regulations are involved).


The final filter is strategic alignment which comes from the organization. Sometimes we do things because they are part of our organization’s values or strategy. Maybe that means a green initiative, or a focus at getting a foothold into a new market (even if it’s unprofitable at the moment). While this can be a trump card to overrule the above filters, frequent use of should suggest that you have an incorrect strategy or poorly defined strategy.

Implementation Impact

Sometimes you’ve got a great platform or idea, but the implementation costs are just too high or will take time, attention, and resources away from a more valuable initiative. While knowing the full impact of an implementation can be difficult at this point, it’s necessary. Usually optimism is a good approach in life, except for right now as you are estimating the impact. You should be pessimistic at this point on the impact it will have (over estimate) to avoid future problems.


If you’ve done your research and proper discovery, you should have a good sense at this point whether to buy into the new platform or now. As you run through this process repeatedly it will get quicker and easier. Also you’ll find what additional factors unique to your organization you might want to include in your evaluation.



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:


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.

SEO & Rap Genius

An article earlier week covered Rap Genius’ growth strategy, specifically how they were using poor SEO tactics. Sometimes the tech world seems large and disconnected, but it was interesting to see how quickly someone at Google, in this case Matt Cutts, saw this and responded with a simple, “We’re investigating this now.” Follow up articles over the next two days showed that RapGenius.com was quickly penalized for their link building tactics.

This story is a good reminder that good SEO isn’t about trying to game the system, but presenting your website in an optimized fashion for search engines to quickly and easily understand it.

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


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


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.


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


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:


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


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!