Case study V3

Remise en contexte

J’ai eu l’idée du Wikulture après avoir repensé à mon voyage rheto, au cours duquel j’ai eu des problèmes avec les autorités locales pour avoir utilisé un drone.

image

Image du drone en question

Je me suis penché sur la problématique de touristes mal ou pas assez informés sur leurs destinations. J’ai fait un audit de ce qui existe déjà et me suis aperçu que les informations qui étaient déjà présentes relevaient plus de l’ordre administratif ou ne faisaient que survoler le sujet.

J’ai ensuite exploré l’idée de faire un site qui distribue des informations sur les différences qui peuvent surprendre négativement les touristes occidentaux anglophones à l’étranger.

Le wiki est aujourd’hui destiné à avertir un public occidental et surtout anglophone. J’envisage cependant à terme, que les utilisateurs indiquent leur region d’origine pour que le contenu leur soit personnalisé en fonction.

Pourquoi je me suis planté

J’ai échoué aux remises précédentes, nous allons voir pourquoi.

Dans mes prototypes précédents, la navigation était rudimentaire, les pages de contenus sur chaque pays étaient vides, et le système de contribution n’était pas clair.

Les problèmes étaient ;

Pour la navigation

image

Screenshot de l'ancienne navigation

On ne pouvait pas faire de fautes d’orthographe,

La fonction enter sur l’input avais été désactivé, l’utilisateur était obligé de cliquer sur une suggestion pour avancer,

On ne pouvait chercher un pays que par son nom, il n’était pas possible d’affiner sa recherche,

Pour le contenu

image

Screenshot de l'ancienne template pour les informations par pays

Les pages de pays étaient très maigres, il n’y avait que le nom du pays et les articles associé à celui ci avec des icônes.

Quand il n’y avait aucun article pour le pays recherché, il y avais un simple message d’erreur pour dire que le site n’avais rien sur cette région. C’est peut être la bonne chose à faire, mais dans cette situation, on a juste fait perdre du temps à l’utilisateur.

Les contributions

image

Screenshot de l'ancienne page de contributions

Le système de contributions était confus pour certains utilisateurs.

Quand je l’avais conçu, j’avais imaginé un système dans lequel n’importe qui pouvait anonymement envoyer des témoignages au site, ces témoignages ne pouvaient être lus que par des administrateurs et ceux ci décidaient ensuite d’écrire un article ou non à propos de ce qu’ils ont appris dans ce témoignage.

Le problème c’est que certains utilisateurs s’imaginaient poster des commentaires publics sur les pays, ou que leur témoignage soit enregistré comme un articles. Le manque de contenu et le peu d’explications entre les pages peut en partie être blâmé pour ca.

Ce qui a été amélioré depuis

Je suis parti sur une si mauvaise base que j’ai décidé de complètement re-coder le prototype en partant de zero.

La base

Je n’étais pas non plus 100% satisfait de la navigation de ma précédente version. Cela était du à la base de donnée avec laquelle je travaillais.

J’avais une table de données qui contenait seulement le nom de chaque pays et une id qui lui était associé, aucun renseignement sur le continent, situation politique, frontières, etc.

Je ne pouvais pas triller les résultats en fonction de données que je n’avais pas.

Étant donné que pour cette V3 j’ai eu plus de temps, j’ai décidé de former un minion au data-entry. J’ai codé un simple formulaire qui passait en revue les 243 pays de la table de donnée et avec mon minion, nous avons renseignés pour chaque pays;

image

Screenshot de la nouvelle table de donnés

  • Le code unique ISO3,
  • Le nom en anglais standard sans accent,
  • Le continent,
  • Un score de sécurité allant de 0 à 4,
  • Un score de liberté allant de 0 à 4,
  • Un score d’hygiene allant de 0 à 4,
  • Une liste des codes ISO3 des pays frontaliers (territoires à proximité pour les iles),
  • Si le pays est une destination prisée par les touristes ou non,
  • Les langues natales de la populations et en quel pourcentage;

Récolter ces données pour tous les pays du monde à été très fastidieux et long (deux journées à deux).

Mais au moins maintenant j’avais une table de donnée solide autour de laquelle j’allais pouvoir construire une navigation digne de ce nom.

Initialement j’avais prévu qu’on puisse trier les pays par ordre alphabétique ou par continents. Et ensuite n’afficher que ceux qui correspondaient aux critères que cherche l’utilisateur (sécurité, hygiene, liberté, et popularité).

Cependant si vous avez déjà navigué dans les prototype. Vous remarquerez que je n'utilise nulle part les données récoltées sur la liberté ni sur la popularité.

Après des test d’interface, j’ai conclut que mettre en place des filtres pour tous les types de données récoltées serait contre-productif.

Le menu pour filtrer les résultats aurait été trop rempli, au point de perdre les utilisateurs.

