Errez moins, accédez plus rapidement à votre fichier multimédia souhaité sur WhatsApp

Nov 28 2022

Améliorer l'expérience utilisateur de la recherche de fichiers multimédias WhatsApp dans les "informations de contact" pour réduire la durée globale de la session de recherche d'un fichier multimédia particulier, ce qui se traduit par une efficacité accrue, plus de contrôle et de liberté pour l'utilisateur. J'ai récemment participé à un défi de conception qui a conduit à la création de cette étude de cas.

J'ai récemment participé à un défi de conception qui a conduit à la création de cette étude de cas. Alors avant de vous plonger dans mon étude de cas, cherchons un peu de contexte ⬇️

Comment j'ai commencé avec l'UX Design Challenge

Mon voyage a donc commencé en assistant à l'atelier UX Kickstarter de 2 semaines par Anudeep, où j'ai appris les principes de conception UX, l'heuristique, la construction d'interface utilisateur dans Figma, le prototypage animé et l'impact commercial de la conception UX.

Tout ce que j'ai appris, était d'une manière non scolaire. Avec une potion magique de bon sens induite par la curiosité, j'ai commencé à regarder les produits de tous les jours qu'ils soient physiques ou numériques avec un état d'esprit curieux ou vous pouvez dire que mon 3ème œil s'est ouvert qui est "l'œil du designer".

Avec cet état d'esprit curieux, nous avons participé à une session avec Anudeep où nous avons été informés du défi de conception UX. Étant ma toute première participation à un défi de conception, j'étais super excité et un peu nerveux en même temps. Nous avions 2 jours pour terminer le défi, mais je suppose que le plaisir de le terminer dans un délai strict a été une excellente expérience d'apprentissage pour apprendre à concevoir en gardant à l'esprit les contraintes.

➡️ Ma refonte finale de l'expérience de recherche de fichiers multimédias de WhatsApp qui fait partie de l'écran d'informations de contact qui inclut l'option de médias, de liens et de documents

Voici une comparaison de l'écran d'origine et de la refonte. Je vais vous expliquer comment je suis arrivé à la solution dans la dernière partie de l'étude de cas.

Fig 1.1 Écran d'origine

