Hacker News new | comments | show | ask | jobs | submit login
The cardinal UX mistake we made, you might be making it too (cucumbertown.com)
85 points by Cherian 1307 days ago | hide | past | web | 78 comments | favorite



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


So, I think an interesting discussion is what icons have reached that well established status. To me, the power on/off icon seems like one, and the settings gear symbol is rapidly becoming one. The refresh icon of a broken circle with an arrow at one end of the line (see any browser) is also one.

Interestingly, I looked up the power icon and found it's an IEC standard, with variations having very specific meaning[1]. A quick search didn't bring up much more useful, although there's an IEC publication "Graphical Symbols for Use on Equipment" which looked promising (although I didn't see anything useful in the preview PDF I found)

  [1]: http://en.wikipedia.org/wiki/Power_symbol


I can give you at least two data points: my parents would have no idea that a line in a circle means "turn this device on."

Most people are trained monkeys. The assumption that anything is universally obvious will almost always be wrong. Being explicit helps people figure things out rather than needing to randomly attempt and see what happens (many will be too scared to try) or ask someone else for help/training.

Text can be beautiful and doesn't need to hurt the design. This is all part of the challenge.


And yet text is necessarily limited in it's audience, based on the people who can read it.

Every physical electronics device that I've seen and has a power related button and was created within the last 5 years has had the IEC standard button.

At a certain point this is a training issue. I think universal symbols have value. If we can standardize on a few for extremely common concepts, I think it's worthwhile to do so and train those that don't know them.

The radioactivity hazard sign[1] is a good example of this. At one point (prior to 1946), people didn't know what that meant, but people learned because there was value in knowing.

  [1]: http://en.wikipedia.org/wiki/Hazard_symbol


I can think of one situation where the text is counterproductive, for me at least. Where I live, the direction of oncoming traffic is written on the road for pedestrians. There's also an arrow.[1]

The problem is that once I'm halfway across the road I can't help but read the upside down text in front of me, which is telling me to look in exactly the wrong direction. Clearly I already know which way the traffic is coming from, but it's not helpful to see an arrow pointing left and reading "look right".

[1] http://4.bp.blogspot.com/-sex61jLVUSU/TubGeKWXE9I/AAAAAAAAGK...


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.


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


It might not automatically make things clearer, but if it does then it is better and considering the USA is mostly English speakers it shouldn't be a problem. I can see how the language barrier can be an issue in Europe though.


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.


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.


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.


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.


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.


My bad. Fixing it.

Update: Fixed.


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


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.


Means "Not in service", for those wondering.


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"


Very good overview on the subject of icon usability is 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.


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.


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


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.


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.


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.


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.


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


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


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


I was about to post an identical comment http://imgur.com/Pdwf6HW


Ooh, I am sorry about this. Genuine mistake.


I came here to say the same thing.


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


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?)


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.


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.


> 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'?


How do you deal with multiple languages?


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.


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


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.


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.


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


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.


You can do both on a desktop. The average PC screen is like 4 ipads duct-taped together.


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


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.


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.


I would venture that your numbers are pretty off.

As of the last quarterly results, 55% of Google's income is coming outside of the US[1]. China has more than double the number of internet users than the US[2], and this is increasing rapidly. We also know that Google has a mind to capture the burgeoning Chinese market, so the relevance of this number to them is pretty substantial. India and Japan combined also equals the US's internet user count.

If you look at the top-10 in that list, it accounts for about 1.4 billion internet users. Of those, about 309 million come from English-speaking countries. 462 million if you're including all western European languages (romance languages).

We know that, by sheer economic force, wealthy developed countries occupy the lion's share of Google revenues (the USA represents ~10% of all internet users, but 45% of Google's revenues). In terms of raw users impacted though, that's quite different. Google has no lack of users from non-English countries.

But forget all of this for a second and assume that your numbers are in the ballpark. 60-70% English, moving up to 90% if you include western European "romance" languages (Latin and Germanic languages aren't the same thing, but whatever). Having just finished translating a large app into French, Spanish, Portuguese, and German, I'll say that "romance" languages aren't any easier to translate. French for example tends to run long, and provides huge headaches in any UI that's even remotely space constrained. German tends to mess up line breaks with long compound words, and there are a puzzling number of common verbs in Portuguese and Spanish that run much longer than you would expect them to. All of that requires babysitting and constant iteration to ensure everything fits, reads write, and works right.

And you can see this with Google - they haven't gone all pictographic in their UIs. Instead they've most heavily iconified parts of their UI that are space-constrained. Toolbars are the canonical example. These are the components that most common make people tear their hair out and run screaming into the woods when translating.

[1] http://investor.google.com/financial/tables.html

[2] http://en.wikipedia.org/wiki/List_of_countries_by_number_of_...


I think you are leaving out a number of Asian and cyrillic languages that would heavily skew your numbers...


You might want to reconsider Google's target market. Only a minority of the world use the Latin alphabet.


I really dislike Gmail's icon-only display in the GMail interface (I've changed the appearance to text labels only.)

I also dislike the way they hide common functions (like delete) until you've selected an item. I can understand their reasoning: they probably thought it would make for a clutter-free interface. It took me a while to get used to the 'select-email-then-make-command-visible' pattern. I still find this very unnatural. It is common in some desktop applications and it works because you might be manipulating the properties of an object in some way. But for an email interface, it's overkill and the wrong pattern (in my opinion). Delete is a such a common email function it should be visible at all times. Most people know they have to select a message before they can delete it, but I found I was looking first to see that the command was available before I made any selection.

Also, I note on the "more" button in GMail, they have a hint that says "select messages to see more actions" which might suggest that other people are hunting for commands not visible in the interface?

(Finally, I can't help but make one more observation - the way that the Gmail compose email box appears in the lower right corner of the browser window - I just find this bizarre and not helpful)


the new compose takes the cake! if anything is definitive proof that google has zero talent/skill in UX/UI it is this.

incredibly shocking that within an organization as large and as wealthy such incompetence can rise to such a high level to dictate such a gigantic leap backwards and no one is around to laugh at the imbecilic change.


Based on this article, I think Twitch.tv actually handles UX very well.

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.


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


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


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


> > 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__".


Exactly. And that's true until you forget because you're human, and then you have no idea what anything is. The assumption that "faster" is always the primary goal is what happens when CS people try to do UX. Its the dimension that should be optimized last, not first.


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


Assuming that's a screenshot from the Google Apps interface, the Funnel one is "Filters": http://i.imgur.com/QsU8sft.png

I find these Google Apps admin buttons to be even more confusing: http://i.imgur.com/SVX34h2.png


Top one is to take a 'sphere photo' (360 degrees + up and down all stitched - forget the marketing name right now).


First one is a Photo Sphere. I knew what it was immediately, but then I know my phone comes with that feature.


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.


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.


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


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


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.


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


How about a tooltip over the icon?


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.


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.


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


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.


Nowadays we should always have mobile users in mind when designing web interfaces. The only thing I could come up that works and isn't confusing is always visible text.


I don't think it helps on touch screens.


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


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.


Usertest. Have them observe. Or: film and show them. Works every time.




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | DMCA | Apply to YC | Contact

Search: