For GUIs, Just the Right Degree of Realism
mr crypto writes "User interfaces make copious use of pictures and symbols, but how abstract should images be? Lukas Mathis has an interesting blog entry on where to draw the line."
← Back to Stories (view on slashdot.org)
Just yesterday, I was commenting on twitter about how the new icon sets for youtube videos are rather confusing. It took a bit of staring to figure out what these icons do. Nobody was able to guess the right answer. C_64 had the funniest answer though by saying "You can only go 8 bits forward or 8 bits to the left ?"
Really. That was a very nice article that made me think about some things I've never really considered.
If you're looking for a generic UI than I suppose easy to recognize generic symbols are the best. However, my dream is to make the UIs that actually mimic reality but the trick is keeping them fairly usuable still. I don't want it to be cartoonish, I want you to look at the UI and mistake it for a fantastic physical machine rather than a monitor. For example, if you look at the themes on the exchange site for e17, a lot of these not what you'd call an every day sort of theme but appeal to a particular aesthetic. Examples include steampunk, grunge, and baroque that incorporate photo realistic elements with varying efficacy (e.g. baroque is a cool concept but very hard on the eyes). The idea is to make the living-room computer more than just a tool, but a functional piece of art.
What I'd love to do is make a theme that looks like the 1960s version of futuristic computers and space ship aesthetic from the movie 2001, with light-bulb lit buttons of different colored plastic, lots of milled metal highlights and dark plastic everywhere.
Gentlemen! You can't fight in here, this is the war room!
My, that was many words to say one thing over and over and over again. Pretty pictures though.
Of the period in the early to mid 90's when pretty much every second-string audio player program, and there were a fair few in those days, decided that the One True Interface for any audio program was an inscrutable bitmap reproduction of a knobs-n'-sliders 70's stereo system?
While this guy talks about realism, he's missing the point. If we didn't have each software designer creating its own visual language, then we wouldn't have the issue of how well that language is designed.
When Microsoft has its own set of hieroglyphics, and Apple has theirs, and Adobe has theirs, and each OSS has its own language--which is similar to some existing commercial language to leverage user experience, but different enough to avoid getting sued--then the issue is not how well these languages are designed.
The issue is, why should the user need to learn a new language for each application?
You may say, well, if you put all your commands in English, then only English speakers can use your app. Fair enough. But if you put all your commands in some bespoke language spoken by no one, doesn't it follow then no one can use your app?
Designers, pick an existing language used by your target market. Is that real enough?
I wish there were more studies about how some people (such as myself) simply cannot deduce the meaning of icons without a lot of effort. Some of the "meaningful" icons presented in the article still don't mean anything to me. I'm constantly hovering over the same icons to get the "tooltip" to tell me what I'm looking for. CLI? No problem...the command I need is instantly in my grasp. GUI? I'm forever having to stop, pause, and process icons to figure out what the hell they actually mean. GUI menus with words instead of icons are the best for me in the GUI world: Instant recognition, no extra processing steps required.
Am I the only icon-impaired person out there?
That guy is 100% right, but there isn't anything new, let alone newsworthy in that post.
But it has a few nice examples.
On the other hand, that guy completly misses the intresting points: How did we end up with a "house" as an icon for your personal files* or a "cog" as a symbol for additional commands in the first place? A Leaf for a Web-Editor? A Trumpet for Network Connection? Lighthouse for a webbrowser?
* That one sounds easy for an IT-pro who knows that the concept of a "home directory" is older than icons - but that only makes this meaning of "home" an old one, and not an intuitive one.
bickerdyke
It was lemmings with the 'paws' button iirc.
The game Lemmings had something like the footprints you describe to pause the game.
In my experience, if you write something just once, you'll get a slew of responses which are basically strawmen. Readers will read only what they want to read, and unless you beat their heads with the main point, they'll miss it.
In case there's any confusion, I'll repeat myself. If you say it once, readers will miss it. Maybe not you, but enough to be annoying. So, you say it multiple times, so the slow people can catch up.
Fascism trolls keeping me up every night. When I starts a preachin', he HITS ME WITH HIS REICH!
The "paws" icon is from Lemmings. I could imagine it being in other games too, though.
You're not alone. In The Humane Interface, Jef Raskin rightfully pointed out that descriptive text beats icons on any day. I believe he even cited studies that supported his claims. But in documents pertaining to the original Macintosh (a project Raskin led before Steve Jobs made it his pet project), developers were encouraged to use icons instead of text whereever possible.
Icons are used for two purposes - they generally take up a fixed number of pixels that generally use less space than text and they look pretty. The first reason is moot since even the cheapest display devices can spit out high resolution images with lots of space for text. And even if there isn't enough space, text labels can always be hidden via collapsible menus. Text can also be scaled to larger and smaller sizes as needed. The second reason is probably one of the biggest selling points for operating systems with pretty GUIs, e.g. Mac OS X. But with text labels, there's far less ambiguity about what they mean.
Of course, there are situations where icons would be preferable. If you can't translate descriptive text for buttons in other languages, then an icon might be more convenient to use. And of course, they look good. I doubt the iPhone would sell so well if the pretty icons were replaced by text.
Freedom is drinking a beer in the park when you're supposed to be at work.
Lemmings is the game you're think of.
Brain surgery - it's not rocket science!
That would likely be the original Lemmings. Now there was a game that got some of its UI elements correct!
The hell with icons, let's just depict the actual thing the little dullards will do!
Want to kill them all? Hit the NUKE button.
Ahhh good times, good times...
Posting obviously for anonymous reasons.
In other words, it's the Uncanny Valley in action.
Toward the end of the article, the author indirectly brings up a very good question: Why the heck is the VLC media player icon an orange traffic cone?? Is it because it's kind of the shape of a CRT? Is it cautioning us about the kind of videos we'd watch that came from the Internet? Maybe it's just constantly under construction (even though it's not in beta)? Perhaps it's something more technical and is a reference to the rods and cones that are the light receptors in our eyes. Or maybe I have it all wrong and it's a piece of candy corn sitting on an orange plate, to show how VLC serves up eye candy.
It's called "written language". Instead we get these asinine rebuses.
Warning: this article may contain humor, sarcasm, parody, and perhaps even irony. Read at your own risk.
I think a big reason this blog entry exists is precisely because good design ISN'T obvious, as evidenced by the amount of bad design we see every day.
I like your reasons for the existence of bad design. The over-zealous guy (I call them my Adobe Employees) that is always trying to make cutting edge stuff in our training that is so fancy that it: a) confuses the learners and b) cripples the computer's cpu cycles. I'd another designer type--the "doesn't matter" guy who just goes out and grabs a random crappy MS clipart object and slaps it on there because he's so concerned with the background code that he doesn't care about usability.
It’s a GUI. On a screen. Not a mechanical button from a 1980s VCR.
The only thing “realism“ does, is limit you, and create analogies that do not fit.
Besides: Who came up with the stupid idea of replacing everything with symbols, so that you have to guess what it means? The worst offenders are those that only offer on-hover text, or even no text at all. /” or “deltree /y c:\”, on their own desktop, then forget what it means, and click it.
I wish they would make a big icon, linking to “rm -rf
Stupid, stupid, stupid!
Any sufficiently advanced intelligence is indistinguishable from stupidity.
Puns don't belong as icons. For one, they fail i18n.
I forget what the application (or was it a game?) was... probably on the Amiga. The 'pause' button was a pair of animal footprints... paws.
I believe the peer-to-peer file sharing application BearShare also used a paw print for a "Pause" button.
I work on development of an application (I won't name) where there is a set of icons I long to replace which use a blue gear and a gray octagon with "1c" printed in it (where c is the cent sign), both outlined in black, to symbolize "Change Options". It's not even a copper penny to represent the verb change: it is a steel penny! And these symbols take up over 50% of the icon's area.
Oh, say does that Star-Spangled Banner entwine / The myrtle of Venus with Bacchus's vine?