Dans mon premier article, j’ai tenté de dresser un portrait de la situation quant à l’importance accordée au design graphique en expérience utilisateur (UX). En résumé, je pense qu’il y a encore beaucoup de gens, du domaine ou non, qui ne saisissent pas toute l’importance du design graphique, bien que tout ne soit pas noir ou blanc. Selon moi, les grands mythes auxquels le design graphique est confronté ont un rôle à jouer dans cette situation. S’ajoute à cela une mauvaise compréhension de ce qu’est le design.

Pour mettre un éclairage sur l’importance du design graphique en UX, j’ai tenté d’identifier les grands principes qui la soutiennent.

J’aimerais d’abord mettre l’accent sur LE grand principe qui chapeaute tous les autres et que l’on semble oublier trop souvent: le design graphique des interfaces fait partie du UX. C’est un moyen mis à notre disposition pour résoudre des problèmes en UX. L’image suivante, de Dan Willis, l’illustre bien. 

Puisque le design graphique fait partie du UX, il faut maitriser et comprendre certains aspects de ce dernier pour concevoir le design graphique. Patrick Williams, designer graphique agréé et directeur de création à l’agence TP1, explique:

«Pour moi, le design graphique et le UX ont un objectif commun: interpeller et accompagner l’utilisateur. Les deux utilisent des moyens différents, mais servent le même objectif. Cependant, même avec le meilleur UX, si le UI ne suit pas, cet objectif n’est pas atteint et vice et versa.»

Beckii Adel, qui s’occupe autant du design d’interface que de tout ce qui touche au UX chez Dynamo, partage aussi cette philosophie:

«Comme je ne suis pas d’accord avec l’énoncé « La forme suit la fonction », je pense que le design devrait être développé main dans la main avec les autres aspects du UX. L’idée est de travailler ensemble pour créer ultimement un produit.»

Faisons maintenant la preuve que le design graphique joue un rôle de premier plan dans le UX grâce aux huit principes que j’ai identifiés:

•  Il crée des langages visuels
•  Il relie l’expérience à la marque
•  Il injecte l’émotion au produit
•  Il sert l’acceptabilité
•  Il met l’accent sur la simplicité
•  Il permet aux à l’utilisateur de survoler les pages
•  Il supporte l’architecture d’information
•  Il soutien l’ergonomie et l’accessibilité des interfaces

 

1 Le design graphique crée des langages visuels

Selon Luke Wroblewski, le design graphique forme des langages visuels qui servent à faire comprendre à l’usager en quelques secondes la nature de ce que nous lui proposons, comment il peut s’en servir et pourquoi c’est utile pour lui.

La page d’accueil de Airbnb excelle en la matière. Le langage visuel mis en place est efficient, puisque les trois principaux types d’utilisateurs peuvent trouver leur chemin très rapidement. Ces trois types d’utilisateurs se reconnaissent selon la tâche qu’ils souhaitent effectuer:

•  Je n’ai jamais utilisé ce site et je veux savoir comment ça fonctionne.
•  Je cherche à louer un logement pour un voyage.
•  Je veux faire une annonce pour un logement.

Bien sûr, la décision de demeurer centré sur les utilisateurs et leurs tâches n’appartient pas au design graphique, mais la réalisation graphique appuie très bien l’idée. Le traitement typographique et les couleurs contribuent à faire fonctionner ces tâches et créent un langage visuel et des zones bien définies.

 

 

2 Le design graphique relie l’expérience à la marque

Les avantages d’une marque reconnaissable, comprise et engageante pour les utilisateurs sont importants pour la réussite d’une entreprise. L’empreinte mémorielle de la marque chez l’utilisateur fera en sorte qu’il reviendra ou non. En ce sens, le premier contact avec une identité visuelle grâce à une interface est déterminant. L’intégration de la marque à l’interface ou encore, l’intégration de l’interface à la marque, demande une attention du design graphique particulière. 

Apple demeure un des meilleurs exemples d’intégration et de consistance de la marque dans toutes ses communications. Malgré sa simplicité, l’identité visuelle d’Apple a marqué la mémoire des gens. Quand on analyse le graphisme de la Pomme, on réalise à quel point le traitement de la typographie, la présentation des images et la gestion des couleurs sont extrêmement cohérents dans toutes ses communications, numériques et imprimées. 

 

