Initiation

Petite remise en contexte

L’atelier nous a été introduit par une tâche qui peut paraître simple aux premiers abords mais qui nécessite une certaine réflexion: analyser le parcours d’un utilisateur lambda cherchant à imprimer un objet au Fablab de l’iMal.

Impression 3D

Ines Álvarez Fdez - Unsplash

Analysons tout ça:

L’utilisatrice a un profil classique d’une jeune personne utilisant un site internet, elle n’a pas eu l’occasion auparavant de naviguer sur le site ni même d’avoir d’autres renseignements que le scénario.

Capture d'écran vidéo de navigation

Capture d'écran vidéo de navigation

Dès le début, on peut voir que la navigation se fait assez difficilement et elle décide de se rendre sur la page contact. Elle y trouve l’adresse mais pas d’autres informations utiles pour ce dont elle a besoin. De là démarre une série de va et vient sur différentes pages afin d’essayer de trouver les renseignements nécessaires.

On peut voir sur la vidéo qu’au fur et à mesure qu’elle cherche les informations, l’utilisatrice se lasse de l’utilisation du site car le contenu ne se trouve pas là où il est censé être. Finalement, elle termine par utiliser le lien d’inscription via la page calendrier pour terminer la procédure pour avoir accès au FabLab.

Pour conclure, le site de l’iMal contient une multitude d'informations très utiles, cependant l’architecture du site et sa navigation sont loin d’être optimisées pour une bonne expérience utilisateur. La structure et l’organisation du contenu est fort brouillon.

Lire l'analyse complet

iMal

Locaux de l'iMal

Credits: iMal

L’iMAL (interactive Media Art Laboratory) est une entreprise qui a pour but de stimuler le processus créatif des Nouvelles Technologies. C’est aussi un centre d’Art Contemporain proposant une série d’expositions, conférences, concerts et performances.

Début de l'atelier

Dès lors, nous avons formé des groupes pour la suite de l’atelier. Mon équipe de choc était composée de 3 personnes ainsi que moi-même:

  • Félix Riffont

  • Sam Bajaddi

  • Jarod Dubois

Photo équipe

Portrait de l'équipe | Credits: telestar

Une des premières étapes a été de faire l’inventaire du contenu des différentes pages du site. Étant donné la quantité de pages à analyser, elles ont été réparties de manière équitable à chacun. J’ai été chargé d’analyser la page d’Accueil ainsi que la page A propos.

Schéma page Accueil

Inventaire page d'accueil

Schéma page A propos

Inventaire page A propos

Comme on peut le voir, la structure de ces deux pages est fort similaire. On y retrouve un header avec le logo, le titre de la page ainsi qu’une description. Ensuite vient la navigation puis le contenu de la page. A droite on trouve une barre latérale avec un champ de recherche et une liste des actualités. Un peu plus bas sont disposés les liens des réseaux sociaux et la Newsletter.

Cette structure est semblable sur une multitude de pages donnant une impression de déjà vu ce qui est assez perturbant quand on ne connaît pas le site.

Page d'accueil site iMal

Page d'accueil du site de l'iMal

Nous avons par la suite débriefé avec mon groupe des différents points faibles du site et nous en sommes venus à la conclusion que malgré le nombre de menus se trouvant sur le site, aucun d’entre eux n’est réellement clair. L’utilisateur se perd très vite dans la masse d'informations désorganisées qui lui sont proposées. Le design est peu adapté et surchargé. Il y a un réel souci d’accessibilité et le manque d’ergonomie est flagrant car l’utilisateur est vite amené à visiter plusieurs pages inutiles avant de trouver la moindre information.

Pour résoudre ce problème, il faudrait regrouper les informations essentielles sur la page d’accueil et amener l’utilisateur à se diriger vers les éléments qu’il recherche sans devoir passer par 5 pages différentes.

Choix de la Top Task:

Toute la classe a dû voter pour 3 tâches qu’ils souhaitaient comme Main Task. Ensuite, les 5 tâches ayant le plus de votes seront les Main Task à analyser.

Le choix final était:

  • S'inscrire à un atelier

  • Louer un espace

  • Consulter les horaires

  • Faire une recherche

  • Devenir membre du FabLab

Liste tasks

Liste des différentes tâches

Quant à mon groupe, notre choix s'est porté sur la tâche: Louer un espace.

Description de la tâche:

Permet à l’utilisateur de louer un espace original, de qualité si il possède une compagnie ou si il est producteur d’évènement ou si il veut louer un espace pour des séminaires ou des conférences. L’iMal propose également un système de location de matériel high-tech en plus de la location de l’espace.

Photo meeting

Mario Gogh - Unsplash

Besoin de l’utilisateur:

Trouver rapidement les informations sur les différentes locations possibles selon les besoins de l’utilisateur.

Les informations

  • Espace disponible

  • Surface de l'espace

  • Matériels mis à disposition

  • Agenda

  • Formulaire de contact

  • Information de contact

  • Lieu des espaces disponibles (plan gps?)

  • Prix des différentes possibilités de location

  • Média des différents espaces (photos, vidéos, visite virtuelle?)

