I <3 Steve McConnell*
Coding Horror
programming and human factors
by Jeff Atwood

Dec 16, 2008

Avoiding The Uncanny Valley of User Interface

Are you familiar with the uncanny valley?

screenshot of character from Dead Rising

No, not that uncanny valley. Well, on second thought, yes, that uncanny valley.

In 1978, the Japanese roboticist Masahiro Mori noticed something interesting: The more humanlike his robots became, the more people were attracted to them, but only up to a point. If an android become too realistic and lifelike, suddenly people were repelled and disgusted.

The problem, Mori realized, is in the nature of how we identify with robots. When an android, such as R2-D2 or C-3PO, barely looks human, we cut it a lot of slack. It seems cute. We don't care that it's only 50 percent humanlike. But when a robot becomes 99 percent lifelike-- so close that it's almost real-- we focus on the missing 1 percent. We notice the slightly slack skin, the absence of a truly human glitter in the eyes. The once-cute robot now looks like an animated corpse. Our warm feelings, which had been rising the more vivid the robot became, abruptly plunge downward. Mori called this plunge "the Uncanny Valley," the paradoxical point at which a simulation of life becomes so good it's bad.

This phenomenon has also been noted in cartoons.

McCloud's book Understanding Comics was the first place I ran into a concept which is a sort of corollary to the Uncanny Valley. Call it Lake Empathy: If a character is very simple, more iconic than realistic, it's much easier for people to pour themselves into it -- to view it not as a third party, but instead as a personal avatar.

For example, you probably see more of yourself in the character to the left than in the characters to the right.

Uncanny valley in cartoon form

The seminal Understanding Comics was where I first encountered this concept, too. It's a sort of digital Zeno's Paradox. The more accurate your digital representation of a person, the more visible the subtle imperfections become. This is why computer generated people in recent movies like Polar Express feel even more unnatural than the highly abstract people in 1995's Toy Story. (The current state of the art, at least by some accounts, is The Emily Project. You be the judge.)

But does the uncanny valley effect apply to software user interfaces, too? Bill Higgins thinks it does.

The problem is that our minds have a model of how humans should behave and the pseudo-humans, whether robotic or computer-generated images, don't quite fit this model, producing a sense of unease - in other words, we know that something's not right - even if we can't precisely articulate what's wrong.

There's a lesson here for software designers, and one that I've talked about recently -- we must ensure that we design our applications to remain consistent with the environment in which our software runs. In more concrete terms: a Windows application should look and feel like a Windows application, a Mac application should look and feel like a Mac application, and a web application should look and feel like a web application.

Bill extends this to web applications: a web app that apes the conventions of a desktop application is attempting to cross the uncanny valley of user interface design. This is a bad idea for all the same reasons; the tiny flaws and imperfections of the simulation will be grossly magnified for users. Consider the Zimbra web-based email that Bill refers to.

zimbra email

It's pretty obvious that their inspiration was Microsoft Outlook, a desktop application.

outlook email

In my experience, shoehorning desktop conventions into web applications rarely ends well. I was never able to articulate exactly why, but the uncanny valley theory goes a long way towards explaining it:

If you're considering or actively building Ajax/RIA applications, you should consider the Uncanny Valley of user interface design. When you build a "desktop in the web browser"-style application, you're violating users' unwritten expectations of how a web application should look and behave. This choice may have significant negative impact on learnability, pleasantness of use, and adoption.

As I've mentioned before, one of the great strengths of web applications is that they aren't bound by the crusty old conventions of desktop applications. They're free to do things differently -- and hopefully better. Web applications should play to their strengths, instead of attempting to clone desktop applications.

If you end up anywhere near the uncanny valley of user interface, that sense of unease you feel is perfectly normal. You're clearly in the wrong place.

Posted by Jeff Atwood    View blog reactions
« Easy, Efficient Hi-Def Video Playback
Hardware is Cheap, Programmers are Expensive »
Comments

What do you think about eyeOS? It's an attempt to clone the modern desktop and put it on the web.

Zoasterboy on December 17, 2008 1:24 AM

Is it ok to build your web app so it looks and behaves just like every other web app just so you don't violate users' unwritten expectations of how a web application should look and behave?

Isn’t breaking convention how you progress?

Where is the line between 'being considerate of users previous standards and expectations' and 'being afraid to progress because some Luddite user (oh no! he didn't just say a bad thing about 'users' did he!?) might be a little uncomfortable for a week'? (That is a serious question by the way.)

David H Aust on December 17, 2008 2:50 AM

Nice article, I appreciate the education. So how about this. What if I'm in a flash application? Does the user think they are on the web? What if it looks like a desktop but it just happens to have a firefox window? What are the expectations when we are in a browser, but loading a flash .swf?

ps I use thunderbird against gmail, so what does that mean?

James Law on December 17, 2008 3:26 AM

Isn’t breaking convention how you progress?

Indeed it is, but it's a question of degree. See Doing It Like Everyone Else Does

