UI Design: Should We Really Be Afraid of the Uncanny Valley?

by on 30th March 2011 with 17 Comments

Realism in UI design is a hot topic right now. Every design blog worth anything is openly telling Apple that they are way off in their suggestion that iPad apps should mimic reality.

Join us as we add some life to the debate by tackling some of these notions head on. We’ll go over when realism is effective and when it is destructive and how you can wield it in your own designs without ruining your interface.

The iPad Sparks a Debate

Ever since the release of the iPad, there has been much discussion on the use of realism in user interface design. Apple encourages designers to give their iPad apps a visual metaphor rather than creating them to look like the typical digital art that we traditionally see in UI design.

For starters, we designers don’t particularly enjoy people telling us how to do our jobs. Further, many aren’t pleased at all with Apple’s UI suggestions or even Apple’s own interface choices in default iPad apps such as Notes and Calendar.

screenshot

This has led to some stern warnings from the design community regarding the use of psuedo-realistic interfaces. Though these warnings are well-intended, well-argued and legitimate, the debate seems to be a bit one-sided at this point so I’d like to bring in a fresh perspective to keep things honest and intelligent.

On the Shoulders of Giants

Most of today’s discussion in this arena will build off of three excellent articles on the subject from peers that I highly respect:

The Uncanny Valley

The most appropriate title to the struggle that we’re facing with realism in design comes from Francisco Inchaust in his article from GetFinch.com. He notes that Masahiro Mori coined the term “Uncanny Valley” in the 70s to refer to a point in the development of robotics where the machines become so much like humans that we are appalled by them, or at the very least, made uneasy by their appearance.

This idea perfectly applies to trend in UI design. Reichenstein has an excellent in example in his article: a screenshot from the hideously psuedo-realistic interface of Kai’s PhotoSoap.

screenshot

Is Trend-Bashing Just Another Trend?

It is definitely a case that we are seeing a resurgence of interface design in this same vein. However, as designers begin to pick up on this and bash others for it, I’m noticing a hesitancy in the design community to apply any sort of realism for fear of being bullied. In a way, Twitter, Dribbble and the blogosphere become a playground and there are many kids who want to fit in and do what’s cool without offending anyone else.

Instead of beating up the kid who decided to wear the Teenage Mutant Ninja Turtles t-shirt, we have the tendency to scoff at designers creating interfaces using anything but solid colors and a minimalist design style.

The problem arises when attacking trends merely becomes a trend itself, without proper analysis of what is and isn’t best from a user’s perspective. Designers should be critiqued and trends should be properly identified, but we have to make sure we don’t build hard and fast rules based in preference rather than logic.

What’s So Bad About Realism?

The articles that I mentioned above contain a few popular UI design examples that are seen as flirting with the Uncanny Valley, meaning that their realism actually detracts from the experience.

Let’s take a look at a couple of these to see if we can really target the problems taking place. The first is Apple’s iBooks interface, shown below.

screenshot

Now, I have admittedly written before about how I loathe the iBooks reading interface. However, I think equating the problem here to the Uncanny Valley is actually a misdiagnosis. The book interface is obviously quite “toony” and not so realistic that it makes my brain distrustful of it. I don’t stare at those stacked pages for minutes on end thinking that they’re so real but still off in some important way like I do with the highly modified version of Jeff Bridges in Tron Legacy.

So what’s really the problem here? The problem is that Apple’s cute little interface is a complete distraction that uses the available space very poorly. That crease going down the middle of the page doesn’t make me excited about realism, instead it merely mimics the single worse part of reading a real book!

The realism in the iBooks interface actually gets in the way of the focus of the app: reading. Because they were making room for their metaphor, I have less room for my reading experience. This becomes obvious when we look at the Kindle iPad interface:

screenshot

This is a breath of fresh air compared to iBooks, but why? Is it that my brain can finally be free of the torment of the Uncanny Valley or that the interface has much more room to breathe and gives more room to what I really want to see? I submit the latter. Notice that slider at the bottom, which looks a lot like a real button that you could move back and forth. This doesn’t bother me one bit. It’s both attractive and, more importantly, out of my way!

A Story of Efficiency

I think the example above clearly illustrates where good designers go wrong with realism. Sure, there are plenty of interface designers capable of making something that’s plain old ugly on its own merit, but there are also lots of extremely talented designers who simply get so caught up in creating their realistic interface that they forget about usability. The quest for admiration of their Photoshop skills makes them lose sight of the main goal of an interface: to make the application easy and enjoyable to use.

To further explore this idea, let’s take a look at another example used by Inchauste: the old Cockpit for Mac interface, shown below.

screenshot

