Comment créer une meilleure interface Firefox par défaut

(github.com/black7375)

1 points par GN⁺ 2024-02-21 | 1 commentaires | Partager sur WhatsApp

Le Proton UI de Firefox v89, lancé en 2021, a suscité une controverse autour des onglets, des espacements et des icônes, et Firefox-UI-Fix est devenu un thème correctif également adopté comme thème par défaut par Waterfox et Floorp
Les choix de conception s’appuient sur des théories et des cas UX comme la loi de Jakob, la psychologie de la Gestalt, la loi de Fitts et les recherches du Nielsen Norman Group, plutôt que sur des tests A/B
Des onglets qui ressemblent à des boutons, un padding trop large et des menus centrés sur le texte peuvent nuire à la perception de l’état de sélection, à l’efficacité du clic, à l’affichage du contenu sur les petits écrans et à l’accessibilité
Le Lepton Theme exprime de manière cohérente l’état des onglets dans une plage de 36px à 240px, et ajuste le bouton de fermeture, les icônes, le padding, les couleurs du thème et l’espace de la barre de titre selon l’OS
L’objectif n’est pas de rejeter Proton UI, mais de l’améliorer tout en le respectant, même s’il reste des zones difficiles à implémenter, comme le comportement du page action button, en raison des limites du CSS

La controverse sur l’UI après Firefox v89 et le périmètre du projet

Ce document traite principalement de l’interface de Firefox v89, en partant du principe que certaines améliorations ont eu lieu par la suite
Après la sortie de Firefox v89 en 2021, la controverse autour de Proton UI a fortement enflé sur Reddit et Hacker News
Le dépôt Firefox-UI-Fix a rapidement gagné en popularité en corrigeant plusieurs problèmes de Proton UI, et Waterfox comme Floorp utilisent aussi ce thème par défaut
Mozilla a décidé de mettre fin à la prise en charge de Windows 7 et Windows 8, et Firefox v115 est la dernière version à prendre en charge les anciennes versions de Windows
- Firefox v115 devait être fourni jusqu’en septembre 2024
- Mozilla comme le projet devaient nettoyer le code et les fonctionnalités liés aux anciennes versions de Windows, et ce document couvre aussi leur interface

Les critères d’évaluation UI/UX

Les critères de conception se résument globalement à trois axes : intuitivité, efficacité et flexibilité
Faute de données ou d’environnement permettant des tests A/B, l’évaluation est menée de façon déductive en s’appuyant sur la prévision du comportement utilisateur et sur plusieurs théories
Intuitivité
- Simplicity : supprimer ou simplifier les éléments inutiles pour réduire la charge cognitive
- Visibility : rendre visibles les fonctions essentielles pour faciliter l’interaction
- Accustomably : réduire l’apprentissage nécessaire pour permettre une adaptation rapide
- Consistency : réduire les exceptions pour faciliter la mémorisation
- Predictability : diminuer l’anxiété en donnant à l’utilisateur le sentiment de garder le contrôle
- Affordance : fournir des indices sur la manière d’interagir
Efficacité
- Clearly : les distinctions doivent être facilement perceptibles
- Proximal : les éléments doivent être suffisamment proches pour permettre un déplacement rapide
- Bulky : une grande taille facilite la perception et le déplacement
- Snappy : la réponse doit être fluide et sans à-coups
Flexibilité
- Accessibility : convenir à un large public, indépendamment de l’âge ou d’un handicap
- Functional : prendre en charge diverses fonctions pour répondre aux besoins
- Contextual : s’intégrer naturellement à chaque situation
- Harmonious : s’accorder naturellement avec les autres éléments
- Pleasure : rechercher une satisfaction liée au plaisir ou à la créativité
- Compatibility : prendre en compte les API des versions anciennes, la feuille de route des versions supérieures, l’upstream, l’OS, le RTL, etc.

Les trois problèmes relevés dans Proton UI

La première impression laissée par Firefox v89 Developer Edition était propre, mais l’usage réel a été jugé bien plus inconfortable
Les problèmes principaux se résument à trois points
- Tab : les onglets ressemblent à des boutons
- Padding : les espacements sont trop grands
- Icons : les icônes seules sont difficiles à lire, ou leur suppression crée d’autres problèmes

Le problème des onglets qui ressemblent à des boutons

L’équilibre entre familiarité et changement
- Selon la loi de Jakob, les utilisateurs s’attendent à ce qu’une nouvelle application fonctionne comme une UX qu’ils connaissent déjà
- La nouvelle UI des onglets de Firefox semble aller à l’encontre de cette attente et paraît difficile à apprivoiser
- Cela dit, bloquer tout changement d’UI au seul motif qu’il n’est pas familier freinerait l’évolution et conduirait à ne faire que suivre les tendances
- On peut devenir un suiveur rapide, mais il faut veiller à ne pas bloquer l’innovation
La perception des onglets à travers la psychologie de la Gestalt
- La psychologie de la Gestalt est utilisée pour expliquer pourquoi les onglets donnent l’impression d’être dans un groupe distinct
- Law of Proximity : les onglets sont séparés de la barre d’outils, ce qui leur donne l’air d’un autre groupe
- Law of Similarity : les onglets ont une couleur différente de la barre d’outils, ce qui les fait paraître comme un groupe distinct
Les onglets en forme de bouton abandonnés par Safari
- Apple a présenté à la WWDC le nouveau navigateur Safari de macOS 12 Monterey
- Face à la multiplication des plaintes des utilisateurs, l’entreprise a proposé dans la bêta 3 un compromis sur les onglets à l’apparence de boutons
  - macOS Monterey Beta 3: Apple Redesigns Safari Tab Interface Following Complaints
  - macOS Monterey beta 3 brings redesigned Safari tab interface to address complaints
