15 ms·

The cardinal UX mistake we made, you might be making it too

85 points by Cherian 13y ago

calinet6 13y ago
We used to call this Mystery Meat navigation: just symbols or pictures without words. I still hate icons standing on their own, unless they're extremely clear and unambiguous. Even then, they'll be unclear and ambiguous to someone out there. Just add a label. Even when we've been skeptical that words wouldn't fit in with our design, that they'd clutter or confuse; we've always found a way to make the labels fit in, and our usability has been much improved for it. People simply don't ask questions anymore—it worked better than we could have hoped.
patio11 13y ago
The original author may have meant "cardinal" (primary) rather than "carnal" (of the flesh, generally used as a synonym for "sexual" in modern English).
czr80 13y ago
I'm guessing you mean "cardinal" but I'm not going to click that link at work :-)
- ergusto 13y ago
  From the looks of it he originally used 'carnal' in the title, then recognised his mistake, but had already made the slug for the URL before he changed the error.
Pxtl 13y ago
Can't tell you how many times I've had to tell people "I read english, not heiroglyphics. Microsoft bothered the heck out of me - in an era when screens are getting larger, they drop the text labels off of the taskbar. MS is the last company that should be relying on their users' ability to recognize icons since htey completely change the shortcut icons for the whole MS Office suite and Visual Studio every release.
- sz4kerto 13y ago
  Taskbar is a bad example here. As I mentioned below, icons without text are good choice if and only if the user sees them all the time / knows exactly what they mean. The stuff most (98%) of people sees in their Windows 7 taskbar is really familiar to them -- IE or Firefox symbol, Word, Excel, Skype, etc. It's OK to use icons there, it saves a lot of space, and people don't really 'parse' the icons at all, they just remember the spatial locations, and maybe the colors. But having very similar, black and white icons without text in a smartphone app? Really bad decision. BTW, colors help a lot, even they sometimes conflict with the currently fashionable flat designs. Look at the new Visual Studio -- it looks nice, but developers keep complaining about the lack of colours.
  - Pxtl 13y ago
    MS frustrates this by changing the icons with every major release, though. I have no idea what the Word 2013 icon looks like. They didn't even keep the colour conventions - outlook always used to be yellow. But yes, VS2012 is a worst-case scenario. The TFS source-control file browser makes my eyes want to bleed.
FreakyT 13y ago
So true! I've always followed the guideline that, in general, icons should be viewed as purely decorative. Go ahead and add them for aesthetic purposes, but avoid making them the sole indication of something's function. I'd make an exception, however, for some extremely common icons, such as the B, I, and X icons for "bold", "italic", and "close".
arpit 13y ago
The problem with text instead of icons is that a)Its needs translation per language and b)it takes longer to parse/process. The weather information in iOS7's "Today" notification is an example (http://applenapps.com/wp-content/uploads/2013/06/ios_7_6_notification_center.jpg http://applenapps.com/wp-content/uploads/2013/06/ios_7_6_not...). It takes much longer to read the exact weather information than just seeing a weather icon and getting it (IMHO). In this article's case, it seems he use something that wasn't "iconic" as an icon.
- sz4kerto 13y ago
  No, it does not take longer to process, in general. If there is a small, well-known set of icons (e.g. traffic signs), then yes, it's easier. Same is true for weather symbols - sun and clouds are well-known. However, I find really amusing when I (as somebody who considers himself a really experienced user and gadget-fan) can't decide what the icons mean on my smartphone, then I start getting suspicious. If you haven't seen something many times, then icons are harder to parse, simply because you don't know what they mean.
- Hermel 13y ago
  Icons sometimes need translation too. For example, the "filter" icon only works in English because most other languages don't call funnels "filter". It would be better to show a sieve than a funnel.
  - Pxtl 13y ago
    The filter one is an older convention, common in database applications. I guess it can work from a purely abstract perspective - something narrowing down, implying that you want to narrow down what's in front of you... but still, it is confusing to a new user. It feels like a search magnifying glass would convey the concept better, and simply bundle the filter UI into the search UI if an application offers both features.
    - azinman2 13y ago
      Which shows you how terrible all of these absteActions are. Search is a magnifying glass? Would that instead be zoom? Oh wait that is already the case in all photo editing apps, except they usually add a plus or minus. Convention is just an excuse for repeating bad behavior without question.
Ysx 13y ago
A modal that you can't dismiss isn't a great idea either, with it taking nearly half of my phone's viewing area. http://imgur.com/3K2CUG1 http://imgur.com/3K2CUG1
- Cherian 13y ago
  Ooh, I am sorry about this. Genuine mistake.
- schrodinger 13y ago
  I came here to say the same thing.
- RazerM 13y ago
  I was about to post an identical comment http://imgur.com/Pdwf6HW http://imgur.com/Pdwf6HW