3 Le design graphique injecte l’émotion au produit

L’expérience émotionnelle des utilisateurs est complexe et fragile. Pour en créer une pertinente, tous les aspects de l’expérience doivent être cohérents et centrés sur les utilisateurs. On entend de plus en plus parler du «design émotionnel» pour désigner ce type d’intervention.

Différents objectifs peuvent être visés avec le design émotionnel. Il pourra s’agir d’ouvrir un dialogue avec l’utilisateur, de lui donner un certain contrôle, de personnaliser l’information en fonction de ses besoins, de lui demander d’agir, mais dans tous les cas, l’objectif est de l’engager dans l’expérience. À Tout le monde UX la semaine passée, Antoine Azar, CEO de Mobilogie et CTO de Thirdshelf à Montréal, affirmait que selon lui, une tendance importante des prochaines années serait les relations un à un avec les utilisateurs.

Quand l’aspect affectif de l’usager est crucial pour la réussite d’un projet, le travail en design graphique demandera, au même titre que le reste des aspects UX, une recherche et une analyse particulièrement approfondie autour des utilisateurs, du contexte dans lequel ils se trouvent et de leurs attentes.

Le site Songza, par exemple, est truffé de design émotionnel. Il nous propose de la musique en fonction de différentes émotions, du moment (jour, semaine, saison, etc.) ou activités liées à ces moments. Voici une capture d’écran que j’ai fait un dimanche matin:

 

4 Le design graphique sert l’acceptabilité des interfaces

On ne parle pas souvent de l’acceptabilité des interfaces, mais c’est un facteur important. Elle vient même avant l’utilisabilité, car pour être utilisable, une interface doit d’abord être utilisée et pour être utilisée, elle doit être acceptée.

Ci-dessous, le schéma de Nielsen explique le concept de l’acceptabilité : 

Le graphisme de l’interface est la première chose que l’on voit quand on visite pour la première fois une interface. Il influence donc fortement l’acceptabilité.

Un exemple d’interface que je n’accepte pas d’utiliser est la télécommande de télévision. C’est un type d’interface dont on ne parle pas très souvent, mais qui bénéficierait d’un grand travail de design. Outre les fonctions de base, comme changer le canal ou le volume, je refuse d’engager une interaction moindrement avancée avec cet objet, car je n’y comprends rien. Sa structure informationnelle et les terminologies employées ne correspondent en rien à mes attentes et à mes connaissances. 

 

5 Le design graphique met l’accent sur la simplicité

Le design graphique est la dernière chance de pouvoir simplifier les interfaces. Cela tombe bien puisque, de par sa nature, il a le pouvoir d’illustrer des notions complexes en une seule image bien pensée.

Tout le monde s’entend d’ailleurs pour dire que le plus simplement l’on peut présenter les contenus et les interactions, le mieux c’est. Malheureusement, il arrive souvent que les interfaces se complexifient nettement au fil des approbations des décideurs et des intervenants qui y travaillent.

Il faut trouver l’équilibre entre la belle simplicité graphique et un degré de détails acceptable pour faciliter la compréhension des fonctions de l’interface.

Pour expliquer la technologie d’un de ses souliers, Saucony a créé un site où l’on peut explorer ses différentes composantes. C’est un bel exemple d’information complexe rendu simple par le design. Chaque image décortique une composante du soulier et l’on peut même voir comment ces composantes sont assemblées grâce aux effets parallax entre les images.

 

6 Le design graphique permet à l’utilisateur de survoler les pages

Une attitude des utilisateurs qui a été observée des milliers de fois quand ils consultent un site Web, c’est qu’ils ne veulent pas lire! Steve Krug ne cesse de le mentionner et nous aussi: les gens survolent avec leurs yeux les pages Web et ne les lisent que très partiellement.

Il faut donc tenir compte de ce phénomène et attirer l’attention des usagers sur ce qui compte. Le design graphique joue en cela un rôle déterminant. L’iconographie, les images, les traitements typographiques, les couleurs et tous les autres outils graphiques peuvent être utilisés pour guider le regard. Parfois, l’expérience est assez simple, mais d’autres fois, le designer graphique a de plus grands défis. Le site des Aéroports de Montréal, conçu par Nurun, a sans doute représenté de grands défis, vu la quantité d’information importante qu’il comporte.

