Quelle est la marque d'un grand design?
Est-ce la capacité de se tenir à côté avec un verre de vin, de faire référence à quelques mots français prétentieux et de se couronner comme la personne la plus intelligente de la pièce?
Nah.
C'est la marque du grand art. La marque d'un grand design, que ce soit pour un site Web, une application ou un produit, est exactement le contraire.
Tout le monde devrait pouvoir y accéder, comprendre de quoi il s'agit et l'utiliser avec précision comme prévu. Aucun interprète n'est nécessaire.
Parce que la conception est une construction, et une construction que les gens ne peuvent pas utiliser - ou tout simplement ne veulent pas - est inutile. (Il n'est pas non plus très bien classé.) Le design doit être utilisable.
Mais cela ne veut pas dire que ça ne peut pas être beau. Ce n'est pas un jeu à somme nulle entre la beauté et la convivialité.
Cela ressemble plus à un Nash equilibrium . Tout fonctionne ensemble pour un maximum d'avantages et un minimum de pertes.
Voici comment y parvenir sur votre site Web.
1. Étiquetez toute votre iconographie
Les enfants qui ont rampé hors des salles de chat AOL au début des années 2000 ont émergé du suintement primordial du Web avec un amour des emojis.
dans un amour pour les images. Et puis des icônes, comme ce que vous voyez sur Icon8. *
(* Mon historique est peut-être un peu défectueux. Ne me vérifiez pas.)
Malheureusement, l'iconographie dans la conception web est à peu près aussi utilisable qu'une chemise Ed Hardy. Vous pouvez faire en sorte que ça marche. Associez-le avec les bons éléments, et cela pourrait même élever votre site.
Mais le plus souvent, ils sont l'équivalent de ce gobelet crâne flamboyant éblouissant que vous ne pouvez pas mettre au lave-vaisselle.
Ce sont difficile à retenir pour les utilisateurs , source de confusion et ralentissement des utilisateurs.
En d'autres termes, ils créent des frictions. Et la friction est un problème .
Mais je sais que je ne peux pas vous arracher complètement l'iconographie. Donc, si vous allez les utiliser, gardez simplement ceci à l'esprit:
Ils ont besoin de plus d'une couche d'informations. Les indicateurs de changement d'état comme la couleur peuvent aider, mais rien ne l'emporte sur une étiquette de texte.
Consultez cet exemple de Bing:
Alors pourquoi les étiquettes de texte avec des icônes fonctionnent-elles tellement mieux que des icônes sans th em?
C'est probablement à cause de la nature du symbolisme. Il nécessite que les utilisateurs remplissent un ensemble de conditions culturelles via des expériences précédentes pour comprendre la fonction véhiculée.
Lorsque vous avez une double étiquette comme une icône associée à du texte, vous avez plus de chances de déclencher des signaux à partir des mémoire sémantique .
Icônes simples, sur d'autre part, peut obliger les utilisateurs à tirer parti de leur mémoire de travail , surtout si l'icône et la fonction ne sont pas une combinaison populaire. (par exemple, s'ils sont plus ésotériques que la loupe et la recherche.)
Doncsi vous allez porter Ed Hardy - je veux dire, utilisez des icônes - dans le cadre de la conception de votre site pour améliorer votre esthétique, éclatez votre étiqueteuse et donnez-lui un nom.
Cela peut être quelque chose de simple comme le fait InVision.
Ou quelque chose de plus robuste comme Sketch.
Dans les deux cas, une image ne vaut pas toujours 1 000 mots dans la conception Web. N'oubliez pas que vos utilisateurs n'auront pas à le faire.
2. Traitez les repères visuels de manière cohérente
Les gens chauds et les conceptions de sites élégantes ont quelque chose en commun:
Les gens sont beaucoup plus disposés à pardonner les problèmes des deux s'ils aiment l'apparence de il. Connu sous le nom l'effet d'ergonomie esthétique , les utilisateurs vous laisseront échapper à des problèmes d'utilisation mineurs si l'esthétique le compense.
Mais l'effet est encore plus prononcé lorsque l'utilisabilité et l'esthétique fonctionnent de concert.
Alors, comment les faites-vous travailler à l'unisson? Gardez vos repères visuels cohérents.
N'oubliez pas que le style est une fonction. C'est une langue.
Lorsque vous colorez vos liens en bleu, vous transmettez quelque chose à l'utilisateur: ceci est cliquable et ouvre une autre page.
Et lorsque vous utilisez une ombre portée pour élevez un bouton au-dessus de la page, vous communiquez que c'est un domaine important et interactif.
C'est le précepte qui guide leur utilisation dans la conception des matériaux , soit dit en passant.
Mais si vous prenez le même effet d'ombre portée et que vous l'appliquez à vos images au milieu d'un article (qui ne sont sans doute pas liées à quoi que ce soit)?
L'incohérence invalide ce sur quoi il communique Il permet aux utilisateurs d'apprendre plus de relations que ils devraient avoir pour utiliser votre site Web.
Et du côté de l'embellissement, la cohérence de la conception au sein et entre les marques donne les plus grandes récompenses avec un minimum de risques (c.-à-d. une stratégie minimax , ou un équilibre Nash).
Medium est l'un de mes exemples préférés de cohésion de conception.
Les titres ont toujours la même taille. Sous-titres - même. Police - même. Les icônes - les mêmes.
Peu importe où vous atterrissez ou où vous allez, vous avez une expérience moyenne constante.
La seule variation que vous rencontrez est la couleur, et même celle-ci est conservée au minimum.
À titre d'exemple, considérons cet article sur la typographie structurelle par le propre responsable du design de Medium.
Maintenant, regardez un autre article sur une publication complètement différente.
Aucune conjecture n'est impliquée. Vous savez quels éléments sont quoi et comment les interpréter car ils sont les mêmes sur tout le site.
Et cela le rend parfaitement utilisable.
Conclusion:
Faites un choix de conception et respectez-le. Les visuels ne sont pas seulement une fonction d'attraction: ils font partie du langage de votre site Web. La normalisation profite à tous.
3. Louchez votre conception (sérieusement)
Louchez vos yeux très rapidement.
Terminé?
Quelles sont les parties les plus critiques de cette page?
Les en-têtes et le menu de navigation, non?
Prenons l'exemple de l'excellent article de Josh McCoy sur les animaux de compagnie UX. Lorsque vous '' re strabisme, ce sont les éléments qui devraient se démarquer:
Pourquoi se distinguent-ils? Parce qu'ils sont stylisés dans une hiérarchie visuelle claire. Vous savez ce qui est important en fonction de sa taille et des relations spatiales sur la page.
Et, démentirQue vous le vouliez ou non, vous venez de lancer un test d’utilisabilité de bonne foi appelé le test de strabisme . C'est une excellente méthode (bon marché) pour identifier les problèmes avec votre architecture de l'information .
C'est aussi un moyen simple et rapide de déterminer si vous avez trop d'éléments" importants "en compétition pour attirer l'attention. (Criez spécialement pour vous, amis du marketing.)
S'il vous faut (ou un utilisateur) plus de quelques secondes pour plisser les yeux pour identifier les relations entre les éléments de la page, la conception de votre site Web fonctionne trop comme le gouvernement.
Encombré d'éléments qui pensent qu'ils sont plus importants qu'ils ne le sont réellement, et s'ils ont vraiment besoin d'un podium, ils devraient probablement se rendre sur un autre forum pour faire valoir leurs arguments.
Voici un exemple différent.
Exécutons ce même test sur MailChimp.
Les yeux grands ouverts:
Et maintenant, à un strabisme: avez-vous identifié les éléments importants dans le même ordre?
Mais, un mot d'avertissement à propos de cette tactique.
Bien que ce test soit facile à exécuter et que vous devriez l'utiliser pour chaque nouvelle page de votre site Web, vous avez besoin d'influences extérieures pour cela.
En d'autres termes, vous ne pouvez pas dogfood it . Pas complètement.
Les membres de votre équipe savent déjà quoi rechercher dans la hiérarchie.
Ce sont amorcé cognitivement pour passer ce test comme vous le souhaitez.
Rappelez-vous, la marque d'un grand design n'est pas ' t si quelqu'un avec un diplôme avancé peut l'interpréter.
C'est si quelqu'un peut sortir de la rue et l'utiliser sans aucune aide (ou minime).
Alors loucher votre conception . Identifiez les éléments les plus importants et comparez-les à ceux qui devraient être les plus importants.
Demandez ensuite à quelqu'un d'autre de faire la même chose.
Si les résultats sont différents, vous avez un problème d'utilisabilité entre vos mains. Et probablement aussi un problème d'encombrement.
Alors loucher, éditer et plisser à nouveau.
Conclusion
Le formulaire sans fonction est art.
La fonction sans forme est une abstraction.
Ni l'un ni l'autre ne convient à la conception de votre site Web.
Pas si vous voulez que quelqu'un puisse l'utiliser.
Si vous allez utiliser l'iconographie sur votre site Web, donnez-lui une étiquette. Une rose sous un autre nom n'est pas vraiment aussi douce.
Les repères visuels ne sont pas seulement de l'habillage de fenêtre non plus. Ils font partie du dialogue partagé entre votre site Web et votre utilisateur. Rendez-les cohérents. Sinon, vous avez le mot soupe.
Canalisez votre Clint Eastwood intérieur et plissez les yeux à chaque page de votre site Web. Chaque fois que vous changez quelque chose, plissez les yeux à nouveau. Demandez ensuite à quelqu'un d'autre de faire de même.
Plus votre site Web est harmonieux entre esthétique et convivialité, plus les gens l'utiliseront.
Et c'est le point, n'est-ce pas? ?
Autres ressources de développement Web:
- 50 questions que vous devez poser pour évaluer la qualité de votre site Web
- 3 Comment le contenu améliore la convivialité de votre site Web
- Comment éviter 6 erreurs courantes de conception Web qui nuisent au référencement
Crédits d'image
Image vedette: Pixabay.com
Capture d'écran prise par l'auteur, octobre 2018
Aucun commentaire:
Enregistrer un commentaire