Realism in UI Design | Hacker News Reader

Realism in UI Design

ignorethecode.net

324 pointsugh57 comments

I always wondered what the VLC cone was about. This prompted me to finally look it up. Interesting:

On day, people from the VIA association (VIA is a students' network association with many clubs ... amongst those is VideoLAN. More info here : http://www.via.ecp.fr ) came back drunk with a cone. They then began a cone collection (which is now quite impressive i must say). Some time later, the VideoLAN project began and they decided to use the cone as their logo.

http://www.nanocrew.net/2005/06/23/vlc-cone/ / http://forum.videolan.org/viewtopic.php?t=9792

Somehow that reminds of the uncanny valley, the more human-like a robot becomes, the more one starts looking for it's errors in details. Same with computer graphics, video games - the more realistic the characters are, the more you start looking for things that are not right - for example - eyes, but no focusing, or moving. I worked long time ago on Metal Gear Solid port to the PC, and we made all eye textures twice better, Kojima talked with us only once through the whole project, and he was not happy with our new eyes in the game. He said, that the game (back then) did not had the technology for the eyes to move around, and focus, so their team decided to blur them - this way you can't spot the problem - it was masked.

Exactly. Past a certain level of detail the brain flips from the conceptual to the specific.

More on the "uncanny valley": http://en.wikipedia.org/wiki/Uncanny_valley

This video explains the uncanny valley really well :

http://www.youtube.com/watch?gl=US&v=FKTAJBQSm10

That's why nethack has such a captivating UI.

One of the better design related articles I've read lately. Good way to illustrate a problem that can otherwise be hard to explain.

hm... i came away with the opposite opinion. how do i know that the example icons he showed hit the "sweet spot" between too much and too little information...rather than everyone being trained to recognize those icons.

i'd rather see a user study with a control before i jumped to any conclusions.

often times people call a UI "intuitive" when what they really mean is "familiar."

You don’t. And he doesn’t claim that, does he?

The author of the article has previously often advocated user testing, not trusting your gut.

Research, with 'unusual' icons, shows that some icons are more confusing than others. Specifically, icons that have too few or too many details. Now you could argue that a certain amount of detail has become the culturally entrenched norm and that such research still doesn't prove a thing, but then the burden of proof shifts to you, to back that statement up with an experiment. After all, it also simply makes sense: with too few details, you need to choose from all possible details you could add to make sense out of the symbol. On the other hand, with too many details, you need to choose from all possible details you could remove, before the main point stands out. You're just trying to minimize the amount people have to think.

The only "intuitive" interface is the nipple. After that it's all learned. -- Bruce Ediger

With that said, we all know an intuitive interface when we see one. It's just too difficult to separate an enormously complex and highly context-sensitive technical process that we've learned from some kind of ideal optimum. Saying a design is "intuitive" is analogous to saying one Turing complete language is "better" than another.

Ever since I've had a kid, I've felt that the nipple quote is bullshit. Infants have to learn how it works at first when starting breastfeeding. They don't just know how it works fresh out of the womb. The instinctive part of the process is that the baby happens to have a natural desire to suckle stuff - nipple-shaped or not.

As I understand it, most babies seem to just know. My oldest took a month to figure out the whole breastfeeding thing. I have teased him that he was a "stupid baby". The reality is that he seems to have less instinct than most folks. This has its good points and bad points. But I did not see a lot of the "normal, expected" baby behaviors until I had my second child.

In short: A sample of one does not disprove a generality.

There's no such thing as 'intuitive.' An intuitive design just means that it fits the user's mental model well, which is just a broader way of saying 'familiar.'

First time i've come across a decent design article myself, personally.

I really liked it. It was focused, and articulated very well.

Ignore the code is a pretty good design blog in general (http://ignorethecode.net/blog/)

The Scott McCloud references are perfect for this topic. I wish I still knew where my copy was -- one of my favorite professors in college assigned it for an early design class, and it certainly never touched my semester's end sell-back pile. It's more than worth a re-read.

Scott McCloud also did the comic book for Google Chrome [1] I love the way complex ideas are explained in a simple manner in that comic book. I do show it my non-programmer friends to explain what goes on under the hood of a browser.

I wish more programming projects were documented in this way.

[1] http://www.google.com/googlebooks/chrome/index.html

I do show it my non-programmer friends to explain what goes on under the hood of a browser.

Really? I read the first few pages... it gets fairly technical. I don't think most of my non-programming friends know what a thread is. If they have some vague idea, they certainly don't know the difference between a thread and a process is.

i wish Google could put that into Fast Flip.

Let me explain this concept using an entirely unscientific graph

Then he includes a bell curve with confusion on both outlying sides.

After reading so many black and white posts, "This is the right way," "Do it this way or I will kill you," or "That's lame," it's refreshing hear, "Use your judgment and find the sweet spot." A bell curve is the perfect illustration.

Thank you, OP. This is advice that applies to alot more than just UI Design.

Besides the useful contents I enjoyed this:

>If you see a typo, a spelling mistake, an error, or any other issue, please tell me about it by opening a case in my issue tracker or by sending me an e-mail.

Impressive, but it would be better if the newly opened bug had a link to the page you're raising the issue about.

Good article, though he makes it sound as if there is an actual optimal amount of detail that you can put into an icon, while in fact it's very dependent on the context.
For example the right-most "house" icon looks very housey to me, because I could gather from the line of icons that it was supposed to depict a house.
When building interfaces it's funny (or not, depending on the pressure) to find that users interpret the icons in completely novel ways. For example: trash cans are interpreted as brushes because someone expects the paste button at that position.

When building interfaces it's funny (or not, depending on the pressure) to find that users interpret the icons in completely novel ways.
Which is why I always think - do I really need an icon here, or should I use text?
The worst example I have come across was a package we took over where there was an icon of a dog. Incredibly, this was supposed to be "Fetch from database" (dog, fetch, geddit?). Even after days of using it my brain still locked up looking at the damn dog - imagine my poor users who only had to interact with the software occasionally. Switching the icons to text cleared up any confusion.
Unless screen real estate is really at a premium (eg iPhone), I prefer to see text, and any application that gives me the choice (eg. Firefox) I immediately configure to do so.

Only marginally related: how often do people use the "home" button on their browsers? Is it fair to hypothesize "never"?

I use it all the time, my homepage is a little document I have in my dropbox with a search box and links to all the sites I commonly visit.
A bit redundant these days perhaps, but it still works for me.

Redundant only if you use just 1 browser. Second: it's a piece of personal art (pop-art).

In chrome, I have unchecked "always show my bookmarks toolbar" such that my home screen is my top-8 as well as my bookmarks toolbar. I use it all the time if I want to recycle a tab instead of opening a new one.

I never saw that feature where when you hide the bookmarks toolbar, it comes up on the new tab page. Vertical space reclaimed!

In Google Chrome, the new tab page is actually quite useful, so I use the home button all the time.

I usually open a new tab when I want that page, instead of clicking the home button. Often closing the current page and opening a new one just to get to it. A bit inneficient now that I think about it, but I don't think I'd mind to see it gone.
The home button on the Steam client, otoh, I click fairly often. I guess it's because it doesn't have an URL bar.

I use it all the time to get back to iGoogle, which is my starting point about 60% of the time.
EDIT: Correction, I don't click the actual home button, but I execute the same command with a mouse gesture (via the unfortunately named StrokeIt).

It's a never in my world. My "Home" page is usually a blank screen, and with FF I customize my tool bar never to show the "Refresh", "Stop", "Home" and "Go", and the "Search" box (Essentially my URL address bar stretching almost end to end. I do have the Back-Forward buttons on display, but I never use those either)

The little features of the FF buttons work well for me, though.
For example, you don't need a New Tab button (it's not enabled by default anyway) - middle-click the Home button instead.
And if I want to create a new tab with the current URL, I middle-click the Refresh button.

You don't need to middle-click the Home button, press Ctrl-T instead. :)

Corporate Intranets usually have Home bound to some Kiosk style information page. This is the starting point for most corporate application journeys in this setup.
So it can be quite useful for staff to got straight to the Homepage no matter whose terminal they are sitting at.

My "home" button is set to google.com, and I use it a LOT. I started doing this in 1998 or 1999 and never got used to using the special search input that most browsers have by default now; I finally just turned it off to reduce clutter.

I use home button to open the Google homepage whenever I need to close all tabs in browser without closing the browser itself. So the Google homepage in that opened tab is like a placeholder. Anyway, I have no specific reason for doing this - it's just a habit.

I noticed a coworker clicking it all the time to get to Google to search for something. It drives me crazy all the time because he should have just typed in the search query in the URL bar.

He doesn't get to see the cool doodles then, though.

I use "home" all the time in conjunction with middle-click. Google is my home page, so when I middle-click on the home icon I get a new tab, ready to search.

You actually type searches into a text box on a webpage?
Why not use the search box in your browser? In Chrome the address bar is a search box.

You actually type searches into a text box on a webpage?
I figured someone might mention this, and probably make me sound like a Luddite in the process. :-) The short answer is that I use both. If I'm at the keyboard, I will do command-T command-K to use the search box in a new tab, but often I'm using the mouse, in which case middle-click home is more convenient.
In Chrome the address bar is a search box.
I don't use Chrome; I use Firefox. The address bar in Firefox typically goes to the first Google hit for the search terms in question, which is often what I want, but it isn't a general search.
Now you can bring on the You actually use Firefox? comment. ;-)

