Mastodon teste la nouvelle interface de sa version 5.0 en grandeur nature sur mastodon.social

Y a-t-il des utilisateurs de Mastodon ici ? 👀

Si mastodon.social vous paraît bizarre depuis mardi, c'est normal : le plus gros serveur Mastodon, géré par l'équipe du projet elle-même, affiche désormais l'interface de la future version 5.0.

Suivre Les Joies du Code sur Mastodon

L'équipe y teste la refonte pour récolter des retours avant la sortie, et ce n'est pas un simple coup de peinture : l'éditeur de posts quitte la colonne où il vivait depuis dix ans, la navigation s'allège et toute l'interface s'arrondit.

Encore faut-il avoir son compte au bon endroit, puisque chaque serveur du réseau fait tourner sa propre copie de Mastodon et la met à jour quand bon lui semble.

Si votre compte est ailleurs, il faudra attendre que votre serveur passe à la 5.0, sauf sur mastodon.online et les serveurs qui suivent les versions nightly, qui ont déjà droit à la refonte.

L'éditeur fait le mur

Cantonné jusqu'ici à la colonne latérale, l'éditeur de posts s'ouvre désormais dans une fenêtre flottante, ancrée en bas au centre de l'écran. On peut la réduire complètement sans perdre son brouillon.

La maquette présentée en août plaçait cette fenêtre en bas à droite, façon Gmail, et c'est la distance avec la navigation qui a fait le plus râler.

Ancrer l'éditeur en bas à gauche aurait masqué une partie de la navigation, et une fenêtre modale aurait fait perdre de vue le post auquel on répond. Va pour le centre, en attendant que l'équipe laisse chacun choisir l'emplacement.

Le bouton pour écrire un post gagne en visibilité et descend dans la navigation, pour raccourcir le trajet de la souris jusqu'à l'éditeur. Sur mobile, le bouton flottant l'ouvre directement, sans passer par un sous-menu.

La clarté avant la commodité

Imani Joy, responsable du design de Mastodon, détaille ces choix dans un billet publié la veille du test.

Beaucoup d'utilisateurs de longue date adorent l'interface actuelle, très puissante une fois qu'on s'est fait à ses bizarreries. Mais pour que la communauté reste vivante, et surtout qu'elle grandisse, les amis que vous embarquez doivent pouvoir s'y retrouver sans mode d'emploi.

La refonte suit donc un principe : la clarté prime sur la commodité, quitte à ajouter un peu de friction.

Prenez les images sensibles. Pour les flouter, il fallait jusqu'ici ajouter au post un avertissement de contenu (le CW, ce bandeau qui masque un post tant qu'on n'a pas cliqué dessus) et le laisser vide. Pratique, à condition de connaître le truc, et les retours sur le sujet s'accumulaient depuis longtemps.

Avec la 5.0, marquer ses médias comme sensibles et ajouter un avertissement de contenu deviennent deux réglages distincts dans l'éditeur.

Plus vide, plus rond, et c'est voulu

La navigation, simplifiée et réorganisée, vous paraîtra sans doute un peu vide. L'équipe l'assume : elle garde de la place pour les fonctionnalités à venir, plutôt que de déplacer encore les menus à chaque version.

Dans les fils, les posts ont été reconstruits de zéro, et quelques nouveaux thèmes de couleurs font leur apparition, au prix d'un effort de l'équipe technique que Mastodon qualifie de monumental.

Tout le design system a été converti en tokens, des variables permettant de centraliser les couleurs et les styles de l'interface : un thème n'a plus qu'à changer leurs valeurs.

La FAQ du billet d'Imani Joy explique même pourquoi tout est devenu si rond : pour un ton plus chaleureux, et pour que Mastodon ait l'air chez lui dans les navigateurs modernes, la plupart passés aux formes arrondies.

Après mastodon.social, l'équipe publiera une première bêta de la 5.0 pour que les admins de serveurs puissent l'essayer à leur tour. La sortie officielle est prévue d'ici quelques semaines.

Les pages Recherche, Paramètres, Messages et Notifications attendent encore leur refonte, et il est peu probable que tout tienne dans la 5.1 : la recherche et la découverte de contenus passeront en priorité.

Vous êtes sur mastodon.social ? Avant d'aller jeter un œil à la nouvelle interface (ou pendant), n'hésitez pas à y suivre @lesjoiesducode : je m'y sens encore un peu seul. 👀