J’ai fait des test sur adobe XD de à quoi ressemblerait une telle interface sur desktop et mes sujets étaient d’accord pour dire qu’il y avait trop d’éléments.

En plus de cela, je n’étais pas satisfait des données récoltées pour la liberté et la popularité. Ce sont deux attributs très durs à quantifier objectivement. De plus, ce sont deux critères qui peuvent varier énormément d’une ville à l’autre d’un pays.

J’ai donc réduit les filtres de recherche selon 3 critères.

  • Le continent;
  • La sécurité;
  • L'hygiène.

Ce sont selon moi les 3 critères vraiment importants pour les touristes qui veulent s’informer pour un voyage.

La navigation

Pour la navigation entres les pages, j’ai gardé une barre de recherche. Je pense que cet outil est essentiel pour un site comme celui-ci. La barre de recherche est maintenant disponible dans toutes les pages.

Je ne suis vraiment pas un fan des burgers menu qui s’étendent. Alors pour faire rentrer la barre de recherche dans le header sur mobile, sans pour autant enlever les autres liens de navigations. Je me suis inspiré de la barre de recherche de la version Web de youtube sur mobile.

image

Screenshot de mes recheches de searchbar sur mobile

Mais maintenant la barre de recherche n’est plus le seul moyen de navigation sur le site.

L'utilisateur est accueilli par une liste de tous les pays, triés par appartenance à un continent ou par ordre alphabétique. Ces listes se présentent comme des menus ouvrants, qui sont fermés par défaut.

Les listes de navigation permettent plus d’exploration aux utilisateurs, auparavant ceux-ci étaient obligés de savoir sur quel pays ils souhaitent se renseigner, après quoi l'utilisateur n'avait pas de raison de poursuivre sa navigation.

Ces listes permettent aux utilisateurs de scroller à leurs guise parmi les possibilités et peut-être porter leur attention sur un pays auquel ils n'auraient pas pensé si il n’avait pas été mis en avant.

Le contenu

Grâce à ma nouvelle table de données, j’étais maintenant capable de renseigner les utilisateurs, ne serait-ce qu’un peu sur chaque pays contrairement à la version précédente.

Pour tous les pays, sont affichées les langues natales des populations locales, en plus d'une indication globale sur la situation socio-politique et sanitaire du pays.

Se rajoutent à cela, des conseils personnalisés pour le pays. Ceux ci sont écrits et mis à jour par des administrateurs du site.

J’ai également pris en compte les suggestions des professeurs et j’ai ajouté en bas des pages de chaque pays, des liens vers la page de tous ses pays limitrophes.

J’ai re réfléchis au système de contributions qui avait été mis en place précédemment, et je suis reparti avec l’idée d’avoir pour chaque pays un espace commentaire dont je reparlerai un peu plus tard.

La barre de recherche

Pour cette V3, je voulais également palier à un gros problème de la barre de recherche - l’orthographe.

Si vous aviez des fautes d’orthographe dans votre recherche, vous ne trouviez rien.

Ce problème était particulièrement ennuyant, il est peu commun de connaître parfaitement l'orthographe parfaitement de tous les pays du monde, en anglais de surcroît.

J’ai donc mis en place une barre de recherche "augmentée". Au lieu de comparer l’input de l’utilisateur à une base de donnée, le code cherche les similitudes entre les syllabes de l’input et combien de fois elle se retrouvent dans chaque nom de pays répertoriés.

Ensuite une liste des résultats par ordre croissant de probabilité est affichée à l’utilisateur.

Ainsi dans le cas où l'utilisateur a cherché "bèlle gîke" on retrouve Belgium en premier résultat.

image

Une démonstration de l'éfficacité de la barre de recherche intelligente

Également, les filtres actifs s’appliquent aux résultats de la barre de recherche. Dans le cas où un résultat ou plus est masqué par un filtre actif, un message apparaît pour en informer l’utilisateur, accompagné d’un bouton pour réinitialiser tous les filtres.

Gestion des utilisateurs

Comme j’ai ajouté un espace commentaires dans le prototype, j’ai été obligé d’imaginer un système de comptes.

La gestion de profils est suffisante, je sais qu’elle pourrait être grandement améliorée, mais non seulement je n’avais plus le temps pour l’améliorer, mais ce n’est pas sur quoi porte mon travail.

J’ai donc fait un effort pour faciliter la vie des utilisateurs. J’ai ajouté un moyen pour reconnaître un utilisateur sans qu’il ait à se connecter a l’aide d’un cookie.

Lorsque l'utilisateur revient sur le site avec le cookie d’identification, il est automatiquement reconnecté a son compte.

Mais est-ce un moyen d’authentification sécurisé ? J’ai par curiosité calculé les probabilités que vous arriviez à vous connecter au compte d’un autre en éditant vos cookies.