- Ce compromis a lui aussi échoué, et Apple est finalement revenu complètement à un design d’onglets classique
  - Apple Releases Safari 15.1 for macOS Big Sur and macOS Catalina
  - Apple reverts to more traditional Safari tab design in macOS Monterey RC following controversy
- Cela ne signifie pas qu’Apple a toujours raison, mais le fait d’être allé jusqu’à une situation difficile à inverser à plusieurs reprises montre que les button-like tab peuvent faire l’objet de critiques légitimes

Suppression des marges excessives et des icônes

Marges et visibilité du contenu
- Un navigateur web est un visualiseur de contenu web et ne doit donc pas gêner l’affichage du contenu
- L’interface Proton pénalise l’affichage du contenu à cause de son important padding
- Sur les appareils à petit écran, comme les ordinateurs portables de 13 pouces, ce problème devient critique
Efficacité du clic selon la loi de Fitts
- La loi de Fitts considère que le temps nécessaire pour atteindre rapidement une cible dépend du rapport entre la distance jusqu’à la cible et sa largeur
- La formule centrale est MT = a + b · ID = a + b · log₂(2D/W)
- MT est le temps moyen d’exécution du mouvement, a et b sont des constantes selon le dispositif d’entrée choisi, et ID est l’indice de difficulté
- D est la distance entre le point de départ et le centre de la cible, et W est la largeur de la cible mesurée sur l’axe du mouvement
- En laissant de côté les constantes et le logarithme, c’est le rapport 2D/W qui compte
- Il faut d’abord réduire la distance, puis maximiser la largeur sans augmenter cette distance
- Il faut aussi éviter de remplir l’espace restant de façon à créer trop de padding
- Photon(v88) est jugé plus facile à cliquer dans l’icône Amazon et dans les menus
  - L’icône Amazon a un W plus grand
  - Le menu a un W légèrement plus petit, mais un D nettement plus faible
- Si l’icône paraît plus petite que sa zone cliquable réelle, cela devient un désavantage ; il vaut donc mieux remplir la zone de padding pour que l’icône paraisse plus grande
Un écart devenu minime pour l’interface Compact
- Mozilla a déprécié l’interface compact
- Dans la v89, les Compact UI, Normal UI et Touch UI ne diffèrent pratiquement plus que par une légère variation de hauteur de la barre d’onglets et de la barre d’outils
Interface uniquement textuelle et accessibilité
- En lisant Content design considerations for the new Firefox, l’auteur s’interroge sur la pertinence de supprimer les icônes
- L’étude du Nielsen Norman Group sur les icônes conclut qu’une présentation sans icônes, uniquement textuelle, a donné les pires résultats
- La nouvelle interface de Chrome publiée en 2023 inclut elle aussi des icônes

Refonte des onglets du thème Lepton

Afficher les états des onglets de façon cohérente
- La conception des onglets ne concerne pas seulement leur apparence, mais aussi la gestion de nombreux états
- Un onglet peut avoir les états suivants
  - Selected, Multiple Selected, Hover, Text overflow, Tab overflow, Reaching tab resizing
  - Sound & Muted, Autoplay Block, PIP, Pinned, Container, No favicon
  - Changed title, Loading, Unloaded, Crashed, Shared, Theme, UI Density, etc.
- Tous ces états doivent être représentés de manière cohérente dans 36px~240px
Comparaison de l’état sélectionné entre Photon, Proton et Lepton
- Photon et Lepton relient l’onglet sélectionné à la barre d’outils, ce qui le rend facile à identifier
- Lepton raccourcit l’indicateur de conteneur des onglets en arrière-plan afin de réduire la surcharge visuelle
- Avec Proton, il est difficile de distinguer quel onglet est sélectionné entre la couleur de fond mise en avant et la barre supérieure
- La barre supérieure indique l’onglet conteneur, mais donne une impression proche de celle de l’onglet sélectionné dans l’ancienne interface Photon
- La comparaison des états Selected, Multiple selected, Hovered et General se résume ainsi
  - Photon identifie Selected par la connexion avec la barre d’outils, et distingue Multiple selected et Hovered par la couleur de la ligne de contexte supérieure
  - Dans Proton, Selected et Multiple selected se ressemblent presque
  - Lepton distingue les états grâce à la connexion avec la barre d’outils et à des couleurs de fond différentes
États combinés : muet, PIP, onglet épinglé, etc.
- La combinaison Muted, Hover et PIP varie fortement selon les navigateurs
  - Dans Photon, Muted et Muted + Hover ne se distinguent pas, et la présence de l’indicateur PIP déplace fortement la position de Muted
  - Proton English affiche Muted uniquement sous forme de texte, et PIP n’est identifiable qu’au survol
  - Proton Korean change d’interface selon la langue d’affichage, masque le favicon quand Muted est actif, et n’obtient pas d’indicateur PIP
  - Lepton affiche toutes les informations, conserve des positions stables pour Muted et PIP, et signale au survol que l’on peut les contrôler
- Dans des combinaisons plus complexes, Proton est considéré comme presque inutilisable en environnement coréen
- Lepton gère les états combinés de la manière suivante
  - toutes les informations sont toujours affichées
  - s’il n’y a pas de favicon, la taille de Muted est augmentée pour compenser
  - même en état Pinned, les positions restent toujours identiques
  - quand des positions se chevauchent, comme pour Container et Titlechanged, elles sont fusionnées dans l’affichage
