Visual realism in UI design: just enough, but no more

Lukas Mathis's ignore the code blog offers illustrations of—and explanations for—the user interface sweet spot between visual realism and conceptual shapes.  His conclusion?  Designers should convey the essence of a symbol.  Any more detail distracts, while any less loses the symbol's intent.

Let’s look at a symbol we actually see in user interfaces, the home button. Typically, this button uses a little house as its symbol.

The thing on the left is a house. The thing on the right means «home». Somewhere between the two, the meaning switches from «a specific house» to «home as a concept». The more realistic something is, the harder it is to figure out the meaning. Again, if the image is simplified too much, it’s not clearly and immediately recognizable anymore.

The thing on the left is a home button. The thing on the right might as well be an arrow pointing up; or perhaps it’s the ⇧ key. Let me explain this concept using an entirely unscientific graph:

People are confused by symbols if they have too many or too few details. They will recognize UI elements which are somewhere in the middle.

As an aside, I keep Coda's icon on my dock because it's so uniquely refreshing.

Usability week ending October 25th

Friday, 23rd October, 11:21 AM
The plain fact is users will not read anything you put on the screen. How to treat user myopia: http://j.mp/oeIwQ #ui #development #ia

Wednesday, 21st October, 9:26 PM
Users hate change--just evolve a familiar #design. When incrementalism eventually destroys cohesiveness, redesign: http://j.mp/pdOUM #ux #ui

Monday, 19th October, 1:56 PM
If someone approaches you about #SEO, ignore them. Fire whoever makes your web pages, hire someone better: http://j.mp/37Bpsl #ia #webdesign

via twitter.com/terretta

Usability week ending October 18th

Friday, 16th October, 12:23 PM
Make a web design look good - balance, grid, color, graphics, typography, white space, connection. http://j.mp/1gJL07 #ux #ui #webdesign

Thursday, 15th October, 11:52 AM
The Huffington Post uses real-time A/B testing to write better headlines: http://j.mp/1D7L9U (#ux, user behavior, landing page optimization)

Wednesday, 14th October, 3:50 PM
Secrets of Google's design team--"Focus on the user and all else will follow": http://j.mp/11zH6O #ux #ui #webdesign #usability #google

Tuesday, 13th October, 10:57 AM
#UI Fundamentals for Programmers” video--modeling, breaking apps into screens, visual techniques, flows, and coding tips: http://j.mp/DO0ma

Monday, 12th October, 4:02 PM
Get Satisfaction's fatal flaw--make you to register to give feedback or get support. Try data capture, then relationship: http://j.mp/4Ql7w

via twitter.com/terretta

Usability week ending September 27th

Friday, 25th September, 12:21 PM
Boost your website's credibility with 10 rules based on 3 years' research on 4,500 users: http://j.mp/3T6HBx #ux #ia #webdesign

Thursday, 24th September, 7:02 PM
Not all usability design is for the end user--user experience designers are users too: http://j.mp/FsFHz #ux #design #mac #workspace

Tuesday, 22nd September, 4:25 PM
Yo dawg, we heard you like browsers, so we put a browser in your browser: http://j.mp/4clDw #google #chrome #ie #ie6 #ie7 #ie8 #webdesign

Monday, 21st September, 11:56 PM
What makes a cool URI? It's one that doesn't change. What sorts of URI change? URIs don't change; people change them: http://j.mp/cWcrB #ux

via twitter.com/terretta