For one, my girlfriend does it all the time. I haven't observed other users recently, though.

I use it at work but not at home. At work, after searching the Internet for information I need to do my job, I routinely need to return to the departmental homepage of the company intranet. If a few clicks of the back button don't do it, I have to hit the home icon.

After reading, my mind was drawn to road signs which share the same principle. Seeing a sign with a picture of two people standing awkwardly would not put "crosswalk" into my mind. Also, I notice that the color of a sign itself is significant. The red X in the corner of my browser shows color plays a role here too.

I noticed an assumption that he makes that's worth pointing out. All the examples he gives where overly realistic elements are distracting are interactive ones, things you're supposed to click on, switch off, etc. However it can enhance things that are read-only so to speak, like information dashboards.
For example, Lexus's new LF-A sports car has digital gauges that sport very realistic-looking dials that imitate the analog ones they replaced, with a few enhancements like turning the face white for sport mode, turning it red when the RPMs hit the redline, etc.
Quick video clip of it in action:
http://paultan.org/2009/11/13/lexus-lf-a-has-one-really-cool...

"Perfection is achieved, not when there is nothing left to add, but when there is nothing left to take away...."
-Antoine de St. Exupery, Wind, Sand and Stars, 1939

Unfortunately a recent trend in native app design is to remove more or less essential elements, such as the menu bar. This makes it a lot harder to scan the UI looking for a particular piece of functionality: you have to guess which button is actually a menu, and which submenu of that menu the thing you're looking for is hiding under.
For example, Chrome doesn't have a nice and simple Bookmarks menu like FF (or Favorites in IE). You have to waste an entire chunk of vertical space on a "Bookmarks Toolbar" before you can access the button which is actually a menu, under which the bookmarks are hiding. One of several reasons I don't use Chrome.
There are lots more examples in Windows Vista and Win7. Take wmplayer: how do you open up a URL for streaming? It's hard to find that kind of functionality in the visible UI, because it seems not to be present. Instead, you have to use the context (!) menu on some of the window chrome (!!), and you can see that they've squished what used to be the main menu bar into the context menu. The UI actually ends up being more complex (it's harder to get at the features), the only "benefit" being that the application, on the surface, appears to do less.
Not to mention the now-fashionable ribbon toolbars, used in Wordpad and MSPaint - they've changed what used to be a modeless UI paradigm, i.e. menus, into a mode-based one with switching tabs. In many ways it feels like a step back into the 80s for me.

This makes it a lot harder to scan the UI looking for a particular piece of functionality: you have to guess which button is actually a menu, and which submenu of that menu the thing you're looking for is hiding under.
Completely agree. These overly minimal interfaces are great if you only use the most basic functions (open file, pause, play, stop) or already know what you are doing. However, if you need to figure something out its pretty horrible.

Anyone else hears that in Nimoy's voice?

Nope -- David Carradine as Kwai Chang Caine.

This is all true, except for audio software (esp. plugins). Then the rule is to make it super-realistic.

It's the convention to use realism in audio software, but that doesn't necessarily make it an effective interface.
It reminds me of the bizarre interfaces in Kai's Power Tools:
http://en.wikipedia.org/wiki/File:Kai%27s_Power_Tools.jpg
At the time, artists gushed over how fun and innovative the user interfaces were, but such interfaces are rare in today's graphics software. Few people want an interface where each dialog is a little puzzle, where you can only have five presets because that's all that the UI designer thought looked good in the layout, or where the dialog's background exerts undue influence on your choices of color or texture.

Sometimes the most difficult thing is to know when to stop adding features.
It's even more difficult when the designer has complete creative control. that can lead to disaster!

I used the same illustration to point out a similar phenomenon in code: http://bit.ly/76zHEQ

Great article. This is why symbolism is so important. You reduce the cognitive load to the absolute lowest level while still getting your point across, so it takes less time to interpret.

Reply on news.ycombinator.com