What do the 3 close horizontal bars (not hamburger menu) represent and what is the origin of the design?

Question

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.

Answer 1

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

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

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

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

Answer 2

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

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.

Answer 3

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.

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.

Answer 4

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:

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

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.

Answer 5

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:

_{(source: scsstatic.ch)}

Example with 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

Answer 6

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