6 ms·

Realism in UI Design

170 points by thmzlt 15y ago

dylanrw 15y ago
The say so at the end of the article, but it's a repost (original: http://ignco.de/240 http://ignco.de/240). Still all valid points though.
rglover 15y ago
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 http://en.wikipedia.org/wiki/Understanding_Comics
- moultano 15y ago
  That book is truly excellent. We used it as a textbook for a drawing class in college.
  - mortenjorck 15y ago
    Indeed. It's versatile, too: I actually had to read it for one of my visual/interaction design classes.
    - mambodog 15y ago
      It's also recommended in the Games Art course at my university, and I've seen it referred to among games industry people several times.
sambeau 15y ago
This article was badly missing the word: 'skeuomorphism' http://en.wikipedia.org/wiki/Skeuomorph http://en.wikipedia.org/wiki/Skeuomorph
- bitwize 15y ago
  One place where skeuomorphism definitely comes into play is in the realm of digital audio software. If you are building systems to mix digital audio, for instance, you will not ship a single unit if it looks like anything but an old analog mixing table. It may even be an old analog mixing table, except instead of controlling voltages on line-outs it is rigged to spew numbers into a DSP to adjust the gains of various digital signals. The reason why is because there is an entire tradition built up amongst sound engineers of mixing music by listening and feeling, rather than looking. And if you present a different interface to these people, you are throwing that knowledge away.
  - deleted 15y ago
    [deleted]
  - hammock 15y ago
    Propellerhead's Reason is great DAW software where everything is designed to look like its analog components. To the point where you actually have to drag and drop wires across different compressors, etc to connect them.
    - mambodog 15y ago
      In many ways Reason's design limits the efficiency of its use, and it's hardware modelled approach is of no use (and in fact a hindrance) to the majority of users whom have never touched outboard audio gear. I'm glad that companies like Native Instruments are building interfaces that are driven by usability[1], not analog fetishism, and I have high hopes that Apple will do the same with the next version of Logic Pro, if their approach to Final Cut Pro X[2] is anything to go by. [1] http://www.creativeobserver.com/img/5238_native_instruments_razor_synhesizer_reaktor_plug-in_screenshot_lg.jpg http://www.creativeobserver.com/img/5238_native_instruments_... [2] http://vicenteborrell.files.wordpress.com/2011/04/final-cut-pro-x-b.jpg http://vicenteborrell.files.wordpress.com/2011/04/final-cut-...
      - hammock 15y ago
bostonpete 15y ago
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.
- jpadvo 15y ago
  Lots of things are intuitively obvious -- but when articulated clearly, it is possible to understand them more precisely. That ay you can use the knowledge in a rigorous way, not just an intuitive way.
  - bostonpete 15y ago
    Maybe so, but this article doesn't even give us enough info to enable anyone to be rigorous. The takeaway was to "make your icons detailed enough, but not too detailed". Whether it's obvious or not, what is actionable about that advice? Like I said, maybe a few more realistic and/or real-world examples would have made the actionable takeaway clear. As it is, it's just another blog post stating the obvious -- IMO.
- michaelbuckbee 15y ago
  If you search around the various different icon sets there are actually quite a few that that the article's author would probably deem "too realistic". That being said, I think that often they are targeted more towards things like section header graphics than tiny buttons so I'm not sure how much of the criticism is applicable.
- beaumartinez 15y ago
  > I don't really agree with the comment that the icon shouldn't include any details other than the bare minimum needed to convey its function. "Perfection is attained not when there is nothing more to add but when there is nothing left to remove." ―Antoine de Saint-Exupéry
duiker101 15y ago
i learned some great stuff, manny thanks i would love to seemore artcles like this
aw3c2 15y ago
I find it remarkable that the "Apple toggle button" is shown the wrong way: http://www.uxmag.com/uploads/realisminuidesign/toggles.png 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.
- byw 15y ago
  Apple's toggle button can be pretty confusing, even with the "on" and "off" labels. Are you suppose to turn it on, or is it already on? This is one instance where I think they should have stayed with the checkbox.
  - panacea 15y ago
    IIRC they introduced the toggle button for Time Machine in Leopard and it was slightly weird. Why not stick with a checkbox? Then they released the original iPhone with all it's slidey touchy interaction and it became obvious why they were introducing new UI widgets.
  - brianpan 15y ago
    Light switches are just as confusing initially- why is up on and down off? Once the convention is established, it becomes more natural. Plus, since the action is a toggle, it matters less which is which. For the most part I don't care if it's left or right, I just want to toggle it. Of course radio buttons are explicit, but real estate is also at a premium on an iPhone.
    - fanf2 15y ago
      The conventional orientation for light switches is opposite in the US and the UK. But it's not a very strong convention because it doesn't apply to multi-switch arrangements as on staircases.
