6 Principes et astuces de conception d'interface que chaque concepteur Web devrait connaître

Une bonne interface a la même apparence que l’air que nous respirons - elle existe quand vous en avez besoin et que vous l’utilisez sans réfléchir. Si vous avez déjà utilisé une mauvaise conception d'interface, si vous avez eu du mal à vous déplacer sur un site, cliquez dessus parce que vous ne pouviez pas comprendre ce qui se passait, incapable de mener à bien une tâche que vous pensiez ou que vous étiez tout simplement confus, vous saurez les risques de mal tourner dans ce domaine.

Les sites Web ne sont pas de belles images, elles sont là pour être utilisées et consommées. Il est donc très important qu'en tant que concepteurs Web, nous passions une bonne partie de notre temps à penser à la facilité d'utilisation. Dans cet article, nous examinerons certains des gros problèmes d’utilisabilité et mes astuces pour devenir un meilleur concepteur d’interfaces..

Cette publication est la septième journée de notre session de conception Web. Sessions créatives "Session Day 6Session Day 8"

1 - Analyser les publics


Lors de la mise en page de Psdtuts +, nous prenons en compte les différentes manières d’utiliser le site.

Un site Web implique au moins trois parties distinctes: le client ou le propriétaire du site, les utilisateurs du site et le concepteur ou le constructeur du site. En fait, il y a souvent plusieurs groupes d'utilisateurs, quelques représentants de clients différents et éventuellement quelques personnes de l'équipe de conception. Ce sont tous ce que les gens aiment qualifier d'intervenants (mot qui me laisse imaginer un groupe de personnes tenant des t-bones).

Maintenant, la chose à propos des parties prenantes est que tout le monde veut généralement quelque chose de différent. Vos clients ont un ordre du jour - que ce soit pour plaire au patron, pour agrandir le logo et, bien sûr, pour faire passer leur message. Vos utilisateurs ont un agenda - les tâches qu'ils essaient d'accomplir, les informations qu'ils essaient de trouver. Et bien sûr, vous avez un ordre du jour: faire figurer votre conception dans une galerie CSS préférée, plaire à votre patron, intégrer une conception rapide avant 17 heures lorsque vous sortez…

Dans le monde des parties prenantes, il est toujours important de se rappeler que les utilisateurs passent avant tout. Si vous voulez un site réussi, vous devez négocier vos propres plans avec les besoins de vos clients de manière à ce que les utilisateurs soient satisfaits et trouvent ce dont ils ont besoin. C’est la raison pour laquelle l’une des premières choses que vous faites dans la planification d’un site Web consiste à déterminer le public cible..

Cours d'audience

Les mots public cible semblent impliquer que c'est un groupe de personnes que nous visons pour l'utilisation du site. La réalité est plutôt celle d'un groupe de personnes qui utiliseront le site, que cela nous plaise ou non, et c'est à nous de déterminer comment servir ces personnes. Je préfère donc penser aux classes d’audience, c’est-à-dire à différents groupes de personnes qui vont utiliser un site..

Chaque classe d'audience aura un ensemble de tâches qu'elle tente d'exécuter et d'informations qui les intéressent. En tant que concepteur Web, votre tâche est de déterminer qui sont ces classes de personnes, ce qu'elles veulent et comment elles vont utiliser le site. . Pour compliquer les choses, vous pouvez généralement diviser un auditoire de plusieurs manières, dont certaines seront plus utiles que d’autres..

Ainsi, par exemple, sur Psdtuts +, vous pouvez dire que nous avons ces quatre classes d’audience:

  1. Amateurs Photoshop et Design
  2. Web et graphistes
  3. Artistes en infographie
  4. Visiteurs d'intérêt occasionnel

Maintenant, c’est probablement une bonne méthode de segmentation de l’audience si j’étais intéressé par les types de contenu à mettre sur le site - par exemple. Devrions-nous avoir plus de tutoriels de conception Web ou plus de didacticiels sur le mélange 3D? Mais en termes de convivialité du site, ce n'est pas très utile. Une autre façon de diviser le public est de dire que nous avons ces groupes:

  1. Les gens en mission d'apprendre Photoshop
  2. Les lecteurs réguliers ne font que garder leurs compétences
  3. Lecteurs réguliers qui cherchent à tuer le temps
  4. Lecteurs réguliers participant à la communauté
  5. Visiteurs occasionnels ou occasionnels

