titre rux

Rethinking User Experience Case Study

Un triangle rose et bleu

Lors de notre workshop n°2, nous avons reçu la mission de se mettre à la place d’un utilisateur et d’apporter une réflexion sur l’amélioration d’une fonctionnalité du site Pinterest.





Nous avons donc réfléchi ensemble à plusieurs améliorations envisageables afin d’en attribuer une à chacun pour les développer individuellement plus en profondeur.

Une fonctionnalité est un outil qui répond 
à une demande spécifique dans 
le but d’effectuer une action au service.

collage2
  • Personnalisation
  • Paramétrage
  • Modification de l’affichage du contenu
  • Consulter ses tableaux, épingles, tests, thèmes
  • Partager le profil en externe
  • Créer un tableau, une épingle
  • Statistiques du compte
  • Possibilité de connecter plusieurs comptes
  • Messagerie instantanée
  • Consultation du nombre d'abonnées
  • Lien vers ses réseaux sociaux personnels
  • Outil de recherche sur mots-clefs
  • Affinement de la recherche via l’ajout de thème / mots-clefs supplémentaires après la 1ère recherche
  • Possibilité de rechercher un contenu, un tableau, une épingle ou un utilisateur
  • Historique des recherches précédentes
  • Supprimer une recherche récente
  • Proposition d’images similaires supplémentaires en fonction d’une image sélectionnée
  • Enregistrement de contenu via les épingles
  • Masque une catégorie d’épingles similaires
  • Création de tableaux
  • Placer un contenu dans un tableau existant ou un nouveau
  • ajout de notes, photos aux recettes/destinations/ ou autre que vous avez testé
  • Afficher l’image
  • Raccourci vers le lien externe de l’image
  • Partage de l’image via différentes options
  • Signaler l’image contenu inapproprié ou violation des droits d’auteurs (DMCA)
  • Télécharger l’image
  • Laisser des commentaires
  • Page d’abonnements à un utilisateur, un mot-clef, un tableau ou un thème
  • Utilisateur suggéré, susceptible d’être suivis selon nos abonnements existants
  • Outil de modification des abonnements
  • Notifications personnalisées selon les thèmes & comptes suivis
  • Création de widget
  • Installer bouton de navigation
  • Localiser l’endroit de son image ( ajout carte , number et adresse sous l’épingle)
  • Rich pins ( descriptions , localisation )
  • Création d’un compte professionnel
  • Campagnes de pubs payantes
  • App Pins (bouton installer app pour inciter utilisateurs à installer votre app)
  • Onglet fonctionnalité, vers la politique de Pinterest, autres onglets : conditions générales, communauté, publicité, développeurs, droits d’auteur, droits des marques et cookies
  • Point d’interrogation qui renvoie vers le centre d’aide
  • Choix de la langue d’affichage
collage3

Collectifs-quatre

Arthur Ansotte

Arthur Ansotte

Graphiste bruxellois diplômé à l’ESA Saint-Luc Bruxelles.

Je suis passionné par la composition et la façon dont les images existent entre elles. J’étudie le design Web & Mobile à l’HEAJ Namur pour perfectionner mes connaissances.

Thibaut Vermeulen

Thibaut Vermeulen

Je suis étudiant en design Web & Mobile à l'HEAJ, je fais du web principalement pour la programmation et l'UI design.

Hélène Nonnon

Hélène Nonnon

Graphiste itinérante entre Charleroi et Bruxelles, diplômée de l’ESA St-Luc de Bruxelles.

Je porte un intérêt certain pour la mise en page et l’équilibre entre image et texte. Maintenant j’étudie le design Web et Mobile à l’HEAJ à Namur afin de compléter mes compétences dans l’univers du web.

Olivier Denis

Olivier Denis

J'étudie le web design à l'HEAJ, j'aime essayer de comprendre l'humain et de le retranscrire dans le Web.

collage4

Il a vu, il a écrit et il a pas tout compris

Je prend le site de Pinterest qui est une banque d’images accessible. Je décide de mettre en situation mon papa. Il n’a jamais utilisé ce site. Il n’est pas très familier avec l’utilisation d’internet en général, ni des ordinateurs portables. Je joue le rôle de guide, d’assistante. Je prend note de toutes ses impressions.

  • Que vois-tu?
  • Quelles sont tes premières impressions?
  • Est ce que tu comprends plus ou moins facilement comment ça fonctionne?
  • Si oui pourquoi?
  • Si tu as des difficultés à cause de quoi?
  • Qu’est ce que tu aimerais chercher, trouver?
  • Que penses tu de la qualité des images, du contenu?
  • Trouves-tu qu’il y ait assez d’informations?

Un ensemble d’images diversifiées sans thème en particulier. Ces images sont rangées de manière ordonnée, sous forme d’une grille. Certains contenus sont intrigants et intéressants même si à la base il ne cherchait pas quelque chose de cet ordre là.

