111

enter image description here

For some reason, those 3 horizontal bars centered in this Jabber client application is something I associate with something you can drag down, but I can't remember at all why I associate 3 bars with something that can be pulled down.

My question is, what do these 3 horizontal bars represent universally, and when did it start doing so? I think I also remember seeing this symbol somewhere on Apple phones but also don't remember where exactly.

  • 1
    Related but not identical question: ux.stackexchange.com/questions/25692/… – tohster Jun 22 '15 at 19:44
  • Yeah your question is not a duplicate because of what you were asking, nicely done. – tohster Jun 22 '15 at 20:34
  • 1
    @rejectedregedit it didn't originate from pistols. That's merely one example of it in use on a physical object. – DA01 Jun 22 '15 at 21:28
  • 2
    It may be worth noting that 3 horizontal bars can also mean "menu". – Calvin's Hobbies Jun 23 '15 at 12:12
  • 1
    @jamesqf: Um, perhaps because it does?? Just a thought. – Lightness Races with Monica Jun 28 '15 at 2:31
151

It is a skeumorphic depiction of notching, indicating that the area can be pulled/dragged. Similar to the notching on the end of the gun slide (providing extra grip to the fingers).

enter image description here

This appeared as early as Windows 98 (see the bottom right corner of window).

enter image description here

Edit: This is not unique to guns, but more of an industrial design technique. See here the battery pack slides out the bottom:

enter image description here

This slide plate from a sewing machine has similar grooves for fingers to pull on:

enter image description here

  • 2
    @rejectedregedit I don't know if that is the "official" name. Maybe someone else can chime in. – Bowen Jun 22 '15 at 19:33
  • 14
    @rejectedregedit Microsoft calls this UI device a “gripper”. – kinokijuf Jun 22 '15 at 20:53
  • 3
    If you count pulling from its sheath as a sliding action, then balkancelts.wordpress.com/2014/04/04/… would be an earlier example of three ribs affording a better grip, but I can't think of anything with would have the thumb-slide style of operation before around 1900 - unlike swords, things like snuff boxes and tea caddies weren't designed to be operated with wet hands so could rely on friction. – Pete Kirkham Jun 22 '15 at 22:15
  • 32
    Do you live in USA? Presenting the gun as the first example is surprising for somebody (me) who never handled any fire weapon (except in video games). – A.L Jun 23 '15 at 13:35
  • 4
    It already existed in Windows 95, see for example this screen shot. – user2428118 Jun 23 '15 at 19:36
105

While Bowen's gun example is decent, an even better example would be the back of your TV remote control (or many other devices that store batteries under a slide cover):

enter image description here

The notching on the pistol, the battery cover, and plenty of other everyday items are primarily to provide extra friction/grip for your fingers, while also pointing out the best place to put your fingers. Because friction obviously doesn't matter on a computer, it's just a skeumorphic representation of where you can click for movement. In fact the 3 diagonal bars in the lower right corner of Windows OS window are collectively known as the Size Grip and are a standard UI element.

Presumably, the 3 horizontal bars to indicate a pull-down just evolved from that same UI design language.

Edit: As you can see below, Stack Overflow uses a slightly different grip indicator using dots, but by this point most people are so used to this mild skeumorphism that anything which reads as a raised surface in the UI will be interpreted by users as a place to interact by dragging.

