What the hell does ≡ do, anyway?

http://ada.mbecker.cc/post/25113870928/goddamn-three-bars-icon

by 5vforest • 14 years ago

160 48 14 years ago

ada.mbecker.cc

leothekim• 14 years ago

Congruence relation!

sturmeh• 14 years ago

That's certainly what I see it as!

However the other people are right, it's highly context dependant.

zht• 14 years ago

before clicking on the article I assumed this would be an article about the congruence relation

gdubs2• 14 years ago

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.

snprbob86• 14 years ago

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

gdubs2• 14 years ago

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.

Timothee• 14 years ago

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.

dkarl• 14 years ago

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.

DannoHung• 14 years ago

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.

sciurus• 14 years ago

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.

jaxn3• 14 years ago

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.

lotu• 14 years ago

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.

jacobr• 14 years ago

Just like I don't expect the magnifying glass in a search field to zoom in, nor the same icon in Gimp to search.

Stefan_H• 14 years ago

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

andreasvc• 14 years ago

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.

fusiongyro• 14 years ago

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.

ThomPete• 14 years ago

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.

Karunamon• 14 years ago

Has the author never heard of context sensitivity before? Somehow I've never had this problem understanding what that button would do in a given context.

teilo• 14 years ago

Yeah, I suspect that the other doesn't have this problem either.

housel• 14 years ago

Then there's also the potential confusion with 三 (the Chinese character for "three").

needle0• 14 years ago

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

damoncali• 14 years ago

What does "minute" mean, anyway?

Somehow it all works out.

sopooneo• 14 years ago

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.

ktizo• 14 years ago

Has meant lots of things for a very long time.

乾 (qián), creative force, heaven & sky, northwest, father, head, strong, creative, horse

sandollars• 14 years ago

No, you do not have OCD. Having an interest in icons does not mean you have OCD.

mmukhin• 14 years ago

Wow, never noticed.

Looks like a "wildcard" icon/character.

Tyr42• 14 years ago

In the title, I though it was going to be a math post on congruences. It kinda lends itself it his point though

evoxed• 14 years ago

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.

panacea• 14 years ago

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"

robertskmiles• 14 years ago

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

_sh• 14 years ago

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

sparknlaunch• 14 years ago

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

Kevin_Marks• 14 years ago

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

dfox• 14 years ago

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

squareweave• 14 years ago

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.

whalesalad• 14 years ago

The example really made me laugh out loud.

mkramlich• 14 years ago

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.

bemmu• 14 years ago

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.

iambateman• 14 years ago

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.

alanh• 14 years ago

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.

jaxn3• 14 years ago

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

shalmanese• 14 years ago

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

lathamcity• 14 years ago

What the hell does λ mean? I keep seeing it in all my classes and just can't get a grip on it.

J0415• 14 years ago

I would argue the OS X, Twitter and Facebook examples all have the same meaning - "click me to see a list of items".

thehigherlife• 14 years ago

I've really only seen the 'triple bar' used outside of facebook for meaning 'if and only if' in symbolic logic.

philfreo• 14 years ago

Forgot about the one in Google Docs at the bottom of a Spreadsheet that means "View all sheets"

http://f.cl.ly/items/0d3o3R0n3z2n2D3P250G/Screen%20Shot%2020...

batista• 14 years ago

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

What the hell does ≡ do, anyway?

Related Stories