Realism in UI Design

by thmzlt on 5/9/2011, 3:43 PM with 35 comments
  • by extension on 5/9/2011, 9:08 PM

    The perfect example of this is an old version of the BlackBerry UI that looked like this:

    http://i.imgur.com/FypcA.jpg

    Fortunately, they wised up and the next version looked like this:

    http://i.imgur.com/3o2CF.jpg

  • by sambeau on 5/9/2011, 5:17 PM

    This article was badly missing the word:

      'skeuomorphism'
    http://en.wikipedia.org/wiki/Skeuomorph

  • by rglover on 5/9/2011, 4:56 PM

    Invaluable information for a UI designer. As I'm a bit of a novice in the field, I can say it is a struggle at times to pick out the right iconography and dictate what you want the user to accomplish. This article definitely helps to clarify that process. It also mentions a book worth reading which seems quite interesting: http://en.wikipedia.org/wiki/Understanding_Comics

  • by zbowling on 5/9/2011, 8:16 PM

    This article is pretty decent, but have you seen the homepage for UXMag? http://uxmag.com

    It has some serious problems. My eyes glared over the entire thing and I didn't really catch much. The boxes don't work and I didn't consume anything. They need some usability testing bad.

  • by earnubs on 5/9/2011, 7:55 PM

    Everyone loves the Apple UI, therefore everything the Apple UI does is an axiomatic truth of UI design.

    Except... maybe not. The trash can icon on OS X is photo realistic. The HDD icon is photo realistic. Transmits icon is a pretty detailed truck from where I am sitting. I waaay prefer Chrome's shiny & detailed icon to the flat simpler one... et cetera, et cetera.

    UI design articles have a tendency to be a little lazy on the science IMO, but I think that's a reflection on the fact that UI design sits between art and engineering and it's hard to be a master of both.

  • by bostonpete on 5/9/2011, 5:18 PM

    I'm no designer (though I have put together a handful of icons in my day), but the part about too much realism in an icon seems fairly obvious. Are overly-realistic icons actually a problem? If so, a few real-world examples might have been more useful than the fully rendered house icon, which seems far-fetched.

    Also, I don't really agree with the comment that the icon shouldn't include any details other than the bare minimum needed to convey function. Things like shading/shadows can give icons a more polished look. For example, I wonder if the author would argue that the red/yellow/green indicators in his home button example shouldn't have shading or specular highlights because that's just adding unnecessary detail.

  • by aw3c2 on 5/9/2011, 7:50 PM

    I find it remarkable that the "Apple toggle button" is shown the wrong way: http://www.uxmag.com/uploads/realisminuidesign/toggles.png

    The real one is set to the left while the others are on the right, or am I once again misinterpreting this button? I never ever understood their design and they utterly confuse me wherever I encounter them. Is it "On" if it shows "On" or does it mean I can click "On" when it is shown. Aaaargh.

  • by dylanrw on 5/9/2011, 4:36 PM

    The say so at the end of the article, but it's a repost (original: http://ignco.de/240). Still all valid points though.

  • by jazzychad on 5/9/2011, 10:11 PM

    Previous discussion from original article: http://news.ycombinator.com/item?id=1067333

  • by kadavy on 5/10/2011, 3:20 AM

    I was just writing a bit about realism for my book the other day. Interfaces, such as Mac OS X's Aqua, actually represent a sort of "hyperrealism," with buttons that are impossibly juicy, reflective, and glowing.

    It's funny, because interfaces have always represented reality in a metaphorical sense (desktop, window, document, trash), but now we take it up a notch to represent things that couldn't actually exist.

  • by weixiyen on 5/10/2011, 3:34 AM

    tldr; uncanny valley

  • by duiker101 on 5/9/2011, 5:19 PM

    i learned some great stuff, manny thanks i would love to seemore artcles like this