http://www.codinghorror.com/blog/archives/000401.html

Jeff Atwood on December 17, 2008 3:45 AM

A bit of a stretch of the metaphor, IMO.

BTW... Shouldn't you be working on StackOverflow?

Dave Markle on December 17, 2008 3:46 AM

Totally agree! esp with webmail.
I had a client who was using some webmail supplied by thier ISP, and it was MS exchange webmail, which was branded outlook. the UI was exactly the same as desktop outlook 2K3, and this was the problem. they were applying desktop usage methods to a webapp and caused them (and me) a load of problems as it just wasn't beahving 'right'

No, Webapps apeing desktop apps causes even more confusion than it solves.

Alistair on December 17, 2008 3:59 AM

Mac apps should look like Mac apps. Windows apps should look like Windows app. People have been saying this for years. :-)

Heng-Cheong Leong on December 17, 2008 4:02 AM

+1 @Dave Markle, you don't need to elaborate that much to say you don't like desktop-alike web apps.

Maybe it's just that this point has been made so much times that you need some kind of elaboration for it to be noticed.

Anyway, I agree. Web apps should not be mimicking desktops, each have their own UI paradigm, strengths and weaknesses.

delm on December 17, 2008 4:12 AM

Case in point - iTunes on PC. Horrid!

dan on December 17, 2008 4:18 AM

And it can go the other way too - something that IS a deformed version of something else can be pitched as something entirely different so that people don't make the comparison.

For example if the iPhone were pitched as a scaled-down laptop that only runs proprietary software, it would be seen for its limitations. But instead, it was pitched as something like super intelligent drywall (I just made that up), and in that context, it was the most amazing thing ever!

When you watch a video on YouTube, it's A movie inside of a WEB page! rather than A new kind of T.V. with sub-standard content, sub-standard production quality, and a super-small viewing area.

Harry on December 17, 2008 4:24 AM

...you're violating users' unwritten expectations of how a web application should look and behave.
For me, web applications that try to mimic desktop application violate users' unwritten expectations of how a desktop application should look and behave. Anyway, I agree with the whole point.

Mac on December 17, 2008 4:25 AM

Hee hee... I thought the valley in question was that between her Chesticles.

Ro on December 17, 2008 4:34 AM

This is exactly why it pisses me off that Microsoft uses Segoe UI on all their sites.

Ortzinator on December 17, 2008 4:38 AM

You were just waiting for an excuse to use that picture weren't you?

A nice cleavage shot always improves whatever I'm looking at :)

Kevin on December 17, 2008 4:56 AM

One of the important features of the uncanny valley which Jeff doesn't mention is that there is something the other side of the valley.

The theory is that, if your replica does manage to become nearly indistinguishable from the real thing, the feeling of familiarity returns and there's no uneasiness about it any more

However, in the cloud (ugh) it's impossible to be able to replicate the feeling of a desktop app as the user has complete control over their desktop settings in a way that you, the web designer, don't have access to. So the analogy of an uncanny valley dies, and all we're left with is an uncanny cliff with no real hope of survival on the other side.

Gareth on December 17, 2008 5:04 AM

So where does that put Java Desktop Applications?

I've always thought that the GUI on most Java applications is a triumph of Java over common sense and taste. They're almost - but not quite - entirely unlike proper native applications.

Roddy on December 17, 2008 5:08 AM

Now, answer honestly: do you regret giving your email address to Chris Smith?

DavidD on December 17, 2008 5:27 AM

I felt the same way about the Linux desktops that came out a few years ago. They acted just enough like Windows to raise expectations, but they didn't deliver. They've gotten much better now that they're not trying to mock Windows 95 and they've moved on to doing their own thing.

John on December 17, 2008 5:27 AM

Actually, this may account for why Ajax apps often bug me - they appear in a browser but they don't behave like web pages.

Subverting the dominant paradigm causes upheaval. Sometimes it is worth it! (Experience shows that it is sually not, though.)

Rich on December 17, 2008 5:30 AM

Valid point, but fairly awful example.

Outlook fills me with a sense of unease (and dread). It is hardly surprising that a clone, whether web-based or otherwise, should have the same effect.

Daniel Cassidy on December 17, 2008 5:31 AM

It's a sort of digital Zeno's Paradox. The more accurate your digital representation of a person, the more visible the subtle imperfections become.

Not as good as the whole P / NP debacle, but this is still pretty good :)

Larry Lard on December 17, 2008 5:41 AM

Yeah, we all hated Data. The skin and eyes just didn't look right. He was simply too disgusting. That's why that new Star Trek show with the bald captain never really took off.

J. Stoever on December 17, 2008 5:45 AM

I'm glad to see I'm not the only one getting annoyed by web sites pretending to be desktop applications.

The other day I tried to scroll down my list of subscriptions in Google Reader, only to discover that I had missed the scroll thumb and accidentally dragged an item in the list (which is actually a tree) over to a different category. This was confusing because the behavior of the GUI was unexpected. A normal (Windows) tree view only activates drag/drop when you actually click on an item in the tree, not when you accidentally click in the margin.

