Mangane

29·01·2021

PWAUX Design

Clovis, la personne à l’origine du projet, a sollicité mon aide pour améliorer l’expérience proposée aux utilisateur·ices de BDX.town.

Nous partions d’une base graphique et fonctionnelle existante, mais avions tous deux l’envie d’aller plus loin et de proposer des fonctionnalités non présentesafin de faciliter la prise en main et l’adoption de ce réseau décentralisé.

Contexte

Origine

Mangane, ça veut dire “voyou” en bordeluche(le patois Bordelais).

C’est le nom que l’on a donné au logicielqui fait tourner notre réseau social local (mais ouvert sur le reste du monde), sans pub, et sans marchandisation des données personnelles.

Manifeste

Nous souhaitons que cette plateforme de microblogging à la Twittersoit un espace d’échange et d’entraide localpour les artistes, les créateur·ices, les artisan·esengangé·es de Bordeaux et ses alentours.

En plus d’un fil chronologique des gens que vous suivez, vous avez accès à un fil regroupant toutes les personnes de BDX.town ainsi qu’un troisième, regroupant nos “voisins” en ligne.

En effet, Mangane communique avec l’ensemble du fediverse⁽¹⁾(Federated Universe), fort de 2M+ d’utilisateur·ices. Nous n’évoluons donc pas en vase clos.

Annuaire des membres

Pour faciliter la découverte de profils intéressants à suivre sur ce nouveau réseau local, nous souhaitons que Mangane propose un annuaire des membres.

Mastodon et Misskey, deux autres logiciels similaires du fediverse en proposent et leur utilité n’est plus à démontrer.

Veille “concurrentielle”

Avant d’aller voir ce qui se fait ailleurs, récapitulons ce qui se fait déjàà l’heure actuelle sur l’interface Mangane. Ces “cartes” serviront de référence pour l’annuaire :

Vue du profil perso sur la page d’accueil
Vue du profil perso sur la page d’accueil

Vue d’un profil au survol de l’avatar d’une personne sur un fil
Vue d’un profil au survol de l’avatar d’une personne sur un fil

➡️ Rapidement, le sentiment que le nombre d’abonné·e·s et d’abonnements ne sont pas des données utilespour décider ou non de suivre une personnes’impose à moi. Ces “vanity metrics” peuvent accroître l’addiction aux réseaux ce qui n’es pas notre objectif.

Le nombre de publicationsest un indicateur (on peut rechercher des gens qui publient souvent, ou à l’inverse fuir les trop “bavards”) mais il n’est pertinent qu’avec une date d’inscription afin d’obtenir une fréquence.

Idéalement, il faudrait n’afficher que cette fréquence, la plus utile, pour alléger l’interface.

⚠️ Bémol cependant: un utilisateur·ice inscrit depuis longtemps qui n’aurait commencé que récemment à publier beaucoup présenterait une fréquence fausséele temps que la donnée se stabilise sur la durée.

Mastodon

Au premier abord Mastodon propose sensiblement les mêmes infos : bannière, photo de profil, bio, nombre de publications et d’abonné.

Le logiciel se démarque en proposant la donnée “dernière activité”qui permettrait justement de mieux jauger la “vivacité” d’un compte et éviter de suivre un profil inutilisé…

Annuaire de profils sur Mastodon

Sur son annuaire Mastodon propose des vues filtrables (actifs récemment ou nouveaux arrivés, profils locaux ou fédérés.)

Filtres de l’annuaire Mastodon

Misskey

Misskey propose exactement les mêmes informations que Mangane, bannière, avatar, bio, nombre de publications, d’abonnés & d’abonnements.

Annuaire de profils sur Misskey

L’annuaire Misskey propose des “utilisateur·ices épinglé·es”, soit une sélection des admins de l’instance.

Utilisateur·ices épinglé·es

Ma proposition

Compte-tenu de ces différentes considérations j’ai entamé une phase d’itération du rendu.

L’interface étant déjà en ligne, et la structure assez simple, j’ai maquetté directement en rendu “final” en modifiant les éléments dans l’inspecteur ou en recréant certains composant sur Xd afin de rapidement me rendre compte de l’efficacité ou non des différentes mises en page.

Par rapport à la carte utilisateur·ice par défaut, j’ai retiré les données inutiles, on a donc gardé le nombre de messages et la dernière activité :

Premier jet

J’ai également envisager d’afficher le statut en ligne / hors ligneplutôt que le nombre de messages mais l’information faisait un peu doublon avec la dernière activité. En plus d’être peu pertinente dans la décision ou non de suivre un compte.

V2 avec statut “en ligne”

Une autre piste, plus vertueuse peut-être, m’est alors venue en tête : supprimer carrément toute la data et ne reposer sa décision que sur la bio de la personne.

V3 sans données vaines

Une version minimaliste donc, pour éviter la course aux métriques et l’effet boule de neige des “gros” comptes qui grossissent encore.

