La boîte à malices de l’UX Designer.
« Il faut prêter attention à ce que l’utilisateur fait et non ce qu’il dit » — Jakob Nielsen
Avant de s’intéresser à l’aspect graphique d’un site web, il est important de définir quelle ergonomie mettre en place. L’UX Designer intervient donc en amont du Designer. Il ne faut pas perdre de vue que l‘ergonomie doit être pensée en fonction des aptitudes/connaissances/habitudes des futurs utilisateurs du site (use experience).
L’UX Design (User Experience Design) est la conception basée sur l’expérience des internautes.
L’ergonomie, appliquée au domaine du web, peut être définie par sa capacité à répondre efficacement aux attentes des utilisateurs et à leur fournir un confort de navigation. Aussi, la principale difficulté que tente de lever l’ergonomie web est la diversité des profils des visiteurs à identifier.
Par ailleurs, il existe certains critères utilisés par convention et déterminants pour un site web. Ces derniers relèvent souvent du bon sens.
Certains principes sont toujours vrais, tels que :
- Il est possible d’atteindre toutes les pages d’un site via le menu ;
- Le logo du site est nécessairement en haut à gauche ou en haut au milieu ;
- Un clique sur le logo redirige toujours vers la page d’accueil…
D’autres principes étaient vrais mais ne le sont plus, tels que :
- Un lien doit être en bleu souligné ;
- L’internaute ne sait pas qu’il peut scroller, il faut donc faire découper le contenu et créer des boutons « page suivante »…
De l’importance de mieux comprendre l’utilisateur
La psychologie est très importante dans l’approche UX Design. Elle permet une meilleure compréhension des émotions et des comportements des utilisateurs.
Théorie de Gestalt ou la psychologie de la forme
La Théorie de Gestalt est un courant de la psychologie moderne, apparu dans les années 60. Cette théorie explique que notre cerveau pense un objet dans sa globalité et non en additionnant les éléments qui le constituent. Elle recence 6 lois principales, que sont : la loi de la bonne forme, la loi de continuité, la loi de la proximité, la loi de similitude, la loi de destin commun, la loi de familiarité.
Trois outils indispensables
Construire et utiliser des personas
Les personas sont des personnes fictives construites sur la base d’une étude des utilisateurs potentiels. Une fois l’étude terminée, les personas sont présentés sous forme de fiches, qui comprennent différentes informations comme le prénom, l’âge ou les traits de personnalité. En effet, il est important de leur donner une identité, avec une petite histoire personnelle. Plus les caractéristiques de vos personas seront nombreuses, plus ils seront précis et pourront être associés à un comportement.
Méthode du tri des cartes
La méthode des cartes est utilisée pour concevoir un site web au plus près des attentes de l’utilisateur final. L’idée principale consiste à présenter aux utilisateurs les contenus du site sous forme de cartes, et à leur demander de les organiser par groupes. Le tri de cartes est un modèle très utilisé, car il permet de cerner la façon dont les utilisateurs perçoivent l’organisation des informations.
Croquis, Zoning et Wireframe
Le croquis est une étape souvent oubliée dans la construction de l’arborescence. Or, commencer par le croquis permet de gagner en efficacité sur les étapes qui suivent et de gagner du temps sur l’élaboration du zoning et du wireframe.
Un zoning est un schéma peu détaillé de l’arborescence du site où on y intègre les grandes fonctionnalités. Le zoning permet de valider les grands axes et l’organisation générale de votre site. Vous pouvez commencer par griffonner sur une page une ébauche d’arborescence. Aussi, l’avantage de dessiner à main levée, c’est qu’on peut faire un vrai travail de brainstorming et recommencer autant de fois que nécessaire. Vous pouvez mettre au propre votre réflexion en utilisant power point ou un autre logiciel, type Illustrator pour les plus aguerris.
Le wireframe ou maquette fil de fer est plus détaillé que le zoning car on y ajoute le contenu et les images. On définit alors une organisation plus précise du futur site web. Le wireframe vous permet de mettre à plat une arborescence détaillée et de mieux vous projeter. Par ailleurs, il permettra aussi à votre client de valider les fonctionnalités et l’organisation du contenu. Le wireframe s’intègre généralement dans un cahier des charges fonctionnel et sert de base de réflexion aux différents intervenants au projet. Enfin, une fois validé, vous pouvez passer au Mockup, une sorte de Wireframe au format HTML. La création d’un mockup permet de visualiser la mise en situation du site une fois qu’il sera conçu.