Realism in UI Design | Hacker News Reader

Realism in UI Design

uxmag.com

170 pointsthmzlt35 comments

Open articleView on HN

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

I don't know about you, but I think it still looks shockers.

Huge distinction here: picture A was the 'home' screen, picture B is the 'menu' screen. The home screen only has four icons.

This article was badly missing the word:

  'skeuomorphism'

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

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.

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.

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_...

[2] http://vicenteborrell.files.wordpress.com/2011/04/final-cut-...

Well yeah most of the time I am in Logic or ProTools. Clearly it's less efficient to work in Reason. But it's way more fun :)

Thanks for the vocab! I've been struggling with needing a word for this for quite a while, ever since I learned the origins of Roman/Greek columns and Chinese Bronzeworks (tree trunks and clayworks). Both retain unnecessary features of previous versions of the work for aesthetic reasons.

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

That book is truly excellent. We used it as a textbook for a drawing class in college.

Indeed. It's versatile, too: I actually had to read it for one of my visual/interaction design classes.

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.

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.

Wow. Singularity Hub (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.

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.

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.

He specifically condones the use of photorealism in app icons.

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.

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.

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.

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.

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.

> 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

I have one of those Chinese mp3 players (branded mp4 player), it had all these realistic icons that really made it look crap (besides the fact the interface was slow and clunky as well).

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.

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.

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.

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.

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.

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

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

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.

tldr; uncanny valley

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

Reply on news.ycombinator.com