Skuomorphism - A Simple Button Example

Without clicking, can you tell which of the buttons below are selected?



Summary Date Weight Cost



click or tap here to see a skuomorphic solution to the problem

Can you tell which button, or buttons, are selected now?

The UX Problem

When I encountered the button set in the first example, I was unable to determine with 100% certainty if any of the buttons were selected, or if they were just different, or if multiple selections had been made by default.

Getting the Data - The User Test

I conducted a very quick series of five "hallway" usability tests, asking the test participants if they could identify which, if any, of the first set of buttons was selected. (They were not shown the second set of buttons yet.)

One or two of them were able to make correct guesses, but they all admitted that they could not be certain which, if any, were selected buttons, unless they were able to make a series of clicks to try the buttons. Some of the participants thought that it might be possible that multiple selections might be possible, and that "Summary" and "Weight" and "Cost" were all preselected, and that the "Date" button was deselected.

When I asked the test participants the same question about the second set of buttons (they were on separate screens for my test) every one of them was able to correctly identify that the "Date" button was the selected one.

When I asked, in both cases, what did they think would happen if they clicked one of the buttons?

In the first test, using the flat green and black buttons, the answers were quite variable. However, in the second test, there were only two answers: two of the participants guessed without having more information made available to them, that pressing on any other button than the "Date" button might result in more than one button being selected, OR the result could be similar to radio buttons, where selecting one button results in the others being deselected.

The other three participants said they thought that selecting a button other than the "Date" button would deselect the "Date" button - again, as is the case with radio buttons. However, all five participants were able to determine that the "Date" button was selected.

Conclusion

One good way to enhance affordance is to mimic the physical realm. This is known as "skuomorphism."

This is why, if you need to remove ambiguity as to which button is selected (or preselected), making them imitate the actions of actual physical buttons (such as those found on a piece of electronic equipment) may be a good method.