UI Does Matter!

Just as “a great carpenter isn’t going to use lousy wood for the back of a cabinet, even though nobody’s going to see it” (Leander Kahney quoting Steve Jobs, in Leander’s book Inside Steve’s Brain), developers need to pay attention to the minute details of their application’s interface.

This article takes a brief look at two popular free programs available on the App Store, and makes a couple of suggestions on how the UI can be improved.

iBART

App Store Category: Navigation
Developer Web site: pandav.us/Pandav/iBART.html

iPhone Life
Discover your iPhone's hidden features
Get a daily tip (with screenshots and clear instructions) so you can master your iPhone in just one minute a day.

iBART is a free app from the San Francisco’s Bay Area Rapid Transit system that allows you to check schedules and plan BART trips without having to visit their Web site. It’s a relatively straightforward and easy to use application, but it does have some features that makes you think too much about what to do next.

Trip PlannerFor example, the main Trip Planner screen lets you enter your departing station (From), your final station (To), and the time and date you want to depart or arrive. You tap on the “Show Trips” button to get a list of possible trips. If you specify a trip that is not possible, all you see are the small, hard-to-read words “Invalid Trip” below the Show Tips button (Fig. 1). The developer should make the words larger and easier to read.

The Trips ScreenThe Trips screen gives you detailed scheduling information about the trip you planned. Additional trip details are available by tapping on station names and other elements. Unfortunately, it is not obvious to the user that you can do this. Why not put a small “more” button somewhere on the screen (Fig. 2) or add the iPhone’s standard “DetailDisclosure” icon (Fig. 3). This would make the app more intuitive to use.

Figs. 2 & 3: Modified versions of iBART’s Trips screen, showing how the developer might add “(more)” buttons (left) or the iPhone’s standard “DetailDisclosure” icons (right) to make it easier for the user to access additional information and to make sure the user knows that another screen of
information is available.


Fig. 1: iBART’s Trip Planner screen showing the small, hard to read
words “Invalid Trip” below the “Show Trips” button at the bottom.

Big Canvas PhotoShare

App Store Category: Photography
Developer Web site: bcphotoshare.com

Let’s move on to Big Canvas PhotoShare, an app that lets you send photos you capture on your iPhone to a photo sharing site and manage them online from your iPhone.

When you display a digital photo or other graphic in PhotoShare you’ll see two small icons in the lower right of the screen.The left-most icon lets you add comments to the photo. The one next to it brings up a screen that lets you save the image or e-mail a link to it to a friend. The problem is that the icons are so small and close together that it’s easy to tap on the wrong one. It would be easier if the developer used Mobile Safari’s method of saving images, where you press down on the image you want to save until a menu similar to the one in Figure 6 pops up.

Three basic points I make three basic points about UI design in this article. First, make sure that important messages are clear and highlighted (Fig. 1). Second, if an application provides additional useful information in subsequent screens, make sure there are obvious links to those screens (Figs. 2 & 3). Finally and where appropriate, model UI features after those found in the built-in apps Apple includes with the iPhone. This last point is important. Apple put a lot of thought into designing the UI, and iPhone users are already used to doing things a certain way. Take advantage of that!

If you have additional observations on these and other apps, please e-mail me at mmudassir@gmail.com. You can also visit my “UI Does Matter!” blog (bongeek.Tumblr.com).

Subtitle: 
Designers need to make all aspects of the UI easy to understand & use
Issue: 
Spring 2009
Department/Section: 
Apps
TOC Weight: 
49
Legacy NID: 
428