ed-informatics.org

The Master said: “When the noble man eats he does not try to stuff himself; at rest he does not seek perfect comfort; he is diligent in his work and careful in speech. He avails himself to people of the Way and thereby corrects himself. This is the kind of person of whom you can say, ‘he loves learning.’” [Confucius: Analects 1:14]

User interaction design is now the victim of fashion, or perhaps worse, fads. First, we had what artists call trompe-l’œil, which is creating a 3-D impression by skillful painting in 2-D. A great recent example is a painted concrete bridge in Frederick, Maryland. The computer equivalent of the Frederick Community Bridge is skeuomorphism. Some say that computer interfaces took skeuomorphism to excess. Many cite recent versions of Apple’s iOS operating system; others cite Windows 7’s “Aero” interface.

Most obviously with the Windows 8 “Metro” interface, an anti-skeuomorphic design fad took off. Some tout the “flat design” in Apple iOS 7. Others say that Apple stole the idea from Android, from the highly-lauded Windows Phone, and the Windows 8 “interface formerly known as Metro” (Microsoft removed the “Metro” label and now just calls it the Windows 8 interface; most of the rest of us still call it Metro.) UXmatters has an entire post about it.

“Flat Design” means different things to different people. In its purest form, it means getting rid of anything on the screen that provides any hint of 3 dimensions, or even 2.001-dimensionality. Yes, you can have things with fractional dimensions; read the Wikipedia article about it. Sorry. I think that current rabid objections to any hint of skeuomorphism got to me.

In a less-pure form, this means getting rid of 3-D effects that are just there to look cool. As Alan Cooper said in the first edition of About Face, “No matter how cool your interface, less of it would be better.”

Consider the partially-transparent borders of windows in the Windows Vista/Windows 7 Aero interface. It’s a very cool 3-D (2.5-D?) effect that adds little to usability. The proponents had some usability arguments in favor of this effect. I’m sorry, I just don’t believe them. Really, the effect was just there because it was cool. And reference what Alan Cooper said about cool above.

The Windows 8/10 touchscreen interface (“the interface previously known as Metro”) is extreme flat design. Some of the impetus for flat design comes from the need for touchscreen input for tablets: fingertips are a lot larger than a mouse cursor, and this requires major simplification of the user interface. The Windows 8 Metro interface took this to an extreme: everything on the screen was flat, uniformly fingertip-sized squares, or rectangles made up of multiple similar-sized squares. No Tetris tiles, though.

In user interfaces, simplicity is good… up to a point. But there is a reason – perhaps many reasons – why users of Windows 8 or 10, even with a touchscreen, tend to use the good ol’ Windows Desktop for most of their work. Note I said work, not play; the touchscreen is fine for watching TV or playing at least some games. Why go the Desktop? Because you can get more work done that way. If you are doing graphics design, or word processing, or spreadsheet work, where you need to have many different functions “at your fingertips,” or perhaps we should say “at your mouse cursor-tips,” you want more detail on your screen than is possible when all of the clickable controls are fingertip-sized squares. The mouse cursor allows finer selection than a finger, and thus many more functions readily available on the screen.

Are there usability arguments in favor of 3-D effects? Yes.

In his seminal 1995 work About Face: Essentials of User Interface Design, Alan Cooper says that it’s important for the screen to “visually hint at pliancy” – it needs to show you that certain places on the screen can be clicked with your mouse cursor or finger. One way is to use skeuomorphism to show something that looks like a 3D button. And, as in real life, buttons just beg to be pushed with a finger or a mouse-cursor finger-analog. So in this sense, skeuomorphism can make the screen more usable; it’s easier to figure at a glance which items on the screen can be clicked, and which can’t. The general term for this “I want to be clicked” appearance is affordance. Have you ever come up to a door with a pull-handle, pulled on it, and only then noticed the letters “P U S H” on the door? Affordance is discussed in detail elsewhere on this site.

Cooper also talks about active visual hinting to support affordance. On amazon.com, visual hinting takes the form of yellow buttons; the most common items to click are signified this way. For clickable items that aren’t signified by a 3D button, a form of more active visual hinting can be given by what is called a hover state; as you run your mouse cursor over the item, it glows, or pops out a bit, or in some other way says “I see your mouse cursor is hovering over me; yes, I like to be clicked.” There are alternative ways to hint; as you move your mouse cursor might change from an arrow to a pointing finger. A personal peeve related to this: the vendor who says “we don’t need to worry about affordance as almost everything on our screens can be clicked.” Wrong. If some things can be clicked and some things can’t, get a clue: your screens will be much more learnable and memorable if you provide some sort of clickability affordance. Even in text, like in this blog post, blue underlines let you know that the text is clickable. For the Windows Metro interface, clickability affordance is squareness. If it’s square, it’s clickable. For the Windows desktop interface, icons on the screen that fit in a square grid are clickable. For apps, with many more clickable and unclickable items on the screen, affordance is more important, and a little bit of skeuomorphism might improve rather than decrease usability.

I’m happy with the two paragraphs above. Getting to use the word “seminal” in a blog post means that usability is now a mature discipline. Just sayin’.

Do all things in moderation.
[Paraphrase of the principle of the mean from Aristotle’s Nicomachean Ethics]

Tags: Computers, Alan Cooper, Tutorial, Learnability, Memorability, User Interface, Information Design