Utilisation de l’espace selon la largeur des onglets
- Lepton ajuste son comportement selon la largeur des onglets
- Si la largeur est suffisante, tous les boutons de fermeture sont affichés comme dans Proton
- Quand les onglets remplissent toute la barre et que la largeur manque, le bouton de fermeture des onglets en arrière-plan est masqué
- La taille du bouton de fermeture est réduite pour limiter les clics accidentels, mais il reste possible de fermer un onglet en arrière-plan au survol
- Le titre de l’onglet paraît plus efficace grâce à des ajustements de padding et de dégradé
- De l’espace est économisé pour que le texte New reste visible sur le dernier onglet
- Les ajustements ne s’appliquent que lorsque la largeur manque, afin que les mots de type wiki restent clairement visibles
- Lepton affiche davantage de contenu web, et Photon comme Lepton disposent de séparateurs entre les onglets
Mode de distribution et préférences
- Les critères d’une bonne interface varient selon les personnes, et relèvent en partie des préférences
- Trois concepts d’onglets sont proposés
  - des onglets Lepton standards alignés sur Proton
  - des onglets Photon avec une ligne de contexte à angle droit
  - les onglets Proton d’origine
- Ce thème est particulièrement connu pour la prise en charge de l’interface d’onglets Photon

Ajustement des icônes et du padding

Panneaux et menus contextuels
- L’ajout d’icônes et l’ajustement du padding réduisent les critiques existantes
- Le problème des traits déséquilibrés a été corrigé par le contributeur @zapSNH, ce qui a permis d’obtenir un jeu d’icônes cohérent et reconnaissable dans l’ensemble du navigateur
Comparaison des menus Edge, Chrome et Lepton
- Edge comporte des menus sans icônes sans raison particulière, et ses icônes sont globalement trop similaires pour être parcourues facilement
- Certaines métaphores d’icônes d’Edge, comme New InPrivate window, sont jugées déroutantes
- Dans Chrome, le style des icônes n’est pas moderne, elles paraissent anguleuses par rapport à l’interface arrondie, et elles semblent trop petites par rapport à la taille du texte
- Lepton propose un ensemble d’icônes cohérent, de style moderne et de taille appropriée
- Il n’utilise des icônes pleines que pour les icônes importantes afin d’améliorer la possibilité de balayage visuel, et emploie des métaphores visuelles qui différencient les formes
Menus contextuels et groupe de raccourcis
- Dans Edge, l’auteur dit ne pas comprendre pourquoi Add all tabs to favorites n’a pas d’icône
- Dans Chrome, il n’y a tout simplement aucune icône dans les menus contextuels
- Lepton place les icônes de manière à ce qu’elles soient clairement différenciées
- Dans le menu contextuel des pages web, seul Firefox place un groupe de raccourcis en haut, obtenant ainsi un effet d’accès rapide comparable à un pie menu
Application d’un plus grand nombre d’icônes
- Des icônes sont ajoutées au menu global et à divers panneaux
- Quand un dossier de la bibliothèque de marque-pages s’ouvre, les icônes du menu réagissent également
- La taille des menus et des panneaux diminue, et le point de départ du texte s’aligne
- Des icônes sont ajoutées pour s’adapter à plusieurs cas de mise en page

Prise en charge de l’OS, des thèmes et des couleurs

Thème système par défaut
- Lepton adapte l’interface aux différents OS et paramètres
  - Windows 7 : suit au plus près le design de fenêtre Aero
  - Windows 8.1 : fait en sorte que la barre de titre s’accorde bien, comme sur Windows 7
  - Windows 10 Light : reprend les couleurs du Legacy Edge de Windows 10
  - Windows 10 Dark : applique le même principe
  - Windows 10 Dark + Accent titlebar : suit le paramètre de couleur d’accent de la barre de titre lorsqu’il est activé
  - MacOS Light/Dark : reprend les couleurs de Mac
- Les utilisateurs de Windows 11 peuvent utiliser des couleurs Windows 11 proches d’Edge avec l’option userChrome.compatibility.os.win11
- Cela fonctionne aussi sur Linux, avec correction des problèmes de couleurs et des boutons de barre de titre non natifs
Espace des boutons de la barre de titre
- Dans des configurations comme Tabs on bottom ou One Liner, il faut réserver de l’espace pour les boutons de la barre de titre dans la barre d’outils
- Les valeurs et positions diffèrent selon l’OS
  - Win7, Win8 : 105px, à droite
  - Win10 : 138px, à droite
  - Mac : 72px, à gauche
  - Linux : 84px, avec des variations possibles selon le thème système
- En plein écran, il faut utiliser l’interface native, donc traiter cela comme 0px
- Les deux côtés sont possibles, et il peut y avoir trois boutons ou non
Améliorations du thème Proton
- Corrige les problèmes d’accessibilité causés par le manque de contraste des couleurs du thème Proton lui-même
- Améliore le contraste des couleurs et les ombres de contour du thème inclus
- Étend ces améliorations aux parties où le thème Proton n’est pas appliqué, pour un rendu plus homogène
- Applique aussi le mode sombre aux zones où il n’était pas activé
- Veille à ce que les couleurs s’appliquent correctement même avec un thème personnalisé au lieu du thème par défaut
- Ajoute une couleur de fond différente aux lignes paires des tableaux et listes pour faciliter la lecture
- Applique au lecteur audio des bordures arrondies conformes au design Proton
- Améliore le lecteur vidéo pour mieux mettre le contenu en valeur, et rend aussi les icônes plus agréables à voir

Interactions et animations

