Le design graphique, c’est de l’ergonomie ?

Le design graphique ne serait-il qu’une couche de peinture destinée à faire beau ?

Pendant longtemps, les pages de sites webs étaient créées dans des logiciels de graphisme comme Photoshop ou Illustrator (ou dans d’autres solutions graphiques plus ou moins aptes à remplir ce rôle). Mais l’habitude est désormais prise de passer par une phase de “wireframing” sous des logiciels spécialisés, c’est à dire une phase de conception détaillée ou la “couche graphique” d’un site n’est pas intégrée. Un “wireframe”, c’est une maquette de page sans les couleurs, les effets graphiques, les photos et autres médias. C’est un plan qui indique où sont placés les différents éléments d’une page et qui permet, notamment, de pouvoir faire rapidement des modifications lors de la phase de conception sans recourir à des logiciels, comme ceux cités au début de cet article.

Et quand on voit certains “wireframes” aujourd’hui, c’est à se demander s’il reste encore nécessaire d’y ajouter une couche de design graphique.

 

On image, à tort, que le design graphique n’est là que pour transcrire l’identité de marque

Mais tout de même, le design graphique joue bien un rôle d’importance ! Tout d’abord et de toute évidence, il permet de retranscrire en “images” l’ADN de la marque et son identité graphique. On aurait donc bien du mal à s’en passer. Toutefois à ce premier rôle s’en rajoute un deuxième : celui de finaliser l’ergonomie d’une interface. L’ergonomie d’une interface, ce n’est pas que du fil de fer. C’est aussi des couleurs, des formes, des animations, des styles de police de caractères où chaque élément va jouer un rôle précis et déterminé. Et bien souvent, les tenants d’un projet l’oublie et on bien du mal à argumenter leurs choix. Ce qui est bien dommage, car tout cet apport graphique n’est jamais gratuit et peut très bien s’expliquer rationnellement, contrairement à la magie noire, l’astrologie ou bien l’art.

 

Regardons cela un peu dans le détail…

Le wireframe

 

 

Comme vous pouvez le voir, la maquette ci-dessous n’est pas utilisable en exploitation commerciale, mais pourtant, d’une certaine manière, tout ce qui peut permettra à l’internaute de l’utiliser est déjà là : les contenus sont les contenus définitifs, l’organisation et la hiérarchisation de l’information est parfaitement définie. Certaines couleurs sont déjà posées.

C’est à partir de ce genre de maquettes que Wexperience réalise des tests utilisateurs, preuve que l’internaute peut se débrouiller sans l’identité graphique de la marque. C’est aussi ce type de document qui va être fourni au designer graphique (UI/Web designer) dont le rôle va consister :

• à appliquer l’identité de la marque,
• à parfaire l’ergonomie de la page.

En général, une telle maquette est accompagnée de spécifications écrites qui décrivent les interactions (vers où pointent les liens, où il y aura des interactions, quels sont les contenus dynamiques, etc) et qui permettent aussi au designer graphique de mieux s’imprégner des contraintes techniques du projet.

Pourquoi certains boutons sont en bleus ?

Pas nécessairement pour qu’ils soient bleus dans la maquette finale 🙂 En réalité, cette couleur (ou une autre) sert à indiquer que certains points de l’interface devront ressortir de manière particulièrement visible. Ici, ce sont les boutons d’actions (CTA) principaux. Et c’est normal, puisque cette page est destinée avant tout à générer de la demande de devis et que ces boutons emmènent justement vers cette fonctionnalité du site.

Comme vous pouvez également le voir, il n’y a pas de photos. Et c’est normal ! A ce stade, les photos n’apportent rien à la conception de la page. Et comme elles requièrent un temps de recherche assez long, elles ne sont pas intégrées.

La maquette graphique

Des visuels d’ambiance qui augmentent l’attractivité de la page

Les photos jouent un rôle dans l’ergonomie de la page. Ici, elles sont essentiellement destinées à rendre plus humaine l’interface, à attirer le regard grâce à un potentiel émotionnel faisant appel à nos souvenirs liés autour de la famille. Rien de tel que les émotions pour capter l’attention d’un utilisateur, surtout lorsqu’il s’agit d’une offre aussi peu attrayante que des produits de complémentaire santé. Plus les photos sont grandes, plus leur pouvoir d’attraction est important. Pour cette raison, dans le corps de la page, leur taille a été augmentée par rapport aux préconisations du “wireframe”.

Utilisation des couleurs pour focaliser l’attention

La charte de GSMC comprend des couleurs vives que l’on aurait pu choisir de minimiser. Au contraire, nous nous sommes reposés dessus pour créer des grands blocs (comme des blocs de Duplo) pour, encore une fois, capter l’attention et scander la page d’un rythme doucement soutenu. N’oubliez pas que sur un écran, tous ces blocs ne sont pas vu en une fois, mais apparaissent au fur et à mesure de son déroulement à l’écran.

Le bleu marine pour l’action

C’est une couleur de la charte graphique qui a été choisi pour les boutons d’actions principaux. Tout ce qui est en bleu marine sur la page guide donc vers la demande de devis. Et cette couleur sera systématiquement utilisée pour tous les boutons d’action principaux du site. On respecte ainsi une des préconisation des critères de Bastien et Scapin : la cohérence.

Animations

Nous avons parlé jusqu’à maintenant de design graphique, mais lors de la livraison d’un projet, il existe aussi une dimension rarement évoquée dans les articles de blog. Il s’agit du travail de recherche sur les interactions et les animations. Comme il n’est pas possible de le réaliser sur des wireframes, celui-ci est réalisé à part sur Principle, un logiciel dédié.

Animer un site est devenu essentiel pour celui qui veut créer une expérience utilisateur (UX) plus mémorable. Et ce n’est pas la dernière roue du carrosse ! Bien au contraire ! Nous considérons, chez Wexperience, qu’elle est indispensable pour fournir un travail complet qui servent tous les objectifs, y compris les objectifs de conversion (ici, la génération de leads).

Conclusion

Il est indispensable de comprendre que le design n’est pas de la décoration. Si vous pensiez qu’il ne s’agissait que d’ajouter une couche de peinture sur des murs blancs, vous devriez, au contraire, comprendre, que la conception graphique, telle que nous la pratiquons, vient renforcer les qualités ergonomiques d’un site, et sont appliquées dans un but unique, celui de l’amélioration des kpi liés à la marche des affaires. Et il faut aussi ajouter à cela une dimension mal comprise souvent : l’animation, qui, savamment intégrée, vient renforcer les qualités ergonomiques de l’interface en augmentant ses qualités émotionnelles.

 

Voir le site en production.

 

Photo by Ari He on Unsplash