Quand utiliser des icônes contre des icônes avec du texte contre seulement des liens de texte?
Existe-t-il des règles sur l'utilisation des icônes par rapport aux icônes avec du texte par rapport aux liens de texte dans une application Web?
Par exemple:
vs.
enregistrer
vs.
enregistrer
Question supplémentaire: est enregistrer -ou- enregistrer préférable?
Les icônes sont notoirement inefficaces comme étiquettes, étant très difficiles à interpréter correctement sans formation ni expérience. Dans la plupart des situations, les utilisateurs apprennent mieux les interprétations correctes avec du texte seul qu'avec des icônes seules. Voir: Wiedenbeck, S (1999). L'utilisation d'icônes et d'étiquettes dans un programme d'application utilisateur final: une étude empirique de l'apprentissage et de la rétention. Comportement et technologie de l'information, 18 (2), p68-82.
Les icônes sont particulièrement mauvaises pour tout ce qui est abstrait, comme la facture ou l'enchère, car les choses abstraites n'ont généralement pas d'image visuelle forte (les factures et les enchères peuvent être représentées comme des documents papier, mais comment les distingueriez-vous?). De même, les icônes sont particulièrement mauvaises pour les actions (par exemple, enregistrer, publier); il est difficile de montrer clairement un processus avec une image. Oui, les icônes sont utilisées tout le temps dans les barres d'outils pour les actions, mais les barres d'outils étaient destinées aux experts, et néanmoins les utilisateurs sont souvent confus par eux (en moyenne, les utilisateurs ne connaissent que six éléments de la barre d'outils Word après avoir régulièrement utilisé Word pendant deux ans ).
Les icônes peuvent économiser de l'espace sur le texte, mais au prix de la reconnaissance. Pour les petites icônes, telles que 16 x 16 pixels, il est très difficile pour les utilisateurs de même reconnaître ce qu’ils sont censés être une image, et encore moins ce que l’image est censée représenter. Un utilisateur que je connais pensait que l'icône "disque" pour la sauvegarde était une image d'un téléviseur. (Elle était assez âgée pour savoir ce qu'était une disquette.) J'ai personnellement utilisé Word pendant des années en pensant que l'icône Suivi des modifications était une sorte de pierre de Rosette stylisée. Les utilisateurs experts trouvent plus facile de se fier à la position physique mémorisée des contrôles de la barre d'outils plutôt que des étiquettes d'icônes pour choisir un contrôle. Des icônes plus grandes (par exemple, au moins 32 x 32 pixels) peuvent aider à la reconnaissance, mais occupent tellement d'espace que vous feriez mieux d'utiliser l'espace pour une étiquette de texte claire. Si l'espace est limité, il est souvent préférable d'utiliser du texte abrégé que des icônes.
Il est extrêmement difficile d’obtenir les bonnes icônes. N'essayez pas de développer une nouvelle icône sans de nombreuses itérations de tests utilisateur. Même alors, vous pourriez échouer. Les concepteurs de Microsoft ont tout essayé pour créer des icônes interprétables pour la barre d'outils d'Outlook avant abandonner et utiliser les étiquettes de texte sur les contrôles clés.
Les étiquettes d'icônes rendent également le support technique difficile (par exemple, "Cliquez sur la feuille jaune avec une coche bleue" par rapport à "Cliquez sur" Accepter "").
En règle générale, les icônes seules ne devraient être autorisées que si au moins deux des trois conditions suivantes s'appliquent:
L'espace est très limité (c'est-à-dire trop petit pour le texte seul).
Les icônes sont normalisées (par exemple, l'image de la disquette pour la sauvegarde)
L'icône représente un objet avec un fort analogue physique ou un attribut visuel (par exemple, une icône d'imprimante pour accéder aux attributs de l'imprimante, ou un rectangle rouge pour définir un arrière-plan de page en rouge).
Les info-bulles sont requises pour les icônes lorsqu'elles sont utilisées seules, mais elles sont un mauvais substitut aux étiquettes de texte. Vos utilisateurs ne devraient pas avoir à utiliser votre application en cherchant des choses. Le fait que les étiquettes de texte n'aient jamais besoin d'infobulles graphiques est un assez bon indice que le texte est meilleur que les icônes.
Si l'espace le permet, les icônes combinées avec du texte sont les meilleures. (Je pense que des recherches l'ont montré à la fin des années 1980, mais je ne le trouve pas.) L'utilisation sélective d'icônes avec du texte permet de faire ressortir certains éléments ou d'ajouter un intérêt visuel. Cela peut également améliorer la numérisation des éléments, mais de bonnes étiquettes de texte peuvent également le faire. Les utilisateurs sont connus pour penser subjectivement qu'une application est plus facile si elle a des icônes, même si elles n'améliorent pas réellement les performances (voir Wiedenbeck, 1999 précité), c'est donc une autre raison de combiner des icônes et du texte.
Je vois généralement l'icône au-dessus ou à gauche de l'étiquette de texte. Je ne pense pas que ce soit nécessairement meilleur en soi que les alternatives, mais c'est une convention que vous devez également suivre si vous avez des contrôles les uns à côté des autres afin que l'utilisateur puisse compter sur l'expérience pour savoir quelle étiquette de texte va avec quelle icône.
Du groupe Neilson/Norman sur les icônes :
Résumé : La compréhension d'un utilisateur d'une icône est basée sur son expérience précédente. En raison de l'absence d'une utilisation standard pour la plupart des icônes, des étiquettes de texte sont nécessaires pour communiquer le sens et réduire l'ambiguïté.
Les icônes ont besoin d'une étiquette de texte
Pour aider à surmonter l'ambiguïté à laquelle presque toutes les icônes sont confrontées, une étiquette de texte doit être présente à côté d'une icône pour clarifier sa signification dans ce contexte particulier. (Et même si vous utilisez une icône standard, il est souvent plus sûr d'inclure une étiquette, surtout si vous avez légèrement modifié l'icône pour qu'elle corresponde à vos préférences ou contraintes esthétiques.)
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 se traduit pas non plus correctement sur les appareils tactiles.
Le site Web Convivialité.gov utilise des icônes de navigation pour les méthodes, modèles et documents et directives sur chaque page du site [ exemple avec texte & sans texte ]. Si je demandais à chaque personne lisant cet article de m'envoyer une icône représentant les méthodes, je suis sûr que je recevrais une grande variété de designs. Comme nous l'avons dit dans le cadre de nos lignes directrices de conception pour la convivialité de la page d'accueil ans, "si vous trouvez 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. " Alors que la version mobile du site reconnaît que les étiquettes de texte doivent accompagner les icônes pour donner du sens, la version de bureau masque ces étiquettes jusqu'à ce que l'utilisateur curieux décide de les survoler. La fixation de ces éléments de navigation sur le côté gauche de la page afin de rester disponible pour les utilisateurs lorsqu'ils défilent indique que l'organisation les considère comme importants et utiles. Cependant, la suppression de ces icônes d'étiquettes de texte les rend complètement dénuées de sens et va à l'encontre de l'objectif de fournir un accès facile au contenu.
Selon les recherches citées par Don Norman, les icônes seules fonctionnent le moins bien. Le texte solo fonctionne mieux que les icônes. Et le texte + les icônes fonctionnent mieux.
En plus des réponses ci-dessus, j'ai une remarque à faire.
De quel type de site Web s'agit-il?
Si le site Web doit être utilisé peu fréquemment, vous devrez étiqueter vos icônes. Sinon, les nouveaux utilisateurs pourraient trouver l'interface utilisateur encombrante.
Si le site Web va être utilisé fréquemment, comme Gmail, de bonnes icônes avec des info-bulles bien placées sont meilleures que d'aller avec une approche texte uniquement ou icône uniquement. Je suis à peu près sûr que Google est allé sur cette question, car dans le passé, ils utilisaient des boutons de texte uniquement, mais maintenant ils utilisent des icônes + des info-bulles dans Gmail. Cette nouvelle approche donne une interface propre sans sacrifier la convivialité. Même Photoshop et Notepad ++ utilisent une approche similaire.
Laissez l'utilisateur choisir, par défaut sur Les deux.
Texte + icône aide les nouveaux utilisateurs à apprendre les icônes; mais comme il utilise davantage l'application, l'utilisateur s'habitue à l'icône et n'a plus besoin du texte. Une fois qu'il a appris la signification des icônes, il préfère un espace de travail plus grand plutôt que le texte redondant.
Premièrement, quand allez-vous concevoir une interface utilisateur, vous devez considérer les principes de convivialité (cohérence, accessibilité, etc.). L'affordance est l'un des principaux concepts et cela signifie que votre interface doit être intuitive. Par exemple, vos icônes doivent être liées à la signification de l'action suivante, comme l'exemple cité ci-dessus pour l'icône d'enregistrement par Michael. Certaines icônes sont également standardisées et vous pouvez réutiliser le sens. Le fait est que si vous n'utilisez que des icônes pour les barres d'outils, etc., vous devez utiliser l'infobulle dans le cas où l'icône n'est pas assez bonne pour exprimer le sens, mais si vos icônes sont suffisamment permissives, elles n'ont pas besoin d'une étiquette et l'info-bulle pourrait suffire.
Dans tous les cas, il est difficile de concevoir des icônes spécialement lorsque votre système est destiné à un système spécifique et que vous devez concevoir des icônes. Dans ce cas, vous pouvez proposer quelques designs et les évaluer avec les utilisateurs. Il pourrait être utile de savoir ce que l'utilisateur pense de votre système, des interfaces visuelles et des icônes. Vous pouvez également effectuer un test mémorable un jour après votre véritable test en essayant d'évaluer si les utilisateurs peuvent se souvenir de vos icônes, de leur signification ou de vos icônes ou des zones possibles où ils peuvent trouver l'action que vous demandez. Un questionnaire pourrait également vous aider si vous avez plusieurs modèles d'icônes.
Par contre, si vous avez besoin de mettre l'étiquette je pense que c'est mieux l'étiquette en dessous de l'icône: [icon] [label]
Rappelez-vous que "une accessibilité est un aspect d'un objet qui rend évident la façon dont l'objet doit être utilisé. Dans les écrans de l'interface utilisateur, les fonctionnalités qui créent des opportunités sont généralement visuelles. .. "Rosson, M. B. & Carroll, J. M. (2002) Engineering Engineering, Morgan Kaufmann.
Ou peut-être que si vous avez le temps ... vous pouvez lire celui-ci: www.cs.swan.ac.uk/~csharold/cv/files/Affordance.pdf
Si, au cours du processus de conception, vous avez envisagé l'opportunité, les étiquettes ne sont peut-être pas nécessaires et vous utilisez simplement l'info-bulle, sinon vous pouvez considérer les étiquettes sous les icônes et évaluer ou proposer plus de conceptions à évaluer avec les utilisateurs (pas beaucoup), ils peuvent soyez collègues au début jusqu'à la version qui pourrait être testée avec les utilisateurs finaux.
Dans la tendance actuelle Le système doit parler la langue des utilisateurs, avec des mots, des phrases et des concepts familiers à l'utilisateur, plutôt que des termes orientés système. Suivez les conventions du monde réel, en faisant apparaître les informations dans un ordre naturel et logique. et lorsque vous utilisez l'anglais, gardez toujours les lettres sur le côté droit. car évidemment les icônes seront l'attraction principale. Par conséquent, les utilisateurs peuvent ignorer les lettres à l'avant.
pour un exemple iTunes - Organisé comme une bibliothèque qui contient votre bibliothèque multimédia: musique, films, émissions, livres audio. Sous la bibliothèque se trouve le magasin où vous pouvez acheter plus de médias à mettre dans votre bibliothèque.
et pour les tendances récentes comme conception de palettes Google et les carreaux 2D Windows suggèrent des icônes. mais mieux d'avoir des icônes avec un infobulle rapide de la souris. bonne chance.
Après avoir lu toutes les questions et d'accord avec tout, je voudrais ajouter un point de vue supplémentaire.
Avant de décider d'afficher des icônes, n'affichez pas d'icônes, ajoutez du texte autour du texte, n'ajoutez aucun texte, vous devez répondre à certaines questions:
- Où avez-vous l'intention d'ajouter les icônes?
- Pourquoi avez-vous besoin d'icônes?
- Qui utilisera ces icônes?
- Quelles sont les connaissances sur les icônes/contenus/actions des utilisateurs?
- Est-il courant d'utiliser des icônes pour cela?
- Vous faciliterez l'interaction utilisateur?
Et pour répondre à ces questions, vous devez considérer certains points:
- Les gens utilisent le smartphone tous les jours, à chaque fois et les icônes les plus célèbres comme Facebook, Youtube, Google, What's App, Instagram et autres doivent montrer une étiquette pour garantir que les gens sauront.
- Word/Google Docs utilise avec succès des icônes sans texte car elles sont les mêmes depuis des années et tout le monde sait déjà ce que c'est, mais même si vous passez la souris dessus, elles affichent un texte pour expliquer l'icône.
Différentes régions géographiques peuvent comprendre votre icône différemment. Par exemple, au Royaume-Uni, il est plus courant d'utiliser le panier sur le commerce électronique et sur le contraire aux États-Unis, c'est le panier. Cela se produit en raison de l'influence de la langue régionale.
Des icônes complexes pourraient arrêter votre conversion en raison d'un malentendu.
Et vous pouvez jeter un œil à une bonne comparaison que j'ai empruntée à Smashing Magazine .
Compte tenu de toutes les réponses, j'utiliserai du texte avec une icône sur 90% des cas et la position du texte dépend de votre concept de conception et s'il est facile pour l'utilisateur de les connecter.
Et comme je le dis toujours dans mes commentaires, rien ici n'est absolument vrai, vous devriez tester, comparer pour VOS utilisateurs sur VOTRE site web/application.
Cela dépendra des utilisateurs. Du point de vue de l'utilisabilité, avoir à la fois une icône et du texte donne de meilleurs résultats car cela suit la reconnaissance plutôt que le rappel, à condition que les icônes soient acceptées par une population raisonnable. Le fait de n'avoir que l'icône est applicable aux glyphes symboliques - ceux qui sont globalement compréhensibles. Le texte n'est plus approprié que lorsque les éléments sont arbitraires et n'ont pas de glyphes reconnaissables pour les représenter. Pour de tels éléments, avoir du texte uniquement est peut-être le meilleur. Cependant, la nomenclature utilisée doit être testée pour une utilisation appropriée.