Interactions utiles
- Quand le pointeur de la souris ou l’élément change au survol, cela indique qu’une action est en cours ou possible
- Pour des éléments comme les commandes de zoom/dézoom d’un panneau, qui ont un comportement différent des autres actions et paraissent plus petits, le changement de pointeur est utile
- Lorsqu’une bordure apparaît au survol d’un champ, il devient intuitif de comprendre qu’il est cliquable
- Le texte de l’élément actif utilise la couleur d’accent
- Les éléments supprimés ont une icône en niveaux de gris et un titre barré, comme s’ils étaient désactivés, mais au survol le titre réapparaît sans barré
Conception des animations
- Les animations rendent l’interface plus fluide et naturelle, mais peuvent parfois donner une impression de fonctionnement lent
- Les principes de conception sont les suivants
  - suit la courbe d’accélération de Photon, avec une accélération rapide au début puis une décélération douce à la fin
  - réduit la durée des animations de démarrage pour donner une impression de réaction rapide
  - augmente la durée des animations de fin pour donner une sensation plus fluide
  - les grands objets ont une durée plus longue que les petits
  - la durée des éléments imbriqués doit aussi être plus longue
- Applique les mêmes principes à la couleur de fond, à la rotation des flèches, aux onglets conteneurs, aux onglets audio et épinglés, ainsi qu’à la barre latérale
- Applique aussi les mêmes principes à des fonctionnalités optionnelles non activées par défaut
  - Autohide Back Button
  - Autohide Page Action
  - Autohide Tab Bar
Restauration des illustrations
- Les illustrations conviviales de Photon auraient, selon l’auteur, réduit le malaise dans les situations d’erreur
- Ce thème rétablit ces illustrations
- Exemples d’application : Welcome back, DNS error, Session restore, écran des résultats de recherche

Conclusion et limites

Ce thème tient compte des conventions, de la psychologie et des résultats de recherche, tout en reprenant les points forts des thèmes existants
Il prend en charge l’OS, le mode sombre, les thèmes personnalisés et des interactions adaptées au contexte
En raison des limites du CSS, certaines choses restent impossibles à implémenter, comme le comportement du bouton d’action de page
L’objectif est : “🦊 I respect proton UI and aim to improve it.”

1 commentaires

GN⁺ 2024-02-21

Avis Hacker News

Ce qui m’a le plus gêné dans la nouvelle UI, c’est que tous les éléments sont devenus beaucoup trop grands
Sur un écran de téléphone qu’on touche au doigt, je pourrais comprendre, mais sur un bureau classique, c’est un énorme gaspillage d’espace
L’augmentation du padding mentionnée dans l’article y contribue, mais la suppression de l’option compact UI density joue aussi beaucoup
Dans about:config, activez browser.compactmode.show, puis allez dans Menu > Plus d’outils > Personnaliser la barre d’outils > “density” en bas, et vous pourrez la réutiliser
L’option est marquée “not supported”, mais ça fait des années que c’est comme ça
- Je préfère largement les interfaces avec un padding généreux
  Quand il y a suffisamment de padding, le bruit visuel et la complexité diminuent, et les éléments ont de l’espace pour respirer
  Il n’y a peut-être pas d’avantage pratique précis, mais rien qu’à regarder, c’est moins anxiogène
- D’un côté, il y a les gens qui disent “ne gaspillez pas d’espace avec du padding”, et chaque fois qu’on parle de KDE, il y a ceux qui disent que c’est “difficile à lire parce que trop d’informations et de texte sont entassés sans padding”
  On se fait critiquer quoi qu’on fasse
- Je me demande si quelqu’un connaît le contexte expliquant pourquoi c’est affiché comme “not supported”
- C’était justement mon problème ; je vais essayer ce flag aujourd’hui
- “not supported” m’a donné l’impression d’être une forme de mesquinerie envers ceux qui critiquaient les choix de design “modernes”
Je suis l’auteur de Lepton, un thème populaire pour Firefox
On peut voir, de mon point de vue, comment j’ai pris différentes décisions et comment j’ai amélioré certaines décisions regrettables de Mozilla
Cela peut donc expliquer comment je l’ai amélioré et pourquoi il est devenu populaire
Cet article fait partie d’une série
- https://github.com/black7375/Firefox-UI-Fix/wiki/%5BArticle%...
- Je me demande où trouver Lepton
  Dans les thèmes de la boutique de modules complémentaires, rien ne sort sous ce nom
  Peut-être que Lepton correspond à l’ancienne UI de Firefox et n’existe plus que dans d’anciennes versions
  J’ai bien lu l’article, mais j’ai peut-être raté quelque chose
- En général, je ne personnalise pas beaucoup les UI et j’essaie plutôt de m’habituer aux valeurs par défaut
  Parce qu’il y a moins de friction, et j’aime pouvoir m’adapter aux réglages par défaut dès l’installation
  Mais la personnalisation de l’UI de Firefox fait exception, parce qu’elle est facile à configurer et de bonne qualité
  Le fait qu’elle donne l’impression d’être maintenue est aussi un avantage important
  Je ne savais pas que vous écriviez autant d’articles depuis si longtemps ; ça a l’air intéressant et bien documenté, donc je compte les lire
- Le fait que la télémétrie soit utilisée pour justifier la suppression d’éléments de l’interface est particulièrement intéressant
  Personnellement, la barre d’adresse est tellement grande qu’on dirait qu’il resterait encore de la place même avec 10 boutons
  J’ai donc du mal à imaginer une raison de supprimer des éléments, à part l’envie de tout retirer jusqu’à ce qu’il n’y ait plus rien à enlever
  Comme vous semblez bien connaître l’UI/UX, j’ai une question : j’ai une théorie selon laquelle les icônes en noir et blanc sont moins bonnes que les icônes en couleur ; je me demande s’il existe des études ou un consensus à ce sujet
- Le processus d’installation a été très simple
  Je recommanderais toutefois de présenter d’abord les étapes de manière simple, et de déplacer complètement la section avancée vers le bas
