Wie man eine bessere standardmäßige Firefox-UI erstellt

Firefox-Standard-UI verbessern

• Seit Firefox v89 gibt es Diskussionen rund um die Benutzeroberfläche, und dieses Repository, das darauf reagiert, gewann an Popularität.
• Auch Waterfox und der Browser Floorp setzen dieses Theme als Standard.
• Im Jahr 2023 beschloss Mozilla, den Support für Windows 7 und Windows 8 einzustellen. v115 ist die letzte unterstützte Version und bleibt bis September 2024 nutzbar.

Prinzipien

• Für das UI/UX-Design werden drei große und 16 kleine Kriterien herangezogen.
• Da A/B-Tests nicht möglich sind, ist die Vorhersage des Nutzerverhaltens wichtig.
• Berücksichtigt werden Intuitivität, Einfachheit, Sichtbarkeit, Adaptivität, Konsistenz, Vorhersagbarkeit, Bedienbarkeit, Effizienz, Klarheit, Nähe, Größe, Reaktionsfähigkeit, Flexibilität, Zugänglichkeit, Funktionalität, Kontextualität, Harmonie, Freude und Kompatibilität.

Probleme

• Es werden die Probleme zwischen Firefox v88 Photon UI und v89 Proton UI herausgestellt.
• Zu den Hauptproblemen zählen, dass Tabs wie Schaltflächen wirken, das Padding zu groß ist und Icons allein schwer zu lesen sind.

Tab-Probleme (Adaptivität, Bedienbarkeit)

• Unter Berücksichtigung von Adaptivität und Bedienbarkeit wird die Problematik im Tab-Design analysiert.
• Als Beispiel wird Safari von Apple vorgestellt, bei dem das Tab-Design auf Basis von Nutzerfeedback geändert wurde.

Zu viel Raum (Sichtbarkeit, Nähe, Größe, Kontext)

• Unter Berücksichtigung von Sichtbarkeit, Nähe, Größe und Kontext wird erklärt, warum zu viel Raum problematisch ist.
• Mithilfe von Fitts' Gesetz wird erklärt, wie sich eine UI gestaltet, die sich leichter anklicken lässt.
• Durch den Vergleich der UI-Abstände mit Google Chrome werden weitere Probleme analysiert.

Unterstützung durch Icons (Klarheit, Zugänglichkeit)

• Unter Berücksichtigung von Klarheit und Zugänglichkeit wird die Bedeutung von Icons erklärt.
• Am Beispiel des Chrome-Design-Refreshs von 2023 wird die Relevanz von Icons betont.

Tab-Neugestaltung

• Es werden unterschiedliche Design-Optionen für den Tab-Status erläutert und typische Fehler der Proton-UI benannt.
• Eine smarte und effiziente Funktionsweise wird entsprechend der Tab-Breite entworfen.

Verteilung

• Es gibt persönliche Maßstäbe für gute UI, aber zu einem gewissen Grad ist es auch Geschmacksache.
• Lepton-, Photon- und Proton-Tabs werden verglichen, wobei passende Beispiele für die jeweiligen Konzepte ausgewählt werden.

Icons hinzufügen und Padding anpassen

• Durch das Hinzufügen von Icons und die Anpassung des Paddings werden frühere Beschwerden behoben.
• Der Vergleich der Menü-Icons von Edge, Chrome und Lepton hebt die Stärke des Icon-Designs von Lepton hervor.

Theme

• Eine UI wird bereitgestellt, die sich an verschiedene Betriebssysteme und Einstellungen anpasst.
• Sie orientiert sich an den Designs verschiedenster OS von Windows 7 bis zu macOS.

Interaktion

• Es werden Interaktionen entworfen, die dem Nutzer helfen zu verstehen, was gerade passiert, sowie solche, die den Nutzer erfreuen.

Fazit

• Dieses Theme übernimmt die besten Eigenschaften bestehender Themes unter Berücksichtigung von Konventionen, Psychologie und Forschungsergebnissen.
• OS, Dark Mode, benutzerdefinierte Themes und Interaktionen werden je nach Kontext unterstützt.

GN⁺-Meinung

• Das Wichtigste an diesem Artikel ist die tiefergehende Analyse von Designprinzipien und Lösungsansätzen zur Verbesserung der Nutzererfahrung.
• Für Firefox-Nutzer kann dieses Theme eine praktische Alternative sein, die ein besseres Browsing-Erlebnis bietet.
• Für Menschen, die sich für UI/UX-Design interessieren, ist es eine aufschlussreiche Quelle, die hilft, die Hintergründe von Designentscheidungen und deren Auswirkungen zu verstehen.

[GN⁺]

Hacker News Kommentare

