Who’d of thought XCode developers can’t design perfect interfaces?

Wacky Interfaces

The first crop of iPad user apps revived memories of Web designs from 1993, when Mosaic first introduced the image map that made it possible for any part of any picture to become a UI element. As a result, graphic designers went wild: anything they could draw could be a UI, whether it made sense or not.

It’s the same with iPad apps: anything you can show and touch can be a UI on this device. There are no standards and no expectations.

Worse, there are often no perceived affordances for how various screen elements respond when touched. The prevailing aesthetic is very much that of flat images that fill the screen as if they were etched. There’s no lighting model or pseudo-dimensionality to indicate raised or lowered visual elements that call out to be activated.

In contrast, long-standing GUI design guidelines for desktop user designs dictate that buttons look raised (and thus pressable) and that scrollbars and other interactive elements are visually distinct from the content.

The traditional GUI separation between “church and state” — that is, between content and features or commands — has carried over to modern Web design. Those 1993-style image maps are long gone from any site that hopes to do business on the Internet.

The iPad etched-screen aesthetic does look good. No visual distractions or nerdy buttons. The penalty for this beauty is the re-emergence of a usability problem we haven’t seen since the mid-1990s: Users don’t know where they can click.

For the last 15 years of Web usability research, the main problems have been that users don’t know where to go or which option to choose — not that they don’t even know which options exist. With iPad UIs, we’re back to this square one.

Inconsistent Interaction Design

To exacerbate the problem, once they do figure out how something works, users can’t transfer their skills from one app to the next. Each application has a completely different UI for similar features.

In different apps, touching a picture could produce any of the following 5 results:

• Nothing happens
• Enlarging the picture
• Hyperlinking to a more detailed page about that item
• Flipping the image to reveal additional pictures in the same place (metaphorically, these new pictures are “on the back side” of the original picture)
• Popping up a set of navigation choices

The latter design was used by USA Today: Touching the newspaper’s logo brought up a navigation menu listing the various sections. This was probably the most unexpected interaction we tested, and not one user discovered it.

Similarly, to continue reading once you hit the bottom of the screen might require any of 3 different gestures:

• Scrolling down within a text field, while staying within the same page
  • For this gesture to work, you have to touch within the text field. However, text fields aren’t demarcated on the screen, so you have to guess what text is scrollable.
• Swiping left (which can sometimes take you to the next article instead of showing more of the current article)
  • This gesture doesn’t work, however, if you happen to swipe within an area covered by an advertisement in The New York Times app
• Swiping up

iPad UIs suffer under a triple threat that causes significant user confusion:

• Low discoverability: The UI is mostly hidden within the etched-glass aesthetic without perceived affordances.
• Low memorability: Gestures are inherently ephemeral and difficult to learn when they’re not employed consistently across apps; wider reliance on generic commands would help.
• Accidental activation: This occurs when users touch things by mistake or make a gesture that unexpectedly initiates a feature.

When you combine these three usability problems, the resulting user experience is frequently one of not knowing what happened or how to replicate a certain action to achieve the same result again. Worse yet, people don’t know how to revert to the previous state because there’sno consistent undo feature to provide an escape hatch like the Web’s Back button.