Halloween weekend, I was at my family’s home in Illinois, playing with my sister Aleksa. She’s eight years old and crazy about video games. I’ve been teaching her to play the old classics from when I was her age.
Some of the most innovative user-interfaces are found in video games. Why is that? I have a theory.
Users of business/productivity software complain loudly when an interface differs from what they’re used to. Rightly so — time spent learning an unfamiliar UI is time not getting work done. Business software is rightfully cautious of UI experimentation.
Gamers, in contrast, are willing to invest time and effort in learning a new, unfamiliar game. Novelty is part of the value. Gamers will learn a specialized interface, if it’s efficient and well-suited to the tasks the game requires.
So I like to analyze the UI of games to see what lessons they have to teach. Even a very old game may hide a great idea that has been forgotten — or never learned — by the wider world of software design.
Today’s example comes from The Legend of Zelda (copyright 1987, Nintendo):
(Image used without permission)
The Legend of Zelda plays a distinctive eight-note melody when you discover a secret — e.g., finding the one loose block that can be pushed to open a path. (If you’ve played a Zelda game, you’re probably hearing the melody in your head right now.)
This “discovery fanfare” is interesting from a UI perspective because of how much it manages to communicate. Most video game sound effects are stimulus-response: whack something with your sword and it makes one noise; pick up a coin and it makes another. But the discovery fanfare is semantic. Not a response to an elementary action, but an indication of what that action means to the ongoing story. It’s like the game is winking at you, to say “Yup, you got me — that’s the answer.” It means not just “You found a secret”, but also, “I understand what you just did.” “This thing you found? It’s important.”
Hearing the discovery fanfare makes you feel smart. It’s about the strongest positive feedback that it’s possible to get from a video game. Such reinforcement is a big part of what makes The Legend of Zelda so addictive.
But how is that relevant to non-game UI design and/or web design?
Positive feedback is important. It lets the user know that the system “understands” what they’re trying to do. Lack of feedback creates pure frustration.
Watch any first-time user of the Unix command line. They type a command, hit enter, and nothing visibly happens. At that point, many people get confused or worried. What happened to the command? In fact, silence means that the command executed successfully. But this is a hard idea to grok, because it’s contrary to all our instincts.
On the Web, how many times have you seen a message like this one?
“Please do not click more than once – it may take some time for the form to be processed.”
Why are users clicking more than once?
Maybe because the first time we click, nothing happens. Nothing visible or audible, anyway. In fact, an upload is being processed, but silently and invisibly. Since there’s no feedback, our instincts tell us, “You didn’t click it hard enough. Better do it again”.
The “Don’t click more than once” warning in text is ineffective. It’s just not strong enough to overcome human nature.
I bet we’d send many fewer duplicate POSTs if some kind of visible or audible congratulations happened in response to clicking the “submit” button. Not for every form — just the large multi-page ones. After all, completing those forms is at least as difficult as solving a Legend of Zelda puzzle, and a lot less fun. Don’t we deserve some celebration afterwards?
November 18, 2008 at 2:57 am
Here’s an interesting presentation about “what can we apply from games to traditional apps”:
http://lostgarden.com/2008/10/princess-rescuing-application-slides.html
It’s a good set of slides
November 18, 2008 at 3:59 am
Most of the best website UIs don’t have that problem. They tend to do two things when you click a button or link that will take a moment to do something:
1) Create the area where the new content will appear, and put some animated icon in it that gives the impression of “working on it, give me a moment”.
2) Disable or even remove the thing you clicked so you can’t do it again.
November 18, 2008 at 5:09 am
Excellent post Jono. Excellent as usual.
November 18, 2008 at 6:01 am
If this was Slashdot, I’d mod you Insightful.
November 18, 2008 at 7:01 am
Hi Kevin,
That presentation you linked to was SUPER AWESOME. It’s the best new HCI article I’ve come across in a long time. Thank you!
November 18, 2008 at 7:18 am
And if something takes a really long time, put up a progress bar.
Why don’t any of the browsers do this (properly, with a clear and obvious progress bar) for file uploads?
November 18, 2008 at 8:15 am
There’s something else at play when people click again on submit buttons. When a user is browsing around, he takes waiting on a page load for granted – perhaps he’s even unaware of the page load wait, as this is already part of the ‘normal’ internet experience. But when something important is submitted, suddenly the expected behavior is sent to the background and the user gets some very unreasonable expectancies: direct feedback and confirmation.
That’s why some websites choose for option 1 of comment #2, and it might be a good idea to incorporate similar feedback in Firefox when submitting a form. Although, some websites misuse the submit interface, I guess it would be hard to do it right.
Option 2 is an ugly hack btw. that has no good interaction but leaves users frustrated – the user learns nothing about /why/ the button is disabled at least, and when the server actually /doesn’t/ respond correctly, it’s even more frustrating.
November 18, 2008 at 3:07 pm
I’d like to see my gui get used and dirty. My back button should get scratched and smudged as I use it the most.
It should also grow a little, modify its self depending on my click rate.
Perhaps someone could code a firefox plugin that is a game — find the mouse guesture add-on and install it – biddle-boop! now uninstall it for 20 points — biddly-boop!!
Then we all get a high score in the browser window, novice, adept, crazy cool, mage, wizard etc! as you get better.
how hard could that be? Add an online score board, facebood widget etc…
monk.e.boy
November 18, 2008 at 7:47 pm
voracity asked:
> And if something takes a really long time, put up a progress bar.
> Why don’t any of the browsers do this (properly, with a clear and obvious progress bar) for file uploads?
At Mozilla we wish we could do this, but it’s apparently not as easy as it sounds. I think it has something to do with the HTTP POST protocol not giving any notification back to the browser until the upload is done. This is why lots of websites use custom file-uploaders written in Flash. |:-(
November 18, 2008 at 8:00 pm
By default, Quicken makes a “ka-ching!” sound every time you enter a transaction. I immediately turn this feature off.
The difference between this and the Zelda fanfare is that entering a transaction is an utterly normal interaction — nothing special about it at all. Now, if Quicken played a fanfare when my monthly expenses were under-budget — that would be cool.
November 19, 2008 at 6:23 am
I like it when the button disappears when I click it – I don’t have to wonder if I did what I meant to. I like it even better when the button disappears (or becomes unclickable) and some sign of work-in-progress appears.
November 20, 2008 at 6:30 pm
First, I love this post’s title. As for the various fixes for the problem at hand, yes, there are many ways of fixing the problem, such as event sounds (which are useful for many reasons), but they don’t really deal with the root problem: the inhumane way of “navigating” from one page to another. You view one page, click on a link, and, poof!, the page disappears, replaced by a new one. There’s absolutely no attempt at helping the user build a mental model of what’s going on, visualize the relationship between the various pages in the history. Unlike Link, who can return to the room from whence he came by simply using his innate spacial skills to walk to the door, one browsing the web has to learn to use a special button—what Tufte would call ‘administrative debris’. Even worse, during the transition period, the user is neither here nor there, and interacting with what is currently displayed on the screen sometimes works and sometimes doesn’t. (No wonder I open links in background tabs so often!) These issues go back to the very beginning of the web, back to when systems were way to underpowered to solve this issue in a humane way.
I think it’s obvious that the solution to all this would involve not making content disappear. Instead, pages in the history could be displayed one right after the other, as if part of one long page. Clicking on a link would initiate an animation where the current page dims and the browser scrolls down to the new page, placed right after the current page. Not only would this remove the ambiguity of what’s going on, the user immediately knows how to get back—without the need for strange buttons and administrative debris. Just like Link can simply walk back to the previous room, the user can simply scroll up to the previous page. As for ideas about how this would look, I’m thinking something like Google Reader’s expanded view, Bret Victor’s Scrolltabs demo (only, instead of tabs, we have page in the current tab’s history, which I think is much better), or TiddlyWiki’s way of opening pages in-place.
The more I think about it, the more I realize that such an approach can solve many other problems. Any thoughts?
November 22, 2008 at 11:30 pm
[...] IT’S A SECRET TO EVERYBODY. « Not The User’s Fault (tags: music) [...]
January 5, 2009 at 8:01 pm
[...] ela lembrei-me de um artigo que eu havia lido há alguns meses atrás, um artigo que falava sobre a importância do feedback positivo, numa associação entre jogos e programas de computador (ou [...]