En le regardant de cette façon, vous verrez que différents types d’audience arrivent dans Psdtuts + avec un objectif différent. On peut en déduire que les personnes des catégories 1 et 2 sont les plus susceptibles d’apparaître dans notre système Plus, les catégories 1 et 4 seront intéressées par le groupe Flickr, et ainsi de suite. Ensuite, vous pouvez estimer différentes tailles de groupe d’audience et vous aurez une idée de ce qui est le plus et le moins important sur le site..

Prioriser les tâches de l'utilisateur

Une fois que vous avez identifié des ensembles d'utilisateurs, compris ce qu'ils veulent faire sur le site et leur taille et leur importance, vous pouvez définir des priorités pour les différentes tâches de l'utilisateur. Il est important que vos objectifs client / propriétaire entrent en jeu ici car ils vont peser sur l'importance des différents groupes d'utilisateurs..

Pour revenir à notre exemple Psdtuts +, l’une des tâches les plus importantes des utilisateurs est de s’inscrire au système Plus, car c’est ce qui paie pour le site. Par conséquent, même si «Les personnes en mission d’apprendre à utiliser Photoshop» ne constituent pas un groupe d’audience aussi important. "Lecteurs réguliers cherchant à tuer le temps" et "Lecteurs réguliers participant à la communauté", ils sont néanmoins plus importants. Par conséquent, nous donnons une partie de notre meilleur espace d’écran (en haut à droite de la barre latérale) à une boîte pour rejoindre Plus.

"Les lecteurs réguliers participant à la communauté" est en revanche un groupe assez important mais Il se trouve également qu’il s’agit d’un groupe de personnes qui connaissent à la fois le site et souhaitent travailler un peu plus, de sorte que quelque chose comme le groupe Flickr peut s’asseoir dans la barre latérale, là où il est accessible mais pas immédiatement évident..

Partie Instinct, Partie Analyse, Partie Sens Commun

À la fin de la journée pour déterminer les groupes d’audience, ils veulent et feront un mélange d’instinct, d’analyse et de bon sens. J'ai souvent l'impression de faire des suppositions éclairées, alors que sur des projets disposant d'un gros budget, vous pouvez mener des enquêtes et être un peu plus sûrs. Je pense que quels que soient vos compétences et votre budget, c’est une bonne habitude de rédiger une brève analyse des différents groupes. Souvent, cela vous oblige à voir des relations et des problèmes auxquels vous ne penseriez pas autrement.

Vous pouvez ensuite présenter votre analyse au client. Dans la plupart des cas, vous devriez trouver qu'ils peuvent vous dire des choses sur les groupes d'audience que vous n'auriez jamais connus autrement. Et plus vous en savez sur les utilisateurs, mieux vous pourrez concevoir un site pour eux..


2 - Vous pouvez apprendre beaucoup en regardant les gens


C'est assez fascinant (et énervant) de regarder ce que les gens font réellement sur un site

La meilleure façon de savoir comment les gens vont utiliser un site Web est de les regarder le faire. C'est ce qu'on appelle les tests d'utilisateurs et pendant longtemps, j'ai eu l'impression qu'il ne s'agissait que de grandes agences interactives sophistiquées. Effectuer des tests formels sur les utilisateurs fait probablement partie du budget de la plupart des projets de conception Web, mais vous pouvez faire beaucoup de choses même si vous n'êtes qu'un gars assis dans un sous-sol prenant des projets Web via eLance..

Le test utilisateur est bon pour vous en tant que concepteur Web

La première chose que vous devez savoir, c’est que, lorsque vous effectuez des tests d’utilisateur, vous devenez un meilleur concepteur de sites Web. Vous verrez exactement comment les gens utilisent vos conceptions Web et vous serez surpris de la façon dont ils le font. Les choses que vous pensez évidentes ne le sont souvent pas, le texte que vous pensiez expliquer, ne sont même pas lues et les utilisateurs font en général des choses qu'ils n'étaient pas supposés faire. Même si le seul utilisateur que vous testez est de demander à des amis d'utiliser un site pendant que vous les observez, vous serez déjà mieux, peu importe le projet lui-même..

Il y a des tests utilisateur appropriés