enter image description here

  • 3
    In your last remark, if you mean the hamburger menu, no. That icon is meant to be a stylised representation of the menu. There are other questions about it, for instance here. – Mr Lister Jun 23 '15 at 12:18
  • 3
    @MrLister I was not referring to the hamburger menu which is obviously a completely different beast. I think users don't have trouble differentiating between a grip and a hamburger menu due to the way they're usually positioned (i.e. you probably won't ever see a hamburger menu centered along the edge of a ui-element or positioned singly in a tab). – Mordred Jun 23 '15 at 15:30
  • Case in point, I just subconsciously tried to drag that last image. – insaner Jun 29 '15 at 1:25
22

To add to the existing excellent answers.

This type of design feature is known as an affordance (see https://en.wikipedia.org/wiki/Affordance).

Notched or textured surfaces are used in real life objects to suggest they can be gripped or pushed by a finger, and this has been adopted as a skeuomorphism in computer UIs.

Here's a screen-shot of Java Swing's "Metal" look and feel, which used textures to suggest a gripping and dragging affordance. You can see them in the title bar of the window, the middle of the vertical and horizontal scroll bar thumbs, the bottom-right resize handle of the window, and even a slight notch on the edges of the window.

enter image description here

Buttons are another example of a real life affordance that has carried into UI design. Real life buttons are easy to visually identify, and their raised surface invite us to press them - their form intuitively suggests what we should do.

Buttons in UIs traditionally have a shadow to suggest the same "push me" affordance. This is why "flat design" buttons can be considered a backwards-step for usability.

  • I'm not sure about this. While textured surfaces in the real world may have a degree of affordance, I'm not sure that translates to the digital world. Primarily because the screen is flat. You'd need some serious skeuomorphism to make hamburger menu buttons look real. And as we can see in most sites, all that happens is that three flat, solid colour lines are displayed. – JonW Jun 25 '15 at 8:23
  • 6
    @JonW - hamburger icons are not designed to look like grips. The question was about the shadowed lines you see in UIs which indicate "this item can be dragged". Unfortunately the "flat design" trend has removed the shadows from many of these elements, see the Java screenshot in my answer for how 90s shadows enhance the appearance of the affordance. – Ross McNab Jun 25 '15 at 8:41
  • 1
    The affordance is the fact that the interface element can be dragged. The indicator that it can be dragged is a signifier. Don Norman, who introduced the vocabulary to design, has written about this on a number of occasions: jnd.org/dn.mss/signifiers_not_affordances.html – octern Dec 23 '15 at 23:50
8

Other answers have adequately addressed the skeuomorphic inspiration for this convention, but since the question also asked about history, let's look at that a bit.

I'd nominate Macintosh System 7.0 (1991, but I vaguely recall the UI style being widely previewed before then) as the originator of this convention... you see the ridging in active scroll bar thumbs:

Mac OS 7 scroll bar ridges

This clearly follows the same real-world affordance for sliding in a direction perpendicular to the ridges, as seen in the other answers here with battery covers and such.

A quick survey of pre-1991 GUIs (including Xerox Alto, Apple Lisa, Amiga Workbench, Windows 1.x-3.0, Mac System 1.0-6.0.x) suggests the System 7 scrollbars might be the first UI elements to indicate draggability in this way... in predating and contemporary systems, draggable elements like scrollbars and title bars tend to be flat (or beveled to create a 3D effect, but not a "grippy" texture).

One might also nominate the original Macintosh window title bars (1984) as an even earlier originator for this convention (shown below in both original and System 7 appearances):

Mac OS 1.0 title bar Mac OS 7.0 title bar

However, I'm not sure it's quite the same — here we have a very wide surface of "grippy" lines on something you can drag in any direction, not a small "grippy" area indicating the ability to drag in one specific direction. I'd say the horizontal lines here serve more as an indication of which window is active than as an affordance to indicate draggability.

1

I agree with the gun example and other examples displayed here within but I believe the notion of the 3 notches began in physical product designs to provide users with a scored region of the surface to produce friction for either the removal of a component (i.e. Battery Cover) or enhanced grip (i.e. Gun handle). Below are some really good examples of this:

remote cover remove
(source: scsstatic.ch)

Example with Handlebars: handlebars
(source: yimg.com)

The scoring of the surface of a component provides the hand with a region of higher friction to enhance grip and control in order to provide the user with an opportunity to grip and move freely without the hand slipping. As such, the process translated to web pages as an experience since it is something we often come across in day to day activities

  • Your TL;DR is just as long as the rest of your post =P – Chase Sandmann Jun 24 '15 at 15:18
  • hahah :P its important info – Stephn_R Jun 24 '15 at 15:19
  • 5
    I think he's trying to say: remove "TL:DR;" The post itself is not Too Long, and the TL:DR section you have isn't a summary - it's just more information. – NotMe Jun 24 '15 at 15:23
0

While there are many great answers here that correctly point that this does have physical origins, I would be remiss If I did not point out that the textured areas predate the molded examples shown here and would be Identified as knurling. Searching for that will locate many examples including the classic maglight with its 'knurled aircraft aluminum'.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.