SaferBus Mobile App – Usability Case Study

When designing a site, remember that your terms and icons are like signposts that show people where your links and pages lead. Make sure that you use words and pictures that are easily understood or people will have trouble using your site. Small changes like underlining links or adding arrows to indicate expandable information can vastly improve the usability of your site.

The DigitalGov User Experience Program helped test SaferBus, the U.S. Department of Transportation’s iPhone Application for reviewing safety on bus lines. Below are the top problems discovered during the test, and the results when they were fixed.

Problem 1: Homepage Gives No Starting Point or Purpose

Let visitors know right away what the purpose of your site is, and what they can do there. The first thing users saw when they arrived here was a search box. What were they supposed to search for, and what is an MC or DOT number?

Solution 1: Give Home Page a Tagline or Description

By adding a description of what SaferBus allows the user to do, the search box appears less intimidating. Now, right away, the user knows that search is to find a bus line and its safety record.

Problem 2: Navigation Inconsistent On Site

When the results for Megabus came up in a search, the users were confused by the grayed out icons and didn’t know that the blue arrows indicated an expandable list. Also, MEGABUS.COM didn’t appear to be clickable, so the results are not particularly helpful or actionable because people were confused on how to proceed.

Solution 2: Use Universally Accepted Navigation Items

The user is now able to see exactly what options are available to them via easy–to–see icons and instinctive + (plus) signs, indicating drop–down menus.

The icons are no longer grayed out and the blue arrows are changed to a + sign. The + indicates that there is more information to be displayed. Also, underlining the bus line’s name makes it clear that it’s a clickable link (underlining is a universal indicator of a clickable link).

Tags: , , ,

GitHub LogoEdit