Que représentent les 3 barres horizontales proches (pas le menu hamburger) et quelle est l'origine du design?
Pour une raison quelconque, ces 3 barres horizontales centrées dans cette application client Jabber sont quelque chose que j'associe à quelque chose que vous pouvez faire glisser, mais je ne me souviens pas du tout pourquoi j'associe 3 barres à quelque chose qui peut être abaissé.
Ma question est, qu'est-ce que ces 3 barres horizontales représentent universellement, et quand a-t-elle commencé à le faire? Je pense que je me souviens également d'avoir vu ce symbole quelque part sur les téléphones Apple mais je ne me souviens pas non plus exactement où.
Il s'agit d'une représentation skeumorphique des entailles, indiquant que la zone peut être tirée/traînée. Similaire à l'encoche à l'extrémité de la glissière du pistolet (offrant une adhérence supplémentaire aux doigts).
Cela est apparu dès Windows 98 (voir le coin inférieur droit de la fenêtre).
Edit: Ce n'est pas unique aux armes à feu, mais plutôt à une technique de conception industrielle. Voir ici la batterie glisse vers le bas:
Cette plaque coulissante d'une machine à coudre a des rainures similaires pour les doigts à tirer:
Bien que l'exemple du pistolet de Bowen soit décent, un exemple encore meilleur serait l'arrière de la télécommande de votre téléviseur (ou de nombreux autres appareils qui stockent les piles sous un couvercle coulissant):
Les encoches sur le pistolet, le couvercle de la batterie et de nombreux autres articles de tous les jours visent principalement à fournir une friction/adhérence supplémentaire à vos doigts, tout en indiquant le meilleur endroit pour mettre vos doigts. Parce que le frottement n'a évidemment pas d'importance sur un ordinateur, c'est juste une représentation skeumorphique de l'endroit où vous pouvez cliquer pour bouger. En fait, les 3 barres diagonales dans le coin inférieur droit de la fenêtre du système d'exploitation Windows sont collectivement appelées Size Grip et sont un élément d'interface utilisateur standard.
Vraisemblablement, les 3 barres horizontales pour indiquer un menu déroulant viennent d'évoluer à partir du même langage de conception d'interface utilisateur.
Edit: Comme vous pouvez le voir ci-dessous, Stack Overflow utilise un indicateur de poignée légèrement différent à l'aide de points, mais à ce stade, la plupart des gens sont tellement habitués à ce skeumorphisme léger que tout ce qui se lit comme une surface surélevée dans l'interface utilisateur sera interprété par les utilisateurs comme un endroit pour interagir en faisant glisser.
Pour ajouter aux excellentes réponses existantes.
Ce type de fonctionnalité de conception est appelé accessibilité (voir https://en.wikipedia.org/wiki/Affordance ).
Les surfaces crantées ou texturées sont utilisées dans des objets réels pour suggérer qu'elles peuvent être saisies ou poussées par un doigt, et cela a été adopté comme un skeuomorphisme dans les interfaces utilisateur informatiques.
Voici une capture d'écran de Java Swing "Metal" look and feel, qui a utilisé des textures pour suggérer une possibilité de prise et de glissement. Vous pouvez les voir dans la barre de titre de la fenêtre, au milieu de les pouces des barres de défilement verticales et horizontales, la poignée de redimensionnement en bas à droite de la fenêtre et même une légère encoche sur les bords de la fenêtre.
Les boutons sont un autre exemple d'une réelle accessibilité dans la conception de l'interface utilisateur. Les boutons réels sont faciles à identifier visuellement, et leur surface surélevée nous invite à appuyer dessus - leur forme suggère intuitivement ce que nous devons faire.
Les boutons dans les interfaces utilisateur ont traditionnellement une ombre pour suggérer la même option "Push me". C'est pourquoi les boutons de "conception plate" peuvent être considérés comme un pas en arrière pour la convivialité.
D'autres réponses ont adéquatement abordé l'inspiration skeuomorphique de cette convention, mais comme la question portait également sur l'histoire, regardons cela un peu.
Je nommerais Macintosh System 7.0 (1991, mais je me souviens vaguement que le style de l'interface utilisateur avait été largement prévisualisé avant cette date) comme auteur de cette convention ... vous voyez la crête dans les pouces de la barre de défilement active:
Cela suit clairement la même possibilité réelle de glisser dans une direction perpendiculaire aux arêtes, comme on le voit dans les autres réponses ici avec les couvercles de batterie et autres.
Un aperçu rapide des interfaces graphiques antérieures à 1991 (y compris Xerox Alto, Apple Lisa, Amiga Workbench, Windows 1.x-3.0, Mac System 1.0-6.0.x) suggère que les barres de défilement du système 7 pourraient être les premiers éléments de l'interface utilisateur à indiquer la capacité de glisser de cette manière ... dans les systèmes antérieurs et contemporains, les éléments déplaçables comme les barres de défilement et les barres de titre ont tendance à être plats (ou biseautés pour créer un effet 3D, mais pas une texture "adhérente").
On pourrait également nommer les barres de titre originales de la fenêtre Macintosh (1984) en tant qu'originateur encore plus ancien pour cette convention (illustré ci-dessous dans les apparences originales et System 7):
Cependant, je ne suis pas sûr que ce soit la même chose - ici, nous avons une très large surface de lignes "adhérentes" sur quelque chose que vous pouvez faire glisser dans la direction n'importe laquelle, pas une petite zone "adhérente" indiquant la capacité pour faire glisser dans une direction spécifique. Je dirais que les lignes horizontales ici servent plus à indiquer quelle fenêtre est active qu'à permettre d'indiquer la capacité de glisser.
Je suis d'accord avec l'exemple du pistolet et d'autres exemples présentés ici, mais je crois que la notion des 3 encoches a commencé dans les conceptions de produits physiques pour fournir aux utilisateurs une région marquée de la surface pour produire la friction pour le retrait d'un composant (c.-à-d. le couvercle de la batterie) ou une meilleure adhérence (c.-à-d. la poignée du pistolet). Voici de très bons exemples de cela:
(source: scsstatic.ch )
Exemple avec guidon: 
(source: yimg.com )
Le marquage de la surface d'un composant fournit à la main une zone de friction plus élevée pour améliorer l'adhérence et le contrôle afin de donner à l'utilisateur la possibilité de grip = et bouge librement sans que la main ne glisse. En tant que tel, le processus s'est traduit par des pages Web comme une expérience car c'est quelque chose que nous rencontrons souvent dans les activités quotidiennes
Bien qu'il existe de nombreuses bonnes réponses ici qui indiquent correctement que cela a des origines physiques, je m'en voudrais de ne pas souligner que les zones texturées sont antérieures aux exemples moulés montrés ici et seraient identifiées comme un moletage. En recherchant cela, vous trouverez de nombreux exemples, y compris le maglight classique avec son `` aluminium d'avion moleté ''.