```
1. Exécuter le script depuis la ligne de commande de l’OS  
2. Aller dans `about:support` et cliquer sur vider le cache de démarrage  
```
Une meilleure UX de navigateur commence, pour le dire franchement, par les onglets verticaux.
Les onglets horizontaux deviennent difficiles à gérer ou à suivre dès qu’on en ouvre seulement 6 à 8.
Avec des onglets verticaux imbriqués, les liens ouverts dans un nouvel onglet deviennent automatiquement des onglets enfants, et leur structure comme leur contexte se déduisent bien plus facilement qu’avec des onglets horizontaux.
Si l’on ajoute à cela des couleurs par site, les groupes d’onglets deviennent aussi plus visibles, et l’on peut mettre en favori l’arborescence des onglets pour conserver l’état d’avancement d’un travail de recherche ou de documentation.
Quelques fichiers CSS et captures d’écran sont ici : https://gist.github.com/aclarknexient/88673880d373864eee1927...
Il faut aussi que j’ajoute une capture d’écran des onglets imbriqués et colorés ; je le ferai après avoir publié ce commentaire.
- J’aime les onglets verticaux, et c’est un gros avantage pour ma manière de naviguer, où je passe d’une tâche longue à une autre.
  Les onglets conviennent mieux que les favoris à cet usage, parce qu’en 2024 les gestionnaires de favoris de tous les navigateurs restent immatures et que l’organisation des favoris est médiocre.
  Les onglets imbriqués ne m’attirent pas tant que ça, mais la possibilité de changer en un clic les groupes d’onglets affichés dans la barre latérale, comme les “panes” de l’extension Firefox Sidebery ou les “spaces” d’Arc, est puissante.
  C’est encore mieux si l’on relie ces panneaux/espaces à des profils de navigateur.
  Par exemple, une même fenêtre de navigateur peut basculer entre navigation générale, achats, cours universitaires en ligne et développement logiciel, et si besoin on peut détacher temporairement un panneau/espace particulier dans une nouvelle fenêtre.
- Je reconnais que c’est une question de goût, mais je crois fermement l’inverse.
  C’est vrai qu’avec une barre d’onglets horizontale, au-delà de 6 à 8 onglets, la gestion et le suivi deviennent difficiles.
  J’ai utilisé Arc ces six derniers mois, et même avec une barre d’onglets verticale, quand 6 à 8 onglets étaient ouverts, ils restaient tout aussi difficiles à gérer et à suivre.
  Je finissais par tout fermer toutes les 4 heures et repartir de zéro.
  Les deux arguments des deux camps qui me parlent davantage sont les suivants.
  D’abord, si l’on compte le nombre de pixels occupés par la barre d’onglets en horizontal et en vertical, je n’ai jamais vu de barre d’onglets verticale pratique qui utilise autant ou moins de pixels qu’une barre horizontale.
  Ensuite, comme les moniteurs ont presque toujours plus de pixels en largeur qu’en hauteur, certains avancent que la barre d’onglets verticale exploite mieux le ratio d’écran du moniteur.
  Cela me paraît vrai en 16:9 ou au-delà, mais personnellement beaucoup moins sur le 16:10 courant des MacBook.
- En regardant la capture d’écran “controversée” de FF89, l’un des plus grands changements semble être la refonte des onglets avec davantage de padding.
  Mais comme je masque la barre d’onglets du haut et que j’utilise Tree Style Tab, qui s’intègre bien à Firefox, je n’avais même pas remarqué ce changement.
  Je n’aime pas particulièrement Firefox en soi, mais le gain d’UX de l’arborescence d’onglets l’emporte tellement sur les petits détails que Chrome/Safari font un peu mieux que je n’hésite pas.
  Cela dit, à cause des outils de développement, j’utilise Chrome pour le travail frontend.
- Je ne sais pas si répondre à mon propre commentaire est une entorse à l’étiquette de HN ou une bonne manière de structurer l’information :)
  Dans la section avancée de la page d’options de Tree Style Tab, il y a une zone de feuille de style utilisateur rechargée en temps réel.
  C’est très pratique pour tester le choix d’une police sans redémarrer le navigateur.
  Je l’ai modifiée pour utiliser la police condensée SF Pro d’Apple.
  Iosevka Mono, que j’utilise habituellement presque partout, ne convenait pas vraiment aux titres d’onglets.
  Voici le CSS :
```
:root.sidebar tab-item.unread .label-content {  
font-style: italic !important;  
}

:root.sidebar tab-item {  
font-family: "SF Pro" !important;  
font-stretch: condensed !important;  
font-weight: 300 !important;  
}

:root.sidebar tab-item.active .label-content {  
font-weight: 500 !important;  
}  
```
  J’ai ajouté une capture d’écran du résultat de ce CSS au même lien que dans le commentaire précédent : https://gist.github.com/aclarknexient/88673880d373864eee1927...
- Sur ordinateur portable, les onglets verticaux commencent à devenir moins intéressants.
  Le hack de masquage automatique de la barre latérale dans Firefox s’est cassé et j’ai la flemme de le réparer ; du coup, même sans avoir 100 onglets ouverts, je me retrouve avec plusieurs pouces d’espace gris vide.
  En général, je n’en garde que 5 à 10 ouverts.
  Le plus agaçant, c’est que de nombreux sites web décident désormais entre mobile et desktop non pas d’après le user agent, mais d’après la taille du viewport du navigateur.
  Comme j’ai déjà perdu environ un pouce de largeur à cause des onglets en arborescence, il me reste très peu de marge de réduction avant qu’un site me prenne pour un iPad.
  Je dois donc pratiquement utiliser le navigateur en plein écran ; sinon, je me retrouve avec plein de menus hamburger et des retours à la ligne catastrophiques, ce qui dégrade la navigation.
  La plupart du temps, je dois désactiver complètement la barre latérale, ce qui ajoute plusieurs clics à chaque changement d’onglet.