maggit 13y ago
I'd just like to add that well established icons are much more readable than text. The prime example that makes me believe this is road signs. In Europe it is pretty easy to drive a car in any country and be able to do it correctly, IF you are used to European road signage. Driving a car in USA when used to European signage is difficult. The signs in USA more often have text, but it is not always more understandable than an icon. What does "PED XING" mean, and how much time and energy do you have to dechiffer it while driving? (It took me days to realize that it is probably a contraction of "pedestrian crossing") Another example; it takes much more effort to understand what "SLIDES" might mean than it takes to recognize a pictogram of sliding rocks. When the text is not immediately understandable, you have to recognize it from earlier. This is similar to icons that are not immediately understandable. My take-away here is that it takes lots of effort to make good descriptive text. Using text instead of icons is not a simple solution for the problem described in the article. It takes effort to communicate clearly anyway :)
- jimktrains2 13y ago
  Most signs also have a symbol as well. PED XING signs will have an image of people in a crosswalk. It takes exactly no time because the signs are fairly standard and we, in the US, are used to it. It's the non-standard signs that take time to parse. The road signs in the US are _well established_ in the US.
  - maggit 13y ago
    > The road signs in the US are _well established_ in the US. Of course they are! I am not trying to say that US signage is unclear. I am trying to illustrate that it does not automatically make things clearer if you use text instead of pictograms. Using text might make things clearer, but "SLIDES" is only clear if you already are familiar with it. Agree? :) (The same thing goes for the text "PED XING", but this example is less important since, as you say, it is usually accompanied by a pictogram) In my experience, road signs in the US rely much more on text than road signs in Europe. This is why I brought this up as an illustrative example that text is not a magic bullet :)
free652 13y ago
How about a tooltip over the icon?
- Pxtl 13y ago
  How do you tooltip on a phone? Seriously, a standard (?) icon in the corner to show all the text labels and list the gestures temporarily should be a standard feature on touch devices that often heavily rely on gestures and textless icons.
  - mercnet 13y ago
    For android apps, if you do a long press on a button/icon it will show a tooltip. For example, open gmail, long press on Search Icon and the tooltip "Search" appears.
    - Pxtl 13y ago
      Long-press is a terrible imitation of "hover" since long-press also has other actions associated with it, so users have no way of knowing whether long-press means "give me more info" or "do stuff (different from normal click)". Plus, long-press is tediously slow. Some devices it's actually hard to do a long-press well because the touchscreen is oversensitive to small movements of your finger... this problem insn't a killer for rare interactions, but if it's something your doing all the time it will drive you batty. This is something Windows Phone excels at, actually. Any program that uses icons will put them along the bottom bar. If you open up the three-dot Menu? The bottom bar slides up to reveal (1) text labels for the icons and (2) additional less-frequently-used actions that have a full text name instead of an icon. This is fantastic because it means you have one interaction you use to say "I can't see where click to do X". Either you find the option in (2) or you discover that the action was already staring you in the face in (1).
      - Systemic33 13y ago
        Came here to say that aswell, I'm really happy with the Windows Phone solution. And I can tell my mom, if she's confused about some strange icons, just to press the 3 dots, and it'll say in text.
B0Z 13y ago
http://imgur.com/TdrXpxS.png http://imgur.com/TdrXpxS.png Funny. I was thinking a non-disappearing modal on a mobile browser would be a fairly cardinal UX mistake. Call me crazy.
- Cherian 13y ago
  My bad. Fixing it. Update: Fixed.
  - deleted 13y ago
    [deleted]
lingben 13y ago
this is better known as 'mystery meat' navigation and google is one of its most famous adherents but then again, google has shown again and again that they know absolutely nothing about UX or UI
- potatolicious 13y ago
  It's laziness, Google is the most visible adherent because all of their products are heavily internationalized. I'm going through this right now - we're translating a native mobile app into a bunch of languages, and let me tell you, getting a dense UI to fit right in multiple languages is an extremely iterative exercise that saps your development velocity like nothing else. A natural and popular reaction to this is to go "then we'll speak in a universal language - pictographs!", except complex concepts can almost never be expressed properly in iconography, especially iconography that isn't well-established internationally. I have a strong suspicion that Google's forays into all-iconography UIs is an attempt to reduce the amount of translation (and subsequent tweaking) they need to do.
  - lingben 13y ago
    your statement implies an assumption that there is a normal distribution of users among the languages but google being a company driven by metrics would realize that the vast majority of their users speak only a handful of languages, wouldn't they? I would venture to say that more than 60-70% would be English, followed by the romance languages and perhaps German ending up with more than 90% of users among 5-6 languages. there is no reason to make 90% of your users suffer for a possible inconvenience created by 10% of your users.
    - efdee 13y ago
      I think you are leaving out a number of Asian and cyrillic languages that would heavily skew your numbers...
    - matho 13y ago
      You might want to reconsider Google's target market. Only a minority of the world use the Latin alphabet.
meerita 13y ago
Either go full text actions or only icons. You can't have both because of the reduced space and reduce the ammount information you need to digest. Also, users can experiment with your UI/UX, so the camera example doesn't apply.
- Pxtl 13y ago
  You can do both on a desktop. The average PC screen is like 4 ipads duct-taped together.
- awj 13y ago
  > Also, users can experiment with your UI/UX, so the camera example doesn't apply. That's a pretty user-hostile stance. People have things to do, figuring out which hieroglyph on their camera app does what they want is probably low on the list. I can experiment, yes, but I'd really prefer not to.
  - meerita 13y ago
    Part of the learning curve is to know what each action do. In the case of the camera, it is normal that there are "switches". In user interfaces where the common actions are delete, move, forward the things are different: not much experimentation is allowed, if you delete, you delete and rarely you see an "undo your mistake", but in a camera UI, the actions are 95% of the time harmless to the user and they are done mostly to operate in preview mode (like when you zoom, or activate white balances, etc.) I believe fervently, and no offense to the author, that it is wrong to recall the example of the camera. Especially since Android people will surely be tested this and a thousand other things with real people knowing how crazy-paranoids in Google were with even, link colors in apps.
