Avoiding the Uncanny Valley of Interface Design

There is a theory in robotics first proposed in a 1970 paper in the journal Energy by the roboticist Masahiro Mori. In short the theory states that as you get closer to making a robot that resembles a human, the more unsettling it will be. When our perception of human attributes is visualized, it is a curve that tracks upward when we begin to encounter more human-like machines.1

We reach a point where there is a steep drop-off. It indicates a point of being too human-like, with something that is not quite right. It triggers psychological alarms that detect the very subtle and unsettling differences associating the mind with things like death. It’s the reason movies (with computer generated people) like “The Polar Express” and “Beowulf” were blamed for poor box-office returns.2 This disturbance in our perception — before we reach the perfect likeness of a human being – is the Uncanny Valley.

In design we have been continually moving toward similar territory. There is more realism in user interface today due to factors like faster computers. As digital products have become more sophisticated applications there is a need to create controls and interface elements with clear affordance. This means adding touches of 3D through lighting effects, shadows, textures, and so on.

Cockpit app interface for MacOS

There are a few side affects to this surge of realism. I think that there is an Uncanny Valley in interface design that some Websites and applications have landed themselves in through approaching interface design in the wrong way. The Uncanny Valley of interface design might not cause something disturbing, but the user experience can be compromised.

The Good, The Bad and The Trendy

It’s no secret that I speak often and loudly about trends. The real issue I have with trends is when they are used for the wrong reasons. There are certain effects that have become just a default tool for many designers.

As I see it the rationale behind using them is: 1) It’s easy. No thinking involved. Just add a texture, and it’s “designed” now. It’s 99% imitation with 1% perspiration. 2) They are designing eye candy that will be recognized by other designers as “great design” 3) They don’t know the user and why the effect was used in the other places they saw it. These effects bring their interface into the Uncanny Valley of UI where they seem like the other Websites or apps, but something is off.

What many of these designers don’t realize is that they are doing their client a disservice. Users don’t come to the site or open the application to stare at a UI. They come with needs to find certain content or to complete a task. They have other things they’d rather be doing like walking their dog. They aren’t designers and into the details of every pixel. They could care less if the text has the letterpress effect, unless it hinders their experience.

It’s hard as a designer to find examples of good design. What I mean by that is good design that isn’t eye candy targeted for designers. There is some really beautiful work on blogs and galleries. Of course it’s beautiful though, it’s made for people like me. Sometimes I feel like we’re all so wrapped up in our design world and talk about how crappy some sites look and that we could do much better. What we really mean is that we would design it so we would like it better when we visit/use it.

I went to a large creative conference a while back and saw some really inspirational stuff. I felt reinvigorated after coming back to work. When I sat down to write a report to basically justify the company’s investment for me to go, I went blank. None of the information could be applied to what I did on a daily basis. I realized that the conference was just for designers to feel cool and see things only they would like. It wasn’t anything that would really benefit the users or clients I designed for. That seems to be a lot of the type of work that is praised, as well as the designers who work on it.

Getting Real with Users

Apple has been pushing realism into its interface design for a while now. From glossy buttons, to the metal chrome in iTunes, and now with the guidelines for the iPad. Some of it makes a lot of sense. With the touch interface you want it to be inviting and feel familiar to the user. A screenshot of a notepad application that looks like a real notepad will probably sell a lot better than one that looks clean and digital. Some designers have taken this lead the wrong way.

Pushing the leather buttons on the Calendar app feels very much like real leather buttons would feel: Tacky. — iA

In the article “Designing for iPad: Reality Check,”3 Information Architects (iA) go through a lot of the feelings and explorations they did when starting to design for the iPad. They found that going too far with the realism just brought it into the realm of the Uncanny Valley of interface design. The interface seemed to be more kitsch and gimmicky than an effective way to present content to a user. The interface can get to a point of realism, yet fall short. Real books lay a certain way when they are open. Objects don’t always have six perfect beams of light on them.

The Apple Calender app interface

Creating a word processing app that looks like a typewriter or making the interface for a cooking app look like a real kitchen is driving it right into the Uncanny Valley. It becomes design for designs sake and we lose all sense of purpose for the application. I can guarantee though, that if you put a screenshot up in a certain designer snapshot gallery, you would shoot to the top of the popular list.

If you design something that looks like a book, then users will expect it to function like a book. With a book you lose some of the power and functionality you have with a digital product where it wouldn’t make sense to have a scroll bar on the page and the pages would restack to show your place in the book. It is interesting to see that although the iPad is capable of richer graphics, the Kindle still seems to be a preferred e-reader, with Kindle outselling iBooks 60 to 1.4

The iBooks interface

The Kindle interface

If we review the use of smaller interface elements, like buttons or symbols, we find the same holds true for them. There needs to be a balance of detail and simplification. If we go too far in either direction the meaning of the symbol becomes convoluted. With symbols and other UI elements we should be trying to communicate concepts, not replicate an exact physical object.5

Image from Realism in UI Design on UX Magazine

It comes down to being subtle and rational with using realism. The interface should not be full of excise UI elements that force a user through hoops because it looks great. If you use a metaphor make sure it is strong and helps to propel the user through the Website or application.

Playfulness vs. Usefulness

Realism in interface design is a delicate balancing act. I love a lot of the playfulness in the new apps I’ve seen. I think that the reason they work well is that the interface doesn’t overwhelm the experience. I’ve seen arguments that being a bit playful with the interface is a good thing. It enhances learning the application and engages the user. I completely agree.6

However, think about how many apps users have to do this with. That’s a lot of apps to have to relearn how to navigate. If you think about a DVD’s navigation, it’s a similar thing. They are about the experience, there’s no question. Sometimes I put in a DVD and I can get around easily to find a scene or adjust settings. Other times it is hard to figure out because the designer decided to try and be overly clever.

Even if the application is something for our enjoyment, we still have tasks we need to accomplish. If I go to respond to someone on Twitter, or purchase a song on iTunes, they are still tasks. If the iTunes store looked like jukebox I am certain that the playfulness would get old once I came back the second time to purchase music.

It is so easy to love a certain effect and want to use that everywhere. Not all projects need to have the selections sitting on a perfectly lit wooden bookshelf. On one hand we want to be creative and make something that is appealing and can sell the product. On the other side we have to question the cost of that approach on the experience itself and balance style and function with purpose.

1) The Truth About Robots and the Uncanny Valley: Analysis – Popular Mechanics
2) Into the Uncanny Valley – Seed Magazine
3) Designing for iPad: Reality Check – iA
4) Kindle Outselling iBooks 60 To 1 – The Next Web
5) Realism in UI Design – UX Magazine
6) Usability Ain’t Everything – A Response to Jakob Nielsen’s iPad Usability Study – Johnny Holland