L’atelier Rethinking User Experience est, cette année, basé sur le site web du BAM (Beaux-Arts de Mons) duquel nous devons tirer une fonctionnalité et la repenser pour qu’elle soit accessible et utile pour les utilisateurs. Mais je vais un peu vite, commençons par le début.
Tester et observer
Avant de commencer le re-travail de l’interface, il faut d’abord tester l’ancienne. Pour ça j’ai demandé l’aide de 3 proches qui ont des expériences totalement différentes avec internet. Vous pouvez retrouver l’article ici !
Pour ce qu’il en est de la conclusion que j’ai pu en tirer, elle est très simple, le site n’est pas vraiment ce qu’on peut appeler accessible.
Les fonctionnalités sont assez peu présentes et se montrent sous forme de listes la plupart du temps. L’utilisateur finit par trouver ce qu’il recherche, en cherchant fort, mais abandonne plusieurs informations qu’il n’aurait normalement pas laissées. Le site manque aussi d’une version mobile, ce genre de manipulations se faisant principalement par téléphone ou tablette.
Avec qui travailler ?
La prochaine étape qui s’est présentée était de se mettre en groupe pour travailler les différentes parties écrites sur un même sujet. J’ai alors eu l’honneur de travailler avec Giulia, Jean, et Sarah (allez voir ce qu’il font, ce sont des crèmes). Nous avons alors procédé à un inventaire par groupe de tout le contenu.
#02 : C’est quoi les règles déjà ?
BAM ! (pas l’onomatopée)
Le BAM ou “Beaux Arts Mons”, est un espace culturel qui propose des expositions tout au long de l’année. Il se veut être une œuvre d’art et d’architecture en lui-même. Outre les diverses expositions, le BAM peut aussi accueillir des colloques, séminaires et réceptions.
Procédons au processus
Il a fallu ensuite regarder le site du BAM et recenser son contenu. Comment l’utilisateur va-t-il naviguer ? Comment regarde-t-il le site ? Comment avance-t-il sur les différentes pages ? Comment les éléments sont-ils placés sur la page ?
Nous faisons alors un premier inventaire de contenu en dessinant les éléments que nous retrouvons; titres, blocks d'images, texte, etc. Cela nous permet tout d'abord d'avoir un premier aperçu de comment fonctionne le site dans l'état.
Nous pouvons alors faire un inventaire de contenu du site BAM, ce qui consistera à chercher les éléments du site web et les classifier. Nous retrouvons alors toutes ces inventaires sur le Google Drive partagé de la classe.
La prochaine chose à mettre en place c’est une liste des tâches (ici, ici, ici, ici) que l’on retrouve dans tout le site web. Avec toute la classe, nous avons trouvé 23 tâches différentes et en avons retenu 5, une pour chaque groupe.
Appel à un ami
Tout d’abord, pourquoi faire une interview de quelques personnes pour un site web ? Eh bien, ça peut servir à définir une moyenne générale de comment l’utilisateur pourra agir sur le site et avec la fonctionnalité que nous lui proposons.
Souvent, en tant que créateur | développeur | ui ux-designer, nous avons encore du mal à trouver comment l’utilisateur pourrait avoir une mauvaise expérience sur notre site; nous savons comment il fonctionne, nous savons alors aussi comment l’utiliser.
Nous avons concocté une interview pour nous permettre de nous diriger sur comment les personnes agissent et réagissent aux fonctionnalités que nous leur proposons. Quand viennent-ils à l’utiliser ? pourquoi viendraient-ils à utiliser ça ? quelles sont leurs émotions quand ils y arrivent ? Toutes ces questions nous permettent alors de mieux commencer la création de notre produit, sans être trop biaisé.
L’audit, l’audit, l’audit, ou “regarder ce que fait mon voisin” servira à trouver des inspirations (pas graphiques cette fois-ci) pour l’interface et le fonctionnement de cette dernière. Après avoir trouvé, il a fallu analyser et vérifier les fonctionnalités ainsi que trouver des points positifs et négatifs. Voici un petit résumé.
Plusieurs moyens de contact / Bien signalé par des icônes / Très simple et clair
Désavantages
Très directif (formulaire prend 50% de la place) / Pas de FAQ présente comme deuxième option, directement obligé de contacter un autre humain ce qui entraîne de l’attente
Barre de recherche permettant de naviguer entre les différents points importants du site si on ne souhaite pas chercher dans les catégories proposées en dessous / Choix de se connecter pour permettre une expérience plus correcte
Désavantages
Difficulté de trouver une information rapide quand on cherche sur le site, manque de possibilité
Très ludique avec une bonne hiérarchie des éléments / Liens mènent directement vers l’action souhaitée (appel ouvre l’application ou la fonction appel, par exemple) / Possibilité d’inclure un document dans sa question
Désavantages
Manque d’anonymat (obligation de donner un nom et un prénom) / Pas de FAQ
FAQ très complète (beaucoup de choix de thèmes et questions) / Possibilité d’ouvrir et fermer les questions
Désavantages
Le design par bloc ne permet pas une bonne accessibilité, il y a trop d’informations d’un seul coup / Le travail de hiérarchie semble aléatoire, pas vraiment de logique
Bulle de conversation discrète mais présente, facile à trouver / Utilisation de l’API de messenger / Présentation sous forme de bulle qui s’ouvre et se ferme pendant la navigation sur le site
Désavantages
Bulle toujours présente mais sans nécessité pour le client / Impossibilité de l’enlever totalement
Faire une interface après toutes ces recherches reste une tâche des plus compliquées qui se fait à base d’itérations en présentant son projet à plusieurs personnes à plusieurs reprises.
Pour les premiers croquis, je décide de travailler sur 3 choses différentes : une chatbox, une FAQ et un formulaire de contact.
L’aventure d’un persona
Pour le travail du User Journey, j’ai pris le temps de développer 3 personnages différents pour comprendre comment ils pourraient agir en fonction des fonctionnalités que présenterait le site. Nous avons alors 3 profils types que nous pourrions décrire comme des "persona".
Je suis une riche PDG d'une entreprise de vente de produits bio, très concernée par son temps. Je cherche toujours des moyens d'optimiser mon temps, et décroche mon téléphone si résoudre le problème par moi-même prend plus de 2 minutes.
1
Vers 16h, juste après la fin de son service, en sirotant son thé bio antioxydant amincissant sans sucre sans gluten sans goût sans théïne
2
Elle ouvre Opéra, après une màj assez longue du navigateur, elle va sur Yahoo et tape d'abord "BAM" sans succès et ensuite "BAM Mons" et trouve le site.
3
En ouvrant le site, après un peu de recherche, elle cherche les expositions qui pourraient l'intéresser et commence à prevoir sa journée sur son planner en ligne payé 20,00 par mois.
4
Elle se rend compte que les informations ne sont pas très claires et elle n'arrive vraiment pas à commander. Comme c'est une amie qui lui a proposé et que le site est bien fait elle décide de lui donner une chance.
Quelle solution ?
Un chat bot ! Dans le chat elle tape "commande un ticket pour mamie, tatie, fifille et toutes les autres personnes de votre arbre généalogique". Elle est très contente car elle reçoit rapidement une réponse à son problème.
5
Malheureusement, elle se rend vite compte qu'elle parle à une machine, elle essaie alors de demander à parler à un humain, vainement.
Quelle solution ?
Proposer un service de chatbox connecté à Facebook Messenger qui permettrait un contact avec un humain directement à certaines heures de la journée.
6
Elle veut poser une question sur un sujet en particulier, elle se rend compte qu'elle doit tout expliquer avant de procéder au questionnement.
Quelle solution ?
Proposer un choix de topics avant de commencer le chat pour permettre au client et au musée d'avoir les informations avant de commencer la résolution du problème.
Je suis garagiste dans un garage vintage, j'adore retaper des voitures et augmenter ma culture en allant à beaucoup d'expositions; je suis très patient et passe des heures pour trouver le meilleur bon plan.
1
Durant sa pause déjeuner, avec un café latté au goût citron de Moldavie qui a poussé avec de la musique classique. Et 2 sucres.
2
Il utilise la saisie vocale pour chercher sur Google. Après lui avoir proposé le programme de Zemmour qu'il ne cherchait évidemment pas. Il décide alors de taper lui même sa demande et arrive sur le site.
3
Il arrive alors sur le site du BAM qui lui permet de commencer ses recherches. Il se demande si d'autres personnes comme lui cherchent simplement des inspirations proposées par des expositions. Il cherche alors dans la FAQ si il y aurait un onglet de type forum où d'autres ont déjà posé la question.
4
Il décide de chercher par lui-même mais ne trouve pas l'information sur le site et voit que ce sont surtout des listes très longues avec des mails.
Quelle solution ?
On lui propose une barre de navigation qui lui propose des expositions que les artistes apprécient quand il tape"pour les artistes".
5
Il en trouve quelques unes mais pas encore ce qu'il cherche, il aimerait pouvoir poser une question directement aux artistes utilisateurs.
Quelle solution ?
Une case proposant qu'il puisse poser lui-même sa question qu'un modérateur ou même la communauté pourra prendre le temps d'y répondre.
6
Il veut alors faire une recherche sur les expositions, les autres choses ne l'intéressent pas vraiment, mais il ne peut faire ça qu'en cherchant manuellement.
Quelle solution ?
Proposer des topics, une forme de filtrage des questions pour permettre de touver exactement ce qui est recherché.
7
Il veut faire une recherche dans un topic en particulier mais il ne peut que rechercher partout en devant préciser les bons mots-clés.
Quelle solution ?
Un système de filtre proposé avec la barre de recherche. Rechercher dans un topic en pariculier en posant une question particulière.
Je suis horairiste dans mon école, je suis très peu concerné par mon temps et ne m'interesse qu'à des expositions en rapport avec les horloges et les plannings; je suis toujours sur mon téléphone. Je possède aussi un handicap physique, ne me permettant pas de me déplacer à pied.
1
Aux alentours de 8h du matin, avant de commencer sa journée de travail assidû avec les horaires.
2
Il ouvre Safari et recherche "exposition horloge mons". Il tombe d'abord sur un site qui lui expose les différentes expositions suivi des différentes lieux où se trouvent ces expositions. Il trouve alors celle que son collègue lui a recommandé et est redirigé sur le site du BAM.
3
Il arrive alors sur le site web où il voit beaucoup d'informations sur les différentes expositions, des moyens de réserver, l'histoire du musée.
4
Il ne trouve aucune assistance précise pour son problème, aucun contact précis du musée ou une information précise disant que le local est adapaté pour les personnes en chaise roulante.
Quelle solution ?
Proposer une page claire où l'on trouvera un formulaire lui permettant de poser la question à un département spécifique.
5
Le formulaire ne lui permet pas d'atteindre directement un service, il passe forcément par le secrétariat qui devra le rediriger ensuite.
Quelle solution ?
Proposer un filtre dans le fomulaire permettant d'envoyer une demande à un service particulier sous base de thèmes de base (handicap dans ce cas-ci).
6
Le formulaire demande forcément un email permettant de contacter la personne par la suite pour régler le problème posé.
Quelle solution ?
Proposer un système de choix de contact en fonction de ce que la personne préfère: appel, sms, email, etc.
Les premiers croquis faits, il ne faut pas s’y arrêter, j’utilise donc mon user journey pour me focaliser sur une fonctionnalité en particulier: la FAQ (frequently asked question / foire aux questions) qui permet à l’utilisateur de trouver les informations qu’il recherche auprès de personnes qui ont déjà rencontré ce problème. Je retravaille l’interface en prenant en compte les différents problèmes rencontrés lors de mes premiers croquis.
Again, I said !
Après les retours d'utilisateurs, des professeurs et mes propres recherches, je décide de travailler sur mon prototype papier. Je le mets au propre et je trouve de vraies phrases pour remplir les lignes ondulées.
#04 : Il ne peut en rester qu’un
Créez pauvre fou !
Une fois le croquis final réalisé, après un test utilisateur, je peux vous présenter la version finale du prototype papier.
J'ai pu ajouter à mon prototype initial: un bouton retour quand nous sommes sur une catégorie en particulier en desktop, une navigation plus claire sur mobile et sur desktop avec les catégories dans ou à côté de la barre de recherche et la barre questions pratiques sur toutes les pages.
Je vous présente alors tout ceci sous forme d'un petit stop-motion:
Et pour de vrai ?
Le croquis et puis l’interface numérique; je me mets vite à la création de l’interface en utilisant pour la première fois le programme Figma qui me permet de nouvelles fonctionnalités que je ne retrouve pas sur Adobe XD.
Pour finaliser ce travail en beauté, j’ai décidé de faire mon premier site haut en couleur en usant de dégradés et d’effets incroyables. En espérant vous en mettre plein la vue. Ce site sert alors de case study pour tout ce travail réalisé pendant près de 1 mois et demi.
J’ai pu apprendre beaucoup de nouvelles choses sur le UX-UI qui me serviront encore longtemps, la dureté de notre professeur m’a permis de repousser mes limites et de me retrousser les manches pour donner un travail finalisé à temps qui m’aura permis d'apprendre beaucoup de choses et de mieux comprendre le travail de l’UI UX designer.
Mais, si je ne pouvais vous dire plus qu’une chose… Vous avez pensé à aller voir le travail de Giulia, Jean, et Sarah parce qu’ils sont vraiment bien. Allez-y.