Fig 1.2 Écran repensé (avant les tests d'utilisabilité)

Fig 1.3 Écran redessiné (Après les tests d'utilisabilité)

Parlons de la solution et comment elle aide les utilisateurs

Dans la solution finale,

J'ai ajouté différents onglets multimédias tels que Photos, Vidéos, Audio, GIF et Autocollants. Alors maintenant, chaque fois que quelqu'un a besoin de rechercher un fichier multimédia particulier, disons des vidéos, il peut basculer instantanément vers l'onglet Vidéos et trouver toutes les vidéos de ce mois particulier, qu'il souhaite partager avec quelqu'un ou enregistrer sur son appareil. Cela aide les utilisateurs à gagner beaucoup de temps qui, autrement, aurait été à la recherche de fichiers multimédias où différents types de fichiers multimédias étaient tous mélangés.

En plus de cela, j'ai également donné aux utilisateurs la possibilité et le contrôle d'afficher ou de masquer un onglet multimédia particulier qu'ils souhaitent voir. Il existe deux options de filtre, l'une pour chaque mois spécifique, où l'on peut afficher ou masquer les onglets multimédias par mois et l'autre option consiste à filtrer les onglets multimédias globalement pour tous les mois, selon la préférence de l'utilisateur.

J'ai également ajouté une option pour accéder aux fichiers multimédias qui n'ont pas encore été sauvegardés afin que ces fichiers non sauvegardés ne se mélangent pas avec ceux qui sont sauvegardés. Comme l'utilisateur peut finir par cliquer sur les fichiers non sauvegardés uniquement pour découvrir qu'il ne peut pas ouvrir/interagir avec le média. Ainsi, ces fichiers non sauvegardés seront disponibles sur un écran différent. Gardant ainsi à l'esprit l'heuristique de la prévention des erreurs pour les utilisateurs.

Comment la solution aide-t-elle l'entreprise ?

La solution permet de gagner beaucoup de temps pour les utilisateurs, ce qui les aide à accomplir des tâches plus rapidement, réduisant ainsi la durée de la session des utilisateurs et les abandons lors de la recherche.

Voici un prototype Figma pour le même -

Parlons maintenant du processus pour arriver aux décisions de conception finales

La raison pour laquelle j'ai choisi WhatsApp et ce flux particulier

Source : Pinterest

Comme mentionné précédemment après l'atelier UX, j'ai pris l'habitude de regarder chaque produit, qu'il soit physique ou numérique, du point de vue d'un designer et comprendre le "pourquoi" du design est devenu ma seconde nature. Le manuel sur l'apprentissage de la conception existante a été d'une grande aide à cet égard, car chaque produit a été examiné du point de vue du bon sens.

Alors que j'utilisais WhatsApp pour partager des médias à partir des informations de contact d'un chat, j'ai réalisé que le flux de recherche était un peu fastidieux, en particulier lors de la recherche d'un fichier multimédia spécifique qui pourrait être une vidéo, un GIF ou un fichier audio.

Je savais qu'il devait y avoir un moyen de réduire les efforts déployés pour rechercher un fichier multimédia. Une autre chose que j'ai gardée à l'esprit, c'est que qu'il s'agisse d'un produit, célèbre ou nouveau, il y a toujours une marge d'amélioration car à mesure que le produit évolue, la conception et les besoins des utilisateurs évoluent également.

Une autre raison d'avoir choisi WhatsApp comme application pour relever le défi était sa large base d'utilisateurs de plus de 2 milliards d'utilisateurs actifs par mois. Les produits ayant une base d'utilisateurs aussi large signifient que même un seul changement dans une fonctionnalité du produit pourrait potentiellement avoir un impact énorme sur les utilisateurs ainsi que sur l'entreprise.

En parlant d'entreprise, l'UX a un impact important sur les entreprises et ces impacts peuvent être mesurés via de nombreuses mesures commerciales . Le flux de recherche de WhatsApp, s'il était amélioré, pourrait potentiellement entraîner une réduction de la durée de la session et des abandons lors de la recherche de l'utilisateur et pourrait aider l'entreprise de manière très percutante.

Comment ai-je compris les axes d'amélioration de WhatsApp ?

Apprendre et comprendre les 10 heuristiques du design m'a beaucoup aidé à identifier les problèmes dans mon flux de recherche existant. Avec l'aide d'un peu de bon sens et d'une évaluation heuristique, j'ai pu identifier quelques problèmes qui pourraient être résolus pour le flux de recherche.

Fig 2 Problèmes identifiés

Au cours de l'évaluation heuristique, j'ai posé des questions telles que,

Pourquoi les fichiers sont-ils séparés en tant que médias, liens et documents ?
Flexibilité et efficacité d'utilisation - La séparation des fichiers en médias, liens et documents aide les utilisateurs à rechercher rapidement le fichier qu'ils souhaitent enregistrer ou partager avec quelqu'un

Flexibilité et efficacité d'utilisation - L'affichage des fichiers multimédias par mois aide les utilisateurs à trouver rapidement le média spécifique à un mois particulier au cours duquel il a été partagé.
Reconnaissance plutôt que rappel - En raison de la séparation mensuelle des fichiers multimédias, les utilisateurs peuvent rapidement reconnaître l'ancienneté ou la nouveauté du fichier plutôt que d'essayer de se rappeler depuis combien de temps le fichier multimédia a été partagé, ce qui contribue à réduire la charge cognitive de l'utilisateur.

Comment l'utilisateur trouvera-t-il le fichier multimédia spécifique pour réduire le temps de recherche pour l'utilisateur ?

Il est difficile pour l'utilisateur de rechercher un type de fichier multimédia spécifique qui pourrait être une vidéo, un gif, un audio ou un autocollant. Souvent, les utilisateurs peuvent avoir besoin de faire défiler beaucoup pour trouver un type de fichier multimédia spécifique lorsqu'ils essaient de partager le fichier avec quelqu'un ou de l'enregistrer sur leurs propres appareils.
Heuristique- Souplesse et Efficacité d'utilisation

Il est difficile pour l'utilisateur d'identifier quels fichiers ne sont pas sauvegardés car les fichiers sauvegardés et non sauvegardés sont présents dans la galerie et donc mélangés.
Heuristique - Prévention des erreurs

À partir des problèmes identifiés lors de l'évaluation heuristique, j'ai proposé 2 idées et j'ai choisi celle qui avait le plus de possibilités pour résoudre le problème.

Fig 2.1 Idéation

Idée 1 - Avoir des photos, des vidéos, des Gifs, des autocollants et de l'audio comme options d'onglet pour les séparer et rendre la recherche du type de média plus flexible lors du partage avec quelqu'un ou de l'enregistrer sur votre appareil, ajoutez également une section en haut pour non sauvegardé fichiers pour l'identification et la prévention des erreurs.

Idée 2 - En plus de l'idée 1, vous avez également un filtre d'onglets pour afficher uniquement les onglets multimédias souhaités à la fois, par exemple, l'utilisateur qui souhaite voir uniquement les onglets audio et vidéo peut sélectionner les onglets audio et vidéo du filtre pour rapidement trouver ces fichiers.

Je suis allé de l'avant avec l'idée 2 car elle donne à l'utilisateur la flexibilité et l'efficacité de rechercher rapidement le fichier multimédia à partir d'une grande collection de fichiers de la galerie ainsi que le contrôle de l'utilisateur et la liberté de filtrer le type de fichier multimédia que l'utilisateur souhaite voir sur leur écran au moment donné.

L'idée sélectionnée créera également un énorme impact commercial en réduisant la durée de la session et les abandons lors de la recherche.

Apporter des pensées sur papier

J'avais besoin de visualiser à quoi ressembleraient mes idées sur l'interface et j'ai donc continué à esquisser des prototypes papier pour mieux comprendre mes idées.

Fig 2.2 Prototypes papier

Je me sentais très enthousiaste à l'idée de donner vie à mes idées à l'aide du prototypage papier, comme le montre l'image ci-dessus, j'ai créé des onglets multimédias séparés et ajouté des filtres mensuels pour masquer/afficher les onglets multimédias, ainsi que la possibilité d'accéder aux supports non sauvegardés. fichiers multimédias à l'utilisateur.

Utiliser l'application Marvel pour le prototypage était amusant et lorsque j'ai joué au prototype, la sensation était incroyable car mes idées étaient traduites de mon esprit sur les écrans !

Rendre mon prototype aussi réel que possible (Prototypes Haute Fidélité)

L'apprentissage de l'interface utilisateur et la compréhension du fonctionnement d'une interface ont énormément contribué à la création de prototypes haute fidélité dans Figma. Des compétences telles que le prototypage animé, l'espacement et le dimensionnement se sont révélées utiles lors de la conception des interfaces. Les plugins ont également permis de gagner énormément de temps lors du processus de conception de l'interface utilisateur.

Fig 2.3 Prototypes haute fidélité

Lors de la refonte de l'interface utilisateur, j'ai ajouté des options d'onglet de fichiers multimédias telles que Photos, Vidéos, Audio, Gifs et Autocollants.
Ajout d'une icône de filtre pour masquer/afficher les onglets multimédias par mois.
Ajout d'un encore à l'icône de sauvegarde pour offrir aux utilisateurs la possibilité d'accéder aux fichiers qui n'ont pas encore été sauvegardés
L'utilisation de plugins tels que Unsplash pour les images de stock et les symboles de conception de matériaux pour les icônes a été un énorme gain de temps.

Valider si mes solutions fonctionneront à l'aide de tests d'utilisabilité ✅

Maintenant que j'ai terminé mes conceptions selon les problèmes identifiés lors de l'évaluation heuristique.

J'ai testé la conception avec les utilisateurs pour m'assurer qu'elle fonctionne et améliorer ce qui ne fonctionne pas.

Étant donné que WhatsApp est une application très connue et que presque tout le monde l'utilise,
je suis allé voir 3 personnes au hasard dans une salle de sport pour faire les tests d'utilisabilité.
Lors des tests d'utilisabilité, je suis allé voir les utilisateurs et leur ai demandé d'effectuer les tâches pour comprendre si ma conception est compréhensible par les utilisateurs et si les utilisateurs sont capables de les utiliser. S'ils pensent que la fonctionnalité les aiderait personnellement si elle était implémentée dans la vraie application et leur demandait leurs suggestions, le cas échéant.

Tâche confiée aux utilisateurs —

1) Accédez aux médias, aux liens et aux documents à partir de l'écran d'informations de contact
2) Pouvez-vous rechercher un type de fichier multimédia particulier
3) Pouvez-vous filtrer et voir le type de type de fichier multimédia que vous souhaitez voir
4) Pouvez-vous rechercher l'endroit où les fichiers encore à sauvegarder peuvent être vus