I accidentally click outside the scroll thumb all the time on my desktop, but that (usually) doesn't result in my data being reorganized--and when it does I can just hit the Undo button.

Anders Sandvig on December 17, 2008 5:47 AM

Yeah, that Google Maps web app thing that acts like a desktop app, that'll never work. People only want web apps that act like web apps damn it! And all the cool AJAX features in Facebook/MySpace/Gmail, no one really wants those. They would prefer to wait for the entire page to refresh every time they make any kind of change. Or wait for a huge page to download just to make sure the page contains every bit of data that they could possibly want. Because they would prefer their web apps to act just like the crappy 1st generation web apps that were around before they even knew what the Internet was. Pfft.

Shane on December 17, 2008 5:55 AM

I came across a Mozilla Labs project last week called Prism which, as far as I can tell, wraps a single website up in native desktop chrome and presents it as a desktop app. In that way (and if the site is scripted to react to events in the same way as the native OS) then perhaps web apps do have potential to make it to the desktop.

http://labs.mozilla.com/projects/prism/

Cirieno on December 17, 2008 5:56 AM

Nowhere near topic...
Just got to the bottom of the page and noticed it again; is the CAPTCHA always orange?

On a more serious note - although went round the trees a little - I do agree that desktop-style web apps annoy the hell outa me; although I can't wait for them to merge and all this mess will just go away :-p

Chris on December 17, 2008 5:59 AM

mmm... Considering hear it spoken link doesn't have anything specific and doesn't require my name; I'm guessing orange is just hard-coded. Nice :-p

Chris on December 17, 2008 6:01 AM

that pic makes me feel good as well as your point.

jackhatedance on December 17, 2008 6:12 AM

@chris - don't underestimate the orange! The font type and the fact it's an image has made for a very affective captcha....

bloop on December 17, 2008 6:28 AM

Glad you're touching on this. I've been working with ExtJs and this morning I was just thinking about how some clients tend to expect desktop application look and performance from their web applications that use this library.

Jorge on December 17, 2008 6:33 AM

Thank you! I've been trying to find that term recently, Uncanny Valley that is.

Roddy: Modern desktop Java apps made by anyone with even a tiniest bit of taste can be hardly distinguished from native ones.

Maciej Rutkowski on December 17, 2008 6:35 AM

Valid interesting points, as so often, but I'm disappointed about the boorishness. The packaging of your posts, too, will drive people away or attract them. For my part, cheap nudge-nudge jokes about members of the sex I happen to belong to will do the former.

Chris Waigl on December 17, 2008 6:44 AM

Too bad _some_ podcasters and their sponsors hawk frameworks for creating such monstrosities at every turn.

Daniel on December 17, 2008 6:46 AM

Good post Jeff. Admittedly I have been shooting at designing my web apps like desktop programs because I initially thought it was more intuitive for them. But I was probably wrong oh well.
BTW I would definitely like to know more about that first
chick's 'uncanny valley'. Oh man the pathetic feeling of wanting to mate with a cartoon...

o.s. on December 17, 2008 6:58 AM

I think the uncanny valley for web apps works a lot like the one for robots and CGI. Adding AJAX-y goodness works great, but when you try to get 100% like a desktop app, the problems 'around the edges' drive you nuts.

iTunes on PC is an excellent example. They brought the Apple UI to the PC and it annoys in a lot of little ways. For example, using 'shift+down arrow' to select a list of songs. Go too far? Hitting 'shift+up arrow' doesn't unselect the bottom song. It selects the song above the start of your list. Argh!!!

Bob on December 17, 2008 7:00 AM

I'm surprised you didn't take the opportunity to talk about the ridiculous avatars in the XBox XNE.

dave on December 17, 2008 7:11 AM

Man, I wish my clients would read and UNDERSTAND this post. It would make my life a lot easier.

Donn Felker on December 17, 2008 7:25 AM

Now I know why I just can't fall in love with RIAs built with Flex or Silverlight, even though those technologies themselves are very cool.

Thank you, Jeff.

Ling on December 17, 2008 7:25 AM

That shot of Jessie is worth at -least- 250 PP.

James on December 17, 2008 7:36 AM

I agree with this completely. Two cases, any web-based mail program (at least the big three, Google, MS and Yahoo) and any web-based document applications (Office clones in web-browsers).

Nicholas Paldino on December 17, 2008 7:39 AM

It turns out that all people look alike. There aren't actually that many differences from one person's face to another. This is counter-intuitive, as each of us can easily identify the face of a friend out of thousands of pictures, but that's just the point. Our brains actually recognize faces and then scrutinize them further so that we can pick out subtle differences.

What does this have to do with the Uncanny Valley? More than user interfaces, I assure you.

You see, the uncanny valley is the result of our brain recognizing something as a human face, and then paying much more attention to it. If a 3d model is not lifelike enough to warrant this extra attention, then we consciously accept it for what it represents. Once our brain starts to scrutinize the 3d model, it is going to start to recognize flaws that were previously ignored. This results in the model appearing less lifelike despite becoming more realistic.