• Das Hauptproblem der neuen UI ist, dass alles viel zu groß ist. Das kann für Smartphone-Bildschirme gut funktionieren, auf einem normalen Desktop-Screen ist es jedoch Platzverschwendung. Das liegt zum Teil am im Artikel genannten größeren Padding, aber auch daran, dass die Option für die „kompakte“ UI-Dichte entfernt wurde. Man kann sie jedoch über about:config mit browser.compactmode.show wieder einschalten. Diese Option ist als „nicht unterstützt“ markiert, wurde aber seit Jahren so beibehalten.
• Als Autor des beliebten Firefox-Themes Lepton zeigt sich hier, wie ich einige Entscheidungen getroffen habe, um Mozillas weniger guten Entscheidungen Verbesserungen abgewinnen zu lassen und wie ich dadurch erfolgreich wurde. Es ist der zweite Teil einer Serie.
• Ich bin fest davon überzeugt, dass die Verbesserung der Browser-UX mit vertikalen Tabs beginnt. Bei horizontalen Tabs wird es mit sechs bis acht offenen Tabs schon unübersichtlich. Mit vertikalen, verschachtelten Tabs wird ein in einem neuen Tab geöffneter Link automatisch zu einem Unter-Tab. So lässt sich die Struktur und der Kontext leichter erfassen als bei horizontalen Tabs. Wenn man dazu noch unterschiedliche Farben für verschiedene Websites hinzufügt, kann man Tab-Gruppen noch besser erkennen. Außerdem kann man einen Tab-„Baum“ als Lesezeichen speichern, um den Stand bei Recherchen oder Dokumentation festzuhalten. CSS-Dateien und einige Screenshots befinden sich hier.
• Dieser Beitrag versucht, aus einer UX-Regel heraus Leserinnen und Leser zu überzeugen, dass der Verfasser ein objektiv besseres Firefox-Theme gebaut habe; die meisten Änderungen wirken jedoch wie persönliche Vorlieben. Es ist zwar sauber gemacht und gepflegt, aber ich finde es persönlich visuell unattraktiv und teils unnötig komplex. Geschmack ist subjektiv. Firefox hat sich für ein Design entschieden, bietet aber die Möglichkeit, diese Änderungen zu unterstützen. Das ist gut. Es wirkt jedoch ein bisschen naiv, wenn der Autor versucht zu beweisen, dass seine Präferenz empirisch richtig ist.
• Seit Firefox die Tabs „kaputt“ gemacht hat, nutze ich ihn nicht mehr als Standardbrowser. Ich öffne ihn zwar ab und zu zum Testen, vermerke mir aber bei jedem Mal, wenn ich statt Buttons Tabs sehe, dass ich es in einem halben Jahr erneut ausprobieren möchte. Vor allem im hellen Theme wirkt das besonders verheerend: weiße Buttons auf einem hellgrauen Hintergrund. Sogar die Windows-Systemeinstellung für das Theme wird ignoriert. Edge ist hier verständlich, Chrome nicht, bietet aber wenigstens ausreichenden Kontrast. Firefox verpasst es komplett.
• Manche stört es überhaupt nicht, dass Tabs als „Buttons“ dargestellt werden. Ist das für Neueinsteiger wirklich ein Problem? Manchmal habe ich das Gefühl, das nur ich so sehe.
• Alle schreiben hier ihre eigenen Kleinigkeiten; hier sind meine:
  • Wenn man einen großen Baum an Bookmark-Ordnern hat, ist es im kleinen Popup der „Lesezeichen hinzufügen“-UI furchtbar, dort ein neues Lesezeichen einzufügen.
  • Die Bookmark-Seitenleiste lässt sich nach Namen durchsuchen, aber nicht nach dem Speicherort. Bookmark Search Plus 2 löst das, sollte aber eigentlich nicht nötig sein.
  • Es ist nicht möglich, mehrere Sidebars zu öffnen, daher kann man Tree Style Tabs für vertikale Tabs nicht gleichzeitig mit Bookmark-Ordnern und Suche öffnen. Das ist nicht sinnvoll.
  • So ziemlich alles ist das. Der größte Teil bezieht sich auf das Lesezeichen-Handling! Ich bin mir nicht sicher, ob der Rest der UI okay ist oder ob ich mich einfach daran gewöhnt habe, dass es nichts Auffälliges mehr gibt. Trotzdem bin ich mit Firefox recht zufrieden. Ich habe kein starkes Bedürfnis, wie andere wegen eines Style-Redesigns zu meckern.
• Der größte „unnötige Beschwerdepunkt“ bei Firefoxs UI-Änderungen ist die Entfernung von browser.urlbar.clickSelectsAll vor vier Jahren. Wie erwartet kümmert sich Mozilla nicht. Liest man die Bug-Reports, kann man das nur als nutzerfeindlich bezeichnen. Kein anderes Textfeld verhält sich so. Ich verstehe nicht, warum Mozilla dieses „Feature“ eingeführt hat und dann noch die Option entfernt hat, es abzuschalten.
• Der eigentliche UI/UX-Albtraum von Firefox ist der Legacy-Ballast. Jede Basisfunktion öffnet sich in einer eigenen Ansicht. Einstellungen werden im Browser-Tab geöffnet, die Chronik in der Seitenleiste, aber für die Chronikverwaltung in einem separaten Fenster. Dasselbe gilt für Lesezeichen und Downloads. Downloads haben zwar ein kleines Popup, aber die Download-Verwaltung öffnet sich in jenem Fenster. Strg+Umschalt+O öffnet dieses Fenster für Lesezeichen, Strg+B aber die Seitenleiste. Profile? Es gibt keine benutzerfreundlichen Profilfunktionen, about:profiles wirkt wie eine versteckte Legacy-Oberfläche. Passwörter? Öffnen sich im Browser-Tab mit einem Layout, das mit nichts anderem wirklich zusammenpasst.
• Der schlimmste, kaum genannte Aspekt von Proton UI ist, dass es bei Nichtverwendung eines modernen 1080p-(oder höher auflösenden) Monitors objektiv ein riesiges Upgrade ist. Mein Notebook ist ein älterer X220 ThinkPad, daher beeinträchtigen diese Änderungen meine Produktivität, weil wertvoller Bildschirmraum unnötig verschwendet wird. In diesem Fall ist es nicht mit aufgeblähten Electron- oder React-Apps vergleichbar, sondern wirkt so, als wolle Mozilla nur oberflächlich den Eindruck erwecken, sich weiterhin um Firefox zu kümmern. Proton gefällt mir so schlecht, dass ich ein benutzerdefiniertes userchrome einsetze.