Premières impressions

  • fond varié, il y a de tout
  • contenu facilement identifiable sauf quelques uns
  • contenu moins clair il faut passer plus de temps dessus pour le comprendre
  • ne ressent pas le besoin d’avoir des informations supplémentaires pour le moment
  • originale dans la présentation du contenu
  • tout est mélangé
  • il devrait y avoir une sélection
  • idée de découverte
  • il faudrait peut-être des catégories

Premières expressions

Il se rapproche de l’écran et met ses lunettes. Il est surpris par la quantité d’images, il fait des grands yeux. Il me demande si moi j’ai l’habitude de consulter ce site. Il se pose des questions sur certaines images, il me demande : "c’est quoi ça ?". Il découvre lentement mais surement.

Je lui demande ce qu’il aimerait chercher comme thème sur Pinterest. Il me répond : «  ancêtre voiture ». Il se dirige tant bien que mal vers la barre de recherche qu’il avait repérée auparavant à l’aide du trackpad ( pas facile ) Il tape voiture ancêtre et me demande où il doit valider, je lui répond soit la loupe ou un « enter ».

1. validation « ancêtre voiture »

Il est agréablement surpris par le contenu varié. Il me confirme que ce sont bien des ancêtres, je lui fais confiance. Il trouve juste dommage qu’il n’y ait pas indiqué la date ainsi que la marque de la voiture.

2. validation « ancêtre voiture 1960 »

Il trouve que le contenu est varié mais précis cette fois-ci grâce au complément de sa recherche. Il est épaté par la qualité des images proposées.

3. validation « ancêtre voiture 1960 françaises »

Il dit «  c’est génial ». Le contenu est pertinent de plus en plus. Il y trouve son bonheur.

  • besoin de plus de classification
  • faire la différence dans l’origine du contenu, images >< photos, noir et blanc >< couleurs, pour qu’il sache directement quel est le contenu.
  • plus ciblée directement moins vaste.

Il me dit que lui à tout son temps pour rechercher ce qu’il veut mais que certains doivent prendre moins de temps et arriver plus rapidement au contenu qui les intéressent, à leur but.

Il compare avec moi qui doit chercher des images pour certains projets, je n’ai pas le temps de flâner et de me détourner de mon objectif premier.

Il trouve que le site Pinterest est utile pour la visualisation de contenu aléatoire et utile pour une recherche précise. Merci papa

f(x)

Un espace grisé, rectangulaire comportant un seul mot « rechercher ». 
C’est la barre de recherche de Pinterest.

Une barre de recherche est un outil indispensable à l’utilisateur. C’est comme un repère, un guide, un point de référence.

capture écran
capture écran du site Pinterest
capture écran
capture écran du site Pinterest

La recherche validée, 
les sous-catégories apparaissent sous la forme 
de boutons colorés qui se suivent les uns derrière les autres.

Des couleurs qui ne restent pas, des couleurs qui changent tout le temps, 
est ce que j’ai vraiment envie de cliquer ?





f(x) erreur

L’espace recherche occupe plus de 50% de l’espace 
de la barre de navigation. 
Elle ne donne pas l’opportunité à l’utilisateur 
de pouvoir introduire ou compléter des presets.

capture d'écran Pinterest 50/50
capture d'écran barre de recherche
capture d'écran Pinterest 50/50
capture d'écran pas de presets barre de recherche

Si il y a les boutons colorés mais si tu ne valides pas au moins une fois ta première recherche tu ne sauras
 jamais qu’ils existent. La liste de ces boutons 
est souvent infinie.

capture d'écran liste onglets colorés infinie
capture d'écran liste onglets colorés infinie


Comment faire son choix ? 
Tu te souviendras de celui 
sur lequel tu as cliqué ? 
Elle est passée où la couleur ?

f(x) plans

  • Réduire la taille de la barre de recherche ?

  • Déplacez la barre de recherche pour donner plus de place aux images ?
  • Donnez la même place à chaque onglets ?
  • Utilisez un historique des sous-catégories pour que l’utilisateur puissent se souvenir de ses choix ?
  • Faire apparaitre dès le départ les boutons colorés dans la barre de recherche pour montrer à l’utilisateur qu’il a le choix et qu’il peut le faire dès la page d’accueil ?

Assemblez ces deux fonctionnalités pour en obtenir une seule qui deviendra alors plus complète et utile.

f(x) solutions

Première solution

Je réduis la barre de recherche et lorsque que l’utilisateur commence 
à introduire son mot-clé, les boutons colorés 
se présentent sous-forme de liste où il peut exécuter un choix 
si il le souhaite.

Ces choix seront visibles à tout moment de la naviguation sur le site avec un historique. 
On lui suggère des pistes.




Deuxième solution

Je déplace la barre de naviguation sur la gauche afin de garder l’ensemble précédent mais présenté verticalement.


Même principe que la première proposition mise à part que la barre de recherche disparait. Elle reste toujours sollicitable à tout moment. Toutes les informations sont disposées à la suite à la verticale.




Visuel des deux solutions

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
Display gallery
Photo 1 en taille normale

Afin d'illustrer de manière ergonomique mes hypothèses précédentes, je les ai réalisées sous forme de deux prototypes en version desktop.