mherdeg 13y ago
I really like the "one way street" sign in this blog post because it reminds me of our first trip to Germany, where we were bemused at the incredible number of roads Munich had all named "Einbahnstraße".
- neilxdsouza 13y ago
  Reminds me of when I went to Brussels the first time, trying to travel to Leuven (where my friend was staying). All the buses were going to "Geen Dienst". That's a popular destination I thought to myself.
  - czr80 13y ago
    Means "Not in service", for those wondering.
- nona 13y ago
  A friend of mine made the following remark when she was little, travelling on the autobahn: "darnit, Ausfahrt must be one huge city, since all the exits are pointing to it"
user24 13y ago
So... what do those icons at the end mean? My guesses: 1) no idea (share photo?) 2) take panorama 3) take video 4) take photo
- nucleardog 13y ago
  Top one is to take a 'sphere photo' (360 degrees + up and down all stitched - forget the marketing name right now).
- yahelc 13y ago
  Assuming that's a screenshot from the Google Apps interface, the Funnel one is "Filters": http://i.imgur.com/QsU8sft.png http://i.imgur.com/QsU8sft.png I find these Google Apps admin buttons to be even more confusing: http://i.imgur.com/SVX34h2.png http://i.imgur.com/SVX34h2.png
- untog 13y ago
  First one is a Photo Sphere. I knew what it was immediately, but then I know my phone comes with that feature.
  - danielweber 13y ago
    If they had the words "Photo Sphere" I would be even more confused. I have no idea what that means. Of course, I could always click on it to tell. Which is probably okay, unless your mystery-icon was something I cannot undo.
    - untog 13y ago
      Yes but my point is that you might, like me, have bought a device that boasts about its "Photo Sphere" functionality in promotional materials. So then I'd know what it is. On a more abstract level, the photo sphere icon makes no less sense than the panorama one does. You just know what the latter is because it's more well known.
6d0debc071 13y ago
Coincidentally, with German signs being mentioned in the article, German public service typography, the signs and so on, is gorgeous. Really well designed. There's the guy whose company did stuff for BFG and the railways talking about some of his work here: http://vimeo.com/30008631 http://vimeo.com/30008631
squidstampede 13y ago
"Yet. Yet… the top UX myth of all time is, icons enhance usability" It's a fact that it is easier and faster to comprehend images than words. I think the only situation this isn't true is when you are icons aren't clear. You can't use icons for obscure things or things that don't have an established universal recognition for exactly the reason this article describes. That's why everyone always recognizes a picture of an old school telephone versus a smart phone as an icon in front of something like a phone number. I think the "Cardinal" UX mistake made here was that, not using an icon over text.
- dragonwriter 13y ago
  > It's a fact that it is easier and faster to comprehend images than words. That's not at all a fact. It might be faster to recognize images than words (though I think for people that are more than marginally literate, its mostly equivalent for familiar words, because they are recognized as images.) > I think the only situation this isn't true is when you are icons aren't clear. Icons are almost never as clear as words, because they are essentially words written in an ad hoc, application specific, logographic script. The exception is when icons with well-established meanings outside of the specific application are used in a context which makes clear that they are being used in their well-established sense, in which case they become words in familiar logographic script. But except for icons that have well-established action meanings in the context of computer UIs, that's usually not the case in application UIs, even with familiar symbols originating in non-computer-UI domains. There, familiar symbols are used in senses which are inspired by their common usage in other domains, but not identical to them, which still requires both recognizing the symbol and inferring the analogy being used.
  - pwg 13y ago
    > > It's a fact that it is easier and faster to comprehend images than words. > That's not at all a fact. It might be faster to recognize images than words There is one point that almost all of these icons vs. text discussions omit. And that is an additional phrase at the end of the sentence: "It is faster to recognize images than words, __after you have learned what the image means__".
graycat 13y ago
> Yet. Yet… the top UX myth of all time is, icons enhance usability Let's see: Given an icon, how to I pronounce it, spell it, in case I don't know what it means look it up in a dictionary? I can't. Long ago I decided that a good user interface should go light on icons. In the Web site I'm building, the screens I'm building have no icons at all. Instead there are some push buttons with descriptive English words inside them and some links as words. And each substantive page has a link "Help" that explains in detail how to use the page. Civilization used to have icons, but then got the Roman alphabet! Further, for another "cardinal UX mistake", a user will never have to run experiments and explore the user interface (UI) to discover how to use the Web site. Further, for another "cardinal UX mistake", the Web site has no undefined acronyms or terminology. Each word is used in its simple dictionary meaning or otherwise has its special meaning defined and explained. E.g., "UX" abbreviates 'user experience'?
- velik_m 13y ago
  How do you deal with multiple languages?
  - graycat 13y ago
    Good question. So far, I don't. When I go live and get some success, then I'll handle other languages. Actually, the user interface (UI) is so simple to use that people who don't know English should be able to use the common 'interface experimentation' (that I don't like and that I hope my English language users won't have to use) to see how to use the site. But having versions of the site for languages other than English should not be too difficult. I'm writing nice code, but it's not the most general thing since Einstein's theory of general relativity, and with enough changes for languages, small screens, etc. might need some 'refactoring'. So be it.
