Rethinking UX

Comment modifier l’interface d’un site web pour le rendre meilleur ?

Introduction

Repenser à l’interface d’un site internet n’est pas toujours une chose facile mais il est important de se mettre dans différentes situations pour s'entraîner à devenir un meilleur Web Designer. Nous allons aujourd’hui vous présenter le changement que pourrait apporter le site de IMal pour devenir plus simple d’accès et d’utilisation.

IMal est une association qui crée un espace dédié aux cultures et aux arts numériques. Elle met à disposition du matériel et des aides afin de permettre aux personnes le souhaitant de réaliser leurs projets. Elle donne aussi différentes conférences, masterclass et expositions pour montrer l’accessibilité de la culture numérique.

Étape 1: Lister les problèmes d'UX du site

Avant d’apporter quelques changements que ce soit à l’interface, nous avons tout d’abord listé les différents problèmes que nous avons pu constater sur le support de base tel que:

  • Une hiérarchie typographique mal utilisée,
  • un contraste presque absent,
  • une surcharge d’information,
  • une utilisation limitée des lois de Gestalt,
  • un multilanguage mal approprié,
  • ect...

Tous ces défauts mis bout à bout donnent très peu d’accessibilité au site et le rendent pratiquement pas navigable. Nous avons donc des pistes d’amélioration mais repenser un site complet demande un travail long et fastidieux, c’est pourquoi nous nous attarderons sur une fonctionnalité bien particulière.

Étape 2: Choisir une Top Task

Une top task est une tâche importante que l’utilisateur doit pouvoir effectuer sur un site. Nous avons porté notre attention sur la location d’un local au sein de IMal, une fonctionnalité qui est mal mise en place dans le site internet de base de IMal.

Nous avons choisi cette tâche après la création d’une liste la plus exhaustive possible des différentes tâches que nous pouvons effectuer sur le site de IMal. De cette liste sont ressorties 3 top task dont la nôtre: Louer un local.

De là, nous avons réfléchi ensemble aux informations et fonctionnalités nécessaires afin de réaliser cette tâche:

  • Les tarifs des locaux,
  • les services disponibles sur place,
  • le plan architectural des locaux,
  • des photos des locaux,
  • la surface des locaux,
  • des exemples d'évènements déjà réalisé dans ces locaux,
  • le nombre maximum de personne recommandé,
  • le matériel fournis avec les locaux,
  • un calendrier des disponibilités,
  • un formulaire de réservation,
  • un outil de comparaison des différents locaux.

C’était déjà une bonne partie de réalisée mais nous avons besoin de faire des recherches sur cette fonctionnalité. Nous avons donc cherché différents sites internet utilisant la même fonctionnalité que la nôtre ou une fonctionnalité similaire tel que la réservation d’une chambre d’hôtel, d'une place de concert ou d’une salle de réception. Nous nous sommes inspiré du système de réservation de Pairi Daiza Ressort, Air BnB et la ville d’Andenne.

Les points similaires se retrouvent surtout dans le formulaire de réservation où nous retrouvons le nom et prénom du client, la sélection du client, le numéro de téléphone, l’adresse mail et la période d’occupation. L’outil de comparaison est aussi très présent et se base sur la période d’occupation souhaitée et le type d’endroit désiré pour permettre aux clients de comparer les différents services, les tarifs et la localisation des différentes possibilités qui existent.

Étape 3: Repenser l'interface

Maintenant que nous avons des inspirations pour notre fonctionnalité et les informations nécessaires à la réalisation de notre tâche, nous pouvons commencer à imaginer notre fonctionnalité. Crayon à la main, nous avons tous dessiné les différents écrans nécessaires pour louer un espace au sein de IMal en partant de l’écran principal jusqu’à la confirmation de la réservation.

Evidemment, nos premiers jets n’étaient pas parfaits et un oeil extérieur nous a donné des pistes d’amélioration tel que:

C’est pour cela que nos premiers jets sont repassés entre nos mains et après quelques modifications, il était temps de passer à l’étape suivante: imaginer des User Journey.

Étape 4: Utiliser des User Journey

Un User Journey est l’expérience imaginée par un utilisateur visitant un site web afin de définir les points à améliorer dans un prototype. Ils peuvent être réalisés de multiples manières. Afin de trouver les points à changer dans nos prototypes, nous avons réalisé 3 User Journey mettant en scène des personnages avec des intentions et des situations bien différentes: une société, des étudiants et un artiste. Nous avons donc des univers bien distincts avec des moyens différents et des objectifs qui divergent, cela nous permet de couvrir un large panel d'utilisateurs.

Le gros point positif qui ressort est qu’il y a un outil de comparaison mais le point négatif est qu’il n’est pas présent dès le premier écran perçu par l’utilisateur.

Étape 5: Remodeler le site originel

Les User Journey ont mis en lumière du positif et du négatif dans nos prototypes qui doivent maintenant atteindre leurs dernières apparences. Après avoir imaginé les derniers changements à apporter, nous avons mis au propre notre prototype finalisé et il est bien différent de ce que le site original nous proposait au départ. En plus de la modification de l’interface, l’agencement des informations et l’ajout de certaines fonctionnalités nous ont permis de créer un site internet bien plus accessible et fonctionnel que celui de départ.

Conclusion de l'exercice

Nous avons beaucoup appris, notamment qu’avec le même bagage de départ, beaucoup de sites différents peuvent naître, que les tests au tout au long d’une réalisation font gagner du temps et qu’ils permettent de réaliser un site le plus accessible possible sans se baser sur des aprioris ou des clichés.

Ce n’était pas forcément une gymnastique de l’esprit très simple, il est difficile de se détacher d’une création que nous avons sous les yeux pour la changer totalement et imaginer les différents parcours des utilisateurs en laissant notre connaissance et notre personnalité de côté. Néanmoins, faire ceci de temps à autre nous permettra de le faire de manière plus aisée et de remettre ce que nous pensons savoir sur nos utilisateurs en question.