Photo Tiger Woods
Workshop

Rethinking ux

Repenser et améliorer une fonctionnalité de Medium.

Par Céline Genco

Comprendre

Rethinking experience user”

Rethinking UX est un atelier proposé par l’option Design Web et Mobile à la Haute Ecole Albert Jacquard, l’objectif est de repenser une fonctionnalité parmi un des cinq services proposés : Pinterest, Twitter, UberEats, WhatsApp et Medium.

Nous avons alors formé des groupes de quatre étudiants. Le notre est composé de Céline Genco, Elisabeth Nyssens, Marine Thonon et Dimitri Jansen.

Groupe applications iphone
Choisir

Notre service

Nous avons choisi Medium car c’est un outil pratique et polyvalent. Nous trouvions intéressant d’en savoir plus et de le décomposer.

Explorer

Medium

Medium est une plate-forme qui permet de lire, écrire et partager des articles en ligne. Il propose du contenu professionnel et amateur rédigé par la communauté. L’objectif est d’entretenir le partage de connaissances diversifiées, les échanges entre les utilisateurs et de permettre à chacun d’élargir son savoir tout en facilitant la lecture.

Dans notre quotidien, nous l’utilisons la plupart du temps comme outil de communication dans le cadre scolaire, afin d’avoir une visibilité auprès de nos professeurs et de nos collègues de classe. Pour certains il est une source d’inspiration et de divertissement.

Lister

Les fonctionnalités

Nous nous sommes concertés à propos de notre utilisation de Medium pour avoir une vue d’ensemble des fonctionnalités que nous utilisons le plus :

  • la création de « stories » (il nous est régulièrement demandé d’écrire des articles sur la plate-forme dans le cadre de nos cours) ;
  • les notifications, (on aime se sentir aimé) ;
  • lire des articles (et commenter, ce qui est moins fréquent) ;
  • les enregistrer comme « bookmarks » (pour pouvoir les lirent plus tard) ;
  • s’abonner aux auteurs ;
  • rechercher ;
  • personnaliser nos intérêts (afin de voir des articles qui pourraient nous intéresser).
Observer

L’Arborescence

Après cette étape nous avons retracé l’arborescence des fonctionnalités de Medium, ce qui nous a permis d’avoir une vision plus détaillée de la composition de l’interface. Voici un schéma l’illustrant :

Choisir

Une fonctionnalité

Chacun de nous a choisi la fonctionnalité qui a le plus perturbé son expérience en tant qu’utilisateur. Ensuite nous l’avons analysée, repensée. Pour cela, nous en avons énoncé les avantages et inconvénients. Il y a beaucoup d’autres fonctionnalités qui peuvent être améliorées, mais nous avons choisi de nous concentrer sur celles-ci: Les  « bookmarks », les commentaires et enfin le bouton clap.

Comparer

Service similaire

Pour les adaptations que j'ai apporté à ma fonctionnalité j’ai analysé et comparé ce que proposait les services similaires à la fonctionnalité de gestion d’articles sauvegardés. Parmi les services que j’ai observé il y a : Instagram, Youtube et Designspiration. Ces interfaces gèrent de manières différentes le stockage et l’organisation de plusieurs éléments (post internaute, image, vidéos, ect). L’observation de ces services m’on permis de voir qu’il y avait des ressemblances au niveau de l’ergonomie, du choix d’icône. Ces similitudes est un moyens de guidés l’utilisateur avec des éléments graphiques avec lesquels il est habitué. Ces ressemblances crée des repères pour l’utilisateur.

Analyser

Problématiques

Les tests m’ont permis de déceler des inconforts au niveau de l’expérience utilisateur que le “ bookmark ” nous procurait. Je ferais notamment la différence entre l’accès de cette fonctionnalité à travers un Android et un IOS car les concepteurs ont développé autrement l’interface de Medium.

Android

capture écran

L'icône “ bookmark ” s'active au click sous trois formes d'états :

  • Inactif
  • Sauvegardé (ajouté à la liste)
  • Archivé (double clique après quelques secondes de la sauvegarde)

Les états ne sont pas clairs car une fois l'icône activée, rien n'est indiqué sur les différents état de l'enregistrement.

Ios

capture écran

