Slashdot Mirror
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 ?"
And that's about all that needs to be said here. RTFA and it's complete and makes infinitely good sense, so nothing to discuss about it.
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!
Talk about confusing! When I first saw that sparkling gold bar on Visual Studio, I thought it was a payment option to Microsoft to buy more features for the IED.
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?
He repeats himself a lot of times by saying the same things over and over. It's like he could have said all he said in one sentence. The article didn't contain a lot of information, it was mostly the same sentence in different words. I think the article was very repetitive, even though it was an original thought to me. The article makes good work of giving a lot of good examples of this concept.
I have always wanted to make a UI based around the actual physical layout of the computer itself. For instance, say you are working on a Optiplex Dell of some sort, I would find it very useful to see a layout not unlike the physical damage indicators you see in Star Wars Podracers. You want to access a file? Click on the hard drive, want to see CPU usage reports? Click on the CPU! Not only would it be a cool UI but it would also be a useful educational tool.
If this could be done it would be awesome. The hardest part would be creating all of the different layouts for all of the differrent computer models.
That has to be she shortest stub I've ever seen on Slashdot. I wonder if it's possible to say that the stub is small, and the fact that I want to make this comment shorter than the stub, in less words than are in the stub?
1, 2, 3, 4... 25, 26, 27, 28 to beat!
1, 2, 3... 47, 48, 49.
Shit.
Finally had enough. Come see us over at https://soylentnews.org/
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?
SAP is one of the worst offenders, but I have to say I've seen the largest collection of poorly thought out icons at work, where someone puts on a dog and pony show to convince our company to buy things, and our company bites without trying it out on a few users first.
I hate having to 'mouse-over' an icon to find out what it does, and even worse is when it doesn't have a tooltip. Corporate software seems to be where the worst designs live because anything else is quickly abandoned in favor of something intuitive.
Thus, corporations tend to increase their own training budgets by basing decisions on bullet-point comparisons instead of real-world usage. You put something obvious in front of people, they'll be able to figure it out. But when the "Overview" button is a mountain with random clouds behind it or something, and the "Give me the report based on what I selected" button is in an entirely different frame from the selection criteria, your software is crap. Yes SAP I'm calling you out, but there are others just like you, which is the only reason you're still in the business. That and company execs are too embarrassed to simply say "we paid too much, here's your out clause, delete all versions and we're moving to something else". That would leave you responsible for excess expenditures, while forcing your peons to work with crap software doesn't reveal cold, hard numbers in the form of productivity loss due to training and questions and people just not being able to figure it out and saying to hell with it.
Look at your training budget before you buy.
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?
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.
In the Clarion 5.x Development environment the 'compile and run' button is a little blue cloud with a bunch of lines off to the right, presumably to indicate movement. Most people i've spoken to know that icon as the 'blue fart'.
To be fair, there is only so much you can do in 8x8 or 16x16 pixels...
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
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.
I've used software with that photo-realistic, it's a fantastic machine UI that you are a fan of and I did not like it one bit. My problem with making fancy physical looking machines on a monitor is the fact I still can't interact with it very well. It's just a flat image that I can only manipulate with a handful of mouse gestures. "Can I click this? Do I drag that? I did not know that lever moved!" It basically hides a bunch of functionality in plain view and really confuses the heck out of me.
I went to eat some animal crackers and the box said, "Do not eat if seal is broken." I opened the box and sure enough..
All I have to say about Handbrake is fuck that icon. I don't use the program that often at all. A few months back I wanted to convert some media files, I'm on vista so I hit the Win key and try to type in the app name. Now what was that program called, OK I remember the Icon was a pineapple with a drink next to it; I tried blender and about six different drink names, trying to come up with the name. I ended up having to Google the name
What this guy says is true; it's also obvious. There are two reasons why we encounter unintuitive icons. The first is an overzealous designer who thinks he is going to be creative by not conforming to conventions; this is where I find Linux GUIs tend to fail miserably. It seems whoever designs their interfaces tend to be going for different as opposed to intuitive. The second is a more pervasive problem: trying to convey an abstract concept.
Every instance Lukas describes is straightforward and easy to represent. The last set of icons, the leaf, acorn and cone aren't so much icons as they are logos for those particular applications. People will associate those marks with the application because they've seen the application first. Sit in front of computer with these icons dumped onto the task bar, having never seen them before, and people will have no clue what those applications are all about.
Simplifying graphics used to be more of a necessity because of lower resolutions and and fewer colors. That is no longer a concern. While I prefer more minimalist designs there is something appealing and immediately obvious about a rich, nicely rendered icon. The example he uses to argue against richer icons is pretty weak. I could drop a different photo of a camera in that space and it would be just as informative as the simple icon. Obviously there's a balance between aesthetic appeal and conveying an appropriate level of information. And consideration has to be given towards where those graphics will reside.
Well, this blogger has done his job. Regardless of how simplistic and obvious his argument is here we are discussing it.
Well, in slashdot land, there's only bickering and arguing, so you are right. However, I liked the article and would like to discuss its merits further.
In other words, it's the Uncanny Valley in action.
Such was the conclusion of the team that designed the original Mac (not OSX...the 1984 version.)
The icons do serve a purpose...once you've mastered the interface, you'll recognize the icons by sight without having to read the text. But for a naive user, text is a must.
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.
everybody raise their hands who've seen a full screen application with plenty of screen space
The developer doesn't know that will have plenty out of screen space. Perhaps the developer was trying to avoid the problem of Inkscape and several other apps in the Ubuntu repository that do not run properly on my netbook because they require a screen taller than 600px. I've seen it happen on my cousin's Windows netbook too, with the SUPER video converter.
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.
IE's icon is a lower case "e" on what appears to be paper; if you had never used IE you would have no clue that it was a web browser.
Pepsi's icon is a blue and red circle with a curved white stripe through the middle. If you had never used Pepsi before you would have no clue that it was a cola.
The article states that application icons are the exception to the rule. Logos embody an application's identity, and abstract trademarks establish a stronger identity both under the law and to the public than descriptive ones.
In my car I'd far rather have the word "headlights" than a stylized picture of a headlight.
Would you rather have "fényszóró" or "Scheinwerfer" or "prìomh-sholas" than a stylized picture of a headlight?
What idiot modded that "insightful?" It is entirely incorrect and shows no insight whatever, as reading any of the comments above it show.
Hmm... OK, I get it. Somebody had mod points, logged in anonymously and made that inane comment, then logged in and modded himself up. Someone please mod him back down. While you're at it mod this (my) comment down as well, as it's offtopic and the "no karma bonus" button doesn't seem to be working.
Free Martian Whores!
this might be urban myth, but didn't China at one time use green for 'stop' - restful - and red for 'go' (active)?
Sorry, what? I see "reply" and "parent". Are you seeing something different?
404555974007725459910684486621289147856453481154 in hex is "You sank my Battleship?"
[GPG key in journal]
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.
I've got some complaints about the article...
In his example of the "Home" button, the icon doesn't actually look much like a house. We recognize it so easily because we mentally match it to what we expect might be there. Someone with no computer background would recognize a picture of a house before a small, distorted outline. Ditto for a "smiley face". It's a deeply embedded cultural thing that a cirle with 2 dots and a line in it represents a face, but the others are really vasly more recognizable. It would be a better graphic if the faces didn't get angrier and uglier as they got more realistic... This seems to weight the issue incorrectly.
The reason the icon looks better than the photo in the example is simple straw man. OS X uses a silhouette of a house, while the photo was a house in perspective, in color, and most importantly, so SMALL it isn't really recognizable. Try a photo of one side of a real house, and it can work just as well as the sideways arrow. Ditto for the camera. But also, if you only have 32x32 pixels to work with, photo realistic is obviously a bad idea. If you have the room, however, it can work much better.
The photo of the toggle switch looks better, IMHO, than the "optimal" drawing. It's much more clear from the perspective and shadows in the photo which position it's in, and what other options are. In a configuration dialog, I'd likely click on a photo of a switch next to a label... A rectangle with a box in it? That would take me longer to figure out. A ratio box would probably be better than either, though....
So while his fundamental point is at least true in a nutshell, that too much detail is distraction, he seems to use the most horrible examples possible, and errs FAR too much on the "simple" side of things, as if the concepts he's accustomed to are universal, and not the learned concepts they clearly are...
Slashdot gets worse every day... Pipedot: News for nerds, without the corporate slant
At the end of the TFA, you can submit a "bug" into his blog. No log in, no required typing, nothing.
Let's see how high we can take his case numbers. It's at 38 now. Log a blank bug today!
I noticed that I take half a second to a second more to find the now iconless menus in Ubuntu 9.10. It looks like icons can become a visual markers to not actually look at them and decipher their meaning but just to memorize the general outlook of them, like when you read, you read the whole words, not just letter by letter.
Ceterum censeo Microsoft esse delendam.
I will nominate the best icons I've ever seen:
A tree trunk for most of the files in /var/log: "Hmm, that looks like a log..."
A spigot for FIFO files: "hey, those are often seen in connection to a pipe..."
Funny and informative :)
Here's an example of poor design. Or architecture, if you prefer, but you can think of architecture as "building design".
At my university, I have an office. There's a coffee machine somewhere else, and there's a door between the hall my office is a part of and the coffee machine.
A good design would make the door easy to open for people who are standing on the coffee machine side of the door, with a full cup of coffee in their right hand (because most people are right-handed).
A good design of such a door would be one that opens inwards: you can push it with your left hand, or your hips and butt.
Another good design would be one that opens out and to the left: you can pull it with your empty left hand.
A bad design is one that opens out and to the right: if you pull it with your left hand, you have to turn around to walk through it (it auto-closes fairly rapidly). If you want to open it with your right hand, you have to switch your cup to your left hand (not pleasant with hot coffee).
Guess which one my university chose? The one bad design :(
Point of the story: you need to know what a thing will be used for, in order to design it well for all its uses.
Point two of the story: you won't think of everything. Go observe people, then you will have a better chance of knowing.
When Microsoft has its own set of hieroglyphics
I think you mean ideograms---a graphic symbol that represents an idea or concept (with the connotation that different concepts each has its own ideogram).
Some hieroglyphics are actually phonetic: Carl Sagan argues so in Cosmos (I don't recall the episode), based on (iirc) the Rosetta stone, and the occurrence of "Ptolmeus" and "Kleopatra": the first symbol of "Ptolmeus" matches the fifth from "Kleopatra", etc.
Some hieroglyphics are ideograms, though: the "ra" in Kleopatra is written with an ankh, the symbol for life and the life-giving sun god, Ra.
Sorry for being all pedantic about it :) I just think it's an interesting bit of knowledge and I wanted to share it with you all.
At least a home-plate-shaped pentagon with windows and a door on it means "home"
You'd better know that a road sign shaped like that pentagon (in the US) means school
"Home" is a pentagon with door and windows. "Reduce speed in a school zone" is a pentagon with the same sort of parent and child walking seen on European triangular school zone signs. That's how you tell them apart.
Good GUIs have been around for a while. The problem is that people are constantly looking to re-invent their image so that new products are less common and boring, and companies have an excuse to get people to updated the old stuff that worked perfectly fine.
Remember when Apple got rid of Aqua and moved to brushed metal? Many clear, neatly colored buttons full of common objects were replaced with hard-edged gray symbols. Like most changes in the computer industry, not just on the Macintosh, those changes were made for marketing reasons.
Sometimes, solutions to our problems can be found in 10-year-old products.
Of course, while looking back on world history can teach us much, we all know that old computers are obsolete! We make sure they are free of lead because they are meant to rot in the trash.
This book says it all.
"The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity
By Alan Cooper, Foreword by Paul Saffo
The Inmates Are Running the Asylum argues that, despite appearances, business executives are simply not the ones in control of the high-tech industry. They have inadvertently put programmers and engineers in charge, leading to products and processes that waste huge amounts of money, squander customer loyalty, and erode competitive advantage. They have let the inmates run the asylum. Alan Cooper offers a provocative, insightful, and entertaining explanation of how talented people repeatedly design bad software-based products. More importantly, he uses his own work with companies big and small to show how to create products that will both thrill users and improve the bottom line.
Reviews
"Frightening but true. Personal computers have engendered another New Age codependency. They shame us, they frustrate us and yet we keep spending money on them. Alan Cooper's book explains why it shouldn't be so and what we can do about it. A humbling and enjoyable read."
--Jean-Louis Gassée, Founder, Be, Inc. and Apple Computer France
"Once again, Alan Cooper shows the way. His books should be required reading for all those technology companies who think they are serving their customers: think again. We need more books like this one, and more people like Alan Cooper."
--Don Norman, Nielsen Norman Group, author of The Invisible Computer
"This clear-headed book teaches leaders what they need to know to create systems that win in the marketplace... you will find this one of the most thoughtful, practical, and helpful books you can read."
--Larry Keeley, President, Doblin Group
http://www.cooper.com/insights/books/