Once again I wonder if the problem here is really the attempt at realism, or how this affected the efficiency of the interface. To be honest, the glass, rubber and metal textures don’t make me cringe. Sure, they’re trendy but in an arguably attractive enough manner.

The thing that really gets me is the confusing circular control (which has since been abandoned) and all the empty space around it. The buttons have been needlessly crammed into a tiny, cluttered space because of a realistic design metaphor that is being carried out. Just like we saw in iBooks, abandoning this metaphor would allow for a much more logical and user friendly use of the space.

Start with Efficiency

So how do we balance Apple’s idea that realistic interfaces are fun and desirable to users with the principle that these types of interfaces often trash usability?

An appropriate example exists right on the home screen of the iPad and iPhone. This interface began on the first iPhone with efficiency in mind. The original core concept was simply a grid of icons on a solid black background. Below we can see the iPad’s home screen layout simplified to highlight its structure.

screenshot

Admittedly, the grid layout begins to lose its effectiveness when you have 75 apps (sometimes I’d kill for a list view), but for a handful of well-organized content, it works great. Designers constantly use grids for everything from a thumbnail gallery to entire website layouts. Notice that we’ve started with a solid foundation, not a constricting metaphor.

So can we add some realism here without destroying our usability? Even better, can we add realism and actually increase our usability? You bet. Look how much better it gets when we add some life to the icons.

screenshot

Notice that the most abstract, non-realistic icon here is actually the most difficult to interpret. The App Store icon, to anyone not familiar with OS X’s application folder, is downright confusing. You grandma would probably have no idea what that icon does. However, show her the realistic notes icon and she can instantly tell what the application is meant to do. Lukas Mathis explores similar ideas regarding icon design in his article.

Now, can we take the realism even further without destroying the design? What if we throw in some of those trendy textures that designers hate so much? Surely that will kill it, right?

To answer this, let’s add a background from one of the top ten most popular paid iPad apps on the App Store right now (Pimp Your Screen). If there’s one way that users can really vote for the experience they like the best, it’s with their wallets.

screenshot

Here we’ve added a familiar visual metaphor. Now, is this the best-looking wooden texture? Certainly not. In fact, I would say that it’s dangerously approaching the Uncanny Valley. And yet, it hasn’t really ruined our usability like the iBooks reading interface does (though it borrows heavily from the iBooks shelf grid). This is due to the fact that our core structure, which was built on ease of use and an efficient layout, remains intact.

Interestingly enough, if you apply the wallpaper above and then turn the iPad vertical, everything is ruined. The icons don’t line up with the shelves and the metaphor becomes distracting.

I think this holds the key to pulling off realistic interfaces the right way. Problems arise when designers begin with trendy metaphors and the result is a UI that is both inefficient and ineffective. Usability is sacrificed in the name of pretty pictures. However, when you start with a simple and solid foundation, structured with usability in mind, you can gradually add in style. Keep in mind that you must still judge every change and decide whether the change improved, decreased or was neutral to usability.

The Test

One good test for your interfaces is whether or not you can strip out the metaphor and still have the layout make sense. For instance, when you take the fluff out of the iBooks interface, you’re left with awkwardly-spaced paragraphs that obviously don’t make great use of the available space. This is because the page crease in the middle was screwing up the layout.

screenshot

Now imagine if you took The Hit List, shown below, and stripped out any resemblance to notebook paper or three-dimensional tabs. Would the layout still make sense? The answer is “perfectly.” The designer here has a strong, familiar structure that has been styled to make it more attractive. This is very different than an interface that is awkwardly structured to go along with a pre-conceived visual idea.

screenshot

Is Realism Just for Designers?

The discussion thus far has addressed the idea that realism can be present without hindering usability, and in the hands of someone with real talent, it can even enhance it. However, there is another major aspect of this debate that remains unaddressed: Do users want it?

The implication currently being made by many in this debate is that the realistic interfaces seen in many iPad apps are comprised of eye candy made by designers for designers. Normal users, according to this argument, care nothing of these prettified pixels and only want to complete a given task.

I believe this argument is way off base. First off, you’re not giving average people enough credit. Just because someone isn’t a designer does not mean that they are incapable of appreciating attractive design. I am not a painter but I thoroughly enjoyed art history in college.

Too often I hear designers dogging the general public as people that have no appreciation of “good design.” If that were true, we’d be out of a job! Many people recognize and appreciate attractive design and hire us because they know what they are capable of producing on their own isn’t it.

Secondly, I find that for every one “normal person” who likes a trendy realistic interface, you can find ten designers who hate it. Picky designers are the people critiquing Apple’s Calendar app, the rest of the world is buying up iPads like candy, partly because of the neat interfaces they see on the commercials.

