Share
Avez-vous de la difficulté à choisir la bonne icône pour un problème spécifique? Travailler avec votre développeur pour obtenir le meilleur résultat possible pour votre client? Cet article vous donnera un aperçu des principes, de la résolution de problèmes et de la collaboration nécessaires pour trouver!
Les icônes font partie des aspects visuels les plus importants de la conception Web. Le niveau de détail, le style et l'application dépendent d'un certain nombre de facteurs. J'ai récemment travaillé sur un certain nombre de sites Web qui nécessitent des icônes très spécifiques pour communiquer des métaphores subtiles..
Ce message passera par un exemple récent, dans lequel je devais créer une icône d'avertissement pour un état d'erreur de document. Ce sera un guide linéaire de ma réflexion et de ma collaboration avec le développeur, mais abordera également les étapes suivantes: -
Ce message n'est pas censé être complet, mais vous sera bénéfique en vous guidant dans un exemple du monde réel.
Parfois, vous construisez votre site Web à partir de zéro et devez générer un certain nombre d'icônes pour communiquer certaines choses de manière visuelle. Souvent, un développeur ou un client demande à une icône unique. La demande dans cet exemple provient d'un développeur. Il avait besoin d'une icône d'état d'erreur pour un document. Au début, il a suggéré d'utiliser une icône de page sombre avec un X derrière dans les cas où un type de document n'est pas pris en charge ou si le chargement d'un document échoue pour une raison quelconque. Il avait quelque chose comme ça en tête:
Pas mal non? Je l'ai déshabillé un peu et je lui ai envoyé ça…
Mais nous avons convenu qu'il était nécessaire de faire référence à l'icône de document car il s'agissait spécifiquement d'une erreur de chargement de document..
Nous devions considérer le jeu d’icônes dans son ensemble, nous avons donc lancé quelques autres idées autour de nous..
"Qu'en est-il de l'icône" alertes "?"
nous pensions. Mais cela était déjà utilisé pour les alertes cliniques.
Lorsque vous avez affaire à un jeu d’icônes complet, il est important de bien comprendre cet ensemble d’icônes. Sinon, vous pourriez réutiliser accidentellement une métaphore qui a déjà été utilisée ailleurs.
Ensuite, nous avons considéré l'icône du document entourée d'un triangle:
C'était juste une suggestion du dev, mais l'expérience m'a dit que c'était trop complexe. Cela faisait une métaphore délicate qui ne communiquait pas assez directement.
J'ai ensuite suggéré que nous utilisions un grand 'X' dans un cercle.
Ce n’était pas optimal non plus, car le message communiqué était l’un des danger! C'était probablement trop au-dessus.
La leçon ici est de considérer le contexte de votre icône. La couleur et le poids visuel sont un moyen important de communiquer cela. Par exemple, le rouge est traditionnellement utilisé pour avertir les gens, tandis que les couleurs plus claires comme le gris sont plus neutres et sous - communiquer que tout va bien!
La sous-communication est un langage sémiotique. quelque chose qui est également éminent dans la typographie.
Par exemple, une police décorative sous-communique un caractère féminin, tandis qu'une police dessinée à la main peut sous-communiquer quelque chose de plus ludique et enfantin..
Qu'essayez-vous de sous-communiquer avec votre icône??
Par exemple, avec l’icône d’erreur de document, j’ai essayé de rappeler les messages d’erreur qui se sous-communiquaient de manière à ne pas créer trop de panique..
Je me suis souvenu des messages d'erreur que je recevais lorsque ma connexion Internet était interrompue. ils étaient parfaits. Pas trop au-dessus, mais en laissant subtilement savoir à l'utilisateur que quelque chose ne va pas.
Vraiment la bonne direction.
Ce dernier exemple du navigateur Chrome était parfait pour ce dont j'avais besoin! Subtil, mais permettant à l'utilisateur de savoir que quelque chose ne va pas. Tout, depuis la taille de l’icône jusqu’à la couleur grise utilisée, aide l’utilisateur à comprendre la gravité du problème, sans pour autant provoquer un sentiment de panique..
La dernière icône créée dans ce cas était simple, mais communiquait également le bon message.
L'art d'utiliser des icônes requiert un peu d'expérience et un sens du design, mais vous pouvez y remédier en respectant certains principes tels que ceux décrits précédemment. Si votre icône est trop ambiguë, mais que la métaphore convient, envisagez d'utiliser une étiquette comme repère visuel pour aider les utilisateurs à identifier les informations. Merci de votre lecture, n'hésitez pas à partager vos propres expériences de création d'icônes dans les commentaires.!
Accentsconagua