Cet article semble vouloir convaincre que l’auteur du thème a créé un thème Firefox objectivement meilleur en s’appuyant sur des règles d’UX, mais la plupart des changements relèvent surtout d’une préférence personnelle.
Il est clairement bien fait et maintenu, mais personnellement je ne le trouve pas très séduisant visuellement, et certains éléments me paraissent plus complexes.
Les préférences varient selon les personnes, et Firefox a choisi un design tout en prenant en charge ce genre de modifications, ce qui est une bonne chose en soi.
En revanche, le fait que l’auteur semble vouloir prouver empiriquement que ses préférences sont les bonnes paraît un peu drôle.
- L’UI est clairement une question de goût, donc j’ai publié la distribution sous trois formes.
  Cela dit, il était déroutant de ne pas avoir d’indication montrant si un onglet était en cours de chargement alors qu’il était en sourdine, ou de ne pas avoir de séparateurs entre les onglets.
J’ai renoncé à faire de Firefox mon navigateur par défaut depuis qu’il a massacré les onglets
De temps en temps, je l’ouvre pour tester, et si ça ressemble encore à des boutons plutôt qu’à des onglets, je note mentalement de réessayer dans six mois
Le thème clair est particulièrement insultant, avec des boutons blancs sur du gris clair
Il ne respecte même pas correctement le réglage du thème système de Windows
Sous Windows, on peut garder les applis en thème clair tout en appliquant une couleur à la barre des tâches, au menu Démarrer et à la barre de titre ; Edge le comprend, et Chrome, même s’il ne le fait pas, offre au moins un contraste suffisant
Firefox est complètement à côté de la plaque
- J’utilise Firefox comme navigateur secondaire, et à chaque lancement il commence par me déranger et s’interposer pour me parler des nouveautés et fonctionnalités ajoutées depuis la dernière fois, comme Pocket ou le VPN
  Par pitié, qu’il arrête et me laisse commencer la navigation pour laquelle je suis venu
  J’aimerais qu’il ne copie pas les dark patterns de Microsoft, qui vous met Office 365 et Game Pass sous le nez entre deux mises à jour
  Ces pubs pour des fonctionnalités, ils peuvent les montrer aux gens qui n’ont pas encore installé Firefox ; moi, je suis déjà un « client », donc qu’on me fiche la paix
  C’est pour ça que j’utilise surtout Chrome
  Il est peut-être plus inférieur et capable de me surveiller, mais au moins il ne me barre pas la route
- Il suffit d’installer Sidebery[1] et de masquer les onglets par défaut[2]
  C’est la voie :)
  [1] https://addons.mozilla.org/en-US/firefox/addon/sidebery/
  [2] https://superuser.com/a/1424494
Je me demande s’il y a d’autres personnes que le fait que les onglets « ressemblent à des boutons » ne gêne pas du tout
Parfois, j’ai l’impression d’être le seul
Je ne sais pas si c’est vraiment si agaçant pour les nouveaux utilisateurs
- J’utilise Firefox tous les jours, et je ne savais même pas que c’était considéré comme un « problème »
  Je n’y avais jamais pensé avant de lire ces commentaires, et comme je trouve la barre d’onglets parfaitement utilisable telle qu’elle est, je ne pense pas y repenser
- Le fait que les onglets ressemblent à des boutons ne me gêne pas particulièrement en soi
  C’est même une alternative courante aux onglets en forme d’onglets, et il me semble que le contrôle d’onglets de Windows 95 avait aussi un mode qui faisait ressembler les onglets à des boutons
  Je crois que c’était aussi utilisé dans la barre des tâches d’origine, et depuis les années 90 dans mIRC pour passer d’un canal ou d’une fenêtre à l’autre
  Cela dit, l’apparence précise de ces « boutons d’onglet » ne me plaît pas personnellement
  Ils ressemblent à de longues pilules difficiles à avaler, et j’étais habitué à l’apparence d’onglets classiques ; je ne vois pas pourquoi il fallait changer
  Heureusement, Firefox permet de personnaliser l’apparence, donc je l’ai modifiée avec userChrome.css pour obtenir quelque chose qui me plaît davantage
- Ça n’a pas d’impact sur mon utilisation de Firefox
  En revanche, cela gaspille des pixels en ajoutant un espace qui n’a aucune raison d’être
  À ce stade, on s’est habitué aux décisions d’interface absurdes, et on finit par faire avec ce que les organisations nous donnent
  Il semble qu’il y ait très peu d’endroits qui se soucient de la cohérence ou de la facilité de découverte
- C’est assez différent de tout ce qui a des onglets, par exemple pas seulement les navigateurs, mais aussi les gestionnaires de fichiers ou les éditeurs, et ça me dérange
  Je ne comprends pas pourquoi on jette toute la sémantique par la fenêtre
  Ça ressemble à un bouton, mais ça ne se comporte pas comme un bouton
- Je ne l’avais jamais remarqué, et même après qu’on me l’a signalé, ça ne me pose pas problème
  Pour ceux qui y voient un problème, ça ressemble pas mal à du coupage de cheveux en quatre
