
The cardinal UX mistake we made, you might be making it too - Cherian
http://www.cucumbertown.com/craft/the-carnal-ux-mistake-we-made-you-might-be-making-it-too/
======
maggit
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 :)

~~~
kbenson
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

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

~~~
kbenson
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

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

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

------
B0Z
[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
My bad. Fixing it.

Update: Fixed.

------
mherdeg
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
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
Means "Not in service", for those wondering.

------
Illotus
Very good overview on the subject of icon usability is
[http://ux.stackexchange.com/questions/1795/when-to-use-
icons...](http://ux.stackexchange.com/questions/1795/when-to-use-icons-vs-
icons-with-text-vs-just-text-links)

Research roughly says that icons with text are best and only text is better
than only icons.

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

------
arpit
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...](http://applenapps.com/wp-
content/uploads/2013/06/ios_7_6_notification_center.jpg)). 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.

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

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

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

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

~~~
RazerM
I was about to post an identical comment
[http://imgur.com/Pdwf6HW](http://imgur.com/Pdwf6HW)

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

------
graycat
> 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
How do you deal with multiple languages?

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

------
6d0debc071
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)

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

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

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

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

~~~
potatolicious
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](http://investor.google.com/financial/tables.html)

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

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

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

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

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

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

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

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

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

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

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

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

------
free652
How about a tooltip over the icon?

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

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

------
asdasf
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
Usertest. Have them observe. Or: film and show them. Works every time.

