Comment la stratégie de votre organisation doit guider votre ergonomie web ?

strategie_design_web

Dans cet article, l’agence conseil spécialiste UX Arquen va vous présenter les principaux éléments pour construire sa stratégie d’expérience utilisateur (UX).

Un des ouvrages référence en la matière, Elements of user Experience, rédigé par Jesse James Garrett, fournit un schéma célèbre dans le domaine, sur lequel nous allons nous baser pour structurer cet article :

strategie_design_arquen

L’expérience utilisateur (ou UX) est la discipline visant à se mettre à la place de l’utilisateur final pour réaliser des produits les plus intuitifs et ergonomiques possibles.
Cela n’a rien avoir avec la technique, il faut réfléchir à « l’optimal » : ce qui serait le mieux et le plus compréhensible, les arbitrages devront être faits par la suite.

Un site web est un produit en libre-service, il n’y a pas de manuel d’instruction ni de séminaire explicatif avant. Il faut qu’il soit auto-explicatif et instinctif pour tous types de personnes : Le user-centered design (design centré sur l’utilisateur) a pour objectif de permettre que cette utilisation soit la plus simple d’utilisation possible.

 

1 – La stratégie

 

Un site a des objectifs externes (les besoins de l’utilisateur) et internes (les objectifs de l’organisation qui le crée).

Avant de se lancer dans la conception, il faut se poser les questions suivantes :

  • Que veut-on obtenir de notre produit ?

Il s’agit d’uniformiser les propos des différentes parties de l’entreprise : il y aura des objectifs « business », des objectifs d’image de marque, des objectifs de communauté…

  • Qu’est-ce que les utilisateurs veulent obtenir de ce produit ?

Pour déterminer cela, il faut connaître ses segments d’utilisateurs et leurs caractéristiques, pour cela, il est recommandé de faire de la recherche utilisateur (user research) : des tests d’usabilité, utiliser la méthode des personas (voir le lexique de l’UX), la webanalyse, les heatmaps ou encore réaliser des user journey (parcours utilisateur).

 

2- Le périmètre

 

Ce sont les spécifications fonctionnelles du produit et les besoins en termes de contenu informationnel.

Il y a 2 raisons principales de définir un périmètre :

  • On sait ce que l’on est en train de construire
    • Un site web n’est pas une somme de fonctionnalités, c’est un maison avec des fondations et une construction étalée dans un temps et avec un budget défini.
  • On sait ce que l’on n’est pas en train de construire
    • La cadre permet de concentrer ses efforts et de ne pas avoir d’intervenants externes pouvant changer les fondations : le projet est défini et cadré à l’avance.

Se poser la question : Pourquoi faisons-nous ce produit ?

Il est crucial, pour déterminer les fonctionnalités et le contenu, d’être conscient de la finalité du produit. Ces éléments, une fois déterminées, permettent de choisir le CMS (content management system), ou bien de décider de tout coder « à la main ».

Il faut être précis et spécifique dans son périmètre et prioriser chaque fonctionnalité.

 

3- La structure

 

La structure doit apporter les éléments facilitant la compréhension humaine.

La structure nous fait entrer dans la construction concrète du site, cela est aussi appelé « interaction design » ou « UX Design », car ce sont les liens et interactions futures que l’on va imaginer. Il faut imaginer l’utilisateur se déplaçant dans le système, et les réponses que le système lui apportera.

Les développeurs vont souvent réfléchir une interface d’un point de vue technique sans penser à l’utilisation réalisée ensuite par des utilisateurs novices.

Les disciplines importantes du design d’interaction sont : la manière de recevoir les utilisateurs sur le site (onborading), les différents manières de naviguer dessus, de gérer les erreurs des utilisateurs et de les diriger vers nos objectifs.

Pour structurer le contenu, il existe 2 approches :

  • Top-down
    • Directement en partant de la stratégie
  • Bottom-up
    • En commençant par le contenu existant déjà

Les 2 approches seront plus ou moins adaptées selon le projet. Il faut cependant anticiper toutes les évolutions possibles à moyen terme pour ne pas que l’architecture soit bloquante.

La structure pourra être :

  • Hiérarchique (relation parent/enfant):

site_web_hierarchique_arquen

  • Matricielle (relation dimensionnelle) :

site_web_matriciel_arquen

La structure matricielle est adaptée pour les site ayant des informations pouvant se recouper selon les différents besoin des utilisateurs.

  • Organique :

site_web_organique_arquen

Il n’y a pas de « pattern » global : les catégories ne sont pas liées entre-elles et les chemins des utilisateurs sont complètement différents.

 

  • Séquentielle

site_web_sequentiel_arquen

Ce sont les plus communes dans les médias hors-ligne : c’est un processus linéaire, avec un déroulement suivi, comme la lecture de cet article du blog Arquen, ou certains formulaires de génération de leads en plusieurs étapes.

 

Une fois cela déterminé, il faut penser à la nomenclature (comment nommer et afficher les catégories supérieures/inférieures…) pour déterminer une logique et une homogénéité dans le site.

 

4- Le squelette

 

C’est le design de l’interface, de la navigation, de l’information, le choix des éléments et de leur catégorisation.

Le design de la navigation est primordial, c’est l’élément vers lequel l’utilisateur se référera lorsqu’il ne saura pas où il est/ ne saura pas comment obtenir l’information recherchée, il doit :

  • Fournir l’information de comment naviguer sur le site
  • Communiquer la relation entre les éléments et leur priorisation
  • Informer sur la relation entre les contenus et la page.
  • Penser aux interactions selon les différents écrans

 

5- La surface

 

C’est l’expérience sensorielle de l’utilisateur : si tout a été réalisé intelligemment, mais que la surface est désagréable à voir, l’utilisateur partira quand même.

C’est le « look and feel » d’un site et l’attention au détail de la priorisation des éléments et leur crédibilité qui feront la différence. Le contraste entre les éléments va guider l’utilisateur dans la navigation et lui permettre de savoir où payer attention.

De plus, l’uniformité de la charte graphique est là aussi cruciale pour avoir une expérience logique.

2 problèmes peuvent être rencontrés :

  • Consistance interne :
    • Différentes parties du produit reflètent différents approches de design.
  • Consistance externe :
    • Le produit ne reflète pas la même approche de design utilisée pour d’autres produits de l’organisation.

Il est donc primordial d’avoir une charte graphique cohérente, de respecter des palettes de couleur et typographiques uniformes au sein de l’organisation.

La couleur est primordiale dans la communication et publicité classique comme dans le web.

La typographie a elle aussi un rôle important, elle fait partie de l’univers et de l’identité du produit. Il faut cependant éviter les polices trop « originales » et garder à l’esprit le confort de lecture comme priorité.

N’hésitez pas à lire les autres articles de notre blog ou à nous contacter pour plus d’informations ! 🙂