scubbo 13y ago
> "The biggest culprit of a simple icon turning villain is the elevator at my apartment. You’d think how much more simpler can this get. Up to go up and vice versa, isn’t it?" I don't understand. Is this not the case? > "Until you realize that people use this to “bring the elevator up” and to “bring the elevator down”." I think they're wrong, but now I'm doubting myself! > "I often go from my top floor to the parking with switches in-between and peeps asking “Going up or down?”" ...everything I thought I knew is a lie.
- prawks 13y ago
  This passage is making my brain hurt. You press the button to indicate you need to go up. The problem isn't with the button or the icon, it's with the expectation that the button should assist in helping you navigate the scheduling of the elevator(s). Which it does (to a point). If you're coincidentally on a floor where someone is getting off and you need to go in the opposite direction than the next person in the elevator's queue, the button will not reset. You're still waiting for the elevator. Culturally, people just ask instead of knowing/trying to discern this.
  - daigoba66 13y ago
    I don't know about the OP's elevator, but many that use daily have arrows above the door that light up when the door opens indicating which direction the elevator is traveling next. I don't need to ask.
- masswerk 13y ago
  There's always an ambiguity in metaphors comprising directions and the like: Is it the direction the user is wanting to take, or is the direction the user is wanting the object of his/her interaction to take? (Most of the time these will be opposite directions.) Example: Scroll bars aren't as obvious as we may think and Apple has successfully changed their orientation. (In this case: Is it the direction the document should take inside the view or is it, where the user is wanting the viewport to go inside the document?) We could refer to this as "object view" and "subject view" – and the ambiguity being, whether the interaction is bound to the object or to the subject. Furthermore there's an ambiguity of time involved: Is it the direction, the elevator is going to take before I enter, or after I entered? (In terms of object vs subject: Am I calling the elevator or am I telling the mechanism where I would want to go?)
Illotus 13y ago
Very good overview on the subject of icon usability is http://ux.stackexchange.com/questions/1795/when-to-use-icons-vs-icons-with-text-vs-just-text-links http://ux.stackexchange.com/questions/1795/when-to-use-icons... Research roughly says that icons with text are best and only text is better than only icons.
- calinet6 13y ago
  That just makes so much sense. It has exactly matched my experience. It's sometimes not clear that a label plus an icon is actually better than a label alone: I think having the right icon alongside the right label multiplies their effectiveness. The icon is immediately recognizable, while the label is immediately comprehensible. You get both good learnability and fast recall in one. Best of both worlds.
eyronnn 13y ago
Being myself a UI/UX designer,"we get deeply involved in the product buildup to a point that an emoticon like thing can often seem implicit. Why in the world would someone not get it? It’s so implicit to us that it’s never even a point of discussion or question." I couldn't agree more and have personally experienced a lot of times. So I have made a habit of testing everything with friends and first time users. It really effects and help improve UX a LOT. User testing should really be focused more. For the case of icons and text.I really feel that the situation and context is important. Like for road sign I strongly feel using combination of icon and text really works the best.
NAFV_P 13y ago
Would an ANSI/ISO standard of symbols be of any help?
asdasf 13y ago
Now how do you convince graphic designers and marketing people that this matters more than "branding" or "impact" or looking "cleaner" or any of the other vague feelings-based reasons they give to deliberately make the user experience bad? I'm constantly dealing with people who insist on making the user interface bad because they think it is part of their branding and that matters more. And no amount of explaining "you are making less money by having fewer people able to use your app" seems to convince them.
- petervandijck 13y ago
  Usertest. Have them observe. Or: film and show them. Works every time.
cfesta9 13y ago
I'm a big fan of The Noun Project. This site has helped me on many occasions. http://thenounproject.com/ http://thenounproject.com/
vpeters25 13y ago
I hope somebody from the Firefox OS team reads this: most of their apps have "mystery buttons" where the only way to figure out what they do is to press them. It took me 3 tries to find out which button to use to write a new tweet on their tweeter app. On a related note a while ago we were discussing this new generation of kids will probably never come across a floppy disk, yet it's almost a UI convention to use the floppy icon for the Save function. EDIT: Grammar
integraton 13y ago
> it’s the crave button. It’s so primitive an action that we overlooked it. What is "crave" in this context? This is already an unconventional action for an interface. Am I to assume that you are trying a new variation on "like" / "favorite"? Since it doesn't use a conventional name, does it do something different? If it is just essentially a "like" action, do you have sufficient reason to break from convention? If an affluent white male interface-creating technologist in the bay area like me doesn't immediately know what the action does, maybe the unconventional icon isn't the only deviation from convention that's causing confusion.
tsumnia 13y ago
Based on this article, I think Twitch.tv actually handles UX very well. http://www.twitch.tv/directory http://www.twitch.tv/directory Initially, you see the larger navigation bar which gives you clear definition to where everything is; however, once you've become familiar with the site, you have the option to shrink the bar down to just the essential icons. The problem is we're not sure what icons users 'get', which is why there was so much argument when the Windows 'Start' button removed the wording (and in Window 8's case, the button). If you didn't recognize the icon, the wording re-enforced it. But how many non-techie's immediately understand three circles, 2 lines, in the shape of > means 'Share Online'? How many even get B means 'Bold'? This is an issue I've started to research since becoming an instructor for 'Intro to Computers'. What are some of the things people really need to learn to use the computer (instead of the MS Office stereotypical course). As time moves forward (and as UX designers pick standards), I can make the course more 'ambiguous', so any OS/Browser/Program and be used by the student in no time.

