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
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.
For 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 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.
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).