Designers like us spend hours debating the pros and cons of realism in UI design. Meanwhile, Penultimate sits at the number four spot for paid downloads. This app uses a realistic notebook interface to mimic a real writing experience, and users can’t get enough of it.

screenshot

Am I impressed as a designer by the realism in the Penultimate interface? Not remotely. In fact, I don’t really like the way the app looks. However, your average joe iPad owner thinks it’s great.

My point is, the popular argument has it backwards. Effective realism in UI design is not merely drool-inducing Dribbble fodder, it’s something that users can and do appreciate and are willing to pay a premium to receive.

Conclusion

Is realism abused in UI design? You bet. Are realistic iPad interfaces a trend that will pass? Absolutely. Are they for everyone? Absolutely not. Minimal apps like iA Writer often sell like hotcakes because they abandon realism in favor of pure efficiency.

The point that I’m making in this article is that “realism” is not the dirty word that designers are currently making it out to be. As a designer, you shouldn’t abandon a really great interface idea in fear that the Uncanny Valley police will come and get you. You should definitely be mindful of this principle, note that even Apple’s interfaces intentionally shy far away from photorealism, but you shouldn’t be afraid that a little bit of texture will make users hate your app.

Successful UI designers know that a solid, usable foundation is the basis for any well-design application. How much extra styling you apply depends on your target audience and whether or not they will perceive it as helping or hindering the design as well as the context of the application.

Ask yourself the following questions: Does my metaphor make sense in this setting? Will the layout stay strong if the metaphor is taken away? Am I applying realism to improve the app’s acceptance and usability or because I’m prone to following trends? Does my target audience tend to love or hate similar ideas?

Leave a comment below and let us know what you think about whether or not there is a right and wrong way to approach a realistic interface. How do you gauge when realism is being effective versus when it is damaging the integrity of a design?

Comments & Discussion