Our brain does not scrutinize user interfaces the same way, so the idea of an uncanny value for UIs just doesn't make sense. Anything that one finds uncanny is the result of preconceptions made about how a UI should work and look, which means that this post is merely an argument to maintain the status quo.

James on December 17, 2008 7:40 AM

I experienced this reaction recently when I was shown [because I would have never tried this on a web app] that I can move events on Google Calender from one day to another via drag-drop. One half of me thought this is cool the other half of me thought this is wrong.

But perhaps this was the same reaction some had when they first dragged a Google map. What criteria is there to distinguish between Uncanny Valley and Progress?

I agree with your points that desktop apps should adhere to OS conventions, but I cannot define what constitutes what is and is not proper web app behavior. And if I can't define behavior limits, then I can only conclude this is progress. Despite my initial gut reaction.

Carl on December 17, 2008 7:40 AM

I agree that a web user interface that looks and feels like it should be on a desktop is unappealing to me. It seems to me like web applications that look like they belong on a desktop don't reach my expectations because any difference in its interaction with me is conceived as a weakness rather than a mere difference. Such as the way web applications must some times refresh in order to show updated data on a page. Although the web application may be more robust and user friendly little things like this turn me off. On the other hand if it's designed to look like a web application I will tend to understand its behavior.

Dating on December 17, 2008 7:45 AM

That is also discussed a lot in video games. Not only in characters but in scenery too, for a time now it's being discussed how the realistic video games have become less color vibrant and more grey.

Also in video games characters look so real that they feel odd and unconvincing. I feel that a lot while playing Fallout 3, I can't take the characters seriously. While in Elder Scrolls 4 Oblivion (which uses the same engine but is a older game) I find the characters a lot more convincing because they were not made to really look like a normal human.

Hoffmann on December 17, 2008 7:56 AM

This is particularly noticeable with cross-platform UI libs like wxWindows, GTK, Qt and SWT; they are often ALMOST right in a very irritating way; the departures from native behaviour become very irritating. See Eclipse on a Mac for a good example.

Robert Synnott on December 17, 2008 7:57 AM

For a software developer - yes.
For an average user - no. An average user simply doesn't care if it's real, doesn't search for differences, and for him/her it would be the best if the web application and the desktop application would behave the same, because it would be easier to get used to.

For a developer a software is close and personal, like another person for everyone. That's why it feels unnatural for him/her to use web apps that try to mimic desktop apps' behaviour. But for an average user, web and desktop apps are nothing but utilies, things that have to be used in order to achieve a goal. They don't care, it's nothing personal for them. (Sorry for breaking your heart, you just have to realise this and move on with your life. :))

Daath on December 17, 2008 8:08 AM

What are you guys talking about! The purpose and intent of Ajax and RIA technologies is to enable web UI designers with the ability to do things that would be considered closer to desktop application operations than traditional web applications.

Thats because traditional stateless web application user interfaces sucked. What are web application expectation anyway? Type stuff... submit(postback)...wait...view result. I say rock on web ui designers! Give me drag-drop, give me background updating panels(event-driven updates). I am still waiting for some of those other crusty old desktop features like great undo/redo functionality and the ability to paste an image directly into an email body, but as they keep working the technology I am sure it's not far off.

For users, web apps accel because of collaboration and accessability. Users dump outlook for web-based email so they can read their mail from home, work, school, wherever. Certianly not because Outlook's desktop user interface sucks. Users have had to trade off rich interaction for those benefits. Today, that trade off isnt any where near as bad as it once was. Today many web apps simply rock. And thats because of the energy and effort by many folks to bring rich (or desktop-like) interactions to the web. So lets dispense with the noise that this is a bad thing.

Brian H on December 17, 2008 8:09 AM

Hmm... i love itunes on my pc. The functionality is so much better than the rest of the players. The defining triumph of the apple corp.

Mark on December 17, 2008 8:10 AM

I felt the same way about the Linux desktops that came out a few years ago. They acted just enough like Windows to raise expectations, but they didn't deliver. They've gotten much better now that they're not trying to mock Windows 95 and they've moved on to doing their own thing.

I now use Linux desktops and have the same feelings about Windows ...

Data in startrek avoided the uncanny valley by being played by an actor ... so he was far enough beyond the valley to not cause the uneasy feeling ...

Jaster on December 17, 2008 8:14 AM

Perhaps the concept explains World of Warcraft's relative success over more graphically, err, intense games. Cartoonish characters and settings allow us to think of it as a game.

Interesting idea, thanks!

Underflow on December 17, 2008 8:15 AM

James @ 7:40 has hit it right on the nose.

The uncanny valley metaphor is a good one when talking about virtual representations of people. Everyone has two eyes, a nose, and a mouth, everyone has certain facial tics and expressions and so forth. Each and every one of our brains are wired to look for these characteristics to help determine whether someone is human or not.

