Comment améliorer l’interface utilisateur par défaut de Firefox

Comment améliorer l’interface utilisateur par défaut de Firefox

• Depuis Firefox v89, l’interface utilisateur a suscité des controverses, et ce dépôt, créé en réponse à ces débats, a gagné en popularité.
• Les navigateurs Waterfox et Floorp définissent également ce thème par défaut.
• En 2023, Mozilla a décidé de mettre fin au support de Windows 7 et Windows 8. Firefox v115 est la dernière version prise en charge et reste utilisable jusqu’en septembre 2024.

Principes

• En matière de conception UI/UX, ils retiennent 3 grands critères et 16 critères plus détaillés.
• Comme il est impossible de réaliser des tests A/B, il est essentiel d’anticiper le comportement des utilisateurs.
• Ils prennent en compte l’intuitivité, la simplicité, la visibilité, l’adaptabilité, la cohérence, la prévisibilité, la maniabilité, l’efficacité, la clarté, la proximité, la taille, la réactivité, la flexibilité, l’accessibilité, la fonctionnalité, le contexte, l’harmonie, le plaisir et la compatibilité.

Problèmes

• Ils pointent les défauts entre l’UI Photon de Firefox v88 et l’UI Proton de Firefox v89.
• Le fait que les onglets ressemblent à des boutons, un rembourrage trop important, et des icônes difficiles à lire lorsqu’elles sont seules sont des problèmes principaux.

Problème des onglets (adaptabilité, maniabilité)

• Ils analysent les problèmes de conception des onglets en tenant compte de l’adaptabilité et de la maniabilité.
• En prenant l’exemple d’Apple Safari, ils présentent une évolution du design des onglets motivée par les retours utilisateurs.

Problème d’espace excessif (visibilité, proximité, taille, contexte)

• Ils expliquent pourquoi un excès d’espace pose problème, en considérant la visibilité, la proximité, la taille et le contexte.
• Ils décrivent la manière de concevoir une UI facile à cliquer à l’aide de la loi de Fitts.
• Ils analysent les problèmes via une comparaison des espacements d’UI entre Google Chrome et Firefox.

L’apport des icônes (clarté, accessibilité)

• Ils expliquent l’importance des icônes pour la clarté et l’accessibilité.
• Ils soulignent l’importance des icônes à travers l’exemple de la refonte graphique de Chrome en 2023.

Redesign des onglets

• Ils expliquent différents choix de design pour les états des onglets, et pointent les erreurs courantes dans l’UI Proton.
• Ils conçoivent un comportement intelligent et efficace selon la largeur des onglets.

Répartition

• Les critères d’une bonne UI sont personnels, mais une part d’"opinions" entre en ligne de compte.
• En comparant les onglets Lepton, Photon et Proton, ils choisissent des cas correspondant à chaque concept.

Ajout d’icônes et ajustement du rembourrage

• En ajoutant des icônes et en ajustant le rembourrage, ils règlent les plaintes précédentes.
• En comparant les icônes de menu d’Edge, de Chrome et de Lepton, ils mettent en avant la qualité de la conception des icônes de Lepton.

Thème

• Ils proposent une UI qui s’adapte à divers OS et réglages.
• Ils suivent les designs de plusieurs systèmes d’exploitation, de Windows 7 à macOS.

Interaction

• Ils conçoivent des interactions qui aident l’utilisateur à comprendre ce qui se passe, ainsi que des interactions qui le divertissent.

Conclusion

• Ce thème reprend les meilleures caractéristiques des thèmes existants en tenant compte des conventions, de la psychologie et des résultats de la recherche.
• Il prend en charge les adaptations selon l’OS, le mode sombre, les thèmes personnalisés et les interactions selon le contexte.

L’avis de GN⁺

• L’essentiel de cet article réside dans l’analyse approfondie des principes de design et des solutions de résolution de problèmes pour améliorer l’expérience utilisateur.
• Pour les utilisateurs de Firefox, ce thème peut devenir une alternative concrète offrant une meilleure expérience de navigation.
• Pour les personnes intéressées par la conception UI/UX, c’est une ressource précieuse pour comprendre la logique derrière les décisions de design et leur impact.

[GN⁺]

Commentaires Hacker News