85 points by Cherian 13y ago

We used to call this Mystery Meat navigation: just symbols or pictures without words. I still hate icons standing on their own, unless they're extremely clear and unambiguous. Even then, they'll be unclear and ambiguous to someone out there. Just add a label. Even when we've been skeptical that words wouldn't fit in with our design, that they'd clutter or confuse; we've always found a way to make the labels fit in, and our usability has been much improved for it. People simply don't ask questions anymore—it worked better than we could have hoped.

patio11 13y ago

The original author may have meant "cardinal" (primary) rather than "carnal" (of the flesh, generally used as a synonym for "sexual" in modern English).

czr80 13y ago

I'm guessing you mean "cardinal" but I'm not going to click that link at work :-)

ergusto 13y ago
From the looks of it he originally used 'carnal' in the title, then recognised his mistake, but had already made the slug for the URL before he changed the error.

Pxtl 13y ago

Can't tell you how many times I've had to tell people "I read english, not heiroglyphics. Microsoft bothered the heck out of me - in an era when screens are getting larger, they drop the text labels off of the taskbar. MS is the last company that should be relying on their users' ability to recognize icons since htey completely change the shortcut icons for the whole MS Office suite and Visual Studio every release.

sz4kerto 13y ago
Taskbar is a bad example here. As I mentioned below, icons without text are good choice if and only if the user sees them all the time / knows exactly what they mean. The stuff most (98%) of people sees in their Windows 7 taskbar is really familiar to them -- IE or Firefox symbol, Word, Excel, Skype, etc. It's OK to use icons there, it saves a lot of space, and people don't really 'parse' the icons at all, they just remember the spatial locations, and maybe the colors. But having very similar, black and white icons without text in a smartphone app? Really bad decision. BTW, colors help a lot, even they sometimes conflict with the currently fashionable flat designs. Look at the new Visual Studio -- it looks nice, but developers keep complaining about the lack of colours.
- Pxtl 13y ago
  MS frustrates this by changing the icons with every major release, though. I have no idea what the Word 2013 icon looks like. They didn't even keep the colour conventions - outlook always used to be yellow. But yes, VS2012 is a worst-case scenario. The TFS source-control file browser makes my eyes want to bleed.

FreakyT 13y ago

So true! I've always followed the guideline that, in general, icons should be viewed as purely decorative. Go ahead and add them for aesthetic purposes, but avoid making them the sole indication of something's function. I'd make an exception, however, for some extremely common icons, such as the B, I, and X icons for "bold", "italic", and "close".

arpit 13y ago

The problem with text instead of icons is that a)Its needs translation per language and b)it takes longer to parse/process. The weather information in iOS7's "Today" notification is an example (http://applenapps.com/wp-content/uploads/2013/06/ios_7_6_notification_center.jpg http://applenapps.com/wp-content/uploads/2013/06/ios_7_6_not...). It takes much longer to read the exact weather information than just seeing a weather icon and getting it (IMHO). In this article's case, it seems he use something that wasn't "iconic" as an icon.

sz4kerto 13y ago
No, it does not take longer to process, in general. If there is a small, well-known set of icons (e.g. traffic signs), then yes, it's easier. Same is true for weather symbols - sun and clouds are well-known. However, I find really amusing when I (as somebody who considers himself a really experienced user and gadget-fan) can't decide what the icons mean on my smartphone, then I start getting suspicious. If you haven't seen something many times, then icons are harder to parse, simply because you don't know what they mean.
Hermel 13y ago
Icons sometimes need translation too. For example, the "filter" icon only works in English because most other languages don't call funnels "filter". It would be better to show a sieve than a funnel.
- Pxtl 13y ago
  The filter one is an older convention, common in database applications. I guess it can work from a purely abstract perspective - something narrowing down, implying that you want to narrow down what's in front of you... but still, it is confusing to a new user. It feels like a search magnifying glass would convey the concept better, and simply bundle the filter UI into the search UI if an application offers both features.
  - azinman2 13y ago
    Which shows you how terrible all of these absteActions are. Search is a magnifying glass? Would that instead be zoom? Oh wait that is already the case in all photo editing apps, except they usually add a plus or minus. Convention is just an excuse for repeating bad behavior without question.

Ysx 13y ago

A modal that you can't dismiss isn't a great idea either, with it taking nearly half of my phone's viewing area. http://imgur.com/3K2CUG1 http://imgur.com/3K2CUG1

Cherian 13y ago
Ooh, I am sorry about this. Genuine mistake.
schrodinger 13y ago
I came here to say the same thing.
RazerM 13y ago
I was about to post an identical comment http://imgur.com/Pdwf6HW http://imgur.com/Pdwf6HW

maggit 13y ago

I'd just like to add that well established icons are much more readable than text. The prime example that makes me believe this is road signs. In Europe it is pretty easy to drive a car in any country and be able to do it correctly, IF you are used to European road signage. Driving a car in USA when used to European signage is difficult. The signs in USA more often have text, but it is not always more understandable than an icon. What does "PED XING" mean, and how much time and energy do you have to dechiffer it while driving? (It took me days to realize that it is probably a contraction of "pedestrian crossing") Another example; it takes much more effort to understand what "SLIDES" might mean than it takes to recognize a pictogram of sliding rocks. When the text is not immediately understandable, you have to recognize it from earlier. This is similar to icons that are not immediately understandable. My take-away here is that it takes lots of effort to make good descriptive text. Using text instead of icons is not a simple solution for the problem described in the article. It takes effort to communicate clearly anyway :)