earnubs 15y ago
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.
- richcollins 15y ago
  He specifically condones the use of photorealism in app icons.
- ugh 15y ago
  Where is this in any way shape or form an endorsement of Apple’s UI design decisions? There is no reason whatsoever to drag Apple into this, the author certainly didn’t.
zbowling 15y ago
This article is pretty decent, but have you seen the homepage for UXMag? http://uxmag.com 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.
- jamesbritt 15y ago
  Wow. Singularity Hub (http://singularityhub.com http://singularityhub.com) moved to a similar design. The result is that I now find it next to impossible to easily figure out what is new, whereas their previous linear design made that trivial, and far more usable. This is case where a site's RSS or Atom feed ends up being more practical that the home page.
- smickie 15y ago
  I emailed them a little while ago about the text in all their articles being justified, (which is a nightmare for certain types of dyslexics, who just end up seeing patterns and losing concentration). Apparently they've fixed it now, anywhoo my point is they also said they are in the middle of a grand site redesign, so I think, hopefully, they know about the dodgyness of the homepage.
extension 15y ago
The perfect example of this is an old version of the BlackBerry UI that looked like this: http://i.imgur.com/FypcA.jpg http://i.imgur.com/FypcA.jpg Fortunately, they wised up and the next version looked like this: http://i.imgur.com/3o2CF.jpg http://i.imgur.com/3o2CF.jpg
- keyle 15y ago
  I don't know about you, but I think it still looks shockers.
  - dzlobin 15y ago
    Huge distinction here: picture A was the 'home' screen, picture B is the 'menu' screen. The home screen only has four icons.
jazzychad 15y ago
Previous discussion from original article: http://news.ycombinator.com/item?id=1067333 http://news.ycombinator.com/item?id=1067333
kadavy 15y ago
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.
weixiyen 15y ago
tldr; uncanny valley

170 points by thmzlt 15y ago

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

rglover 15y ago

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 http://en.wikipedia.org/wiki/Understanding_Comics

moultano 15y ago
That book is truly excellent. We used it as a textbook for a drawing class in college.
- mortenjorck 15y ago
  Indeed. It's versatile, too: I actually had to read it for one of my visual/interaction design classes.
  - mambodog 15y ago
    It's also recommended in the Games Art course at my university, and I've seen it referred to among games industry people several times.

sambeau 15y ago

This article was badly missing the word: 'skeuomorphism' http://en.wikipedia.org/wiki/Skeuomorph http://en.wikipedia.org/wiki/Skeuomorph

bitwize 15y ago
One place where skeuomorphism definitely comes into play is in the realm of digital audio software. If you are building systems to mix digital audio, for instance, you will not ship a single unit if it looks like anything but an old analog mixing table. It may even be an old analog mixing table, except instead of controlling voltages on line-outs it is rigged to spew numbers into a DSP to adjust the gains of various digital signals. The reason why is because there is an entire tradition built up amongst sound engineers of mixing music by listening and feeling, rather than looking. And if you present a different interface to these people, you are throwing that knowledge away.
- deleted 15y ago
  [deleted]
- hammock 15y ago
  Propellerhead's Reason is great DAW software where everything is designed to look like its analog components. To the point where you actually have to drag and drop wires across different compressors, etc to connect them.
  - mambodog 15y ago
    In many ways Reason's design limits the efficiency of its use, and it's hardware modelled approach is of no use (and in fact a hindrance) to the majority of users whom have never touched outboard audio gear. I'm glad that companies like Native Instruments are building interfaces that are driven by usability[1], not analog fetishism, and I have high hopes that Apple will do the same with the next version of Logic Pro, if their approach to Final Cut Pro X[2] is anything to go by. [1] http://www.creativeobserver.com/img/5238_native_instruments_razor_synhesizer_reaktor_plug-in_screenshot_lg.jpg http://www.creativeobserver.com/img/5238_native_instruments_... [2] http://vicenteborrell.files.wordpress.com/2011/04/final-cut-pro-x-b.jpg http://vicenteborrell.files.wordpress.com/2011/04/final-cut-...
    - hammock 15y ago

bostonpete 15y ago

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.

jpadvo 15y ago
Lots of things are intuitively obvious -- but when articulated clearly, it is possible to understand them more precisely. That ay you can use the knowledge in a rigorous way, not just an intuitive way.
- bostonpete 15y ago
  Maybe so, but this article doesn't even give us enough info to enable anyone to be rigorous. The takeaway was to "make your icons detailed enough, but not too detailed". Whether it's obvious or not, what is actionable about that advice? Like I said, maybe a few more realistic and/or real-world examples would have made the actionable takeaway clear. As it is, it's just another blog post stating the obvious -- IMO.
michaelbuckbee 15y ago
If you search around the various different icon sets there are actually quite a few that that the article's author would probably deem "too realistic". That being said, I think that often they are targeted more towards things like section header graphics than tiny buttons so I'm not sure how much of the criticism is applicable.
beaumartinez 15y ago
> I don't really agree with the comment that the icon shouldn't include any details other than the bare minimum needed to convey its function. "Perfection is attained not when there is nothing more to add but when there is nothing left to remove." ―Antoine de Saint-Exupéry

duiker101 15y ago

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

aw3c2 15y ago

I find it remarkable that the "Apple toggle button" is shown the wrong way: http://www.uxmag.com/uploads/realisminuidesign/toggles.png 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.

byw 15y ago
Apple's toggle button can be pretty confusing, even with the "on" and "off" labels. Are you suppose to turn it on, or is it already on? This is one instance where I think they should have stayed with the checkbox.
- panacea 15y ago
  IIRC they introduced the toggle button for Time Machine in Leopard and it was slightly weird. Why not stick with a checkbox? Then they released the original iPhone with all it's slidey touchy interaction and it became obvious why they were introducing new UI widgets.
- brianpan 15y ago
  Light switches are just as confusing initially- why is up on and down off? Once the convention is established, it becomes more natural. Plus, since the action is a toggle, it matters less which is which. For the most part I don't care if it's left or right, I just want to toggle it. Of course radio buttons are explicit, but real estate is also at a premium on an iPhone.
  - fanf2 15y ago
    The conventional orientation for light switches is opposite in the US and the UK. But it's not a very strong convention because it doesn't apply to multi-switch arrangements as on staircases.

earnubs 15y ago

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.

richcollins 15y ago
He specifically condones the use of photorealism in app icons.
ugh 15y ago
Where is this in any way shape or form an endorsement of Apple’s UI design decisions? There is no reason whatsoever to drag Apple into this, the author certainly didn’t.

zbowling 15y ago

This article is pretty decent, but have you seen the homepage for UXMag? http://uxmag.com 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.

jamesbritt 15y ago
Wow. Singularity Hub (http://singularityhub.com http://singularityhub.com) moved to a similar design. The result is that I now find it next to impossible to easily figure out what is new, whereas their previous linear design made that trivial, and far more usable. This is case where a site's RSS or Atom feed ends up being more practical that the home page.
smickie 15y ago
I emailed them a little while ago about the text in all their articles being justified, (which is a nightmare for certain types of dyslexics, who just end up seeing patterns and losing concentration). Apparently they've fixed it now, anywhoo my point is they also said they are in the middle of a grand site redesign, so I think, hopefully, they know about the dodgyness of the homepage.

extension 15y ago

The perfect example of this is an old version of the BlackBerry UI that looked like this: http://i.imgur.com/FypcA.jpg http://i.imgur.com/FypcA.jpg Fortunately, they wised up and the next version looked like this: http://i.imgur.com/3o2CF.jpg http://i.imgur.com/3o2CF.jpg

keyle 15y ago
I don't know about you, but I think it still looks shockers.
- dzlobin 15y ago
  Huge distinction here: picture A was the 'home' screen, picture B is the 'menu' screen. The home screen only has four icons.

jazzychad 15y ago

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

kadavy 15y ago

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.

weixiyen 15y ago

tldr; uncanny valley