Si vous souhaitez effectuer des tests formels auprès des utilisateurs, l’une des méthodes les plus simples et les moins coûteuses consiste à utiliser l’évaluation heuristique de Jakob Neilsen. Malgré le nom effrayant, il s’agit essentiellement d’obtenir un site sur un ensemble de cobayes, puis de les évaluer par rapport à un ensemble de critères spéciaux appelés heuristiques. L'ensemble d'heuristiques le plus couramment utilisé est l'ensemble de 10 heuristiques d'utilisabilité de Neilsen et le processus réel de réalisation des tests est expliqué par Neilsen dans un article relativement facile à comprendre..

La bonne chose à propos de l’évaluation heuristique est qu’il n’ya pas besoin de beaucoup de personnes à tester. En fait, 5 personnes devraient trouver environ 75% de tous les problèmes d’utilisabilité, alors que doubler ce nombre à 10 ne vous rapportera que 85%. J'imagine que les 5 personnes doivent être raisonnablement diverses, car l'idée est que différentes personnes auront tendance à rencontrer différents problèmes.

Selon une étude de cas, le "Rapport coûts-avantages pour un projet d'évaluation heuristique de 48 personnes: le coût d'utilisation de la méthode était d'environ 10 500 dollars et les avantages escomptés d'environ 500 000 dollars" (Neilsen 1994) - Cela semble assez étonnant, même si je sais que je n'ai pas travaillé sur beaucoup de projets où j'aurais pu faire passer 10 000 points de plus que le client.

Et il y a des tests utilisateur approximatifs

Ce n’est pas parce que vous n’avez pas 10 500 $ à dépenser que vous ne pouvez pas tirer profit des tests d’utilisateur! À la fin de la journée, tout ce dont vous avez réellement besoin, c’est de quelques personnes (avec des amis) avec lesquelles vous pouvez passer 10 minutes. Au préalable, vous devez organiser quelque chose pour les tester. Cela peut être n'importe quoi, des cadres en papier et stylo aux maquettes Photoshop en passant par un site Web à moitié fonctionnel. Ensuite, vous devriez trouver quelques idées sur ce que vous recherchez, les tâches qu’une personne tentera d’effectuer sur le site et préciser clairement dans votre esprit ce que vous attendez de voir..

Maintenant asseyez votre cobaye, expliquez-leur qu'ils comprennent ce qu'ils essaient d'accomplir, par exemple: "Vous essayez d'acheter un billet pour les Fidji et vous êtes arrivé sur cette page ...", puis montrez-leur l'ensemble de fichiers JPEG. ou des morceaux de papier ou le site des os nus. Si ce n'est pas quelque chose qui est réellement fonctionnel (c'est-à-dire un ensemble de fichiers JPG ou de papiers), alors vous produire la fonctionnalité - soit en expliquant ce qui se passe quand ils "cliquent" quelque part, soit en passant à l'écran suivant qu'ils voient.

Personnellement, je pense que les fichiers JPG sont préférables, car vous pouvez regarder où la souris se déplace, elle voit quelque chose qui se rapproche de ce qu'elle verra réellement, mais en même temps, vous n'avez pas besoin d'avoir créé un site complet..

Pendant que vous testez, vous ne devriez pas en dire trop, rappelez-vous que vous êtes en observant! À la fin, vous passez encore quelques minutes à leur poser toutes vos questions. "Pourquoi diable as-tu cliqué là-bas, tu es faible?" et prendre toutes les notes dont vous avez besoin "Note à soi-même, augmentez considérablement la taille de ce bouton".

Et c'est tout! Vous n'avez pas besoin d'une blouse blanche, d'un équipement spécial, vous n'avez pas vraiment besoin de quoi que ce soit… sauf quelques amis ou personnes que vous pouvez soudoyer - qui ne sont pas des concepteurs de sites Web.

Services payants tiers

Après avoir écrit tout cela, je me suis dit qu'il pourrait y avoir des services tiers relativement bon marché pouvant fournir des tests utilisateur. Effectivement, il existe une société appelée UserTesting.com qui vous fournira une vidéo et un résumé écrit d'une personne réelle utilisant votre site, à partir de 19 USD pour un testeur unique, jusqu'à 100 testeurs pour 1 699 USD. Je ne peux pas dire à quel point ces personnes sont objectives, mais je dois dire que dépenser 100 $ pour faire en sorte que 5 personnes se connectent sur un site ne soit pas si mal pour un projet de petite à moyenne taille. Si rien d'autre ne sonne vraiment impressionnant quand vous dites à votre client que vous allez organiser un ensemble de tests utilisateurs!