jimktrains2 13y ago
Most signs also have a symbol as well. PED XING signs will have an image of people in a crosswalk. It takes exactly no time because the signs are fairly standard and we, in the US, are used to it. It's the non-standard signs that take time to parse. The road signs in the US are _well established_ in the US.
- maggit 13y ago
  > The road signs in the US are _well established_ in the US. Of course they are! I am not trying to say that US signage is unclear. I am trying to illustrate that it does not automatically make things clearer if you use text instead of pictograms. Using text might make things clearer, but "SLIDES" is only clear if you already are familiar with it. Agree? :) (The same thing goes for the text "PED XING", but this example is less important since, as you say, it is usually accompanied by a pictogram) In my experience, road signs in the US rely much more on text than road signs in Europe. This is why I brought this up as an illustrative example that text is not a magic bullet :)

free652 13y ago

How about a tooltip over the icon?

Pxtl 13y ago
How do you tooltip on a phone? Seriously, a standard (?) icon in the corner to show all the text labels and list the gestures temporarily should be a standard feature on touch devices that often heavily rely on gestures and textless icons.
- mercnet 13y ago
  For android apps, if you do a long press on a button/icon it will show a tooltip. For example, open gmail, long press on Search Icon and the tooltip "Search" appears.
  - Pxtl 13y ago
    Long-press is a terrible imitation of "hover" since long-press also has other actions associated with it, so users have no way of knowing whether long-press means "give me more info" or "do stuff (different from normal click)". Plus, long-press is tediously slow. Some devices it's actually hard to do a long-press well because the touchscreen is oversensitive to small movements of your finger... this problem insn't a killer for rare interactions, but if it's something your doing all the time it will drive you batty. This is something Windows Phone excels at, actually. Any program that uses icons will put them along the bottom bar. If you open up the three-dot Menu? The bottom bar slides up to reveal (1) text labels for the icons and (2) additional less-frequently-used actions that have a full text name instead of an icon. This is fantastic because it means you have one interaction you use to say "I can't see where click to do X". Either you find the option in (2) or you discover that the action was already staring you in the face in (1).
    - Systemic33 13y ago
      Came here to say that aswell, I'm really happy with the Windows Phone solution. And I can tell my mom, if she's confused about some strange icons, just to press the 3 dots, and it'll say in text.

B0Z 13y ago

http://imgur.com/TdrXpxS.png http://imgur.com/TdrXpxS.png Funny. I was thinking a non-disappearing modal on a mobile browser would be a fairly cardinal UX mistake. Call me crazy.

Cherian 13y ago
My bad. Fixing it. Update: Fixed.
- deleted 13y ago
  [deleted]

lingben 13y ago

this is better known as 'mystery meat' navigation and google is one of its most famous adherents but then again, google has shown again and again that they know absolutely nothing about UX or UI

potatolicious 13y ago
It's laziness, Google is the most visible adherent because all of their products are heavily internationalized. I'm going through this right now - we're translating a native mobile app into a bunch of languages, and let me tell you, getting a dense UI to fit right in multiple languages is an extremely iterative exercise that saps your development velocity like nothing else. A natural and popular reaction to this is to go "then we'll speak in a universal language - pictographs!", except complex concepts can almost never be expressed properly in iconography, especially iconography that isn't well-established internationally. I have a strong suspicion that Google's forays into all-iconography UIs is an attempt to reduce the amount of translation (and subsequent tweaking) they need to do.
- lingben 13y ago
  your statement implies an assumption that there is a normal distribution of users among the languages but google being a company driven by metrics would realize that the vast majority of their users speak only a handful of languages, wouldn't they? I would venture to say that more than 60-70% would be English, followed by the romance languages and perhaps German ending up with more than 90% of users among 5-6 languages. there is no reason to make 90% of your users suffer for a possible inconvenience created by 10% of your users.
  - efdee 13y ago
    I think you are leaving out a number of Asian and cyrillic languages that would heavily skew your numbers...
  - matho 13y ago
    You might want to reconsider Google's target market. Only a minority of the world use the Latin alphabet.

meerita 13y ago

Either go full text actions or only icons. You can't have both because of the reduced space and reduce the ammount information you need to digest. Also, users can experiment with your UI/UX, so the camera example doesn't apply.

Pxtl 13y ago
You can do both on a desktop. The average PC screen is like 4 ipads duct-taped together.
awj 13y ago
> Also, users can experiment with your UI/UX, so the camera example doesn't apply. That's a pretty user-hostile stance. People have things to do, figuring out which hieroglyph on their camera app does what they want is probably low on the list. I can experiment, yes, but I'd really prefer not to.
- meerita 13y ago
  Part of the learning curve is to know what each action do. In the case of the camera, it is normal that there are "switches". In user interfaces where the common actions are delete, move, forward the things are different: not much experimentation is allowed, if you delete, you delete and rarely you see an "undo your mistake", but in a camera UI, the actions are 95% of the time harmless to the user and they are done mostly to operate in preview mode (like when you zoom, or activate white balances, etc.) I believe fervently, and no offense to the author, that it is wrong to recall the example of the camera. Especially since Android people will surely be tested this and a thousand other things with real people knowing how crazy-paranoids in Google were with even, link colors in apps.