The reason the uncanny valley metaphor doesn't apply to UI design is because not everyone has that same built-in mental model of how things should be, because not everyone is hard-wired to use the same features of the same set of apps in the exact same way. To stick with the email client example, I haven't used a desktop email app since 1999. As far as I'm concerned Outlook and Thunderbird et. al. are broken if they don't behave the way Yahoo mail or Gmail does, since Web clients are what I've based my mental model on.

Dan on December 17, 2008 8:25 AM

Mmm Dead Rising, that game was fun :-)

pablasso on December 17, 2008 8:27 AM

@Shane - There is a difference between the behavior that Ajax allows (updating without a refresh) and the visual cues of desktop-like chrome/widgets. Split panes, trees, data-grids etc all give certain expectations.

Look closely at gmail. Notice that it is a blend between desktop capability and a webby interface. It creates its own look and feel that offers rich functionality while not looking out of place.

Russ on December 17, 2008 8:34 AM

Not so sure I agree with you Jeff,

Although I found the example of the uncanny valley in robotics very interesting I'm not sure how relevant it is to UI. I think its important to remember that desktop and web apps are themselves perhaps only a decade old.

Having worked with hospital staff I've seen how they reacted to new spreadsheets designed to mimic the paper versions of documents they were used to working with. A similar 'uncanny effect' was also very evident then when the nurses focused on every difference between the new electronic systems and the paper forms they were used to.

However, with some hindsight, the reaction of the nurses is simply the same reaction 90% of humans will make when presented with change. We tend to focus on the negative.

My personal thoughts on Zimbra's tactic of mimicking Outlook is that they have chosen a solid base, one people are very familiar with, and that they can now build from this. Any complaints people may have regarding any slight differences are insignificant (in the sense that they can address any issues raised), what is significant is that a lot of people have adopted the app because it feels familiar.