Puisque tout le monde écrit ses propres griefs, je vais ajouter le mien
Quand l’arborescence des dossiers de favoris est grande, le processus pour trouver l’endroit où ajouter un nouveau favori dans la petite popup de l’UI « Add Bookmark » est horrible
La barre latérale des favoris permet de chercher par nom, mais pas de retrouver où se trouve ce favori
Des extensions de recherche de favoris comme Bookmark search plus 2 résolvent le problème, mais elles ne devraient pas être nécessaires à la base
Modification : j’ai découvert le clic droit -> Show in Folder, et c’est excellent
Cela dit, ce n’est pas la meilleure UI, et l’extension mentionnée reste beaucoup plus intuitive
On ne peut pas avoir plusieurs barres latérales en même temps
Donc on ne peut pas ouvrir à la fois Tree Style Tabs pour gérer les onglets verticaux et les dossiers/recherches de favoris
C’est absurde
En fait, c’est à peu près tout, et cela concerne surtout la gestion des favoris
Je ne sais pas si le reste de l’UI est correct, ou si je m’y suis habitué au point de ne plus voir ses défauts, mais j’utilise Firefox assez confortablement
Je n’ai pas vraiment ressenti le besoin de me plaindre fortement de la refonte du style comme d’autres
- Pour une raison inconnue, dans tous les navigateurs, les favoris ont été négligés à un point lamentable
  Si l’on ressort un navigateur d’il y a 20 ans, la gestion des favoris est presque identique, voire dans certains cas un peu meilleure
  Améliorer les favoris n’est pas sexy, donc on dirait que personne ne s’en soucie
- Je me demande si vous n’avez pas gardé en mémoire musculaire le raccourci Ctrl+Shift+B, qui ouvrait autrefois un grand panneau latéral
  Maintenant, il n’affiche qu’une barre horizontale étroite
  Moi aussi, cette refonte m’agace clairement pour cette raison, mais j’ai découvert Ctrl+Shift+O, le raccourci de « gestion des favoris »
  Il ouvre une plus grande fenêtre popup contenant les favoris, et jusqu’ici elle me semble presque aussi pratique que l’ancien panneau latéral
  On peut aussi rechercher dans les favoris, puis faire un clic droit et choisir « show in folder » dans le menu contextuel pour voir où ils se trouvent dans la hiérarchie
  Cela dit, tous mes favoris sont dans « other bookmarks », donc je ne pense pas m’en servir beaucoup
La plus grosse plainte sur une « modification inutile de l’UI de Firefox » reste la suppression, il y a 4 ans, de browser.urlbar.clickSelectsAll
Comme on pouvait s’y attendre, Mozilla s’en fiche
À lire le rapport de bug, il n’y a pas d’autre explication que l’hostilité envers les utilisateurs : https://bugzilla.mozilla.org/show_bug.cgi?id=1621570
Aucun champ de texte d’aucune UI ne se comporte comme ça
Je ne comprends pas pourquoi Mozilla a déployé cette « fonctionnalité » tout en supprimant l’option permettant de la désactiver
Que certains utilisateurs la préfèrent, très bien, mais il ne faut pas me retirer cette fichue option pour me l’imposer
- En réalité, la logique de Mozilla était que tous les autres grands navigateurs se comportent ainsi
  En vérifiant dans Chrome, il se comporte effectivement comme Firefox
  Côté hostilité envers les utilisateurs, la logique était que les gens qui n’aiment pas le nouveau comportement n’activent pas la télémétrie, donc ne méritent pas d’avoir la fonctionnalité qu’ils veulent
  C’est assez ironique quand on pense que le principal atout de Firefox est son modèle orienté protection de la vie privée
- Tout à fait d’accord
  Quatre ans ont passé et je bute encore dessus tous les jours
  Ironiquement, la façon dont j’échoue le plus souvent correspond précisément au cas que ce changement était censé aider
  Quand je veux sélectionner toute l’URL et que, par réflexe, je double-clique, le premier clic sélectionne tout, puis le second réduit la sélection à un seul mot
  Je reste brièvement perplexe, puis je recommence à cliquer, sauf que maintenant il faut encore trois clics pour sélectionner toute l’URL
  C’est étonnamment agaçant
  L’explication dans le ticket semble se résumer à « peut-être qu’un jour, dans le futur, nous ferons autre chose qui justifiera ça »
  Quatre ans plus tard, on ne voit toujours rien de tel
- Après la suppression de cette fonctionnalité dans Firefox, je suis passé à Vivaldi
  Vivaldi permet toujours de choisir ce comportement
  Je me demande s’il existe d’autres navigateurs Unix qui permettent de désactiver la sélection complète au clic
  Globalement, je suis satisfait de Vivaldi, mais j’aimerais avoir plus de choix
- C’est toujours cassé
  Parce que la fonction « Paste and Go » ne fonctionne pas correctement
  En toute logique, « Paste and Go » devrait être équivalent à faire « Paste », qui insère correctement le texte du presse-papiers à l’emplacement du curseur, puis « aller à l’adresse dans la barre d’adresse »
  Mais si on désélectionne l’URL sélectionnée automatiquement, qu’on place le curseur dedans, puis qu’on utilise « paste and go », Firefox ignore l’URL existante et tente d’aller directement vers le texte du presse-papiers
  Cela pourrait même devenir un risque de sécurité, car on pourrait tromper l’utilisateur pour lui faire visiter une URL qu’il n’avait pas l’intention d’ouvrir
  S’ils ne veulent pas corriger ça, ils devraient renommer la fonction en « Clear, Paste, and Go », conformément à son comportement réel
- Dire que « Mozilla s’en fiche », soit, mais une option interne reste une option interne, et aucun navigateur ne s’en préoccupe vraiment, sauf dans des cas du type contrat de support avec une grande entreprise
  Si vous devez aller dans about:config pour autre chose que du développement ou de la gestion d’appareils mobiles, il est difficile de s’attendre à ce que cela continue de fonctionner après les mises à jour
  Toute option est du code à maintenir
  À vue de nez, lorsqu’ils ont réécrit le code qui utilisait cette option, ils ont choisi la voie la plus rapide et la moins chère : ne pas réimplémenter une fonctionnalité qui n’était de toute façon pas officiellement prise en charge
