Yesterday someone in my Twitter stream pointed out a dialogue box from the iTunes Store, calling it “a rare example of confusing UI design from Apple”. Now, iTunes isn’t known for great UX, but this is mostly (IMO) due to deep structural problems, not surface UI design.
So it’s surprising that this screen design (from iTunes) made it through Apple’s quality-assurance process.
Admittedly, it works. But it’s cluttered, and clutter is usually a sign of faulty analysis. Here, it’s mostly a problem of deciding what is important on the screen.
Apple lets users to sign in to the Apple Store with an either an Apple ID or an AOL screen name. Why they feel they must cater to the last remaining subjects of the America Online empire – 1997: 17 percent of world internet users; 2010: 0.2 percent – is not an issue for us here. The main issue is how the system knows which ID type it’s getting.
In the current screen design, the user clicks a radio button to indicate ID type. In principle there’s nothing wrong with this, but the implementation is wrong. Apple’s design makes choosing ID type the dominant feature of the sign-in process. It does this (1) by positioning the button in a key location on the left of the window, and (2) by using logos to represent the company names.
Logos, God help us. In graphic design, logos are typically used for emphasis (as a reference to their branding) or as a space-saver in catalogue listings and the like. They’re not part of the ordinary language that forms 90 percent of communications. Using them here contributes to the overemphasis on ID types.
A secondary issue is the layout. There’s no sense of a left-hand margin. Furthermore, each radio button lines up with a field, in a way that suggests some semantic correspondence. Maybe there’s an anti-pattern here: Irrelevant Connection.
A final issue is the microcopy. The main instruction runs two sentence with a total 26 words. True, sometimes you need long texts; ultra-concision fosters ambiguity. But this text is long and still ambiguous – it seems to bar AOL subscribers from using an regular Apple ID (unlikely to be true). Possibly the writer’s point was that only AOL members could enter AOL IDs. Does this need to be said? Probably not.
It’s not hard to improve things. We can let the user select an ID type, but do so unobtrusively. We can clear up the layout. We can rewrite the microcopy. Here’s my first cut:
I lie. It’s at least my third cut. There are a surprising number of options. I decided to use a checkbox to select the AOL option, since it’s the secondary path. On selection, the Apple ID label should change to AOL screen name. (Note how dynamic field labels are easier to implement as stacked field labels rather than right- or left- justified labels.)
Layout and microtext were easier to fix. I also changed the Buy button to Sign in. It’s great that the interface world is moving away from having OK and Cancel in every last dialogue box. But when in choosing a meaningful label, you should always choose the next specific action, which in this case is signing in, not the downstream objective of buying something.
Finally, it’s striking how clunky this desktop-style dialogue box looks beside its web-app-style equivalent:
The web-app standard of using buttons only for primary actions, and links for secondary actions, makes the information layering much clearer.
Christopher Burd is a business analyst, writer, and information designer based in Victoria, British Columbia. His website is www.catchword.ca. You can follow him on Twitter.