Vous avec une chance sur 3.774 × 10(29) de trouver l’ID d’un autre utilisateur par hasard.

Les tests utilisateurs

J’ai réalisé des tests utilisateurs à chaque étape majeure du développement du prototype, pour être sûr d’évoluer dans la bonne direction.

Pour avoir les tests les moins biaisés possible, j’ai fait mes tests avec à chaque fois une personne différente, quand c’était possible. A la fin de ce travail j’ai eu 9 sujets de test.

Je ne décrirais que le dernier test utilisateur, ce case study étant déjà assez long. Je vais malgré tout parler au préalable des modifications majeures qui ont été apportées depuis la V3.1, pour mettre le tout en perspective.

L’accueil

L’accueil est la page qui a subi le plus d’améliorations à la suite de tests utilisateurs.

Aujourd’hui, l’utilisateur arrive par défaut avec les pays triés par régions. Initialement ils étaient affichés par ordre alphabétique. Cependant la grande quantité de lignes donnait plus l'impression qu’il s'agissait d’un tableau et non de boutons pour afficher un contenu correspondant. D'abord diriger l’utilisateur sur le tri par continents a démontré son efficacité pour faire comprendre à l’utilisateur de quoi il s'agissait.

image

Screenshot de la page d'arrivée initiale.

Pour les utilisateurs ayant une connexion instable, quand il y a un problème avec la base de données ou qui ont désactivé le javascript, une template des tous les pays par région apparaît, ce qui permet la navigation dans l’ensemble du site malgré tout.

L’ajout de cette template a été un compromis à faire car il faut charger toutes les données de tous les pays par défaut lorsque la page est envoyée et cela augmente la taille du fichier HTML de 100ko, après compression.

J’ai finalement ajouté une info-bulle qui apparaît chez les nouveaux utilisateurs pour fournir un minimum d’explication sur ce qu’est Wikulture, au cas où quelqu'un n’y serait pas arrivé via la landing page.

Les filtres de recherche

Les filtres ont également été rendus plus explicites. Dans la v3.1, les filtres ressemblaient trop à des liens et l’ordre d'apparition était region - sécurité - hygiene. Avoir le filtre par région apparaître en premier et qu’il ressemble trop à un lien rendait les utilisateurs confus quant à la nature de cet élément.

J’ai également ajouté un code qui empêche l'utilisateur de masquer tout les tags d’une catégorie, ce qui masquait l'entièreté des résultats.

J’ai aussi rajouté un message informatif qui apparaît lorsque du contenu a été masqué par un filtre de recherche, accompagné d’un bouton pour reset facilement le filtre.

La sidebar des filtres sur desktop devient scrollable si l’écran n’est pas assez haut pour afficher toutes les options.

La page de connexion

J’ai du repenser le placement des éléments dans la page de connexion.

Bien que ce ne soit pas un problème ‘fatal’, dans la majorité des tests, lorsqu'il était demandé au sujet de se créer un compte, la plupart renseignait le champ Email du mode login, qui est la page qui s’affiche par défaut.

J’ai donc mis plus en evidence le lien pour créer un compte en changeant le texte de ‘register’ à ‘create new account’ et en plaçant le lien en dessous du titre au lieu de en dessous du bouton login.

image

Screenshot de la page de connexion actuelle.

Bien que personnellement je trouve cette interface moins intuitive, tous mes sujets de test s’accordent à dire que c’est bien mieux de cette façon.

Le test final

Le scénario était le suivant : le sujet doit se renseigner sur l’Australie et y poster un commentaire.

Ce sujet n’avais aucune familiarité avec le Wikulture. C’est un homme moyennement familier avec l’informatique, il a réalisé le test depuis son bureau et parle couramment anglais.

1) Le sujet à lu l’info-bulle et l’a fermée.

2) Le sujet se rend tout de suite dans la catégorie Océanie.

3) Le sujet trouve très vite la page de l’Australie.

4) Le sujet a consulté les informations à sa disposition.

5) Le sujet a suivi le lien pour se créer un compte.

6) Le sujet a pris quelques secondes pour comprendre la page.

7) Le sujet s’est orienté dans la création de compte.

8) Le sujet crée son compte avec succès.

9) Le sujet clique sur le lien ‘back’ et se retrouve sur la page de l’Australie.

10) Le sujet commente la page de l’Australie.

En conclusion

Je suis aujourd’hui fier du Wikulture dans son état actuel, dans un monde parfait j’aurai eu le temps de faire une meilleure gestion de profils utilisateurs.

Cependant j’ai eu le temps de faire une table de données très complète, ce qui m’a permis de pousser la navigation et le contenu beaucoup plus loin que dans la version précédente, ce qui est une amélioration considérable.