Contexte
Groupe All m’a confié la refonte de son espace adhérent, un espace d’échange avec ses adhérents utilisé pour :
- Communiquer des actualités : formations, nouveautés, évènements, réglementations
- Transmettre des documents administratifs : factures, CGV fournisseurs, suivre les commandes
- Faciliter les achats : montures, produits de contactologie…
Mission
Améliorer l’esthétique et l’expérience utilisateur, en prenant en compte que la page d’accueil est susceptible d’évoluer (s’étoffer). Il m’a aussi été demandé de créer les icônes correspondant à chacune des parties de la plateforme. Puis, la refonte des pages agenda et de l’espace de partage de fichiers.
Préliminaire : audit
J’ai réalisé un audit d’après la capture d’écran de l’actuel espace adhérent (fourni par le client) et des questions que j’ai posé au client. J’ai remarqué plusieurs axes d’améliorations : l’identité graphique et la navigation.
Problèmes liés à l’identité graphique
Les codes graphiques et les éléments mis en place sur le site vitrine du Groupe All et sur l’espace adhérent sont assez différents : logo, barre de navigation, couleurs… Aussi, le style des icônes ne sont pas homogènes sur l’application. Certaines sont en contour, d’autres en aplat et en dégradé… Bref, c’est un joyeux bazar.
Problèmes liées à la navigation
Les liens de navigation ne sont pas accessibles sur toutes les pages de l’application web. Pour naviguer dans les différentes pages de la plateforme, il faut systématiquement repasser par l’écran d’accueil. Ce qui complexifie le parcours et génère de nombreux clics et chargements.
Autant dire que les opticiens ont tout intérêt à être patient et à avoir les pages de l’application qu’ils utilisent régulièrement dans des onglets différents.
Conception
Concept 1 : tableau de bord
Cette proposition a été jugée trop “innovante” et a été directement écartée. L’idée était d’avoir un tableau de bord à la manière des interfaces des applications métiers que les opticiens ont l’habitude d’utiliser. Toutes les informations utiles sont visibles à l’écran sans avoir besoin de défiler dans la page à la recherche de l’information recherchée.
J’aurais apprécié avoir la possibilité d’en discuter directement avec un panel d’opticiens adhérents ESV de tous âges. Ceci dit, j’ai discuté de mes intentions croquis à des amis opticiens et opticiennes, qui m’avaient encouragé dans ce sens.
Les interfaces “tableau de bord” offrent de nombreux avantages :
- une navigation facilitée, puisque le menu et toujours à portée de clic
- Sur la page d’accueil les données clés sont visibles : évènements à venir, état des commandes, services mis en avant, incitation à augmenter sa formule.
- S’adapte facilement aux différentes tailles d’écran
Concept 2 : Comme un smartphone (piste suggérée)
Il m’a été demandé d’intégrer un smartphone dans l’interface non pas comme élément visuel, mais comme élément interactif. Les icônes dans l’écran serviraient à naviguer sur les différentes pages de l’application web.
Cette demande pose 5 problèmes :
- La navigation poserait le même que celui sur la plateforme actuelle.
- L’utilisateur risque de penser qu’une partie du contenu n’est pas chargée.
- L’utilisateur risque de se demander s’il est bien sur le bon site. Les photos de smartphones sont généralement utilisées sur les sites des fabricants ou des revendeurs pour présenter le produit.
- L’utilisateur risque de ne pas comprendre ce qu’il est censé utiliser les icônes du smartphone pour naviguer dans l’application. Cette utilisation sort du modèle de navigation familier aux utilisateurs sur le web.
- Sur mobile on aurait une infection, un téléphone dans un téléphone…
Certes cette proposition est originale, mais l’originalité n’est pas toujours la meilleure option, c’est d’ailleurs le fondement de la loi de Jakob (une règle de design d’expérience utilisateur). Selon laquelle, les utilisateurs passent plus de temps sur d’autres sites que sur le votre. Autrement dit, l’humain préfère ce qu’il connait déjà.
En énonçant cette liste de problème, j’ai réussi à convaincre le client que cette idée n’était pas la meilleure solution à adopter. Un compromis a été trouvé, le smartphone a été abandonné, mais la représentation des différentes pages en icône d’application mobile conservée.
Réalisation
Page d’accueil
Pour simplifier le parcours de l’utilisateur dans l’application, j’ai intégré une barre de navigation catégorisée semblable à celle du site de la société.
Il m’a été demandé par le biais d’un court texte de souhaiter la bienvenue à l’utilisateur connecté et de reprendre l’idée d’icônes d’application sur smartphone. La page d’accueil est composée de “blocs” avec une icône (que j’ai créé pour l’occasion), un titre et une courte description pour expliquer ce que trouvera l’utilisateur.
Agenda
Cette interface est un espace d’échange avec l’adhérent ESV, notamment pour lui communiquer les évènements organisés par Groupe All. Est associé à l’évènement, une date, une photographie, une catégorie, un tarif, un organisateur. Les évènements sont rangés par ordre chronologique. Celui du jour est mis en avant par rapport aux autres. Au clic, l’évènement s’ouvre en modale (j’aurais préféré sur une nouvelle page) dans laquelle les détails de l’évènement sont plus amplement détaillés.
Dossier de partage
Il s’agit d’un espace où des fichiers sont mis à disposition de l’adhérent regroupé en 3 rubriques :
- Les fichiers récemment ajoutés
- les services
- les achats