web-dev-qa-db-fra.com

Quel est le compromis à utiliser pour une navigation par icône?

De nos jours, il semble que la conception de l'interface utilisateur de nombreuses applications Web utilise la navigation par icônes (donc barre latérale fixe à gauche composée uniquement d'icônes pour la navigation)

Vous vous demandez pourquoi cela devient la tendance et s'il y a des recherches suggérant que c'est une approche préférée, ou tout simplement des tendances de conception évoluant de cette façon ...

12
lamps92

Les icônes seules peuvent économiser de l'espace en cas d'étiquettes plus longues, mais le compromis est une taxe mémoire pour l'utilisateur.

Les icônes peuvent donner un ordre visuel et une harmonie à la mise en page, en particulier dans les sidenavs. Cependant, dans une navigation complexe à plusieurs nœuds, nous demandons à nos utilisateurs de mémoriser un grand nombre d'icônes.

Voir la console Firebase comme exemple:

enter image description here

Dans la vue développée, j'obtiens des étiquettes claires. Des mots comme authentification seraient difficiles à ajouter sous une icône à l'état fermé, même à petite taille.

Firebase fournit des astuces de survol rapides qui montrent l'étiquette, mais les compromis sont les suivants:

  • Je devrai peut-être encore monter et descendre la navigation pour trouver ce que je veux.

  • Je dispose de plus d'espace dans la zone de document pour travailler, ce qui est très utile pour les applications Web où l'utilisateur modifie, manipule et crée du contenu, par opposition à la visualisation/lecture.

  • Je perds la description de la catégorie qui permet de regrouper les articles

Difficulté à cartographier les métaphores

Il existe de nombreux concepts ici (26 nœuds dans cette navigation!) Qui ne correspondent pas facilement à des métaphores physiques ou culturelles qui sont largement comprises (par exemple, un crayon pour l'édition), donc trouver des icônes significatives et largement acceptées est très difficile. Même pour ce domaine (développeurs d'applications), il est très difficile d'analyser ce que chacun signifie.

Nielsen Norman Group a également quelques réflexions sur tilisation des icônes .

si vous pensez que vous devez réfléchir pour trouver une icône de navigation, il est probable que cela ne sera pas facilement reconnaissable ou intuitif pour les utilisateurs.

Les étiquettes d'icônes doivent être visibles à tout moment, sans aucune interaction de l'utilisateur. Pour les icônes de navigation, les étiquettes sont particulièrement critiques. Ne vous fiez pas au survol pour révéler les étiquettes de texte: non seulement cela augmente le coût d'interaction, mais il ne parvient pas non plus à bien traduire sur les appareils tactiles.

23
Mike M

Le principal moteur est le coût - les applications Web et mobiles ont souvent une base d'utilisateurs mondiale, mais pas de budget/limité pour une localisation correcte. En outre, de nombreux développeurs, concepteurs et même administrateurs de projets appliquent leur propre biais cognitif et ne réalisent pas que l'iconographie est très spécifique à la culture/à l'expérience. Ils optent donc pour des icônes "universelles" au lieu d'étiquettes de texte qui ajouteront à la charge de la localisation.

Selon l'utilisation, il est possible d'utiliser certaines icônes aux normes internationales dans votre conception. Mais vous devez toujours faire un peu de test sur le terrain pour vous assurer que les utilisateurs en comprennent le sens et acceptent que les icônes devront probablement être localisées avec le reste du projet.

De plus, les icônes garantissent une certaine taille fixe et une orientation fixe qui séduisent davantage les concepteurs que les étiquettes de longueur variable nécessaires pour le texte. Cependant, même cela ne tient pas compte des différences entre les langues de gauche à droite et de droite à gauche (les barres latérales doivent être start - alignées), et la rotation libre et la mise à l'échelle libre nécessaires pour l'accessibilité ( surtout sur mobile).

3
MandisaW

Habituellement, les icônes sont largement utilisées dans les interfaces utilisateur conçues pour les utilisateurs experts .

Les utilisateurs experts sont une catégorie d'utilisateurs très différente et sont généralement heureux d'investir beaucoup d'efforts dans l'apprentissage des logiciels, à condition que cela les rende plus efficaces et/ou productifs dans leur travail.

Les applications conçues pour les utilisateurs experts sont riches en fonctionnalités, par exemple des interfaces utilisateur de création de contenu telles que Photoshop (voir capture d'écran ci-dessous) ou Microsoft Word. Dans une telle application, il y a tellement d'options disponibles qu'il serait impossible de tout fournir avec des étiquettes.

Habituellement, les icônes forment un langage de conception soigneusement conçu décrivant des fonctionnalités/groupes de fonctionnalités. Si les utilisateurs sont prêts à apprendre le langage de conception des icônes des fonctionnalités de l'application, ils peuvent disposer les barres de menus avec toutes les icônes dont ils ont besoin. Cela leur évitera l'inconvénient de devoir parcourir les menus à plusieurs niveaux pour trouver les fonctionnalités dont ils ont besoin et, espérons-le, les rendre plus productifs à long terme.

Photoshop example screenshot

1
Franchesca

Le "pourquoi" est dû au fait que les concepteurs aiment les jolies images. Alors évidemment, ils gravitent autour des icônes. Cela donne également plus d'espace au concepteur, en particulier sur un petit écran. La plupart des gens pensent donc que c'est une excellente solution.

Cependant, ce n'est pas parce que quelque chose est une tendance que c'est une bonne idée.

L'argument CONTRE l'utilisation de toutes les icônes de navigation que la plupart des concepteurs ignorent est le suivant: il existe un très petit nombre d'icônes que TOUS les humains comprennent intuitivement (pensez aux icônes de genre de la salle de bain). En dehors de cela, les gens doivent dépenser une grande quantité d'énergie cognitive pour considérer toutes les significations possibles d'une icône, puis la mettre en contexte avec sa signification la PLUS PROBABLE dans une application. Oui, les gens apprennent la signification des icônes au fil du temps et une fois qu'ils le font, l'interaction est plus rapide pour les utilisations suivantes, mais cela prend du travail.

Le cerveau humain n'aime pas ce processus d'apprentissage. Nous sommes des créatures d'habitude mais nous détestons former des habitudes.

Des "info-bulles" ont été créées spécifiquement pour résoudre ce problème de contexte/compréhension où l'espace est limité (regardez la barre d'outils de votre navigateur).

Alors avant de suivre la tendance, réfléchissez à ce que ressentiront vos premiers utilisateurs? Doivent-ils comprendre comment progresser très rapidement? Pire, y aura-t-il une conséquence négative pour faire la "mauvaise" chose? Si c'est le cas, les mots dans les interfaces fournissent beaucoup plus de contexte qu'une image, il vaut donc mieux utiliser le texte + l'icône.

1
Bryce Howitson