mherdeg 13y ago

I really like the "one way street" sign in this blog post because it reminds me of our first trip to Germany, where we were bemused at the incredible number of roads Munich had all named "Einbahnstraße".

neilxdsouza 13y ago
Reminds me of when I went to Brussels the first time, trying to travel to Leuven (where my friend was staying). All the buses were going to "Geen Dienst". That's a popular destination I thought to myself.
- czr80 13y ago
  Means "Not in service", for those wondering.
nona 13y ago
A friend of mine made the following remark when she was little, travelling on the autobahn: "darnit, Ausfahrt must be one huge city, since all the exits are pointing to it"

user24 13y ago

So... what do those icons at the end mean? My guesses: 1) no idea (share photo?) 2) take panorama 3) take video 4) take photo

nucleardog 13y ago
Top one is to take a 'sphere photo' (360 degrees + up and down all stitched - forget the marketing name right now).
yahelc 13y ago
Assuming that's a screenshot from the Google Apps interface, the Funnel one is "Filters": http://i.imgur.com/QsU8sft.png http://i.imgur.com/QsU8sft.png I find these Google Apps admin buttons to be even more confusing: http://i.imgur.com/SVX34h2.png http://i.imgur.com/SVX34h2.png
untog 13y ago
First one is a Photo Sphere. I knew what it was immediately, but then I know my phone comes with that feature.
- danielweber 13y ago
  If they had the words "Photo Sphere" I would be even more confused. I have no idea what that means. Of course, I could always click on it to tell. Which is probably okay, unless your mystery-icon was something I cannot undo.
  - untog 13y ago
    Yes but my point is that you might, like me, have bought a device that boasts about its "Photo Sphere" functionality in promotional materials. So then I'd know what it is. On a more abstract level, the photo sphere icon makes no less sense than the panorama one does. You just know what the latter is because it's more well known.

6d0debc071 13y ago

Coincidentally, with German signs being mentioned in the article, German public service typography, the signs and so on, is gorgeous. Really well designed. There's the guy whose company did stuff for BFG and the railways talking about some of his work here: http://vimeo.com/30008631 http://vimeo.com/30008631

squidstampede 13y ago

"Yet. Yet… the top UX myth of all time is, icons enhance usability" It's a fact that it is easier and faster to comprehend images than words. I think the only situation this isn't true is when you are icons aren't clear. You can't use icons for obscure things or things that don't have an established universal recognition for exactly the reason this article describes. That's why everyone always recognizes a picture of an old school telephone versus a smart phone as an icon in front of something like a phone number. I think the "Cardinal" UX mistake made here was that, not using an icon over text.

dragonwriter 13y ago
> It's a fact that it is easier and faster to comprehend images than words. That's not at all a fact. It might be faster to recognize images than words (though I think for people that are more than marginally literate, its mostly equivalent for familiar words, because they are recognized as images.) > I think the only situation this isn't true is when you are icons aren't clear. Icons are almost never as clear as words, because they are essentially words written in an ad hoc, application specific, logographic script. The exception is when icons with well-established meanings outside of the specific application are used in a context which makes clear that they are being used in their well-established sense, in which case they become words in familiar logographic script. But except for icons that have well-established action meanings in the context of computer UIs, that's usually not the case in application UIs, even with familiar symbols originating in non-computer-UI domains. There, familiar symbols are used in senses which are inspired by their common usage in other domains, but not identical to them, which still requires both recognizing the symbol and inferring the analogy being used.
- pwg 13y ago
  > > It's a fact that it is easier and faster to comprehend images than words. > That's not at all a fact. It might be faster to recognize images than words There is one point that almost all of these icons vs. text discussions omit. And that is an additional phrase at the end of the sentence: "It is faster to recognize images than words, __after you have learned what the image means__".

graycat 13y ago

> Yet. Yet… the top UX myth of all time is, icons enhance usability Let's see: Given an icon, how to I pronounce it, spell it, in case I don't know what it means look it up in a dictionary? I can't. Long ago I decided that a good user interface should go light on icons. In the Web site I'm building, the screens I'm building have no icons at all. Instead there are some push buttons with descriptive English words inside them and some links as words. And each substantive page has a link "Help" that explains in detail how to use the page. Civilization used to have icons, but then got the Roman alphabet! Further, for another "cardinal UX mistake", a user will never have to run experiments and explore the user interface (UI) to discover how to use the Web site. Further, for another "cardinal UX mistake", the Web site has no undefined acronyms or terminology. Each word is used in its simple dictionary meaning or otherwise has its special meaning defined and explained. E.g., "UX" abbreviates 'user experience'?

velik_m 13y ago
How do you deal with multiple languages?
- graycat 13y ago
  Good question. So far, I don't. When I go live and get some success, then I'll handle other languages. Actually, the user interface (UI) is so simple to use that people who don't know English should be able to use the common 'interface experimentation' (that I don't like and that I hope my English language users won't have to use) to see how to use the site. But having versions of the site for languages other than English should not be too difficult. I'm writing nice code, but it's not the most general thing since Einstein's theory of general relativity, and with enough changes for languages, small screens, etc. might need some 'refactoring'. So be it.

scubbo 13y ago

