web-dev-qa-db-fra.com

La signification d'Apple ou de Google de l'icône à trois barres horizontales est-elle plus populaire?

Apple et Google vont s'affronter pour définir la signification de l'icône à trois barres horizontales: enter image description here

Dans iOS, cette icône signifie "faites-moi glisser pour réorganiser les éléments d'une liste" tandis que la version de Google Chrome signifie "cliquez sur moi pour faire apparaître un menu".

L'une de ces deux significations est-elle déjà largement établie dans les logiciels mobiles, Web ou de bureau? De plus, quelles applications populaires (sur n'importe quelle plate-forme) utilisent cette icône et qu'est-ce que cela signifie dans ces applications?

Je demande parce que nous construisons une application qui a une fonctionnalité de "réorganisation des listes" (en utilisant l'icône iOS standard bien sûr!), Mais plusieurs personnes familières avec iOS avec qui j'ai parlé n'ont pas reconnu l'icône de réorganisation . Cela m'a amené à me demander à quel point l'une ou l'autre variante est populaire. Même si une icône est standard iOS, si elle n'est pas beaucoup utilisée et que l'autre variante est très populaire, nous aurons des défis de formation des utilisateurs auxquels nous voulons nous préparer.

Voici des photos du dernier Google Chrome:

enter image description here

Depuis iOS directives de conception :

enter image description here

À partir d'un exemple d'application iOS:

enter image description here

38
Justin Grant

Trois icônes de barre sont maintenant largement utilisées pour indiquer une fonction "afficher la liste/menu" - ce n'est pas seulement Chrome. Ci-dessous sont des captures d'écran de Day One et PlaceMe (je n'ai eu à ouvrir que quelques applications pour trouver des exemples de cette utilisation).

Day One ScreenshotPlaceMe Screenshot

Je pense que l'icône n'était pas un bon choix par Apple (avec le recul) - elle ne donne pas d'indication d'interaction claire, c'est plutôt un indicateur d'état réorganisable. Mais, rappelons-nous que Apple a fait ce choix avant que toute cette folie des applications ne se produise.

Sur iOS, les deux utilisations peuvent coexister sans confusion - car l'utilisation comme indicateur de menu/liste aurait une seule icône et "état réorganisable" aurait une icône à côté de chaque élément de la liste.

Un meilleur choix peut être de se diriger vers quelque chose de similaire à l'icône "déplaçable" pour indiquer la possibilité de réorganiser et de laisser les trois barres être un repère de fonction "afficher la liste/le menu" - car il gagne du terrain.

icon sketch

21
Luke Charde

drag'n'drop a presque toujours de mauvais moyens.

Le modèle actuel dans gmail est le suivant:

gmail's new dd affordance

Même si je ne sais pas s'ils sont vraiment sérieux à ce sujet, en particulier. car il n'apparaît qu'à l'élément survolé.

Le précédent était le suivant:

gmail's old dd affordance

Plus de drague, mais toujours mauvais.

Je pense que pour atteindre une bonne accessibilité avec un contrôle par glisser-déposer, il doit s'agir d'une action explicite (flèches haut et bas, c'est assez explicite), ou il doit être "cahoteux" (dans le cas d'un écran tactile) : Je suppose que la version Apple ressemble plus à une sorte de trous d'aération qu'à quelque chose à saisir.

Les possibilités de glisser-déposer proviennent généralement des commutateurs matériels et des couvercles de couvercle de batterie, et c'est ce que ces trois "lignes" signifient (ce sont les type "reculé"). Mais même si vous les manquez pour 3 lignes (par rapport à Chrome, qui sont trois lignes), alors nous ne devrions pas nous attendre à ce que les utilisateurs comprennent ...

Voici quelques exemples tirés de la "vraie vie":

A Kodak battery lid

Un couvercle de batterie qui se détache (de ici )

A fuji (dotted) battery lid

Un couvercle de batterie en pointillé (de ici )

A Kodak receding battery lid

Un couvercle de batterie en retrait (de ici )

Vous pouvez également créer l'interaction suivante si vous ne craignez pas de sortir du natif:

iOS affordance mockup

En raison des flèches, les utilisateurs comprendront immédiatement à quoi cela sert (j'espère que ce n'est qu'une maquette, aucun test utilisateur pour le moment), et ils essaieront de l'exploiter dans le cadre de l'exploration de l'interface. Si vous le faites assez bien, ils remarqueront le déplacement (probablement si cela se produit entre 150 et 250 ms après le toucher), et comprendront qu'il s'agit d'un mouvement du robinet.

Ce n'est qu'un conseil. Le classique de Norman " The Design Of Everyday Things" pourrait vous aider.

37
Aadaam

Au fil des ans, les choses ont quelque peu changé.

Chrome a changé son icône de menu en trois points verticaux pour se conformer au Material Design HIG:

enter image description here

Apple a changé son icône de glisser-déposer pour être visuellement distinct du hamburger:

enter image description here

Bien que l'icône du hamburger ne soit toujours pas utilisée de manière cohérente (par exemple, Firefox et Gnome l'utilisent comme icône de menu générique), Microsoft et Google l'utilisent pour les menus de navigation. (Apple ne semble utiliser cette icône nulle part.)

Vous pouvez voir les icônes utilisées dans les recommandations du tiroir de navigation dans les HIG Material et Fluent .

2
Tin Man

Je suis d'accord que l'icône à trois lignes est en train d'être établie comme un endroit pour tirer quelque chose. (Voir en particulier l'onglet ligné qui apparaît si vous faites glisser vers le bas depuis le haut d'un écran iOS pour afficher les notifications, ou sur l'écran de verrouillage lorsque plusieurs notifications sont en attente, ou sur l'icône de l'appareil photo sur l'écran de verrouillage.)

Faire correspondre cette icône aux exemples réels du widget porte de batterie/plastique coulissant est logique pour moi. L'icône Google Chrome Chrome m'embrouille pour cette raison, et j'ai toujours pensé qu'une icône liée à "engrenage" ou similaire "paramètres" aurait mieux fonctionné là-bas.

2
Matt Boggie