Rethinking UX

Instagram

Contexte général

Dans le cadre de nos études à la Haute École Albert Jacquard, il nous a été demandé de repenser l'expérience utilisateur d’une fonctionnalité d’un réseau social donné selon nos préférences. Dans notre cas, ce fut Instagram. Notre première démarche a été de tester et de lister, le plus objectivement possible, les différentes fonctionnalités que propose le réseau social. Cela étant fait, nous avons décidé de nous concentrer sur celle qui nous semblait la plus évidente : le partage de photos.

Notre première étape a été de commenter chaque étape du processus depuis la connexion, jusqu'à la suppression de l’image en passant par le partage de photos. Nous nous sommes aidés de screenshot et d’un google slide pour suivre le parcours de l’utilisateur pas à pas. Parmi tous les problèmes de parcours rencontrés, nous avons tranché pour ceux qui nous paraissaient les plus importants selon des personas préalablement élaborés : l’absence de lecteur sur les vidéos, la navigation entre les photos, le recadrage de photos et la superposition de filtres impossible.

Définition du service et de ses fonctionnalitées

Instagram est une plateforme de partage de photos et de vidéos créé en 2010. Initialement conçue pour le mobile, ils ont tout de même une version desktop qui ne permet toutefois pas de poster de contenu multimédia. Le but d’Instagram est de poster de manière instantanée, spontanée mais ce n’est actuellement plus le cas : les gens prennent le temps de recadrer, d’éditer et rechercher des légendes et des hashtags en quête de “ followers ” et de “ likes ”.

Bien que l’application soit simple et épurée, elle permet une multitude de fonctionnalités : suivre des personnes, liker du contenu, commenter, poster des stories (contenu disponible pendant 24h), éditer nos photos/vidéos, ajouter une description à celles-ci, le lieu ou elles ont été prises et bien d’autres... Instagram possède même une fonctionnalité “ chat ” qui permet de discuter avec d’autres personnes sous forme de photos, vidéos ou de textes.

Mon équipe

Personas
et étude comparative

Afin de mener à bien ce projet, nous avons réalisé une étude comparative disponible sur google sheets. Pour ce faire, nous avons comparé Instagram à des réseaux sociaux similaires. Nous avons pour chacun d’entre eux dégagé des avantages, des inconvénients et des fonctionnalités supplémentaires. Il en est ressorti que malgré le manque de certaines fonctions comme la supperposition de filtres, Instagram est clair, ergonomique et facile à utiliser.

Nous avons également mis en place des personas de façon individuelle. Lors de notre mise en commun, il est ressorti que la majorité des utilisateurs avaient entre 16 et 30 ans et qu'ils pouvaient être des anonymes comme de personnalités. Nous avons donc élaboré deux personnas distincts disponibles sur google docs.

Ma fonctionnalité

Après avoir listé la majorité des fonctionnalités d'Instagram, nous avons tous travaillé sur l'une d'entre elles que nous trouvions défaillante afin de pouvoir la repenser et l'améliorer. J'ai pour ma part choisi la fonctionnalité du recadrage de photos. Celle-ci est très utile car elle permet de recadrer les images avant leur publication sans devoir passer par une application externe. Elle est cependant actuellement fortement limitée, c’est pourquoi j’ai décidé d’essayer de résoudre ce problème.

Analyse du problème

Avant de repenser cette problématique, il était important d'analyser la fonctionnalité dans son état actuel afin de mieux la comprendre. Cette analyse m’a aussi permis de me rendre compte d’un autre problème non négligeable auquel je n’avais pas pensé et sur lequel j’ai également décidé de me pencher.

01

La fonctionnalité recadrage d’Instagram se trouve actuellement sur la page de sélection de photos, c’est la page depuis laquelle l’utilisateur peut sélectionner la ou les images qu’il veut publier. Depuis cette page, il est possible de redimensionner l’image avec les doigts ou avec le bouton de recadrage. Ce recadrage est cependant fortement restreint, il est par exemple impossible de publier une photo au format rectangulaire vertical dans son entièreté. C’est le premier problème auquel j’ai décidé d’apporter une solution.