> "The biggest culprit of a simple icon turning villain is the elevator at my apartment. You’d think how much more simpler can this get. Up to go up and vice versa, isn’t it?" I don't understand. Is this not the case? > "Until you realize that people use this to “bring the elevator up” and to “bring the elevator down”." I think they're wrong, but now I'm doubting myself! > "I often go from my top floor to the parking with switches in-between and peeps asking “Going up or down?”" ...everything I thought I knew is a lie.

prawks 13y ago
This passage is making my brain hurt. You press the button to indicate you need to go up. The problem isn't with the button or the icon, it's with the expectation that the button should assist in helping you navigate the scheduling of the elevator(s). Which it does (to a point). If you're coincidentally on a floor where someone is getting off and you need to go in the opposite direction than the next person in the elevator's queue, the button will not reset. You're still waiting for the elevator. Culturally, people just ask instead of knowing/trying to discern this.
- daigoba66 13y ago
  I don't know about the OP's elevator, but many that use daily have arrows above the door that light up when the door opens indicating which direction the elevator is traveling next. I don't need to ask.
masswerk 13y ago
There's always an ambiguity in metaphors comprising directions and the like: Is it the direction the user is wanting to take, or is the direction the user is wanting the object of his/her interaction to take? (Most of the time these will be opposite directions.) Example: Scroll bars aren't as obvious as we may think and Apple has successfully changed their orientation. (In this case: Is it the direction the document should take inside the view or is it, where the user is wanting the viewport to go inside the document?) We could refer to this as "object view" and "subject view" – and the ambiguity being, whether the interaction is bound to the object or to the subject. Furthermore there's an ambiguity of time involved: Is it the direction, the elevator is going to take before I enter, or after I entered? (In terms of object vs subject: Am I calling the elevator or am I telling the mechanism where I would want to go?)

Illotus 13y ago

Very good overview on the subject of icon usability is http://ux.stackexchange.com/questions/1795/when-to-use-icons-vs-icons-with-text-vs-just-text-links http://ux.stackexchange.com/questions/1795/when-to-use-icons... Research roughly says that icons with text are best and only text is better than only icons.

calinet6 13y ago
That just makes so much sense. It has exactly matched my experience. It's sometimes not clear that a label plus an icon is actually better than a label alone: I think having the right icon alongside the right label multiplies their effectiveness. The icon is immediately recognizable, while the label is immediately comprehensible. You get both good learnability and fast recall in one. Best of both worlds.

eyronnn 13y ago

Being myself a UI/UX designer,"we get deeply involved in the product buildup to a point that an emoticon like thing can often seem implicit. Why in the world would someone not get it? It’s so implicit to us that it’s never even a point of discussion or question." I couldn't agree more and have personally experienced a lot of times. So I have made a habit of testing everything with friends and first time users. It really effects and help improve UX a LOT. User testing should really be focused more. For the case of icons and text.I really feel that the situation and context is important. Like for road sign I strongly feel using combination of icon and text really works the best.

NAFV_P 13y ago

Would an ANSI/ISO standard of symbols be of any help?

asdasf 13y ago

Now how do you convince graphic designers and marketing people that this matters more than "branding" or "impact" or looking "cleaner" or any of the other vague feelings-based reasons they give to deliberately make the user experience bad? I'm constantly dealing with people who insist on making the user interface bad because they think it is part of their branding and that matters more. And no amount of explaining "you are making less money by having fewer people able to use your app" seems to convince them.

petervandijck 13y ago
Usertest. Have them observe. Or: film and show them. Works every time.

cfesta9 13y ago

I'm a big fan of The Noun Project. This site has helped me on many occasions. http://thenounproject.com/ http://thenounproject.com/

vpeters25 13y ago

I hope somebody from the Firefox OS team reads this: most of their apps have "mystery buttons" where the only way to figure out what they do is to press them. It took me 3 tries to find out which button to use to write a new tweet on their tweeter app. On a related note a while ago we were discussing this new generation of kids will probably never come across a floppy disk, yet it's almost a UI convention to use the floppy icon for the Save function. EDIT: Grammar

integraton 13y ago

> it’s the crave button. It’s so primitive an action that we overlooked it. What is "crave" in this context? This is already an unconventional action for an interface. Am I to assume that you are trying a new variation on "like" / "favorite"? Since it doesn't use a conventional name, does it do something different? If it is just essentially a "like" action, do you have sufficient reason to break from convention? If an affluent white male interface-creating technologist in the bay area like me doesn't immediately know what the action does, maybe the unconventional icon isn't the only deviation from convention that's causing confusion.

tsumnia 13y ago

Based on this article, I think Twitch.tv actually handles UX very well. http://www.twitch.tv/directory http://www.twitch.tv/directory Initially, you see the larger navigation bar which gives you clear definition to where everything is; however, once you've become familiar with the site, you have the option to shrink the bar down to just the essential icons. The problem is we're not sure what icons users 'get', which is why there was so much argument when the Windows 'Start' button removed the wording (and in Window 8's case, the button). If you didn't recognize the icon, the wording re-enforced it. But how many non-techie's immediately understand three circles, 2 lines, in the shape of > means 'Share Online'? How many even get B means 'Bold'? This is an issue I've started to research since becoming an instructor for 'Intro to Computers'. What are some of the things people really need to learn to use the computer (instead of the MS Office stereotypical course). As time moves forward (and as UX designers pick standards), I can make the course more 'ambiguous', so any OS/Browser/Program and be used by the student in no time.