Comment trouver la meilleure icône pour représenter un concept?
Je développe un langage de programmation visuel, et après avoir lu cet article il semble que les icônes soient une très bonne solution pour améliorer le langage et améliorer la compréhension. Mais comme je suis programmeur et non concepteur d'interface utilisateur, je suis à peine capable (maintenant) de penser à sélectionner des icônes qui véhiculent la sémantique de mon langage de programmation.
Par exemple, dans ma langue, un objet (représenté par un rectangle) qui est connecté à un processus (représenté par une ellipse) avec un lien qui se termine par un cercle ouvert signifie que le processus utilise l'objet comme outil et ne le change pas (voir l'image ci-dessous):
Mais quelle icône dois-je utiliser à la place du cercle ouvert? un outil? un livre (en lecture seule)? une poignée de machine? Et bien sûr, ce n'est pas le seul lien qui peut être utilisé dans la langue. Je voudrais également ajouter des icônes aux objets qui sont des arguments et des trucs comme ça.
Toutes les questions demandant "quelle est la meilleure icône pour XXX" sont fermées car elles sont trop spécifiques, donc ma question est: Comment puis-je sélectionner quelle icône utiliser? Y a-t-il des livres/articles/tutoriels que je peux lire sur le sujet?
La réponse courte est qu'un groupe d'entre vous réfléchit à quelques idées, puis utilise des tests itératifs sur de vrais utilisateurs pour affiner et affiner les choix. Voir Comment créer ou sélectionner une icône pour une fonction? pour plus de détails.
Cependant, considérez que les "ressemblances perceptuelles" offertes par les icônes peuvent ne pas être aussi importantes pour vous que d'autres considérations, y compris celles dont Moody discute dans l'article que vous citez. Ces autres considérations peuvent rivaliser avec la réalisation d'icônes évocatrices:
La discrimination. Les icônes les plus évocatrices de deux concepts différents peuvent finir par se ressembler, ce qui crée de la confusion.
Désordre. Les icônes doivent souvent être grandes et détaillées pour que les utilisateurs reconnaissent ce qu’ils sont censés évoquer, mais cela peut créer de grands diagrammes visuellement encombrés qui sont difficiles à lire.
Espace d'étiquetage. Des symboles de contour simples vous permettent de mettre leur étiquette à l'intérieur de leurs limites, ce qui rend l'étiquette sans ambiguïté. Les icônes peuvent être remplies de détails vous forçant à mettre des étiquettes à côté d'elles; dans les diagrammes denses, il peut devenir difficile de savoir ce qui est étiqueter quoi.
Expressivité. Les formes simples vous permettent d'utiliser d'autres dimensions graphiques (par exemple, l'ombre, les motifs) pour coder des informations supplémentaires. Un tel encodage peut ne pas convenir aux icônes; par exemple, une gomme doit être rose ou blanche pour être reconnaissable, mais cela signifie que vous ne pourrez peut-être pas utiliser le codage couleur (bleu, vert, etc.).
Considérez que tout degré de ressemblance perceptuelle que vos icônes évoquent sera au mieux modeste, car les concepts abstraits que vous avez dans la programmation visuelle ne se prêtent pas à une bonne visualisation. Considérez également que vous devriez avoir relativement peu de symboles et que vous pouvez fournir aux novices un accès facile à une légende ou à une clé, donc l'apprentissage devrait être rapide même avec des symboles arbitraires. Dans l'ensemble, vous pouvez être mieux avec des formes simples que des icônes.
Ou peut-être que vous pouvez avoir les deux: Par défaut et pour les novices, utilisez des icônes (grandes et encombrantes) afin qu'elles soient faciles à apprendre et adaptées aux programmes simples qu'un novice est susceptible de commencer. Permettre à l'utilisateur de "simplifier" globalement les icônes à des formes similaires une fois qu'elles ont été apprises et que l'utilisateur est prêt pour des programmes plus complexes. Par exemple, un processus peut être représenté par un engrenage qui devient un cercle de simplification. Une propriété d'objet est un tiroir qui devient un rectangle de simplification. Vous devriez peut-être d'abord choisir les formes simples pour répondre à vos autres considérations, puis revenir en arrière pour en faire des icônes évocatrices pour les novices.
Il semble que vous ne cherchiez pas des icônes, mais des symboles . Il y a une différence fondamentale (voir http://www.iicm.tugraz.at/thesis/ahollosi_html/node6.html ) et si vous comprenez cette différence, votre problème est déjà à moitié résolu.
Vous utilisez une ellipse comme processus, un rectangle comme objet, ... en d'autres termes: vous utilisez déjà des symboles, alors ne cherchez pas d'icônes maintenant.
Soit vous devez créer votre propre langage symbolique, similaire à UML, soit vous pouvez utiliser un ensemble de symboles existant, comme des symboles d'organigramme. Ou vous pouvez partir d'une certaine base existante et ajouter vos propres symboles en plus. Dans ce cas, vous pouvez parfaitement utiliser votre cercle ouvert tant que vous lui donnez un sens clair, préférable de plusieurs manières. Les symboles seront-ils déplaçables pour former une palette? Dans ce cas, les symboles sur la palette doivent être bien décrits, par exemple: connexion en lecture seule/connexion en lecture-écriture/processus/objet/... Que se passe-t-il lorsque vous cliquez sur une connexion? Pensez-vous voir des propriétés quelque part? Un utilisateur peut-il modifier les propriétés d'une connexion existante? Fondamentalement, vous devriez jeter un œil à Rational Rose et à la façon dont ils gèrent la connexion comme "a un", "est dérivé de", ...
Si vous cherchez vraiment une icône pour indiquer "lecture seule" (ce dont je doute), la première chose qui me vient à l'esprit est un crayon avec une croix dessus ou une serrure.
Ce à quoi vous devriez penser, c'est quel symbole représente un objet ou peut-être un segment de données et quel symbole représente un processus ou peut-être une action.
La réponse peut dépendre de vous utilisateurs:
Si ce sont des programmeurs, ils seront utilisés pour les conventions d'UML et d'IDE (par exemple rectangles pour les classes, éclair pour les événements).
S'ils ne sont pas programmeurs (et peut-être même s'ils le sont), il leur faudrait moins de temps pour comprendre si vous pensez à des équivalents en dehors du monde du logiciel (par exemple, un ensemble de roues mécaniques, un tuyau ou une loupe pour un processus). , un paquet ou un livre pour un objet). Essayez de trouver une paire qui peut aller ensemble dans la vraie vie et utilisez-la.
Si vos utilisateurs appartiennent à un domaine spécifique, essayez de trouver des équivalents dans leur domaine.
Par exemple. s'il s'agit de programmeurs, vous pouvez utiliser des équivalents du monde du matériel informatique (par exemple, un processeur et un fichier).
Essayez de chercher quelques alternatives dans un exemple simple mais réaliste d'un scénario et de demander à différentes personnes ce que les images comprennent (sans leur donner d'informations préalables, vous devriez peut-être montrer une image à chaque personne, pour éviter une compréhension cumulative).