

Realism in UI Design - thmzlt
http://www.uxmag.com/design/realism-in-ui-design

======
extension
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>

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

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

------
sambeau
This article was badly missing the word:

    
    
      'skeuomorphism'
    

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

~~~
bitwize
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.

~~~
hammock
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
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_...](http://www.creativeobserver.com/img/5238_native_instruments_razor_synhesizer_reaktor_plug-
in_screenshot_lg.jpg)

[2] [http://vicenteborrell.files.wordpress.com/2011/04/final-
cut-...](http://vicenteborrell.files.wordpress.com/2011/04/final-cut-pro-
x-b.jpg)

~~~
hammock
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 :)

------
rglover
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>

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

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

~~~
mambodog
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.

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

~~~
smickie
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.

------
earnubs
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
He specifically condones the use of photorealism in app icons.

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

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

~~~
byw
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.

~~~
brianpan
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
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.

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

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

------
kadavy
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
tldr; uncanny valley

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