N'oubliez pas que vous ne pouvez vraiment utiliser un tel service qu'avec un site Web opérationnel. Si vous essayez de tester au stade de la maquette Photoshop ou au stade du papier et du stylet en mode filaire, vous aurez quelques difficultés!

Outils d'analyse post-lancement

De nos jours, il existe de nombreux outils statistiques que vous pouvez utiliser pour tester l'utilisation du site par les internautes. Voici quelques outils pour analyser:

  1. Analyse de clic - CrazyEgg, superposition de sites Google Analytics, ClickHeat
    Avec ces services, vous pouvez voir des cartes thermiques indiquant les endroits où les gens cliquent. Le seul que j’ai vraiment utilisé est celui de Google Analytics (cliquez sur Contenu> Superposition de site dans le menu latéral). Celles-ci sont assez chouettes pour voir approximativement où la plupart des gens vont sur une page donnée, mais bien sûr, vous ne savez pas grand chose de ce que les utilisateurs font ou essaient de réaliser, donc ce n'est vraiment que la moitié de l'histoire.
  2. Analyse de chemin -La plupart des bons progiciels d'analyse
    Déterminer les chemins empruntés par les utilisateurs d'un site peut être déterminé par des logiciels de statistiques tels que Google Analytics. Entre la définition des objectifs, des entonnoirs de conversion et des événements, le suivi des pages de sortie, la navigation par contenu et la recherche de chemins de navigation, il existe vraiment plus d'informations que vous ne pouvez en trouver. Personnellement, je trouve cela un peu écrasant parfois et n'utilise vraiment que des objectifs et des entonnoirs de conversion, mais je suppose qu'il est préférable d'avoir plus que ce dont vous avez besoin, plutôt que d'être dans le besoin.
  3. Test de Split - La plupart des bons progiciels d'analyse
    Le test fractionné consiste à alterner deux versions différentes d’une page pour voir comment chacune d’elles est convertie. C'est une technique très pratique pour savoir comment optimiser les ventes et les pages de destination en particulier, mais vous pouvez l'utiliser sur à peu près n'importe quel type de conception d'interface..

3 - "Ne me faites pas penser"… trop


Quel titre! Quel livre!

Don't Make Me Think est le titre d'un livre célèbre de Steve Krug, expert en ergonomie, et résume assez bien la convivialité dans cette affirmation. Une conception utilisable ne devrait pas impliquer de la pensée, il devrait être évident de savoir quoi faire et quand le faire. Dans le livre, Krug explique que les gens utilisent les sites d’une manière très différente de la façon dont nous aimerions croire (c’est quelque chose qui deviendra clair lorsque vous testerez un peu les utilisateurs!) Et qu’il est important de le savoir pour pouvoir concevez les correctement. En ne simplifiant pas le texte, en concevant pour la numérisation, en acceptant que les utilisateurs ne lisent pas vos longues instructions, etc., vous pouvez utiliser la réalité des habitudes et des comportements des utilisateurs pour produire des conceptions plus exploitables..

Vous vous demandez peut-être pourquoi j'ai ajouté «… trop» à cette rubrique. Eh bien, je dois admettre que cela me dérange que les sites Web d'experts en convivialité tels que Steve Krug et Jakob Neilsen soient si fous, si simples à la recherche. Je suppose que je comprends pourquoi ils le font, mais cela ne me dérange pas de laisser les utilisateurs réfléchir un peu si cela signifie avoir un meilleur impact visuel. Je suppose que je suis plus un gars à l'utilisabilité de 37Signals qu'un dévot de Jakob Neilsen.


4 - Navigation et orientation


Adobe.com fait du bon travail avec son fil d'Ariane afin de vous tenir informé de l'endroit où vous vous trouvez dans leur site géant..

Je ne pense pas que je pourrais écrire un article sur la conception d'interface sans aborder le sujet de la navigation sur un site. Les règles cardinales de la navigation sont:

  1. Les utilisateurs doivent toujours pouvoir déterminer où ils se trouvent sur un site.
    C'est ce qu'on appelle l'orientation et vous pouvez obtenir un bon résultat grâce aux éléments de menu en surbrillance, aux parcours de navigation et aux en-têtes. Pouvoir vous orienter sur un site est essentiel pour le rendre compréhensible et utilisable. Dans le monde réel, l'équivalent physique de l'orientation est constitué de panneaux de signalisation, ils vous permettent de savoir où vous en êtes maintenant..
  2. La navigation doit rester cohérente
    Il n’ya rien de plus déroutant que de laisser une barre de menus se déplacer, changer radicalement ou tout simplement disparaître. La navigation d'un site est l'un des outils les plus importants que les visiteurs utilisent pour comprendre un site. Dans le monde réel, l’équivalent physique de la navigation est une carte routière qui vous permet de déterminer où vous pouvez aller..