Le vrai cauchemar UI/UX de Firefox, ce sont les résidus legacy
On a l’impression que chaque fonction de base du navigateur s’ouvre dans une vue différente
Les paramètres sont dans un onglet du navigateur, l’historique est dans une barre latérale
Mais seulement avec Ctrl+H ; la gestion de l’historique, elle, s’ouvre dans une fenêtre séparée avec Ctrl+Shift+H
Les marque-pages et les téléchargements sont aussi dans cette fenêtre, la fenêtre Bibliothèque qui semble tout droit sortie de l’époque de Firefox 3/4
Les téléchargements ont aussi un petit pop-up, mais Ctrl+J et la gestion des téléchargements ouvrent cette fenêtre
Pour les marque-pages, Ctrl+Shift+O ouvre cette fenêtre, tandis que Ctrl+B ouvre la barre latérale
Les profils sont quasiment inutilisables pour un utilisateur normal, comme une mauvaise blague, et une interface à l’allure legacy est cachée dans about:profiles
Les mots de passe s’ouvrent dans un onglet du navigateur, mais avec une apparence propre qui ne s’accorde pas vraiment avec le reste
Les seuls éléments un peu cohérents sont les paramètres et les modules complémentaires, tous deux dans des onglets du navigateur et avec des liens entre eux
Tout le reste est un bazar mêlant onglets du navigateur, fenêtres, barres latérales, pop-outs et UI différentes
C’est le bazar comme ça depuis assez longtemps, et faute de vision unifiée ou d’effort réel de nettoyage, ça risque de rester ainsi
Le récent ajout de Firefox View ressemble encore à un truc qui empile une autre UI par-dessus
Il y a aussi l’historique dedans, ce qui fait environ trois façons de consulter l’historique, dont au moins une de trop
C’est peut-être une tentative de déplacer les fonctions de la fenêtre Bibliothèque vers l’onglet View, mais pour l’instant cela ne fait qu’ajouter de la confusion
C’est vrai que j’exagère un peu
Les autres navigateurs aussi aiment les barres latérales ces derniers temps et ont des pop-ups et des menus
Mais ce qui ressort particulièrement ici, c’est le contraste entre la fenêtre Bibliothèque à l’allure legacy qui surgit à divers endroits, et les fonctions qui s’ouvrent dans des onglets du navigateur comme les paramètres, les modules complémentaires et les mots de passe
Au final, il est difficile de prévoir quelle forme prendra l’ouverture d’une fonction du navigateur ; c’est clairement le cas au début, et même une fois habitué, il reste cette impression que « ça s’ouvre juste chacun à sa façon »
On s’y adapte, mais ça reste le bazar
- Je pense qu’il est acceptable que certaines fonctions aient à la fois un popover et une fenêtre
  Mais il faut que ce soit intelligemment implémenté
  Par exemple, dans Safari, les téléchargements sont par défaut dans un popover, mais on peut « détacher » ce popover pour en faire une fenêtre
  Cela prend en charge les deux cas d’usage tout en conservant la cohérence
  Firefox aurait bien besoin de ce genre de réflexion
Le pire aspect de l’UI Proton dont les gens parlent peu, c’est qu’elle constitue objectivement une grosse régression si l’on n’utilise pas un moniteur moderne en 1080p ou plus
Mon ordinateur portable est un vieux ThinkPad X220, et ce changement a gaspillé tellement d’espace à l’écran sans raison que cela a affecté mon efficacité au travail
Cela fait partie d’une tendance d’ingénierie logicielle hostile aux utilisateurs qui pénalise les personnes n’ayant pas les moyens d’acheter du matériel plus récent, ou ne voulant pas en utiliser pour une raison quelconque
Dans ce cas précis, il ne s’agit même pas de transformer tout en applications Electron ou React obèses, mais simplement, pour Mozilla, de dégrader inutilement l’UI afin de donner l’impression superficielle qu’ils s’occupent encore de Firefox
Proton est tellement mauvais pour ma façon de l’utiliser que j’ai recours à un userChrome personnalisé

Comment créer une meilleure interface Firefox par défaut

La controverse sur l’UI après Firefox v89 et le périmètre du projet

Les critères d’évaluation UI/UX

Intuitivité

Efficacité

Flexibilité

Les trois problèmes relevés dans Proton UI

Le problème des onglets qui ressemblent à des boutons

L’équilibre entre familiarité et changement

La perception des onglets à travers la psychologie de la Gestalt

Les onglets en forme de bouton abandonnés par Safari

Suppression des marges excessives et des icônes

Marges et visibilité du contenu

Efficacité du clic selon la loi de Fitts

Un écart devenu minime pour l’interface Compact

Interface uniquement textuelle et accessibilité

Refonte des onglets du thème Lepton

Afficher les états des onglets de façon cohérente

Comparaison de l’état sélectionné entre Photon, Proton et Lepton

États combinés : muet, PIP, onglet épinglé, etc.

Utilisation de l’espace selon la largeur des onglets

Mode de distribution et préférences

Ajustement des icônes et du padding

Panneaux et menus contextuels

Comparaison des menus Edge, Chrome et Lepton

Menus contextuels et groupe de raccourcis

Application d’un plus grand nombre d’icônes

Prise en charge de l’OS, des thèmes et des couleurs

Thème système par défaut

Espace des boutons de la barre de titre

Améliorations du thème Proton

Interactions et animations

Interactions utiles

Conception des animations

Restauration des illustrations

Conclusion et limites

À lire aussi

1 commentaires

Avis Hacker News