A quoi me sert un espace?

Mise en avant des informations concernant les différents espaces louables pour comprendre directement ce qui est à notre disposition.

Quels types d’espaces me propose l’iMal?

Selon mes besoins, il y a différentes locations possibles.

  • Avec/Sans matériel

  • Taille selon le nombre d'invités

  • But de la location

Photo conférence

Teemu Paananen - Unsplash

Est-ce qu’on peut choisir une durée?

Possibilité de choisir la durée de notre location de manière dynamique sur un agenda.

Comment faire notre location ?

  • un lien qui mène vers la possibilité d’envoyer un mail

  • formulaire à remplir sur la page de présentation des espaces louables avec un agenda interactif pour faciliter la demande de location

  • possible chatbot (?)

Comment savoir si un espace est disponible?

L’agenda sera mis à jour à chaque locations pour que l’utilisateur voit si la durée et l’espace qu’il souhaite est dispo.

(Ré)Organisation de l'interface

Le site de l’iMal propose une page “Location” où l'on peut voir les différents espaces en location. Cependant, celle-ci n’offre pas beaucoup de renseignements quant aux différentes offres. En effet, la page location actuelle comporte un bref texte d’introduction, une liste du nom des endroits en location avec le type (évènement, conférence, concert,...), un bouton de contact et une seule photo par endroit. Pour tout autre renseignement l’utilisateur doit obligatoirement passer par l’envoi d’un email à l’iMal.

Capture d'écran du site actuel de l'iMal

Page actuelle des espaces en location

Il semble évident que cette page nécessite une adaptation car il y a beaucoup de potentiel mais pas assez bien exploité.

En commençant d’abord par une mise en valeur des différents espaces grâce à un système de vignettes en haut de page. De cette manière, les visiteurs pourront directement voir les différentes salles en location. Dans ces vignettes se trouveront quelques informations utiles pour les utilisateurs en rapport avec chaque salle telles que la capacité, la surface mais aussi le prix.

C’est pourquoi sur cette nouvelle page, on trouvera:

  • une brève description de l’espace: Renseigner l’utilisateur sur les différents atouts de celles-ci

  • une galerie photo: donner des visuels aux utilisateurs leur permet de se projeter dedans et crée un sentiment de coup de cœur

  • une visite virtuelle ou plan 360°: visualiser comme si on était sur sur place

  • une carte avec l’emplacement

  • des informations de contact complètes en cas de questions

  • un bouton pour commencer le processus de réservation via un Agenda

J’ai réalisé un audit que vous pouvez retrouver ici détaillant l’analyse de plusieurs fonctionnalités utiles et ayant un apport qualitatif au site de l’iMal.

Avec ces apports, les utilisateurs auront déja une quantité d'informations plus importantes à propos des espaces. Ce qui leur fera gagner un temps précieux et éviter une certaine frustration en prenant contact pour avoir des informations essentielles.

Prototyping

Maintenant que la liste des fonctionnalités a été rédigée, la prochaine étape est le prototyping sur papier. Ce procédé a pour but de schématiser grossièrement le visuel du site ainsi que ses fonctionnalités pour se concentrer sur l’aspect technique et non graphique. Le branding ne ratrappe pas un mauvais UX donc il est très important de réfléchir à cette étape.

Première partie des wireframes Schéma page A propos

Première version du wireframe

Mise en situation

Le user Journey permet de retracer le parcours d’un utilisateur qui souhaite effectuer une action et d’ainsi s’imaginer son ressenti lors de l’expérience. Étant donné le fait que chaque personne navigue de manière différente et que tout le monde n’a pas le même but, on imagine alors des facteurs limitants pour essayer d’adapter son design à toute situation. Dans mon cas, j’ai imaginé la situation d’un patron souhaitant organiser un meeting, un jeune groupe de musique voulant faire une performance et d’une professeure voulant louer une salle pour une activité.

Voir les User Journey

Repenser ce qui a été pensé:

Ici la structure reste principalement la même mais il y a de légers changements. Notamment au niveau de la page d’accueil qui se voit ajouter une carte ou encore la page des espaces auxquelles on ajoute un deuxième bouton réserver juste en haut afin de ne pas devoir scroller jusqu’en bas pour faire l’action. Après plusieurs tests, on se rend compte qu’il y a des choses à changer, d’autres à supprimer ou encore à ajouter. Je suis repassé par l’étape du prototyping avec cette fois-ci un meilleur retour et une vision différente des besoins de chacuns.

Wireframe version n°2

Version n°2 du wireframe

Si vous souhaitez vous aussi vivre l’expérience, un prototype InVision a été conçu afin d’avoir un rendu le plus réaliste possible.

Conclusion

Cet atelier m'a appris à réfléchir beaucoup plus sur la manière d'utiliser un site et surtout que chauque petit détail compte. Il faut faire tester son site, s'imaginer dans la peau de différentes personnes afin d'adapter son design. De plus, il m'a permis de perfectionner mon processus de création en passant par des wireframes papiers ce qui permet de se concentrer sur l'aspect technique uniquement.