Points d'observation —

1) L'utilisateur est-il capable de comprendre la séparation des types de fichiers multimédia ?
2) L'utilisateur peut-il naviguer et rechercher le type de fichier multimédia souhaité ?
3) L'utilisateur peut-il filtrer un type de média particulier ?
4)L'utilisateur peut-il accéder aux fichiers avec l'option de sauvegarde ?
5) Comprendre si l'utilisateur peut comprendre si l'icône de sauvegarde est rapidement reconnue par les utilisateurs ?

Aperçus et commentaires des tests d'utilisabilité-

L'utilisateur peut facilement naviguer d'un onglet de fichier multimédia à un autre
L'utilisateur a trouvé la fonctionnalité très intuitive à utiliser
L'utilisateur a trouvé l'option de filtres utile et facile à utiliser
Les utilisateurs ont aimé l'option encore à sauvegarder réfléchie

Commentaires et observations des utilisateurs lors des tests d'utilisabilité

Au cours des tests d'utilisabilité, j'ai constaté que les utilisateurs trouvaient toutes les fonctionnalités incorporées dans le prototype très utiles, cependant, l'un des utilisateurs a également suggéré d'ajouter une option pour filtrer les onglets multimédias qui doivent masquer ou afficher les types de fichiers multimédias, pas seulement par mois. mais globalement aussi c'est en un seul clic pour pouvoir voir que des photos ou que des gifs ou des vidéos ou des stickers de tous les mois.