I think we are in the middle of a paradigm shift. Not a revolutionary one, but a significant one. This means change and any change is certain to be accompanied with its fair share of baby ducks (a href=http://en.wikipedia.org/wiki/Baby_Duck_Syndromehttp://en.wikipedia.org/wiki/Baby_Duck_Syndrome/a)">http://en.wikipedia.org/wiki/Baby_Duck_Syndrome/a)">http://en.wikipedia.org/wiki/Baby_Duck_Syndromehttp://en.wikipedia.org/wiki/Baby_Duck_Syndrome/a)

EricFromMars on December 17, 2008 8:37 AM

When it comes to UI design, I think the uncanny valley often appears from improper use the accepted conventions. In The Design of Everyday Things, Donald Norman points out that there is no rational reason why the hot water faucet is on our left and the cold on the right but because that has evolved to be the standard convention (at least in the States) any departure from that scheme becomes problematic. Agreeing with what others have said about how humans examine faces for subtle clues, I think we also examine a UI for subtle clues within the context of it's environment. Windows vs. Mac being obviously different environments.

Part of the problem is that we have people that ignore the standard convention, place the hot water faucet above the cold and call it progress. Part of the problem is that we should have developed a whole new and different environment for web-apps and we didn't. We merely attempted to copy the existing paradigm into the new environment. We enshrine the convention when we shouldn't and throw it out when we should keep it.

It's kind of like when a client asks me to draw checks boxes on a computer generated form. They are simply dragging the old accepted convention forward and I'm going WTF! Do you know why there checks boxes on your old hand-printed form in the first place?

twmcneil on December 17, 2008 9:07 AM

Nothing more annoying than a web application that breaks the back button.

Matt McClellan on December 17, 2008 9:07 AM

I think this isn't exactly about the difference between desktop apps and web apps. We don't think all desktop apps are cuddly and all web apps creep us out, right?

Alan Cooper observed that even in desktop apps, if you change the responsiveness, even to speed it up, people complain the new version is slow. People have a rhythm to their use of software, and if the rhythm is changed, they are put off. Even with AJAX and Flex and other RIA stuff, a web app will never have the same rhythm as a desktop app.

Is our instinctive sense of rhythm the analog of our natural face-recognition senses? Does or sense of rhythm of a software UI relate to our ability to sense music?

Bill Karwin on December 17, 2008 9:27 AM

Reminds me of that horrible app, 'Outlook Web Access' for Exchange servers. Eek.

iTunes for Max is another great example.

Also, that's probably why Google Docs didn't quite catch on... Although they do have very good web-based features their product still looks too much like a desktop application to be user friendly.

configurator on December 17, 2008 9:27 AM

I work on Windows applications and we also have some online equivalents. Except for the menu bar at the top of IE they look almost exactly like. We do have the occasional user that gets confused about the difference between the due. Working online generally means you are diving into a database and not a physical file. They are flabbergasted to find out that File - Open doesn't really open the file on their desktop but the equivalent stored in the belly of the server.

While most users enjoy the collaborative nature of working with the online version the occasional users hate the slower responsiveness (because opening a 10K-row datatable over ethernet is never going to be like the desktop equivalent), enhanced security, and different layout. But I think this product perfectly fits into the online world. Possibly even better as an online application than a windows application

Joe Chin on December 17, 2008 10:00 AM

Oh my god, YES!

I've made this exact comparison before (the uncanny valley) in explaining why I hate Java applications. Swing just can't do Windows right.

Asmor on December 17, 2008 10:13 AM

Interesting article! However, I think the reason why people don't want web apps to mimic desktop apps is because

A. desktop apps are archaic compared to web apps, so no one wants a retro web experience

B. desktop apps like outlook are WORSE than web apps like gmail. desktop apps are generally cluttered and too busy, so trying to make it look like a desktop is sort of like saying you're trying to make something overly complicated and busy for the web.

those are my thoughts at least

Adam on December 17, 2008 10:27 AM

Semantic HTML, I think the webstandards people are doing the right things with html and css, by actually following the rules of html, and applying a p tag to behave like a paragraph and so forth. And a h1 tag is a heading, etc. Overall it results in faster loading pages, less bloated markup and nice, clean UI:s. I think the rules of UI design should follow the rules of HTML and then CSS. Keep 'em separated! HTML - Structure, CSS - Presentation, Javascript - Behaviour.
Pages done by webbstandards usually has kind of boxy look and a minimalistic design which I find characteristic of todays web, maybe it will become tomorrows norm and what we except of websites, now and tomorrow?

Marko on December 17, 2008 10:45 AM

That's really interesting, and pertinent, because I was looking at evaluating qooxdoo (http://qooxdoo.org/demo) on a site I'm developing.

And, whilst I was impressed by what it does I was also a little put off by it but didn't really think about why.

Nicely done.

Steve Knight on December 17, 2008 10:57 AM

That was a great post. I agree wholeheartedly, web apps should not be modeled after desktop apps. It just feels wrong to everyone. People who are used to the desktop version will find it slow and clunky, and people who are used to web apps will find it illogical, inefficient, and unimaginative.

Example: A lot of the web-based outlook rip-offs (including the web interface for Microsoft Exchange Server), open a pop-up window when you compose a new message. Why? Because that's the way Outlook does it on the desktop. As an Outlook user, I find this annoying because the simple HTML compose pop-up has a fraction of the features of the one in the real app, and it's slower and harder to use. As a webapp user, I find this annoying because pop-up windows are annoying, and now I may need to flip between windows to see all the information I need to compose the message (my address book, the original message, etc). On the other hand, web apps like Gmail which were designed without these conventions in mind feel much more natural and responsive.

Joshua Carmody on December 17, 2008 11:06 AM

Reminds me of this:
http://www.wimp.com/amazingandroid/

Kevin Fairchild on December 17, 2008 11:47 AM

I almost posted an incredibly embarrassing comment on the blog you linked to about terrible web pages. for some reason i thought, they couldnt have possibly fixed everything in the few days since jeff posted this. luckily when i went up to cite the date, i realized OH MY GOD IM A GOD DAMN IDIOT. har har. also, DONT YOU KNOW THAT THE WAY OF MICROSOFT AND ANYONE ELSE WHO WANTS TO MAKE IT BIG EVAR IS TO COPY EVERYONE ELSE THATS DOING GOOD! har. look at ford and gm. ford does it right, gm makes shitty copies. someone bought subaru, and made them produce shitty gm copies with all wheel drive. the us gets nukes, everyone else wants nukes. DONT YOU UNDERSTAND PEOPLE GET PISSED AND COPY STUFF WHEN THEY FIND OUT THEY DIDNT DO IT FIRST! hello microsoft.

Jasen on December 17, 2008 11:54 AM

also i dont understand why someone didnt copy subaru, instead of subaru copying someone. rediculousness.

Jasen on December 17, 2008 11:55 AM

The Uncanny Valley effect happens because when you're close enough to the real thing but not there yet, it triggers the get away from sick people.

It's a self-preservation mechanism. I'm not sure that it applies directly to UI design. Although I think I agree with you in general terms.

JC on December 17, 2008 12:23 PM

To quote Ronnie, well there you go again.

The history which is missing.

In the beginning, PC applications were single user, 1-2-3, dBaseII. Then these became, sort of, multi-user with NetWare and such. In the beginning, 1982, they didn't try to replicate existing computer applications, since these were (by and large) 3270/mainframe applications. There was no reason to replicate, since the first two iterations of PC applications were head and shoulders (if you knew what you were doing) above the 3270 applications in terms of UI. Refresher: the 3270 application is a disconnected, block mode, local edit application; the PC application is connected, character mode, server edit application.

Next came the *nix/database/RS-232 terminal application. This is a connected, character mode, server edit application. It was (and still is) far superior for business type of applications.

Comes the 'net and what does the browser offer? 3270 with pixels: disconnected, block mode, local edit applications. The user interface is primitive compared to what came before. The problem is that the young-uns who started (I'm talking to you Jeff) here had no historical memory to guide them. They really thought that the browser interface actually was an improvement on what came before. Then along comes Ajax, and now these same young-uns think they've invented something new. Not.

