Aren’t computers supposed to deal with this crap for us? This UI does a not unreasonable service: it lets me know the track I’m playing has a nonstandard string in the Artist field:
So, you know what the problem is and can tell me about it, but you can’t just make it work? How about creating an association between similar strings and not bothering me with it? “It’s not Beyonce, it’s Beyoncé” is just patronizing; “Please fix my tags”? Fix your damn interpretation of my tags. Maybe I didn’t write that tag; Maybe I can’t change it. Fail.
Once you establish a pattern, stick to it. This one was pointed out by @deeann and @geekosaur, and I had forgotten how awful it really is, I’m so used to it now.
First, Apple decided that the “Save to PDF…” button needed more options, and instead of replacing the command button with a proper drop down menu, they added a glyph to a command button:
I really, really hate it when people break standard controls like this, especially OS vendors in global dialogs (and in this case Apple is as much to blame as the usual offender, Microsoft). Predictability is a key tenent of usability: once a user learns how a control behaves, they expect every similar-looking control they encounter to behave that way. This example is particularly bad, as there is a standard control that does exactly what they want.
Full disclosure: I’ve had occasion recently to re-design a drop-down, but it’s for an extraordinarily specific purpose, we’ve styled it very differently from the standard, and use them in enough places (a sort of global-to-System Center) as to establish a pattern. Still, we all agree it’s a gamble and will be tested before it’s released.
Of course, Apple just made a lazy, arbitrary decision and called it a day, something they do too often for my taste.
That’s not the only problem with this dialog. Look at the arrow to the right of the Printer: drop down:
What do you expect it to do? @geekosaur assumed it was a list of recently used printers. I think that’s an entirely fair assumption. It’s not correct though, as the arrow serves as an expander to reveal more printing options and show a mini-preview:
So why the hell is it next to the drop-down? The proximity creates an implicit tie between the two controls, even though they are not functionally related at all. Here Microsoft gets it right, using a pattern specifically for expanders (the chevron) and often giving it a label like “More options…” I like them a lot; here’s a particularly good example, from the Vista global Save dialog:
These are fairly minor, and fairly easy to figure out, but I really expect more from a global, OS dialog, so it graduates to an EPIC FAIL.
Ugh. Just ugh. I suppose I’ll give them the benefit of the doubt that, in fact, most heavy users of Illustrator prefer this behavior, but I absolutely hate it. It used to be, if you selected a text block, and rotated it, it would, in fact, rotate the text to whatever angle you released the mouse at. Not any more. It now rotates the block, but not the text within:
Now, then, you must perform an extra Transform operation to get the text rotated. The UI for this sucks already, so I see this as a big step backwards in what is otherwise a really wonderful iteration on a generally great app. Fail!
Continuing on the theme of my last post, more good visuals to indicate to users what’s going on. In this case, the MobileMe preference pane shows what direction data will flow on the next sync.
Not only is there a great big toggle button with arrows (instead of a silly text label you have to decipher), the orange arrow moves in the direction chosen, reinforcing the decision. Nice!
Buried options are irritating. Yesterday, I wanted to switch my external editor in iPhoto from Pixelmator to Photoshop, but had to hunt and hunt for the setting. Here’s the relevant options screen:
Totally obvious where to set it, right? Yeah, not so much. See, I don’t want to switch to editing every photo externally, so clearly “Edit photo:” isn’t what I want, given my mental model of my goal is “I need to change the external editor” versus “I need to change if photos are edited internally or externally.”
Too bad “Edit photo:” is only place the external editor is listed, as part of the drop-down:
Of course, by choosing Pixelmator, it sets the option to edit externally, but also pops up the standard Open dialog to locate the application’s binary. Ugh!
Here Apple has done what they (unfortunately) often do: go for simple over flexible, combining two discrete tasks into a single control. It fails both ways: if I want to just switch from internal to external edit, I get a dialog I don’t need and have to dismiss, and if I want to choose another program, but keep my default setting, I have to change that setting back after selecting the new editor. Would it really have killed them to add another line to the dialog with “External editor:,” a label for the current one, and a “Choose…” button? Nope. Sure, it would have added to the weight of the dialog, but it would have also saved me time in a) not having to remember the wacky, custom behavior of the control, which since seldom used is easy to forget, and saved me an extra step when I need to make a change.
I’ll admit I’ve designed stuff like this before, thinking “Hey, look how clever; I combined related tasks and eliminated a control. Yay!” But you know what happens every time I put something like this in front of users? They don’t get it, and rightly so. They’re not in on my cleverness, which came from , frankly, overthinking. They just want to get their task accomplished. We often forget that when a user sees a piece of UI for the first time, they’re not regarding it the same way we do in a design review, so even (to designers) too-long and too-dense dialogs can be successful, if they get the user from A to B as quickly as possible*. Start doing real user testing, Apple, and you’ll have fewer irritating fails like this one.
*=In fact, I just designed something like this last week. It’s atrociously cluttered, but it’s totally clear what the (complex) task is, and how to accomplish it. We’ll see if users agree!
Your faithful correspondent, J.D. Welch, has been a professional print, web & UI designer for ten years. Starting with PageMaker version 3 in the early nineties, he has worked in media ranging from student newspapers to sprawling desktop applications to magazine ads to websites for nonprofits.
