What the hell does ≡ do, anyway?(ada.mbecker.cc)
ada.mbecker.cc
What the hell does ≡ do, anyway?
http://ada.mbecker.cc/post/25113870928/goddamn-three-bars-icon
50 comments
I would argue the OS X, Twitter and Facebook examples all have the same meaning - "click me to see a list of items".
What the hell does λ mean?
I keep seeing it in all my classes and just can't get a grip on it.
I've really only seen the 'triple bar' used outside of facebook for meaning 'if and only if' in symbolic logic.
>Even worse is when the offending design is completely out of your control, like the kerning on the sign at the Court st. subway station.
Don't see anything wrong with the kerning. It's not a typeset document, anyway, it's made by some craftman and/or artist as tiles, and this is the placement that he picked.
It's not like a bad poster made in Word with letter clinging together or something...
Don't see anything wrong with the kerning. It's not a typeset document, anyway, it's made by some craftman and/or artist as tiles, and this is the placement that he picked.
It's not like a bad poster made in Word with letter clinging together or something...
Context matters. I think it's acceptable for that icon to mean 'list' in one context, and 'justify' in another. Using it to mean 'menu' is a little confusing though. Sure, there's a list of menu items, but in the context of Facebook it looks a lot more like a list of posts – i.e., newsfeed.
Both Justify and List make sense in context of their neighbors. All the other uses are by themselves and they don't mean "menu" they mean "drag from here". The icon is called a "drag handle".
See, for example, the four little lines on the bottom right key on the iPad keyboard: http://ipadinsight.com/wp-content/uploads/2011/06/iPadKeyboa...
Or the three little lines in the bottom right corner (drag diagonally) of pre-Lion OSX (drag from any edge): http://www.cs.williams.edu/~freund/cs136-073/unix/window.jpg
See, for example, the four little lines on the bottom right key on the iPad keyboard: http://ipadinsight.com/wp-content/uploads/2011/06/iPadKeyboa...
Or the three little lines in the bottom right corner (drag diagonally) of pre-Lion OSX (drag from any edge): http://www.cs.williams.edu/~freund/cs136-073/unix/window.jpg
I kind of agree for the "drag to reorder" in the stocks apps, but this doesn't work for Facebook and Bootstrap.
For Facebook, it doesn't work because the grip is not the in the correct direction. The grip is a skeuomorphism for real grips that go perpendicular to the movement you want to stop. Here you move your finger horizontally and the lines are horizontal too.
For Bootstrap, it doesn't work either because the button stays where it is, whereas the grip should follow your finger or mouse. (see for example, the grip on the notification center on iOS: http://iphoneism.com/wp-content/uploads/2011/06/notification...)
That being said, I think in both Bootstrap and Facebook, the icon represents a list: the list of things in the menu and the list of settings (or views) in Facebook. Even in the iOS stock app, I think it's probably a list too. It can be interpreted as a grip, but only in the Android version do the graphics imply it more strongly.
For Facebook, it doesn't work because the grip is not the in the correct direction. The grip is a skeuomorphism for real grips that go perpendicular to the movement you want to stop. Here you move your finger horizontally and the lines are horizontal too.
For Bootstrap, it doesn't work either because the button stays where it is, whereas the grip should follow your finger or mouse. (see for example, the grip on the notification center on iOS: http://iphoneism.com/wp-content/uploads/2011/06/notification...)
That being said, I think in both Bootstrap and Facebook, the icon represents a list: the list of things in the menu and the list of settings (or views) in Facebook. Even in the iOS stock app, I think it's probably a list too. It can be interpreted as a grip, but only in the Android version do the graphics imply it more strongly.
I see twitter bootstrap, facebook, and the sparrow app to all mean the same thing: view a list of options.
Bootstrap: list of pages
Facebook: list of feeds
Sparrow: list of folders
It makes total sense to me.
Bootstrap: list of pages
Facebook: list of feeds
Sparrow: list of folders
It makes total sense to me.
The lines are pretty recognizable as drag handles (in lists, on windows, etc), but to be honest I never dragged that icon in Facebook until you mentioned it. In a button, they do not look like drag handles. On the iOS keyboard, one thing that makes them instantly readable is their physicality (they're embossed), which communicates 'grip'. The grip concept goes back even further, to the classic Mac OS look.
[deleted]
As an anecdotal data point, when I hit "edit" in my phone favorites list on the iPhone, I always saw the "drag handle" as a little list, which I understood as a clumsy stand-in for "reorder this list." The "drag handle", as a representation of a little surface designed for friction so you can put a finger on it and drag it, never occurred to me as a possibility, though I understood it in other contexts. Apparently users can creatively make sense whatever they see even if the intended analogy falls flat.
I think the popularity of retina displays will result in a clarifying divergence of these homographs into different representations. A few years from now we will see the collision of these different meanings as an artifact of low-resolution graphics intended for low-resolution displays. But a few years beyond that, I think we will tire of subtle distinctions and decide that homographs are not any more difficult to deal with than subtle visual distinctions. This collision has not resulted in significant user confusion; in fact, it has taken an unusually observant person to point it out to the rest of us, who were happily using these interfaces without difficulty.
I think the popularity of retina displays will result in a clarifying divergence of these homographs into different representations. A few years from now we will see the collision of these different meanings as an artifact of low-resolution graphics intended for low-resolution displays. But a few years beyond that, I think we will tire of subtle distinctions and decide that homographs are not any more difficult to deal with than subtle visual distinctions. This collision has not resulted in significant user confusion; in fact, it has taken an unusually observant person to point it out to the rest of us, who were happily using these interfaces without difficulty.
In the "Here's something you can drag" version, I think it's supposed to look like a textured indicator you might find on a tool or other real world object to show you where you place your hand.
In the Facebook example, I think the "..." icon would have been better and in the Twitter bootstrap, a gear would have been vastly more appropriate.
In the Facebook example, I think the "..." icon would have been better and in the Twitter bootstrap, a gear would have been vastly more appropriate.
A gear would be incredibly inappropriate in twitter bootstrap.
In bootstrap, that icon appears when the menu gets condensed due to a smaller screen size. It is access to the list of menu items.
Look at the example on the Bootstrap site: http://twitter.github.com/bootstrap/examples/hero.html
Making your browser window smaller makes the icon appear so that you can access the menu of "home", "about", and "contact". That is not a settings icon, it is a list icon.
In bootstrap, that icon appears when the menu gets condensed due to a smaller screen size. It is access to the list of menu items.
Look at the example on the Bootstrap site: http://twitter.github.com/bootstrap/examples/hero.html
Making your browser window smaller makes the icon appear so that you can access the menu of "home", "about", and "contact". That is not a settings icon, it is a list icon.
I agree that the usage in bootstrap is not intuitive. When I built http://jobs.eupathdb.org/ it took me a while to figure out what it did, and I worry that visitors to the site with small browser windows won't notice or understand the icon and thus won't realize there's additional pages they could visit.
Just like I don't expect the magnifying glass in a search field to zoom in, nor the same icon in Gimp to search.
Right context is king. For example, "don't desert me here in the desert." English is littered with example of writing and speech this ambigus in isolation, but we don't be come confused in our daily lives because the context makes it clear. This is no different.
It seems that some people use it to represent something that you can have traction on, like for dragable items (the slide to open camera on the iphone lock screen and the dragable reording from the writer's example).
This is exactly the way language works: words can have multiple senses, from which the context should pick out the one intended. If you look up common words, you'll find they have a multitude of different senses (sometimes unrelated). In fact, the more frequent a word is, the more senses it is likely to have.
The other side of recognizing that this is a language issue is recognizing that we're raising the bar for computer literacy. My mother isn't likely to figure out what the three lines mean in any context, because she simply isn't all that computer literate.
Now, in the mid-late 90s she would have had no trouble recognizing the save icon—the floppy disk was what she was probably saving to anyway, and there it is on the icon. People 20 and under are unlikely to have had real experiences with floppy disks, so to them, the floppy icon is just what the save icon happens to look like, for no ideographic reason at all. That's just what save icons look like, and they recognize it, because it's part of basic computer literacy.
I think it's healthy of people on HN to recognize this as a language issue, because that's what it is, but there should be some corresponding philosophy: do we want to keep moving towards digital hieroglyphics or do we want to strive to retain representativeness in icon imagery? More meanings and context sensitivity for differentiation, as is the case with the three lines, is certainly the abstract direction.
Now, in the mid-late 90s she would have had no trouble recognizing the save icon—the floppy disk was what she was probably saving to anyway, and there it is on the icon. People 20 and under are unlikely to have had real experiences with floppy disks, so to them, the floppy icon is just what the save icon happens to look like, for no ideographic reason at all. That's just what save icons look like, and they recognize it, because it's part of basic computer literacy.
I think it's healthy of people on HN to recognize this as a language issue, because that's what it is, but there should be some corresponding philosophy: do we want to keep moving towards digital hieroglyphics or do we want to strive to retain representativeness in icon imagery? More meanings and context sensitivity for differentiation, as is the case with the three lines, is certainly the abstract direction.
As with everything else in UI and interface design.
What is learned is what is intuitive. There are no silver bullets, no objective meaning of things. Only an acquired understanding.
All attempts to use metaphors to make understanding of functionality easier are basically in a war for acceptance and adoption.
It is perfectly reasonable to us it to mean those things if that becomes the standard.
What is learned is what is intuitive. There are no silver bullets, no objective meaning of things. Only an acquired understanding.
All attempts to use metaphors to make understanding of functionality easier are basically in a war for acceptance and adoption.
It is perfectly reasonable to us it to mean those things if that becomes the standard.
Then there's also the potential confusion with 三 (the Chinese character for "three").
No there isn't. I'm Japanese, 三 is indeed used as three, but is almost always written with the three lines having varying lengths, in the order of of longer-shortest-longest. I can't speak for the Chinese but it will, at the least, require a huge amount of contextual suggestion for a Japanese to interpret three lines of equal length as a Kanji 三.
What does "minute" mean, anyway?
Somehow it all works out.
Somehow it all works out.
This is the second comment related to a point of trivia about the English language. A lot of words have related noun and verb forms distinguished in speech only by the emphasis being placed at the end in the verb form.
Off the top of my head: desert, refuse, construct. You start noticing them all the time after you see the pattern.
Off the top of my head: desert, refuse, construct. You start noticing them all the time after you see the pattern.
Has meant lots of things for a very long time.
乾 (qián), creative force, heaven & sky, northwest, father, head, strong, creative, horse
乾 (qián), creative force, heaven & sky, northwest, father, head, strong, creative, horse
No, you do not have OCD. Having an interest in icons does not mean you have OCD.
Wow, never noticed.
Looks like a "wildcard" icon/character.
Looks like a "wildcard" icon/character.
In the title, I though it was going to be a math post on congruences. It kinda lends itself it his point though
Those rag icons, while common, are just oversimplified. It's good enough for word processing, but ideally your set would be something more like:
|≡| (justify full)
While it could still be a list, it associates much better with alignment.
|≡| (justify full)
While it could still be a list, it associates much better with alignment.
You're right that it's oversimplified, but your alternative isn't better. Horizontal lines are lines of type, but vertical lines are container borders? Simply using 4 or 5 rather than 3 horizontal lines would be best.
Also, FTA "Twitter Bootstrap refers to it as “icon-align-justify"
Actually the latest version of Font Awesome has three line icon for "icon-reorder" and four line icon for "icon-align-justify"
Also, FTA "Twitter Bootstrap refers to it as “icon-align-justify"
Actually the latest version of Font Awesome has three line icon for "icon-reorder" and four line icon for "icon-align-justify"
My Algorithms lecturer called it the "equivils" symbol, as in "like equals but meaning exactly equivalent to".
I thought that was a standard name until I tried to use it around someone from a different university. I had to google it to prove I wasn't crazy, and when google came up with only four random hits, I was forced to concede that I may well in fact be crazy after all.
I can't decide if he thought equivils was the best name for it, or if he was just trying to make it so we couldn't google solutions to his assignments...
I thought that was a standard name until I tried to use it around someone from a different university. I had to google it to prove I wasn't crazy, and when google came up with only four random hits, I was forced to concede that I may well in fact be crazy after all.
I can't decide if he thought equivils was the best name for it, or if he was just trying to make it so we couldn't google solutions to his assignments...
I call it the 'ideq' (pronounced eye-deck), a portmanteau of 'identity equals' because in my scheme background, equivalent (eqv?) is less strict than equal (eq?). The 'identity' part of the name, in programming context, means the address of the item.
So in order of strictness: equivalent < equal < ideq
So in order of strictness: equivalent < equal < ideq
I would have googled "three horizontal lines" but interesting post nevertheless. From the maths prospective;
" A symbol with three horizontal line segments ( ) resembling the equals sign is used to denote both equality by definition (e.g., means is defined to be equal to ) and congruence (e.g., means 13 divided by 12 leaves a remainder of 1--a fact known to all readers of analog clocks)."
http://mathworld.wolfram.com/Equal.html
" A symbol with three horizontal line segments ( ) resembling the equals sign is used to denote both equality by definition (e.g., means is defined to be equal to ) and congruence (e.g., means 13 divided by 12 leaves a remainder of 1--a fact known to all readers of analog clocks)."
http://mathworld.wolfram.com/Equal.html
The use as a menu button dates back at least to the Sidekick II: http://en.wikipedia.org/wiki/File:SidekickII.jpg (though that has one long and 2 short lines).
It was used long time before that. Many TUI DOS aplications (especially Turbo Vision based or copying Turbo Vision UI style) use this character for leftmost item of menubar with "system" things and utilities like calculator (obviously inspired by Mac OS's Apple menu).
Context matters.
Also, there's also the simple "If Apple, Twitter and Facebook do it, bad luck, we gotta play along" rule.
P.S. Starting with "While I may be far from a UX guy" doesn't seem like the most positive way to start an article.
P.P.S. Somewhat flattered that oursay.org was used - somewhat badly - in the final example.
Also, there's also the simple "If Apple, Twitter and Facebook do it, bad luck, we gotta play along" rule.
P.S. Starting with "While I may be far from a UX guy" doesn't seem like the most positive way to start an article.
P.P.S. Somewhat flattered that oursay.org was used - somewhat badly - in the final example.
The example really made me laugh out loud.
The root problem is that there's no central authority from which all wisdom and official validity flows. There's just a bunch of people. Anyone's free to scribble out whatever and then decide it means whatever. This is just a case of a collision between two or more domain-specific symbol paradigms in a single UX space.
Three things means "many". In this case three lines means "many lines".
In view as list, the files are displayed as each file on a line. In justify the text goes from being snippets of various sizes to being a bunch of full lines. In drag to reorder the many lines make you think of ribbed texture of that thing you can drag against. In settings when you tap on many lines, you arrive at a screen that has many lines of settings.
In view as list, the files are displayed as each file on a line. In justify the text goes from being snippets of various sizes to being a bunch of full lines. In drag to reorder the many lines make you think of ribbed texture of that thing you can drag against. In settings when you tap on many lines, you arrive at a screen that has many lines of settings.
It's fairly clear in most cases, except Facebook's usage. It took me forever to figure out what was going on in Facebook's app.
The much worse icon-fail imho is the "share" concept. http://cl.ly/2j1a40461E1B2U0X2W2q <-- Apple's version is ok, but doesn't seem like "share" and there are many much worse.
The much worse icon-fail imho is the "share" concept. http://cl.ly/2j1a40461E1B2U0X2W2q <-- Apple's version is ok, but doesn't seem like "share" and there are many much worse.
Interesting post, and I think the Bootstrap example might be the least reasonable of the bunch, but certainly as a “list”, “justify”, or “vertical drag” icon I have never found it confusing.
He got the Bootstrap usage completely wrong. The icon gives you access to the top-level menu items on smaller screens. Nothing to do with "settings".
There's a couple of multi-purpose, kitchen sink icons. You have the lines, the cog, the star, the plus, the dot and maybe a few others. What they mean is "I wasn't creative enough to come up with a better icon so I'm just going to dump the kitchen sink of miscellany behind this vague and non-specific icon and let context do the rest".
http://f.cl.ly/items/0d3o3R0n3z2n2D3P250G/Screen%20Shot%2020...