The reason that developers are willing to break the browser paradigm is that it's a sh**ty paradigm. Plain fact. They know, intuitively, that a connected, character mode, server edit application better serves the user. That it took a decade and a half for them to figure it out speaks volumes about their intellectual power.

buggyfunbunny on December 17, 2008 12:36 PM

Your point has merit, but as others have pointed out, revulsion at recognizable-but-wrong human forms and faces is different than it is for application UI. The former is ingrained while the latter is learned.

So while violating expectations can be a huge problem, they vary from user to user, even on the same OS or UI.

And -- they do change over time!!! Personally, I'm starting to find traditional web apps seem wrong because they aren't AJAX-enabled.

Marco on December 17, 2008 12:38 PM

The woman in the picture may not be entirely human looking, but I still would.

Bob on December 18, 2008 1:02 AM

Considering the Emily Project (http://www.youtube.com/watch?v=bLiX5d3rC6ofmt=18) - am I the only one here who does not get that uncanny valley feeling when watchen the video? Really, I find some of the newer robots really weird, so it's not that I am somehow unable to feel it, but this video does not instill it. It looks perfectly fine to me...

Mephane on December 18, 2008 1:12 AM

This time I don't agree with Herb, but here's what he says:

http://herbsutter.wordpress.com/2008/12/17/rich-gui-saasweb-20-apps-should-not-be-considered-harmful/

pyrtsa on December 18, 2008 1:38 AM

@Macie: Modern desktop Java apps made by anyone with even a tiniest bit of taste can be hardly distinguished from native ones

Care to give me an exampleor two? - I'm happy to be converted...

Roddy on December 18, 2008 2:03 AM

Stackoverflow UI: +1
Colorful, no menus and 3D-shadowed Windows widgets. Nice.
Links, hovers, spans and divs.
Loads fast, stays out of the way.

Looking the pic, I am tempted to say that stackoveflow UI is very texty ;-)
(but please make the inset/outset borders flat...)

Also see Centraldesktop for another example.
Basecamp and the 37signals apps (not all, but some are really good looking...)

SOiscool on December 18, 2008 2:14 AM

I always got the impression that BuggyFunBunny was some old, pissed off computer programmer that resents new technology because it is too easy and misses the days of punch cards and vacuum tubes...

...Fortunately, his post pretty much confirmed it...

HB on December 18, 2008 2:33 AM

Jeff, can't agree more especially on the webmail part.

Nick Masao on December 18, 2008 2:39 AM

I think this explains my intense hatred for voice-aware telephone systems (For Accounts Receivable, say 'Accounts Receivable'. For Accounts Payable, say 'Accounts Payable.') These things also have jokey-friendly talkin' to the machine mannerisms (Tell me which department you need.)

Ugh. You are not a sentient being, you do not deserve a first-person pronoun, and we are not talking. You are a machine and I want to press a BUTTON dammit. You do not DESERVE human speech. As soon as I hear one of these things I start mindlessly mashing keys. NOISY MACHINE MAKE HULK SMAAAAASH.

Paul Souders on December 18, 2008 2:43 AM

Who is the woman with the big ... ahmm ... tallent in the first picture?

Mecki on December 18, 2008 3:47 AM

The snozzberries taste like snozzberries.

Echostorm on December 18, 2008 4:33 AM

Perhaps the reason people might dislike web UI looking like desktop application is because the way we approach these applications is different. Desktop applications are uniform looking, clinical and basically tools. Web sites, on the other hand, can be much more. People do and want to attach more personal feelings on the sites they spend their time on. This follows from the fact, that you often interact with people when you're online, and the applications you use have the same function. This bonding process becomes much more difficult if they look as clinical as the desktop applications.

Sami Tikka on December 18, 2008 4:47 AM

Good timing. Microsoft recently changed their Hotmail UI from something imitating desktop software to something more Web-ish in the way that gmail is Web-ish.

tippy hedren on December 18, 2008 4:49 AM

Make a post on Flex/Silverlight as a follow up. How does that fit in for you

Steve on December 18, 2008 5:18 AM