Sur l’accueil, une tâche récurrente des utilisateurs est mise au premier plan: la vérification des vols. Le menu principal est également appuyé d’icônes pour faciliter la compréhension de l’ensemble du contenu et des services offerts. Les autres tâches, comme s’orienter vers ou dans l’aéroport ou réserver un stationnement, respectent aussi une hiérarchie visuelle.

 

7 Le design graphique supporte l’architecture d’information

Le design graphique peut grandement contribuer à orienter les usagers dans l’architecture d’information et à comprendre rapidement les contenus qui y sont présentés. De la grande structure (macrostructure) jusqu’aux détails des contenus (microstructure), le design aide la compréhension de la hiérarchie informationnelle.

Selon Peter Morville, l’architecture d’information utilise des schémas d’organisation de l’information qui, une fois bien sélectionnés et utilisés, permettent à l’utilisateur de trouver ce qu’il cherche et de s’orienter dans la structure. Pour fonctionner, ces schémas doivent être conçus avec une grande attention, autant à l’étape du design final qu’à celle des maquettes en fils de fer.

La stratégie du site Adioso est de permettre aux voyageurs la recherche de billets d’avion en fonction des prix, contrairement à la plupart des sites dont le point de départ de la recherche est la destination. La représentation graphique des champs de recherche de l’accueil permet non seulement de comprendre ce concept, mais elle le met aussi de l’avant et le prépare pour l’utilisateur et ce, tout en laissant accessibles les autres méthodes de recherche pertinentes.

 

8 Le design graphique soutien l’ergonomie et l’accessibilité des interfaces

Le design graphique doit consolider l’utilisabilité et tous les critères ergonomiques de l’expérience. Il est d’ailleurs souvent la solution par excellence pour résoudre certains problèmes d’utilisabilité. Malheureusement, il est souvent aussi la cause de problèmes d’utilisabilité, lorsqu’il n’atteint pas les objectifs visés. Même si le designer graphique n’a habituellement pas créé l’architecture de l’expérience, il doit bien comprendre et participer au travail d’ergonomie des interfaces. Forcément, puisqu’il donne la dernière touche aux interfaces!

Le design d’interaction sera également important ici pour répondre aux attentes des utilisateurs.

L’accessibilité des interfaces s’intéresse quant à elle à plusieurs facteurs précis. La diversité des handicaps rendant difficile la consultation des interfaces est grande: la cécité partielle ou totale, le vieillissement, la surdité ou encore, des troubles mentaux, etc. Selon le mandat et les utilisateurs, on devra s’adapter à ces besoins. Le site de la Société de transport de Montréal (STM), conçu par TP1 et Adviso, a dû s’adapter pour être accessible à l’ensemble de la population de Montréal. Par exemple, le bleu normalement utilisé pour l’identité visuelle de la STM a dû être modifié pour être plus contrasté. L’équipe a dû travailler avec la charte Color Contrast Analyser pour tester l’ensemble de ses choix graphiques. 

 

Comment mettre en pratique tous ces beaux principes

Pour intégrer ces huit principes dans notre pratique, je pense qu’il faut d’abord comprendre que le design a besoin de la même recherche et la même compréhension du projet que pour les autres aspects du UX. Le design graphique doit être intégré dans l’ensemble des réflexions faites en UX. La compréhension du mandat et des usagers sera primordiale pour que les recherches spécifiques au design graphique soient pertinentes. On parle donc ici d’aligner les visions et les stratégies utilisées dans la résolution de problème et la conception. Le meilleur moyen d’aligner les visions et d’y croire est de travailler de façon complètement intégrée. 

Selon moi, la meilleure collaboration serait celle où toutes les phases, même celles de recherche, seraient effectuées en étroite collaboration avec le designer graphique. Pour moi, cette collaboration est parfois simplifiée par le fait que je maitrise l’ensemble du processus en design UX, ce qui inclue le design graphique. Les grands projets demandent cependant plus de ressources et je suis convaincue qu’il faut instaurer cette complicité pour les mener à leur succès.