Blog

The Button Analogy

by Miguel Fernandez (@miguefernandez) I’ve been seeing recent screenshots of Mac OS X Lion. Something that has caught my attention is the way they are now visually representing sets of buttons or “tabs” according to the selected state. The convention we are used to is having all the actionable items look like a button and Read more

post-image

by Miguel Fernandez (@miguefernandez)

I’ve been seeing recent screenshots of Mac OS X Lion. Something that has caught my attention is the way they are now visually representing sets of buttons or “tabs” according to the selected state. The convention we are used to is having all the actionable items look like a button and the selected one look a little inset (Image 1, below).

This representation comes from an analogy of physical objects. Take, for example, tape recorders: when we pressed the “play” button, the button remained pressed and gave us enough us enough feedback to indicate that “playing” was what the machine was doing at that particular moment.

But, for the same case illustrated in image 1, I’ve found the following in Mac OS X Lion:

Initially I thought it was a fake. I thought, “why aren’t they doing this inversely?” Shouldn’t the selected option be inset and the unselected options beveled? Is it some amateur Photoshop mistake made by someone who doesn’t work in this field? But then I saw other screenshots like these.

Given the visual style conveyed by these sets of screenshots, I can clearly tell that these match what Apple is looking for with their new GUI for OS X lion. They want to set some distance from the shiny, glossy UI elements. In that sense, these screenshots seem real. Now, taking into account that this behavior is being illustrated not in one, but in different interfaces throughout the new OS X and considering that these come from sources like Engadget, Apple Insider, and developers that have had access to the beta version of Lion, it seems that Apple is ready to set a new design pattern.

My questions are:

1. Does this have anything to do with touch gestures? When users touch an option, will an animation displace the beveled “selected” option to the one the user touched? Or are they thinking of having users drag the selected option to the desired option?

2. Are we going to start seeing this design pattern as a trend in the UI’s of applications and websites?

My answer is:

Clearly, we can’t know yet… We’ll have to wait. But it is very interesting to see this kind of disruption on a convention that has worked perfectly fine, at least until now. I look forward to understanding the reasons behind this move and to see whether it will survive and set a new standard or, on the contrary, prove why conventions have come a long way to be named as such.

Get in touch with us

let’s start building better today

Contact Us