La meilleure façon de comprendre pourquoi la navigation et l’orientation sont si importantes est d’imaginer que si vous êtes soudainement transporté dans une ville étrangère lointaine et qu’on vous dit d’aller quelque part, le problème étant qu’il n’ya pas de panneaux de signalisation et que votre carte se réorganise de temps à autre. et réapparaissent. La douleur est moins sur un site Web, mais seulement parce qu'un clic de souris vous fait sortir de là!

Il y a beaucoup d'autres conventions et idées sur ce qui fait une bonne navigation / orientation - mais tout le reste est subordonné à ces deux règles.


5 - Faites les problèmes à vous


Le livre 37signals contient davantage de sections intéressantes sur le traitement de vos propres problèmes. Et le meilleur de tous le livre est libre lire en ligne.

Aucun problème n'est plus clair que le vôtre. C'est l'une des raisons pour lesquelles il est toujours conseillé aux nouveaux entrepreneurs de créer une entreprise résolvant leur propre problème. Les concepteurs Web peuvent également tirer parti de la résolution de problèmes qu’ils ont eux-mêmes rencontrés. Il y a quelque chose à propos de l'expérience de la douleur de première main qui explique clairement comment les choses pourraient être mieux.

Comme il est peu probable que vous choisissiez uniquement de travailler sur des sites Web avec lesquels vous avez une expérience directe, une meilleure méthode consiste à acquérir une expérience des sites Web sur lesquels vous travaillez. Vous pouvez le faire soit par:

  1. Utiliser le site actuel (s'il en existe un) pour votre client
  2. Utiliser des sites concurrents qui font des choses similaires

La chose importante à noter est que lorsque je dis «utiliser», je ne veux pas simplement cliquer pendant quelques secondes, puis cocher cette case dans votre liste de choses à faire. je veux dire vraiment utiliser un site. Déterminez quelques tâches typiques (par exemple, "Je souhaite contacter le bureau des ventes du Delaware", "Je souhaite effectuer une réservation"), puis les exécuter complètement. Lorsque vous comprenez vraiment les tâches et les problèmes auxquels un utilisateur sera confronté sur un site Web, vous pourrez concevoir une solution bien meilleure..


6 - Les conventions sont à la fois familières et faciles


Les icônes sont un excellent exemple de conventions. Regardez les icônes ci-dessus et voyez combien d’entre elles vous font automatiquement penser à une tâche ou à une action. Incidemment, ces icônes sont disponibles sur une licence Creative Commons via Web Appers

Cela fait bien plus de 10 ans que le Web est devenu la norme et depuis lors, de nombreux aspects de l’allure et du fonctionnement des sites Web ont été généralement acceptés. Par exemple, lorsque vous cliquez sur un bouton indiquant «Accueil» et que vous vous attendez à accéder à la page de démarrage, vous ne vous attendez pas à accéder à une page présentant la maison d'une personne. Cela semble évident et stupide, mais c’est ce que sont les conventions.

En corollaire à notre conseil précédent, "Ne me faites pas penser", l'utilisation de normes reconnues signifie exactement que les utilisateurs n'ont pas besoin de réfléchir. Si vous placez votre barre de navigation dans le pied de page de chaque page, les utilisateurs seront confus, agacés et partants. Si vous utilisez des icônes courantes à des fins inhabituelles, n'écrivez pas correctement les éléments, ne spécifiez pas "Are You Sure?" des confirmations pour des actions irréversibles, et ainsi de suite, vous risquez d'aliéner vos utilisateurs, et c'est la dernière chose que vous voulez faire..

Bien sûr, à certains moments, vous ne pouvez pas suivre les méthodes conventionnelles, mais vous devriez avoir une bonne raison de le faire et faire tout votre possible pour bien comprendre ce que vous faites..

Cette publication est la septième journée de notre session de conception Web. Sessions créatives "Session Day 6Session Day 8"