Editor’s Note: The following article is reprinted from CIO.com. Visit CIO’s Macs in the Enterprise page.
“There’s a set of guidelines [developers] can get from Apple that say here’s what icons you should use for these type of functions and here’s how you should lay them out,” says Bill Westerman, principal and CTO of Create with Context, a design and research firm. “This gets you 70 percent of the way there, but then there’s this other 30 percent that are de facto standards which have evolved over time.” And if developers don’t follow them, user frustration ensues.
More from CIO on the iPhone: Apple will extend AT&T’s exclusivity contract, analyst predicts
Create with Context, whose customers include Accenture, Adobe and Yahoo, recently brought iPhone users to its Silicon Valley lab to observe how they interacted with iPhone apps. Researchers found that users became confused due to app and button inconsistencies, buttons with graphic designs that didn’t reveal their functions, poorly laid out buttons, screen layouts that lacked visual cues, and, of course, ugly icons that blemished the home screen.
Here’s a look at the five most annoying app design flaws:
Read more…
Aggravating app and button inconsistencies
When it comes to button placement on a screen, users balk at inconsistencies between apps. For instance, touch the “+” button in the Calendar app in the upper right corner and you can create a calendar entry. The same button in the World Clock in the upper right corner brings up a clock for a new time zone. But in the Safari app, the “+” button is at the bottom of the screen, not in the upper right corner where iPhone users have to come to expect it.
The problem gets worse when a similar looking button has different functionality between apps. The main screen in the new Facebook iPhone app, for instance, lets you add buttons of preferred pages. In the upper right corner of a preferred page, there’s a box with and an arrow in it. This button design is commonly used in other apps to send information, so many users naturally assume they could send the Facebook page to a friend. But the button, in this case, is used for deleting the page from the main screen.
If I Tap this, what will happen?
The Facebook problem is often repeated in other apps—that is, the graphic design of the button is either misleading or ambiguous.
In Safari, for instance, novice users at Create with Context’s lab didn’t know that the “X” button near the URL box deleted the text. Some mistakenly took it for the “Go” button, and so they had to re-type the URL. They also wrongly thought that the magnifying-glass button (which opens up Google search) in the URL box or the “+” button at the bottom of the Safari app (which enables bookmarking or emailing links) would increase the size of the text.
Sure, newbies will figure it out eventually; but that’s no excuse for buttons with graphic designs that don’t give users any idea of the functionality. Just look at Google Maps’ button in the bottom right corner: Its unfurling paper icon doesn’t tell the user anything. (The button brings up options to drop pins on the map and show traffic.)
Other buttons are ambiguous simply due to their placement. Consider the odd case of the Google Maps app: In the box at the top, users are supposed to enter a search location or directions, depending on which button was pressed on the bottom of the screen. “It’s a little bit confusing for new people to understand how to change from one function to another” because the buttons are so far apart, Westerman says.
Another example of this is the YouTube app. The app provides a list of videos each with a screen shot, the title of the video (along with starred reviews and time length), followed by a blue arrow. Most people naturally hit the blue arrow thinking it will start the video—but instead get a list of related videos. You have to hit the screen shot if you want to see the video.
I didn’t tap that damn button!
An iPhone app’s screen layout is usually created with an iPhone laying neatly next to the developer’s computer in an air-conditioned cubicle. The real world, however, isn’t so manicured. People use their iPhones while on the go, perhaps walking briskly down a busy street with the wind howling. Or they might be standing in the snow trying to manipulate the iPhone with one hand while the other is in a warm pocket. Or they might have stubby fingers or long nails. All of this can lead to accidentally tapping the wrong button.
The situation worsens when the buttons laid out on the screen are close together. With the Calendar app in month view, for instance, there’s not much space between the “+” button (which adds a calendar entry) and the right arrow button (which advances the month). “Somebody would try to get to December and instead get a brand new event, and they’d say, ‘What on earth just happened here?’ It was very confusing,” Westerman says.
Along these lines, why are the “Delete” and “Go” buttons on Safari’s keyboard nearly on top of each other? “That was frustrating to watch,” Westerman says.
Inside Create with Context’s lab, frustration mounted for women with long nails as they repeatedly miss-hit buttons. “When you’re trying to target a small thing on the screen, you tend to use the point of the finger tip to get that precision,” Westerman says. “When you have long nails, it’s extremely difficult. I saw some real finger calisthenics as people tried to get around and tap the different buttons.”
Where are my visual cues?
Some apps excel at letting you know where your fingers are on the screen, much like the glow spot on the Palm Pre that indicates where your finger is touching. The iPhone keyboard, for instance, highlights the letter or number that’s being tapped where you can see it. And the water in the Koi Pond app is visibly disturbed wherever the finger touches or moves. (Koi Pond’s downside is that the “i” button on the bottom right of the screen, which brings up options, disappears, and so users are lost when trying to bring up the option menu again.)
Without visual cues, users must learn finger-gesture capabilities through trial and error.
In the Google Maps app, novices at the Create with Context lab zoomed in by tapping. They didn’t know that they could zoom in with a two-finger reverse pinch gesture. Yet even those familiar with the iPhone were not aware of the two-finger single tap to zoom out on Google Maps.
The biggest issues with visual cues relate to swiping and scrolling. In the iPod app, a horizontal view of the playlist graphically shows that there are songs to explore simply by swiping. But many apps don’t have such visual cues. In some preferences panes, users don’t see any reason to scroll down with their fingers and access more options. That’s because the text is aligned nicely with the bottom of the screen.
“One developer who had this problem ended up intentionally pushing preferences further down the page so that the text was cut off [in half], giving people the hint, hey, there’s more to go look for underneath,” Westerman says.
And then there’s some functionality that users would expect due to visual cues and learned user behavior that just isn’t there. In the iPhone Calendar app’s monthly view, for instance, there are arrows pointing right and left at the top of the screen to go forward and back in months. But many users in the Create with Context lab naturally tried to use a finger-swap gesture to get to different months because, visually speaking, it made sense.
Ugly icons on the Home screen
In another visual flop, some iPhone users can’t stand apps with poorly designed icons—not when looking for apps in the App Store or having the app on the iPhone. According to Create with Context, initial perception of application quality is largely influenced by icon design.
Bright red colors send out alarms: danger, stop, error. Poorly designed or blurry icons kept some users at bay, in part because they probably didn’t want to have that icon blemish on their iPhone. A crisp, vibrant, high-res icon, on the other hand, “does have a big impact on my actually going to look at what that is,” says a participant in Create with Context’s study.
Also, the names of the apps could cause consternation among iPhone users. Clever names catch people’s attention during the buying process, but may lead to confusion after a while. As an iPhone’s main screens become cluttered with apps, users need simple app names to remind them of their functionality.
[Tom Kaneshige is a senior writer at CIO.com. Send him an email or follow him on Twitter.]