Rethinking-UX 2019 Twitter

Qu'est-ce que Twitter ?

Twitter est un réseau social permettant de communiquer et de donner notre avis aux personnes qui nous suivent ou que l’on suit.

Une fois inscrit, nous avons la possibilité d’éditer notre profil en lui ajoutant une photo de profil, une photo de couverture ainsi que de « Tweeter » un texte, une image, une vidéo ou un GIF.

système de tweet sur Twitter

Nous pouvons également « Suivre » des gens, des célébrités, des entités, … et pouvons rechercher ces personnes via une barre de recherche.

suivre quelqu'un sur Twitter

Dans notre profil, nous pouvons voir notre nombre d’abonnements, d’abonnés ainsi que faire des listes, c’est-à-dire créer des groupes structurés d’utilisateurs de twitter de façon à organiser nos différents centres d’intérêts. Et des moments pour raconter des histoires en utilisant des Tweets.

abonnement et liste sur Twitter

Via nos abonnements, tous les tweets postés par les personnes que nous suivons sont affichés dans le fil d’actualité. Twitter nous propose d’aimer, de partager, de retweeter ainsi que de répondre à ces tweets.

fil d'actu de Twitter

En plus de suivre, de tweeter, … Nous pouvons également voir qui nous mentionne et envoyer des messages privés.

En bref, Twitter est une plateforme servant surtout à la communication sans frontière.

Les différences dektop/mobile

En mobile, la barre de navigation n’est pas la même. Plutôt que d’être en haut, elle se trouve en bas et est représentée par des icônes. On nous propose de « Tweeter » également mais via un bouton représenté par une plume. La recherche y a été ajoutée également.

menu sur l'app

Tout en haut à gauche, une petite bulle contenant notre photo de profil nous permet d’accéder à notre profil, nos listes, nos signets, nos moments ainsi qu’aux paramètres et confidentialité et centre d’assistance. On nous permet aussi d’utiliser le mode nuit et le QR code.

Dans l'icône cloche, ce sont nos notifications, toutes les actions qui sont effectuées autour de nos tweets et nos abonnés. Dans les notifications il y a possibilité aussi de regarder les mentions, c’est-à-dire voir qui et où l’on nous mentionne.

Et la dernière icône, l’enveloppe est la partie où se trouvent nos messages privés. On retrouve toutes nos conversations anciennes, mais cette fois plutôt que d’avoir le bouton avec la plume pour tweeter on retrouve un bouton avec une enveloppe. Ce bouton nous permet donc d’écrire un nouveau message.

L'utilisation par les membres du groupe

Notre groupe utilise principalement Twitter pour s’informer des dernières nouvelles ou donner leurs avis sur l’actualité dans le monde.

Qu'est qu'une fonctionnalité ?

Une fonctionnalité, c’est un moyen qui permet à l’utilisateur d'interagir avec ton site/app dans un domaine particulier.

Listing des fonctionnalités de Twitter :

Les fonctionnalités qu'on utilise souvent :

De mon côté

La fonctionnalité que j’ai choisie sur Twitter, c’est la recherche sur mobile. Pour trouver ce qui ne va pas avec cette fonctionnalité, j’ai fait un test par moi-même de toutes les étapes pour utiliser la fonctionnalité. Voilà mon test sur forme de slider. Cliquer sur l'image pour l'agrandir

  • test image 1
  • test image 2
  • test image 3
  • test image 4
  • test image 5
  • test image 6
  • test image 7
  • test image 8
  • test image 9
  • test image 10
  • test image 11
  • test image 12
  • test image 13
  • test image 14
0/14

Qu'est-ce qu'une recherche

Elle sert à rechercher des infos ou personnes, qu’on sache exactement ce qu’on recherche ou que ça concerne un domaine plus vaste.

Les choses à repenser/changer

Qu’est qui ne va pas ? Le texte dans la barre qui laisse les nouveaux utilisateurs un peu perdu, ne précisant pas les différents moyens de recherche déjà présent en passant par la barre de recherche.

Après validation de la recherche, il manque une liste de tags, mots-clés similaires car il y a déjà la présence d’une liste de personnes similaires.

Et enfin, le problème de la page recherche où ils proposent de voir les recherches tendances et y accéder en un clic, ce qui est chouette en soi mais n’est pas très organisé et il manque des suggestions à cet endroit, qui sont présentes de manière très peu organisées dans toute l’application.

Des modifications suivis de test, test, test …

Ce qui va suivre se trouve être les différentes versions repensée agrémentée des tests fait ainsi que leur conclusion et les modifications faites sur les versions de l’app afin d’arriver à une version finale. Maintenant parlons de la première version de l’app repensée.

Dans la barre de recherche à la place de « Rechercher sur Twitter » , je propose « Rechercher un @username ou #tag » pour ainsi expliquer à un nouvel utilisateur comment cela fonctionne. Par la suite, je me dis que c’est très restrictif et qu’il reste les « sujets » ( à part via @ et #, il y a moyen d’écrire du texte sans prérequi pour la recherche et on tombe alors sur les tweets contenant ce sujet comme la première manière où j’ai recherché dans le slider ) . Pour le rajouter, je propose « Recherche un @username, #tag, ...» , pour être moins restrictif ( je voulais rajouter « sujet » à la place des points de suspension mais le manque de place en a décidé autrement ) .