• Le principal problème de la nouvelle interface est que tout est excessivement volumineux. Cela peut convenir à un écran de téléphone, mais sur un écran de bureau classique cela entraîne une perte d’espace. C’est en partie dû à l’augmentation des marges internes mentionnée dans l’article, mais le retrait de l’option de densité d’UI « compact » y contribue aussi. On peut toutefois la réactiver via about:config avec browser.compactmode.show. Cette option est marquée comme « non pris en charge », et elle est restée dans cet état depuis des années.
• En tant qu’auteur du thème Firefox populaire Lepton, on peut voir les choix que j’ai faits pour améliorer les décisions moins brillantes de Mozilla, ainsi que la manière dont cela a gagné en popularité. Cet article fait partie d’une série.
• Je suis convaincu que l’amélioration de l’UX d’un navigateur commence par les onglets verticaux. Avec des onglets horizontaux, dès qu’on en ouvre 6 à 8, ils deviennent difficiles à gérer et à suivre. Avec des onglets verticaux imbriqués, les liens ouverts dans un nouvel onglet deviennent automatiquement des onglets enfants. Cela permet de comprendre plus facilement la structure et le contexte qu’avec des onglets horizontaux. Ajouter des couleurs pour représenter les différents sites rend aussi la visualisation des groupes d’onglets plus simple. On peut également enregistrer en favori un « arbre » d’onglets pour conserver la progression d’une recherche ou d’un travail de documentation. Les fichiers CSS et quelques captures d’écran sont ici.
• Ce post essaie de convaincre les lecteurs qu’un auteur de thème peut créer un thème Firefox objectivement meilleur en partant des règles d’UX, mais la plupart des changements semblent relever du goût personnel. C’est clairement bien conçu et bien maintenu, mais personnellement il me paraît visuellement peu attractif et partiellement plus complexe. Les goûts et les couleurs... Firefox a choisi un seul design mais permet tout de même ces changements. C’est une bonne chose. Pourtant, il paraît un peu naïf de la part de l’auteur de vouloir prouver que ses préférences sont empiriquement justes.
• Depuis que Firefox a cassé les onglets, j’ai renoncé à l’utiliser comme navigateur par défaut. Je l’ouvre parfois pour des tests, mais je continue de me dire que je retenterai dans six mois en voyant des onglets au lieu de boutons. En particulier, le thème clair est encore plus choquant avec des boutons blancs sur fond gris clair. Il ne respecte même pas le réglage du thème système de Windows. On comprend Edge, mais Chrome non, même si le contraste y est au moins suffisant. Firefox, lui, a totalement raté sa cible.
• Il y a aussi des gens qui ne sont pas du tout gênés par des onglets qui ressemblent à des « boutons ». Est-ce vraiment gênant pour les nouveaux utilisateurs ? Il m’arrive parfois de penser que je suis le seul à ressentir ça.
• Puisque tout le monde poste sa propre liste de doléances, voici la mienne :
  • Quand il y a une grande arborescence de dossiers de marque-pages, ajouter un nouveau marque-page depuis la petite popup de l’UI « Ajouter un marque-page » est terrible.
  • La barre latérale des marque-pages peut être recherchée par nom, mais on ne peut pas trouver où se trouve un marque-page. L’ajout de Bookmark search plus 2 corrige cela, mais il ne devrait pas être nécessaire.
  • Impossible d’avoir plusieurs sidebars. Donc impossible d’ouvrir en même temps Tree Style Tabs pour gérer les onglets verticaux et les dossiers de marque-pages avec recherche. Inacceptable.
  • C’est tout, en réalité. La plupart des points concernent les marque-pages ! Je ne sais pas si le reste de l’UI est correct, ou si je suis devenu habitué au point de ne plus voir les incohérences. Mais je suis plutôt satisfait de Firefox. Je n’ai pas le besoin impérieux de me plaindre de la refonte du style comme beaucoup d’autres.
• Le plus grand reproche sur les « changements d’UI inutiles » de Firefox est la suppression, il y a quatre ans, de browser.urlbar.clickSelectsAll. Comme on pouvait s’y attendre, Mozilla n’y prête pas attention. À la lecture du rapport de bug, cela ne peut être que qualifié de contraire aux utilisateurs. Aucun autre champ texte ne fonctionne ainsi. Je ne comprends absolument pas pourquoi Mozilla a déployé cette « fonctionnalité » et retiré l’option pour ne pas pouvoir la désélectionner.
• Le vrai cauchemar UI/UX de Firefox, c’est l’héritage legacy. Toutes les fonctions de base du navigateur s’ouvrent dans une vue différente. Les paramètres s’ouvrent dans un onglet du navigateur, l’historique dans la barre latérale, mais pour gérer l’historique ? dans une fenêtre distincte. Les marque-pages et les téléchargements s’ouvrent aussi dans cette fenêtre. Les téléchargements ont certes un petit popup, mais la gestion des téléchargements se fait dans cette fenêtre. Ctrl+Shift+O sur les marque-pages ouvre cette fenêtre, alors que Ctrl+B ouvre la barre latérale. Les profils ? Aucune gestion conviviale des profils, mais une interface legacy cachée derrière about:profiles. Les mots de passe ? Ils s’ouvrent dans l’onglet du navigateur, avec une apparence propre qui ne correspond vraiment pas au reste.
• Le pire point de l’UI Proton, que personne ne mentionne, c’est qu’elle constitue objectivement une amélioration énorme seulement si on n’utilise pas un écran 1080p (ou plus). Mon portable est un vieux Thinkpad X220, donc ces changements affectent ma capacité à travailler efficacement en gaspillant de façon absurde l’espace écran. Dans ce cas, ce n’est pas comme si Mozilla avait gonflé tout et n’importe quoi comme une app Electron ou React sans raison ; c’est plutôt un changement d’UI sans nécessité pour donner l’impression superficielle que Mozilla se soucie encore de Firefox. Proton me déplaît tellement que j’ai activé un userchrome personnalisé.