This is the Share to File dialog of iMovie. What actions do you perceive as possible in this dialog? The up/down triangles next to Format, Resolution and Quality signify that these settings can be changed in this dialog. Description looks read-only but you can actually click on it to edit it. Once I realized this I thought maybe the title above that is editable too? Sure enough, it was! I used iMovie for a month before realizing that I can edit the title in this dialog. How are users supposed to figure this out? Randomly click everywhere and see if some text you thought was a label turns into a textbox when clicked?
In the Yosemite Safari screenshot which tab is currently displayed? Signature Blends or Top Sellers? One tab is a darker gray than the other, but which shade of gray is the current tab? You have to learn and memorize. Compare that to Mountain Lion. The current tab is clearly in front, so there is nothing to learn or memorize. Mountain Lion accomplishes this by leveraging our knowledge of the physical world.
Where does one window end and the next one start?
In this Mac OS X Yosemite screenshot, at first sight it looks like the Maps app has acquired some interesting new features. Featured? Top Charts? What do those buttons do? I pressed one of the new buttons to see what it does and I was disappointed. It turns out those buttons belong to the App Store app which was below the Maps app.
The drop shadow behind windows clearly delineate windows from the background, but only on three sides. The top edge of the window blends into the background making it hard to figure out what’s part of the app and what isn’t.
In OS X Yosemite buttons and text input boxes on the toolbar are rendered similarly. As seen in the Safari screenshot above, borders of buttons and text boxes are identical. If there is an icon inside, it must be a button. If there is text inside it must be a text input box. But wait, in Xcode there is text inside one of those round rectangles, but it is neither a button nor a text input box. Also, Apple’s guidelines state that a toolbar button can contain either text or an image, so the presence of text cannot be used to determine if something is a button or a text input box.
So here’s a more reliable way to tell: Click on the widget. If its background momentarily turns gray it is a button. If a blinking caret appears it is a text input box. If it doesn’t seem to respond to the mouse that’s because it is a label.
This is a significant step backwards in usability. Compare this to OS X Mountain Lion. In Mountain Lion it is instantly obvious whether a control on the toolbar is a button, a text input box or a status label. There is no need to try to manipulate a control just to see what kind of control it is.
In the iOS 8 keyboard screenshot, is the shift key active or no? Unless you are an experienced user you’ll probably have to check what the other state of the shift key looks like before you can answer. There is no such confusion in the case of iOS 6. It is immediately obvious even to inexperienced users.
When cues are based on the physical world the user interface tends to be immediately obvious. No learning or memorization needed. When designers eschew cues based on the physical world users have to learn and memorize the conventions chosen by the designer.
In the Camera app on iPad, how do you switch to video mode? Touching the word VIDEO seems like the most obvious thing to try. But it doesn’t do anything. Tapped it harder, but it still doesn’t do anything. Some people may give up at this point, as I almost did. Turns out you have to drag the word VIDEO until it aligns with the yellow dot. Some sort of signifier to indicate this action would have been nice. The same screen in iOS 6 is instantly obvious, no thinking needed.
All elements on this iOS 7 Calendar screen that are in red are tappable. All except one, that is. The month name is in red, but tapping it doesn’t do anything.
This means color doesn’t signify whether an element on the screen is meaningful to tap or not. How do you then know what is tappable and what is not? You could tap everything and see what responds to your tap and what doesn’t.
In the Recents screen of FaceTime app, the call date is barely readable because the entire screen is “layered” over a screen that displays what the camera is seeing. If you are in a dark room, this is what you get. This worthless effect unnecessarily detracts from usability.
What’s that on the top-left corner of the screen? It looks like mold, but what it actually is, is the new “layering” effect in iOS 7.
Some apps use this effect on the entire screen, affecting readability, not to mention aesthetics. (Example: The Filter screen of BuddyTV app is “layered” over the main screen.)
The word “Trim” appears twice on this screen. One of them is a label, and pressing it does nothing. The other one is a button. Which one is which? How is anyone supposed to know? You have to do some guesswork. The “Trim” at the top is centered on the screen, so it is probably a title. To make sure, tap on it and see if anything happens.