17 Comments

  • Uncanny

    The ‘Uncanny Valley’ isn’t intended to discuss the effectiveness of poor quality textures or sloppy UI functionality. Trying to apply it to that is a gross misinterpretation of the theory.

    That aside, video games make daily use of the techniques you’re discussing in the article and they do so without issue. The problem is the web development community.

  • Joshua Johnson

    Francisco Inchauste merely borrowed the term to illustrate that there is a similar problem with the way over-Photoshopped interfaces seem to mirror reality so much that they seem off and ugly, just like how near-human robots seem creepy because they aren’t quite right.

    I think his comparison was quite appropriate and not a gross misinterpretation at all. He understood the original theory and has enough imagination to draw parallels to other situations.

  • http://jim-silverman.com/ Jim

    couldn’t agree more with this article.

    more and more, ui designers are sacrificing usability for style and realism, especially on touch screen platforms. while it’s easy to get carried away with decoration and aesthetics, the foundation of a good interface design will always be usability.

  • http://www.christhelwell.co.uk Chris Thelwell

    I think there is another way of dealing with realism in an interface. If the interface is designed to do a real world task in a digital way, I find a good approach is to work out what actually makes the real world interface great, what makes a book a great way to read, what makes a note book great for making notes, then apply that thinking (not necessarily the look) to the digital version.

    If you take your examples above, what makes penultimate better than apple’s notes, it’s simply the fact that you can use it like a real note book, scribbling the way you would do in a real note book, you have to type in apple’s note app, I’ve personally never typed a post it note in my life! What makes Kindle better than iBooks is simply because iBooks visually imitates, Kindle goes deeper into understanding the great bits of reading a book.

    As another example you mention iA Writer as not being real, yet I would say it creates a very real simplified writing experience like the way writing used to be before the word processor when we all used typewriters. It’s taken a real life experience, taken what makes it great and then added in all the features that the device can add to make it even better. I think people like it because of this, because it’s simply a real writing experience.

    I can see Apple’s point of view on this, the iPad needs to find it’s place in a lot of people’s lives. By taking real life user experiences and replicating them digitally (sometimes with a real looking UI as well) makes it a lot easier for people to adopt them, replacing their real note pad with an iPad.

  • Pingback: UI Design: Should We Really Be Afraid of the Uncanny Valley? « « Big Engine Media Big Engine Media()

  • Eric

    I find the article very interesting and the debate worth debating. Still I would add some points.

    The obsessive focus of designers on usability is a good thing, as it put the user at the center. But there might be a little misunderstanding in designers’ minds on what usability truly means. Why are realistic apps selling like hotcakes ? Because the purpose of the app is very clearly outlined by the facts it mimics an object they already know. It makes the message very clear, which is part of the usability of an app.

    Furthermore, lots of users have no patience. Apps that mimics reality are easy to use without any prior “education” to the device. Once again, this is part of usability.

    Lots of things in life are not purely rational. Tons of articles and books are popping up on how irrational the brain actually is. Why do we use QWERTY keyboards instead of DVORAK keyboards even if we know DVORAK is better ? Why do we do not look closer at Esperanto, a Language that is proved to be efficient and easy to learn ?

    The weight of customs and habits sadly has to be taken into accounts when speaking of usability.

    All in all, I fully agree in your quest to always try to find the balance between realistic designs and usable designs :) . You are right when you point out the bunch of people that just imitate realistic designs misunderstanding the success of these designs and therefore turning cheesy.

  • http://designmodo.com Adrian

    Is realism abused in UI design? – i think yes…

    the real world… This is due to disappearance of the real world …

  • Sander Vermeer

    I think one rule of thumb in UI design is ‘don’t make me think’. Clearly the more a UI or app mirrors a real life object, the more people are likely to not having to think when using said UI.
    Every UI design principle can be reduced to this one rule, and applies to all. Example: icons should be clear and mimic or reflect familiar function (i.e. an enveloppe for (e-)mail). In general, people must instantly know what an element a) does and b) represents.

    When using a realistic ‘theme’ or approach, many people are less likely to have to think when using the UI. I think a lot of users like a more realistic approach because of this.

    I think one of the other reasons people like an almost digital duplicate of the ‘original’ simply because it is digital. They don’t have to cary a notebook/typewriter/calander/camera around. They love the originals, but these can (now) be replaced by a digital duplicate, which exactly mimics the originals’ usabality and functionality. Any additional features are bonus. In fact, I believe the more features one would add to these substitutes, one will lose it’s attraction or users simply dismiss them.
    Take a look at word processors for example. Many people don’t use the advanced features these products offer, they simply use it as a typewriter. I think more people would like a digital word processor when it mimics the looks and functionality of a real one. I know my mother would. Clearly, you can’t abandon basic formatting features, but a barebones, simplified app would be great. And, wouldn’t you know it, Apple build one in their iOS version of iWork.

    This becomes evident when you look at the top selling App Store apps. Take a look at Angry Birds for example. Kids for centuries used to throw rocks at stuff to see what happens. Angry Birds delivers the exact same experience, only with the added bonus of a semi-puzzle gameplay element. And you can do it in the comfort of your own home! Brilliant.

    But I’m drifting away from the subject.

    Clearly more realistic UI’s work and people love it. Simply because these UI’s offer a digital replacement of things they (used to) love.

  • Calum

    I don’t think the problem is necessarily realism… sometimes it’s ‘not quite real enough’ism. Those humanoid robots are freaky because their faraway stares and waxy skin means they don’t look quite like humans, which makes us a bit anxious about them. In IBooks, I don’t find the crease down the middle distracting at all, but I do find it annoying that the rendering of the page edges down either side doesn’t update to reflect how much of the book I’ve read — again, a failure to be real *enough*.

  • Jot

    The opposite of this is Window phone 7. Its beautiful on initial take, its only metaphor is presenting the information, no fooling around. Then you start using it … and *every* single app looks virtually the same. The idea of just presenting info doesn’t scale across all apps.

  • Pingback: Design Shack – UI Design: Should We Really Be Afraid of the Uncanny Valley? – Yostivanich()

  • Alex

    My understanding of the Uncanny Valley is that it is as much about the behaviour than the appearance; when the robot looks human, but its behaviour isn’t as real as its appearance, people will simply see the areas where the cyborg fails to be human. If it looks like a robot, and has the same behaviour, people will see how clever it is as a robot.

    With the book reading example above, if it looks like a book, but the interactions are slow and there isn’t good feedback, then the user will simply see where it fails in its attempts to be a book. If the application has a more unique appearance, that blends better with the interactions, the user is less likely to make those comparisons and has a greater chance of having a positive experience.

    So the question regarding realism is, for me, about whether you can pull off mimicking realism and still create a positive experience.

  • Pingback: iOS Usability Tips and Resources for iPhone and iPad Apps /  Weblog – Hans van Goor()

  • Pingback: iOS Usability Tips and Resources for iPhone and iPad Apps | Content Store()

  • Pingback: iOS Usability Tips and Resources for iPhone and iPad Apps | Design Shack()

  • Pingback: Thesis: Reading List | jfree design()

  • http://d1sb6.tk design a shirt

    Outstanding quest tɦere. Wɦɑt occurred after? Take care!

Subscribe
Membership
About the Author