Sur l’Iphone, le style de l’icône du marque-page et l'agencement de la navigation on changé. La fonctionnalité prend la couleur grise pour indiqué son état actif. Du coup il est moins repérable qu'avec le contraste de couleur utilisé sur Android. La barre de navigation quant à elle est disposée en bas de l’écran et reste fixée à celui-ci lors du scroll verticale. De plus, le “ bookmark ” est directement intégré dans la barre de navigation. Je trouve que ses deux adaptations bien plus pratique pour l'utilisateur.

Android

capture écran

Le terme employé sur Android : « Favoris » est souvent associer aux système de cotation qualitatif symbolisé par des étoiles. Du coup c’est frustrant de ce retrouver devant une liste de sauvegarde, au lieu d’une liste des articles que nous avons préférés.

Ios

capture écran

La traduction adapté du mot “ bookmark ” est un marque-page. L’incohérence de diffusion de l’information pose problème au niveau de la signification réelle du terme et son utilisation.

Android

capture écran

Par défaut les articles sont classés par ordre d'ajout et nous ne pouvons pas changer l'organisation. Selon moi et par expérience, l'inconvénient est que si nous possédons une grande quantité d'articles sauvés il devient difficile de s'y retrouver surtout si nous cherchons un article précis.

Ios

capture écran

Pareil pour la version IOS, sauf une petite différence notoire. Il est précisé au-dessus du titres le mode de prévisualisation de l'article : “ member preview ” qu'il n'y a pas sur Android. Je ne comprends pas l'intérêt d'avoir ses deux différences de diffusion d'information.

Trouver

Solutions

En observant la comparaison de ces deux systèmes d’exploitation, j’ai pu en déduire que l’interface proposé pour IOS était plus fonctionnel et efficace. Je me suis donc inspirée de celle-ci pour apporter des similitudes pour la version androïde et d’autre adaptations.

  1. Animation

    Accès direct dans la navigation

    J’ai ajouté l’icône marque-page à la bar de navigation sur Android pour un accès direct et facile.

  2. Animation

    Enregistrement rapide

    Pour un souci de simplification, J’ai ajouté un bouton qui permet un ajout rapide d’un article dans un dossier. J’ai pensé également le rajouté sur la page d'accueil de la même manière, c’est-à-dire intégrer avec les informations de l’article..

  3. Animation

    Déplacer un article manuellement

    Sur mobile nous aimons souvent interagir avec l’interface, ici on peut classer un article en le déplacent manuellement (drag/drop). Cela permet d’organiser de manière physique et direct nos articles.

  4. Animation

    Organiser les articles

    J'ai ajouté un menu pour le tri des articles. Ce qui nous permet d'atteindre plus rapidement un article que nous cherchons. Voici les différents moyens de tri :

    • manuel(drag/drop) glisser l’article parmi la liste ;
    • par ordre d’ajout récent ;
    • par ordre d’ajout les plus anciens ;
    • et par ordre des articles les plus populaires.
  5. Animation

    Regrouper les articles en dossier

    Nous pouvons désormais aussi créer des dossiers pour regrouper et classer des articles par thème. Mon adaptation va permettre d’économiser du temps et de faciliter la recherche de “ stories “.

Tester

Prototype

Pour repenser une fonctionnalité, il faut bien évidemment réaliser un prototype basé sur les différentes expériences utilisateurs observés. J’ai réalisé un design sous forme de maquette sur Invision avec mes adaptations. Ensuite j’ai fais testé celle-ci aux membres d’autres groupes ainsi qu’à nos coordinateurs pour savoir si mes modifications personnelles sont cohérentes.

Apprendre

Conclusion

Redéfinir une fonctionnalité m’a été très instructif. Au début nous avions des appréhensions de repenser Medium, qui est un service de qualité et d’envergure. Néanmoins durant notre expérience quotidienne avec la plate-forme, on se rend très vite compte de ce que nous pouvons améliorer grâce à notre expérience utilisateur et nos recherches approfondies. L’atelier est un bon moyen pour perfectionner sa méthode de travail : de collectivité, de recherche, d’applications de nos matières vue en cours. Et surtout se rendre compte de tout le fonctionnement d’une interface avec ses autres dispositifs (application).

Membres du groupe