.lucasgeshef

.RUX

.workshop | WMD | 2018-2019

.défi pour étudiant surmené

Lors de notre workshop  Rethinking-UX  (RUX), nous avons eu 4 jours pour repenser et améliorer l’expérience utilisateur d’un site web.

La première partie du workshop se déroule en groupe. Le mien se composait de cinq personnes.

Parmi tous les sites possibles, notre choix s’est porté sur Pinterest. Ensemble, nous avons analysé la plateforme et en avons épinglé les fonctionnalités. Ensuite, individuellement, nous avons ré-imaginé; l’une fonctionnalité de la plateforme.

.pinterest

.un service parfait ?

Voilà comment ça marche.

Pinterest est une plateforme qui, par le biais de tableaux, d’épingles et de suggestions, permet la recherche et l’archivage d’image en lien avec vos centres d’intérêts. Les créatifs du monde entier viennent y puiser l’inspiration.

Définition :
une fonctionnalité est une action ou une suite d’actions qui permettent à l’utilisateur d’atteindre un but précis ou une possibilité supplémentaire.

Le site compte de nombreuses fonctionnalités.

  • Écrire un commentaire
  • Dialogue user
  • Créer un tableau
  • Recherche d’images (+ Pinterest Lens sur mobile)
  • S'abonner (à un user/tableau/thème)
  • Partager une épingle sur les réseaux sociaux
  • Éditer son profil
  • Lire ses notifications
  • Créer une épingle (uploader)
  • Se connecter/se déconnecter
  • Créer un compte
  • Bloquer un user
  • Scanner un pinCode
  • Utiliser Shop The Look

J’ai pour ma part choisi de m’intéresser à la création d’épingles sur Pinterest (en d’autres mots, l’importation d’images), et ma première impression donne le ton :  l’upload d’images sur la plateforme n’a rien de pratique.

.functionality

.à la file indienne

ATTENTION :
par soucis de simplicité, je me cantonne ici à la version web de Pinterest. Les possibilités offertes par l’app peuvent varier.

Sur une page dédiée, nous pouvons créer une épingle, en spécifier le titre et en décrire le contenu, rattacher l’épingle à une URL, et sélectionner le tableau dans lequel devra se retrouver l’image (obligatoire, une épingle se doit de figurer dans un tableau.) Concernant la source de l’upload, soit il s’agit d’ un lien, ou d’un fichier dans notre machine.

Un système clair et simple donc, mais qui souffre d'un défaut.

.on ne peut créer qu'une épingle à la fois.

Pareille limitation plombe l’expérience utilisateur, à tel point que des outils payants ont émergés en réponse. En effet, qui se contenterait d’uploader une unique image ? 

.inspiration

.l'herbe du voisin

L’un des phases essentielles lorsqu’on désire améliorer un mécanisme, c’est de le comparer avec la concurrence. Peut-être ailleurs aura-t-on déjà corrigé ce défaut. Mon enquête englobe trois sites : Juxtapost, Flickr et Instagram.

  • Instagram

    Il s’agit du service le plus éloigné de Pinterest. Davantage réseau social que banque d’image, on peut y importer jusqu’à dix photos à la fois. L’application offre aussi la possibilité de modifier l’aspect des photos grâce à divers filtres. Autre différence, les images peuvent exister en dehors d’un tableau.

  • Juxtapost

    Le site a été pensé comme une version améliorée de Pinterest, mais n’a pas connu le succès de son modèle. En cause, une interface dépassée et peu intuitive. Néanmoins le système d’upload permet d’intégrer nos images dans plusieurs dossiers à la fois. De plus, le nombre de photos importées ne souffre d’aucune limite. Avec un visuel un peu plus travaillé, on aurait pu avoir là un opposant sérieux à Pinterest.

  • Flickr

    Sorte de mix entre Instagram et Pinterest, il se concentre en priorité sur les photographies professionnelles. L’importation de fichiers s’effectue en totale liberté. L’accès à la page d’upload se fait en un clic depuis l’accueil, il n’y a pas de limites en termes de nombre d’images, et l’on peut définir une description globale autant qu’une explication spécifique à chaque image.

