A Good UI Design Implemented Badly

Screen shot of Photo Tool from travel.state.gov

The U. S. Department of State maintains a website (travel.state.gov) that provides information about passports and international travel for U. S. citizens. If you go to the page for Passport Photo Requirements you'll find a link to a Photo Tool that can be used to crop and size a photo to meet passport application requirements. Using this page, I was able to quickly and easily create a jpeg file sized to make the 2" x 2" print required for a passport application. After using this nifty tool, I wanted to give the web page kudos as an example of good user interface design. Then I realized there are a few problems.

This nice UI design concept has been implemented using Adobe Flash. That means the Photo Tool won't work on most tablets and smart phones -- devices that are likely to contain images that might be suitable for use as passport photos. In order to be successful, a website like this needs to keep the user's needs in mind at every stage.  If it's likely that people will want to use a website on a device that doesn't support Flash, then that should be taken into account from initial design to final implementation.

The Photo Tool also provides an example of how a good UI design concept can be undermined by incomplete implementation. If you look at the screenshot at the beginning of this article, you'll see that there's a help button on the left. This expands when clicked to display a scrollable message, as shown below.

Pop-Out Message Pane

The help button is easy to find and use. However, the help message itself seems to have space for some illustrations that have gone missing. When scrolling through the entire help message (shown to the left), you can see that the UI designer most likely intended to show examples of (a) head sized correctly, (b) head too small, and (c) head too large.

Illustrations here would indeed be helpful, especially if they included graphical symbols to further convey "correct" vs. "incorrect." It may be that the illustrations were not included due to an oversight, or it may be that they're not being displayed due to some technical problem. In either case, this is the kind of problem that QA testing should detect. However, in order to catch such problems, the QA testing needs to simulate likely end-user behavior, and all parts of the design, including help messages, must be complete before final testing.

Even so, a website that's user friendly when it's launched doesn't always stay that way. As technology changes, what worked last year may not work this year. As users adapt to new technologies, their experiences and expectations change. To be successful, then, as website like this also needs to be monitored. Good analytics can often reveal problems or new trends, signaling a need for action. End users also can help you know when changes are needed -- if you let them.

Although the webpage for the Photo Tool has no links for user feedback, it's parent page (Passport Photo Examples) has "Contact Us" links at the top and the bottom of the page. The link at the top leads to a page providing categories for contact, and the link for "Website Problem or Suggestion" leads to a well-designed feedback form. However, the other "Contact Us" link takes the user down a different path from which there's no obvious way to provide feedback on the website.

(Post edited on March 8, 2014 to improve clarity.)

Addendum - March 8, 2014

Website development, like all software development, requires tradeoff decisions. Given a choice between having the Photo Tool work only on Flash capable devices vs. not having it at all, I'd obviously choose the former. I liked using the Photo Tool and I was glad to have it available. Indeed, I originally planned to write an entirely positive post citing the Photo Tool as an example of good UI design. Taking a closer look, however, I was reminded of an important point:  Usability involves more than good UI design.