Une version qui me plaisait bien et que j’aurais probablement proposée mais…

car il y a un mais.

Un utilisateur·ice avec une très courte bio
Un utilisateur·ice avec une très courte bio

Le rendu est très vide si l’utilisateur·ice a une mini bio et pire encore s’il n’a aucune bio renseignée.

➡️ L’hypothèse d’une construction en masonryavec des cartes de profils à hauteur variable s’est posée. Cependant pour une meilleure lisibilité nous avons fait le choix de rester sur une grille classique, à hauteur fixe.

Ma proposition finale fut donc ma première version. En effet la présence de la data considérée comme pertinente casse l’impression de vide dans le cas d’une bio minimale ou absente.

Parfois on tape juste du premier coup mais on ne s’en rend compte qu’en expérimentant d’autres pistes. 😅

Mise à jour: l’interface de BDX.town ayant évolué en parallèle, j’ai légèrement revu ma copie (au niveau UI) pour l’annuaire de membres :

Annuaire Mangane v3Voir la maquette interactive

Onboarding

À la manière de ce que proposait Mastodon, nous souhaitons mettre en place un petit “onboarding” pour aider les nouveaux arrivantsà facilement trouver leurs repère sur l’interface de Mangane.

Veille “concurrentielle”

Seul Mastodon proposait une modale d’introduction lors de l’inscription sur une instance. Elle expliquait le principe des instances (qui diffère des réseaux sociaux “classiques” centralisés), et les différents fils d’actualités qu’on peut consulter.

Dans ses premières versions, Elle expliquait le fonctionnement du @pseudo@instance (par opposition au @pseudo simple de Twitter) :

Dans ses premières versions, il expliquait le fonctionnement du @pseudo@instance (par opposition au @pseudo simple de Twitter)

La dernière version, dans l’optique de réduire le nombre d’étapes, avait supprimé cette information :

Étape 1 - Premiers pas

Étape 2 - Présentation des différents fils

Étape 3 - Explication des actions possibles (répondre / booster / liker)

Cependant son utilité réelle restait discutable : quel besoin de rappeler le nom du serveur sur lequel on vient de se créer un compte ? Y a-t-il réellement besoin d’expliquer qu’on peut répondre, partager et mettre en favori les contenus présentés ?

Cet onboarding est d’ailleurs, depuis 2020, remplacé par un email qui renvoie vers quelques pages de réglages et configuration.

Ma proposition

J’ai alors commencé à lister les différents élémentsqu’on pouvait inclure dans l’onbording de Mangane avant de les trier par ordre d’importance.

Nous avons ainsi pu décider quelles infos méritaient de figurer et lesquelles n’étaient pas indispensables avant d’organiser les différents écrans de l’onboarding, sans le surcharger.

✅ nécessaire

  • explication du @pseudo
  • présentation des fils
  • possibilité de passer / revoir l’onboarding dans l’UI

👍 pertinent

  • suggestions de comptes à suivre
  • options de confidentialité
  • rappel du code de conduite de Mangane

❓ secondaire

  • présentation du mode chat
  • présentation des réglages avancés

Dans une volonté de ne pas imposer un onboardingtrop long, ma proposition s’est arrêté sur 4 étapes:

  1. Bienvenue→ explications de l’interconnexion entre les instances à la manière des emails + rappel du nom d’utilisateur·ice complet @pseudo@instance
  2. Présentation des timelines→ le fil personnel (les gens suivis), le fil local (”bdx.town” pour les gens de la même instance) et le fil fédéré (”découvrir”, pour les voisins)
  3. Présentation des options de confidentialité→ définir si le profil publie en public ou en privé, si les gens peuvent s’abonner sans confirmation, si le profil est répertorié sur l’instance et sur les moteurs de recherche.
  4. Suggestions d’actions à mener→ et rappel du code de conduite.

Schéma sur papier présentant le concept d’instance

Schéma sur papier présentant les différents fils

Schémas de Clovis

Maquette finale de l’onboarding de Mangane
*Design final (Work in progress, en attente des illustrations finales)Voir la maquette interactive

Enfin, en suivant l’exemple de Mastodon depuis 2021, plutôt que d’emmener les utilisateur·ices sur une timeline vide à leur inscription, nous avons souhaité les diriger vers une liste de profils à suivre (l’annuairesur lequel nous avons travaillé en premier).

Notes

1. Imaginez pouvoir suivre un compte instagram avec votre compte twitter ? Ou commenter une vidéo youtube avec votre profil facebook ? Sur le fediverse c’est “possible” : sauf que vos plateformes habituelles n’ont pas le même nom.

Un compte Mangane sur BDX.town vous permet par exemple d’interagir avec les vidéos postées sur PeerTube, les photos partagées sur PixelFed, les blogs écrits sous Plume ou WriteFreely ou même les évènements organisés sur Mobilizon. U