.c’est ce dernier exemple qui me servira d’inspiration.

.ideas

.donc... quoi changer ?

À ce stade deux routes m'apparaissent.

Opter pour la performance austère de Flickr et se réorienter en faveur des créateurs, ou...

Garder la simplicité de Pinterest et rester en phase avec l'apparence du site.

Étant donné que le workshop se concentre sur l’UX, et non sur un redesign complet du site web, j’opte pour la continuité avec l’apparence actuelle. Pinterest a un visuel simple, presque enfantin. Il faudra préférer les grandes cases, avec des boutons de bonne taille et bien visibles.

Aussi, quels devraient être les objectifs de la fonctionnalité remodelée ?

  • upload de fichiers multiples
  • définir une description globale, ou spécifique à chaque épingle.
  • enregistrement de chaque épingle dans un ou plusieurs tableaux.

.prototype

.work in progress

En guise d’outil de prototypage, pas d’originalité, j’utilise InVision.

Ce service simule le fonctionnement d'une app grâce à des panneaux représentant l'interface.Interviennent alors les compétences Photoshop. À partir de captures du site de Pinterest, je crée une série d’images selon l’environnement désiré.

La version définitive du prototype.

Afin de limiter le nombre d’écrans (InVision m'autorise un maximum de quarante images pour un seul projet), je fixe un scénario que devront respecter les futurs testeurs.

  1. Depuis la page d’accueil, atteindre la page de création d’épingle.
  2. Importer deux images depuis les fichiers de la machine.
  3. Définir une description générale pour les deux images.
  4. Affiner cette description pour l’image numéro deux.
  5. Spécifier un tableau global dans lequel enregistrer toutes les images.
  6. Spécifier un tableau supplémentaire où enregistrer l’image numéro deux.
  7. Confirmer la création des deux épingles restantes.
  8. Retourner à la page d’accueil.

.user test

.appel au public

Le prototype achevé, il ne reste plus qu’à le faire essayer.

En tout, j’ai obtenu d’une dizaine de personnes qu’ils se prêtent au jeu. Et les résultats se sont révélés… décevants. Pour cause, une bonne partie des testeurs a eu du mal à trouver la page de création d’épingles. Ils réclament de l’aide, ou clique partout jusqu’à déclencher le bon lien.

.aux yeux d’un néophyte, l’interface de Pinterest laisse perplexe.

Seule solution, corriger le problème.

Je décide d'ajouter un bouton Créer une épingle. Maintenant, il faut choisir où placer ce nouveau bouton.

pinIcon

Je produits deux versions de mon prototype, l’une en ajoutant le bouton sur la page d’accueil, l’autre en l’intégrant à la page du profile utilisateur. D'autres tests trancheront le dilemne.

Le verdict est prononcé : mieux vaut placer l'icône dans le profile. Elle s'y intègre mieux.

Un bon point cela dit, les testeurs arrivent maintenant sans soucis à la page de création d'épingle.

Ce détail arrangé, les retours sont tout de suite beaucoup plus encourageants. Le système d’upload multiple fonctionne bien, les utilisateurs sont satisfaits et moi aussi.

.conclusion

.que de plaisir

Cette expérience est, je pense, un succès.

D’un simple point de vue académique, j’ai pu me frotter aux difficultés de la conception d’interface et aux tests utilisateurs. La fonctionnalité remaniée fonctionne à ce niveau, une manière de poursuivre serait d’essayer en important un grand nombre d’images, mais en ce qui concerne le workshop je considère avoir fait le nécessaire.

Les objectifs sont remplis (upload multiple, enregistrement dans plusieurs tableaux, description globale et spécifique), et un problème inattendu a pu être résolu assez vite (l’orientation parmi les pages du site.)