barre de recherche du premier prototype

Pour ce qui concerne le problème après la recherche, j’ai rajouté en-dessous de la liste de personne une liste de tags dans le même style.

la liste de tags du premier prototype

Et en ce qui concerne le contenu de la page recherche, je propose une division par trois via des boutons permettant une autre présentation de la page ainsi qu’un autre moyen de rechercher les «  recommandations » , les « tendances » et « ce que suivent vos abonnés ». Je propose pas de grands changements pour l’instant en ce qui concerne la partie « tendance » par contre je commence par la proposition de « recommandations » qui propose 4 tags, 3 personnes et 5 sujets pour rechercher selon ce qu’on recherche et selon ce que l’on suit. Vous remarquerez le bouton « voir plus » en-dessous de chaque catégorie qui permet de rajouter quelques suggestions. Il reste la partie « Ce que suivent vos abonnés » , qui vous présente une liste de personne suivies par vos abonnés.

page recherche du premier prototype

Premier Test

Je fais mon premier test utilisateur de ma version de l’app auprès d’une fille qui est déjà habituée à Twitter.

Elle relève les problèmes suivants :

  • la partie « Ce que suivent vos abonnés » n’est pas très utile avec l’habitude préfère passer par ces abonnés et voir directement la liste des abonnements de celui-ci.
  • peut-être préciser de quel abonné si on la garde.

Je suis assez d’accord avec elle et prépare une deuxième version de l’app.

La deuxième version de l’app est finie, j’ai du coup focaliser mon attention sur cette partie « Ce que suivent vos abonnés » et même sur tout l’onglet recherche en réalité. Je pense tout simplifié en faisant une seule page et plus trois parties et je garde la page qui me semble la plus importante comme base c’est-à-dire la partie « recommandations » .

page recherche du deuxième prototype

Second Test

Après ces modifications, je vais faire mon second test utilisateur auprès d’un garçon qui ne connaît pas Twitter et celui-ci ne vois qu’un seul problème : la classification faite avec des tags similaires ne lui semble pas correcte, pour lui ce qui serait similaire au tag chien ne serait pas animaux en premier mais une race de chien à la limite chat était plus similaire mais se trouve plus loin. Cette réflexion me fait penser comment je pourrais améliorer cette liste en choisissant des tags similaires du plus similaire, à gauche, au moins similaire, à droite. En ayant des plus similaire, beaucoup plus précis qu’auparavant.

liste de tags du second prototype

Avant de commencer un troisième test, je veux rectifier encore 2-3 petites choses. Le milieu central perd ce que je voulais faire à la base surtout en retirant les tendances qui peuvent plaire à certaines personnes même si ce n’est pas mon cas. Alors au lieu de n’avoir que les recommandations, je rajoute une partie « tendance » à la page de recherche. Pour ce faire, je pense à diviser par deux la page ( un peu comme avant avec les trois boutons ) et pense qu’on pourrait swiper entre l’un et l’autre. Pour faire comprendre à l’utilisateur le fonctionnement de ce slider je reprend le design qu’il utilise pour les catégories après la recherche. Ce qui ce ressemble fait supposer une même fonctionnalité, la loi de la similarité parmi les lois de la Gestalt.

page recherche du troisième prototype

Autre chose, ma barre de recherche risque de ne plus laisser lisible la phrase que j’ai mise à l’intérieur qui est censée faciliter l’utilisateur alors je décide que lorsque l’on touche la barre de recherche pour y entrer quelque chose, celle-ci est seule sur une page blanche à la base et est légèrement plus grande. La phrase se trouve au-dessus, avec « ou sujet » qui s'ajoute à la fin, pour que l’utilisateur puisse toujours avoir ce petit conseil de recherche en vue. Lorsque l’on inscrit quelque chose dans la barre de recherche, la partie blanche en-dessous se rempli de propositions logiques avec la demande.

barre de recherche du troisième prototype

Troisième Test

Finalement, ce troisième test sera un test de vérification. Je fais tester à quelqu’un l’app Twitter réel et lui demande différentes tâches à accomplir. Je remarque ainsi que les gens ne comprennent pas que le bouton bouton filtre sert à filtrer la recherche. Cela doit certainement venir du fait qu’ils utilisent un symbole et non un mot. Il a été prouvé que les gens comprennent mieux un mot désignant l’action à faire plutôt qu’un symbole qui doit exprimer cette action. Pour l’exemple, les gens comprenne mieux qu’un bouton ouvre un menu si il est marqué « Ouvrir le menu » ou même « Menu » plutôt que le symbole de menu burger menu burger . Du coup, solution simple je propose un bouton « filtrer » à la place du petit symbole.

bouton filtre du troisième prototype

Voilà qui termine ma troisième version qui sera ma dernière puisqu’elle a l’air d’être suffisamment claire à d’autres à qui je l’ai fait testée.

Faire le test !

logo Invision