Web Apps and the Uncanny Valley

A valid point made in this article is that it’s deceptive for Web application to masquerade as something it’s not–ie. a native application–because it violates the instincts that the users have acquired based on context.

When I use my Ubuntu computer, my brain goes into Ubuntu context. When I switch to my MacBook, there’s a conscious change of context: I start using Apple’s Command Key combinations, for example. That’s why I look for MacOS apps that feel like MacOS programs. It’s not hard to change context; it’s hard when the  behaviour doesn’t fit the context.

What I like about Gmail is that it uses some of the same ideas from applications like Outlook, but the interface is strongly based on the context of the web browser. That means that there are a lot of things Google added that made sense for someone using web mail–such as the Webclips or Google Talk built-in; and also that they avoided trying to do the drag-and-drop things that didn’t make the same intuitive sense.

Still, web developers aren’t as limited as they were before, and as MacOS, Windows and Unix have stolen relentlessly from each other, we should expect Web Apps to copy from the offline app world. The main thing is not to falsely imply via the interface that the web interface reproduces a native interface more faithfully than it does. The Uncanny Valley effect isn’t just visual: it’s most frustrating when the visual metaphor breaks down.

An important concept in design is affordances: the obvious characteristics we can intuit about an object from its design, just by looking at it or even feeling it. A door knob affords a turning and pulling motion, whereas a flat plate suggests pushing. When you’re used to certain appearance (blue underlined text) in a certain context (web pages) affords a certain action (eg. clicking sends you to the linked page), it becomes a matter of instinct.

In Windows, you learn that certain objects can be right-clicked, and certain actions can be undone. So if your interface looks like a Windows app, then users will be disappointed when they can’t do those things. Not to mention that MacOS users may not have the same expectations.

The solution isn’t to avoid adding new features: it’s to keep the interface consistent, and to keep in mind the context of the web. A great example is the original PalmPilot. Rather than trying to make a tiny, feature-poor knock-off of an existing desktop operating system, PalmOS created a whole new way of relating to small devices. Rather than disappointing users by implying expectations that couldn’t be met, they created a new context. Similarly, the iPhone uses a specialized interface that’s different from the desktop interface, not just in behaviour but also in look.

Bottom line? Here are my guidelines for web app design without Uncanny Valleys:

  1. Do include features like drag ‘n drop, cut ‘n paste, right-click context menus, etc.
  2. Don’t make your user interface look too much like a Windows or Mac application.
  3. Do copy some of the common design features of modern apps, like a File/Edit menu where appropriate.
  4. Don’t forget it’s a web app, and don’t try to convince the user that it’s not.
  5. Do embrace the advantages of being a web application, such as links, working back buttons, mashed-up web content, etc.