I actually have a web application that looks like a desktop one and I believe it it one of its strength ( http://www.rw-designer.com/online_icon_maker.php ). Then again, it is fairly simple and things may change if someone tries to make a complicated online application look as if it were on desktop...

Vlasta on December 18, 2008 5:29 AM

...... dude? What happened with that Jasen guy?

HB on December 18, 2008 6:25 AM

orange

dave on December 18, 2008 6:29 AM

If this article is listened to and followed progress would die. This kind of thinking would have all of us still typing commands into blue or orange texted monitors.

random guy on December 18, 2008 6:36 AM

oops - green or orange not blue or orange - wow the 80's were a long time ago.

random guy on December 18, 2008 6:41 AM

I'd work for that fembot! I dunno...the characters looked pretty real in resident evil degeneration.

Joe Beam on December 18, 2008 7:41 AM

Woo hoo! Nice for mentioning Understanding Comics.

wallyqs on December 18, 2008 8:08 AM

This is a very interesting topic.

I have noticed this oddity as well in my own personal experience; I always felt that applications that look like desktop applications felt sluggish and cramped, and I usually didn't like them.

But I could never figure out exactly why. This topic actually seems to make perfect sense.

TM on December 18, 2008 9:02 AM

nice article. I was introduced with uncanny valley in an article in this month's Scientific American (Indian).

amantur on December 18, 2008 9:24 AM

I think you're dead on here Jeff. When I can't navigate a Java open file dialog by typing in paths and hitting enter, or the common folders on the left aren't the custom ones I set, or Explorer's context menu items aren't supported, I tend to get a little angrier than if it didn't pretend to be a Windows application in the first place. Great parallel.

Christopher Galpin on December 18, 2008 9:25 AM

I disagree with you about the web apps. While that particular app might be a bad clone, web apps like Gmail and Yahoo Mail are great and function much better than Outlook and other desktop based programs. It depends on how you do it. Trying to make it LOOK LIKE a Windows app is obviously not a good idea, anyway, but making it function as a desktop app (e.g better UI, drag drop, tabs, etc) are definitely a good idea. If you do it gracefully, i.e showing loading graphics smoothly, people will actually get to enjoy the tiny flaws of web apps

Ali on December 18, 2008 10:04 AM

I agree with all that has been said about how the metaphor is stretched and about how the uncanny valley doesn't really apply to UI.

However, this did make me think about how people might feel about desktop applications that use the web for content and/or interaction, such as widgets, gadgets and such. I've always felt like my model or my idea of what a desktop application should be is being broken by the interactivity or the connection that these apps have with the internet and how independent they seem from the data only on your computer. This is really a feeling I have welcomed no matter how unfamiliar and I do feel like we need the paradigm shift and it will be uncomfortable because of our models.

Quartermeat on December 18, 2008 10:47 AM

While it's a clever application of the uncanny valley theory, uncanny doesn't apply here in the same way as it does with humans. The visual appearance of another person provokes a much more visceral and emotional reaction than the visual appearance of anything non-human.

Let's say someone made a trash compactor with an appearance and interface very similar to that of a dishwasher. Upon using it, would your reaction be one of revulsion? Probably not. There's nothing particularly uncanny about it. Odd, perhaps. You may ask Why in the heck does it have a Rinse button? Is there anything useful about it? You expect that the designer had reasons to do it that way, and your disorientation comes from those reasons not being readily apparent.

An important question to ask is: What is the point of the resemblance? Why make a robot look like a person? My guess is that it was initially so that people would feel more comfortable around them, and that there's not much that's directly functional about the resemblance. Why make a web app look like a desktop one? In my opinion, that's incidental. There is technology that has long been available to desktop apps that only became available to web apps relatively recently.

I've been an Ajax engineer with Zimbra since the early days. I've never been an Outlook user - my last heavily-used mail client was exmh. At no point have I thought This is too much like a desktop app, we'd better back off or This is not enough like a desktop app. Instead, it's more like Given the technology available, how can we deliver a better user experience?

As pointed out earlier, the web is young and evolving. There's really no reason to limit improvements in functionality simply because they are changes from what people have been used to. Moving the hot water faucet to the right would not improve its functionality, and it would violate long-held user expectations. Adding (for example) drag-and-drop and tooltip features to web apps improves their functionality.

One example of the difference is left-click actions. The HTML visual presentation of that is a link; the typical Ajax method is something that changes the cursor when hovered over. While there are things about Gmail that I like, I feel overwhelmed by the number of links presented. On logging in, I see at least 50 of them - for example, each folder is a link. Having all those links feels busy and unnecessary to me. Note that the messages themselves are clickable, but not as visual links. The cursor tells you that you can click on the message. To take the link idiom to the extreme, they could have made each message's subject a link to the message, but that would have plunged them into a cluttery and unappealing valley.

The best example of an uncanny valley involving email was some client (I don't remember the name) that used animated scenes as a metaphor. For example, there was a pool scene where an incoming message was represented by a babe swimming up to you. Now that was creepy.

Conrad on December 18, 2008 11:52 AM


It's interesting for me since I really love Zimbra. I dropped desktop app for mail and will not go back.

The browser or the windows manager is just a container. If the content is good let it be in one or the other... it doesn't matter for me (same goes for badly designed apps).

Maybe I read too much Asimov where robots were like humans ;)

Raph on December 18, 2008 12:23 PM

This is why I use Yahoo Mail Classic.

The modern Yahoo Mail is a UI disaster.

James on December 18, 2008 12:35 PM

you basically lost me just after that picture of the chick with big tits..

Aussie Dave on December 18, 2008 12:49 PM

More comments»

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Content (c) 2009 Jeff Atwood. Logo image used with permission of the author. (c) 1993 Steven C. McConnell. All Rights Reserved.