02

Une fois que la photo est redimensionnée, et après avoir cliqué sur le bouton suivant, Instagram propose à l’utilisateur une série de filtres et d’options de modifications à appliquer aux clichés. Il peut donc facilement modifier la luminosité, le contraste, la netteté et beaucoup d’autres choses. Il ne peut cependant plus corriger la taille de son image sans devoir retourner sur la page de sélection de photo.

03

Mais lorsqu’il tente de réintégrer cette page, un message apparaît. En effet, dans son état actuel, Instagram ne permet pas de retourner à la page de sélection de photo sans perdre les filtres et transformations apportés à l’image. L’utilisateur peut donc revenir sur cette page pour modifier la taille de sa photo mais devra appliquer une seconde fois les modifications et les filtres utilisés. Il s’agit d’un réel problème auquel je n’avais pas pensé et que j’ai remarqué lors de cette analyse. Je vais donc également essayer d’y apporter une solution.

Pistes d'améliorations

Après avoir analysé et mieux compris le problème, j’ai commencé à mettre en place des pistes d’améliorations. Celles-ci devaient prendre en compte les deux problèmes qui sont ressortis lors de mon analyse : permettre une plus large marge de recadrage et permettre de le modifier après avoir édité la photo.

01

La première piste élaborée consiste à laisser l'accès au bouton de recadrage tout au long du processus d’édition de l’image. Il ne sera donc plus uniquement accessible via la page sélection de photo mais il le sera également sur les pages filtres et modifications. Ceci permettra à l’utilisateur de changer son recadrage même après avoir édité la photo et ce, sans perdre les modifications qui lui ont déjà été appliquées. Le bouton restera dans le bas gauche de l’image en cours d’édition comme c’est actuellement le cas et permettra un recadrage soit avec un clic soit avec les doigts. La marge de recadrage sera aussi élargie afin de pouvoir publier une plus grande gamme de photos dans leur entièreté, notamment les photos rectangulaires issues d’un smartphone classique.

02

Pour la seconde piste d’amélioration, j’ai fait le choix de déplacer ce bouton. Il ne se trouvera plus sur la page de sélection de photo mais dans l’onglet “ modification ” au même titre que l’outil luminosité ou contraste par exemple. L’utilisateur pourra ainsi modifier son image même après l’avoir édité, le tout sans perdre ses modifications. J’ai également pensé ajouter un curseur qui permettra de réellement se rendre compte de la marge de recadrage restant dans la limite des restrictions de l’application. Comme dans la première piste, cette marge sera étendue afin de permettre la publication d’une plus large gamme de photos dans leur entièreté.

Choix de la piste

Afin de déterminer la solution la plus appropriée, j’ai dans un premier temps réalisé des tests utilisateurs sous forme de prototypes en papier. Il en est ressorti que la deuxième piste qui consiste à déplacer le bouton était plus adaptée. En effet, dans la première version j’ai pu constater qu’un certain nombre d’utilisateurs ne connaissait pas la fonctionnalité du bouton recadrage. Dans la deuxième piste, celui-ci est facilement identifiable car il est accompagné d’un titre et groupé avec d’autres éléments de modification. Les testeurs ont aussi apprécié l’ajout du curseur qui permet de vraiment se rendre compte de la marge de recadrage restante. Dans un second temps, j’ai réalisé un prototype sur InVision, disponible ci dessous, et je l’ai fait tester à des personnes qui n’avaient pas fait le test papier afin de m'assurer qu'elles trouvaient la fonction taille sans difficultés.

Prototypes

logo InVision logo Adobe Xd

Conclusion

Ces 4 jours de workshops m'ont appris que même si elles nous paraissaient parfaites, les applications que nous utilisons tous les jours ont parfois quelques fonctionnalitées qui pourraient être améliorées. J'ai également pu me rendre compte qu'il fallait considérer chaque utilisateur et de l'importance de la mise en place de méthodes comme les personas, les études comparatives et les tests utilisateurs.