Wie man eine bessere Standard-UI für Firefox erstellt

 (github.com/black7375)
1 Punkte von GN⁺ 2024-02-21 | 1 Kommentare | Auf WhatsApp teilen
  • Die Proton UI von Firefox v89 löste nach ihrer Veröffentlichung 2021 Kontroversen um Tabs, Abstände und Icons aus; Firefox-UI-Fix ist ein Theme, das diese Punkte verbessert und auch als Standard-Theme von Waterfox und Floorp übernommen wurde
  • Die Designentscheidungen stützen sich statt auf A/B-Tests auf UX-Theorien und Fallbeispiele wie Jakob’s Law, Gestaltpsychologie, Fitts’s Law und Forschung der Nielsen Norman Group
  • Tabs, die wie Buttons aussehen, großzügiges Padding und textzentrierte Menüs können die Erkennbarkeit des ausgewählten Zustands, die Klickeffizienz, die Darstellung von Inhalten auf kleinen Bildschirmen und die Barrierefreiheit verschlechtern
  • Das Lepton Theme stellt Tab-Zustände innerhalb von 36px~240px konsistent dar und passt Schließen-Button, Icons, Padding, Theme-Farben sowie den Platz für die OS-spezifische Titelleiste an
  • Ziel ist nicht, die Proton UI abzulehnen, sondern sie unter Wahrung der Proton UI zu verbessern; wegen CSS-Grenzen bleiben Bereiche wie das Verhalten des page action button schwer umsetzbar

UI-Kontroverse nach Firefox v89 und Projektumfang

  • Dieses Dokument konzentriert sich auf die UI auf Basis von Firefox v89 und geht davon aus, dass es danach einige Verbesserungen gab
  • Nach der Veröffentlichung von Firefox v89 im Jahr 2021 kam es auf Reddit und Hacker News zu großen Kontroversen um die Proton UI
  • Das Repository Firefox-UI-Fix gewann schnell an Popularität, indem es mehrere Probleme der Proton UI behob; auch Waterfox und Floorp verwenden dieses Theme als Standard
  • Mozilla hat beschlossen, die Unterstützung für Windows 7 und Windows 8 zu beenden; Firefox v115 ist die letzte Version, die ältere Windows-Versionen unterstützt
    • Firefox v115 sollte bis September 2024 bereitgestellt werden
    • Sowohl Mozilla als auch das Projekt mussten Code und Funktionen rund um ältere Windows-Versionen bereinigen; dieses Dokument behandelt daher auch die Legacy-Windows-UI

Kriterien zur Bewertung von UI/UX

  • Die Designkriterien lassen sich grob in drei Bereiche einteilen: Intuitivität, Effizienz und Flexibilität
  • Da keine Daten oder Umgebungen für A/B-Tests vorhanden sind, wird das Nutzerverhalten prognostiziert und anhand verschiedener Theorien deduktiv bewertet

  • Intuitivität

    • Simplicity: Unnötige Elemente entfernen oder vereinfachen, um die kognitive Belastung zu senken
    • Visibility: Kernfunktionen sichtbar machen, um die Bedienung zu erleichtern
    • Accustomably: Den Lernaufwand reduzieren, damit sich Nutzer schnell eingewöhnen können
    • Consistency: Ausnahmen reduzieren, damit die UI leichter zu merken ist
    • Predictability: Unsicherheit verringern, indem Nutzer das Gefühl haben, die Kontrolle zu behalten
    • Affordance: Hinweise darauf geben, wie etwas bedient wird

  • Effizienz

    • Clearly: Unterscheidungen müssen gut erkennbar sein
    • Proximal: Elemente müssen nah genug beieinander liegen, um schnelle Bewegungen zu ermöglichen
    • Bulky: Eine große Größe erleichtert Erkennung oder Bewegung
    • Snappy: Die Reaktion muss flüssig und ohne Ruckler erfolgen

  • Flexibilität

    • Accessibility: Einen breiten Nutzerkreis unabhängig von Alter, Behinderung usw. berücksichtigen
    • Functional: Verschiedene Funktionen aufnehmen, um Anforderungen erfüllen zu können
    • Contextual: In der jeweiligen Situation natürlich vorhanden sein
    • Harmonious: Sich natürlich in die jeweiligen Elemente einfügen
    • Pleasure: Zufriedenheit durch Spaß oder Kreativität anstreben
    • Compatibility: Ältere API-Versionen, Roadmaps für neuere Versionen, Upstream, OS, RTL usw. berücksichtigen

Drei als problematisch betrachtete Punkte in der Proton UI

  • Der erste Eindruck der Firefox v89 Developer Edition war zwar aufgeräumt, in der tatsächlichen Nutzung wird sie jedoch als deutlich unbequem bewertet
  • Die Kernprobleme lassen sich auf drei Punkte verdichten
    • Tab: Tabs sehen wie Buttons aus
    • Padding: Die Abstände sind zu groß
    • Icons: Nur anhand von Icons ist es schwer zu lesen, oder das Entfernen von Icons erzeugt andere Probleme

Das Problem von Tabs, die wie Buttons aussehen

Übermäßige Abstände und Icons entfernen

  • Abstände und Sichtbarkeit von Inhalten

    • Ein Webbrowser ist ein Viewer für Webinhalte und sollte die Anzeige von Inhalten daher nicht behindern
    • Die Proton-UI schneidet bei der Inhaltsanzeige wegen des vielen Paddings schlechter ab
    • Auf Geräten mit kleinen Bildschirmen, etwa 13-Zoll-Notebooks, ist dieses Problem gravierend

  • Klickeffizienz nach Fitts’s Law

    • Fitts’s Law besagt, dass die Zeit, die für eine schnelle Bewegung zu einem Zielbereich benötigt wird, vom Verhältnis zwischen der Entfernung zum Ziel und der Breite des Ziels abhängt
    • Die zentrale Formel lautet MT = a + b · ID = a + b · log₂(2D/W)
    • MT ist die durchschnittliche Zeit bis zum Abschluss der Bewegung, a und b sind Konstanten je nach gewähltem Eingabegerät, ID ist der Schwierigkeitsindex
    • D ist die Entfernung vom Startpunkt zur Zielmitte, W ist die entlang der Bewegungsachse gemessene Zielbreite
    • Lässt man Konstanten und Logarithmus außer Acht, ist das Verhältnis 2D/W entscheidend
    • Zuerst sollte die Entfernung verringert und die Breite maximiert werden, ohne dass die Entfernung zunimmt
    • Außerdem sollte verhindert werden, dass Padding durch das Auffüllen freier Flächen zu groß wird
    • Photon(v88) wird beim Amazon-Icon und im Menü als leichter bedienbare UI bewertet
      • Beim Amazon-Icon ist W größer
      • Im Menü ist W etwas kleiner, aber D ist deutlich kleiner
    • Wenn Icons kleiner wirken als ihre tatsächliche Klickfläche, entsteht ein Nachteil; daher ist es besser, den Padding-Bereich zu füllen, damit Icons größer erscheinen

  • Das Problem, dass sich Compact UI kaum noch unterscheidet

    • Mozilla hat die Compact UI als deprecated markiert
    • Bei v89 unterscheiden sich Compact UI, Normal UI und Touch UI im Wesentlichen nur geringfügig in der Höhe von Tab-Leiste und Toolbar, sodass der Unterschied kaum bedeutsam erscheint

  • UI nur mit Text und Barrierefreiheit

Tab-Redesign des Lepton Theme

  • Tab-Zustände konsistent darstellen

    • Tab-Design ist nicht nur eine Frage der Form, sondern auch der Umgang mit vielen Zuständen
    • Tabs können unter anderem folgende Zustände haben
      • 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 usw.
    • Diese Zustände müssen innerhalb von 36px~240px konsistent dargestellt werden

  • Vergleich des ausgewählten Zustands in Photon, Proton und Lepton

    • Bei Photon und Lepton ist der ausgewählte Tab mit der Toolbar verbunden und dadurch leicht zu erkennen
    • Lepton macht die Container-Anzeige von Hintergrund-Tabs kürzer, um visuelle Überlastung zu reduzieren
    • Bei Proton ist zwischen hervorgehobener Hintergrundfarbe und oberer Leiste schwer zu unterscheiden, welcher Tab ausgewählt ist
    • Die obere Leiste ist zwar die Anzeige eines Container-Tabs, fühlt sich aber ähnlich an wie der ausgewählte Tab der vorherigen UI Photon
    • Der Vergleich der Zustände Selected, Multiple selected, Hovered und General lässt sich wie folgt zusammenfassen
      • Photon macht Selected über die Toolbar-Verbindung erkennbar und unterscheidet Multiple selected und Hovered über die Farbe der oberen Kontextlinie
      • Bei Proton sehen Selected und Multiple selected fast gleich aus
      • Lepton unterscheidet die Zustände durch die Toolbar-Verbindung und unterschiedliche Hintergrundfarben

  • Kombinierte Zustände wie stummgeschaltet, PIP und angeheftete Tabs

    • Bei der Kombination aus Muted, Hover und PIP gibt es große Unterschiede zwischen Browsern
      • Photon unterscheidet Muted und Muted + Hover nicht, und sobald eine PIP-Anzeige vorhanden ist, verschiebt sich die Position von Muted stark
      • Proton English zeigt Muted nur als Text an, und PIP ist nur im Hover-Zustand erkennbar
      • Proton Korean verändert die UI je nach Anzeigesprache, Muted verdeckt das Favicon, und die PIP-Anzeige wird nicht sichtbar
      • Lepton zeigt alle Informationen an, hält die Positionen von Muted und PIP konstant und signalisiert beim Hover, dass eine Steuerung möglich ist
    • Bei komplexeren Kombinationen war Proton in koreanischer Umgebung nahezu unbenutzbar
    • Lepton behandelt kombinierte Zustände folgendermaßen
      • Es stellt immer alle Informationen dar
      • Wenn kein Favicon vorhanden ist, wird Muted vergrößert und als Ersatz genutzt
      • Auch im Zustand Pinned bleibt die Position immer gleich
      • Wenn sich Positionen wie bei Container und Titlechanged überschneiden, werden sie kombiniert dargestellt

  • Raumnutzung je nach Tab-Breite

    • Lepton passt sein Verhalten an die Tab-Breite an
    • Ist genügend Breite vorhanden, werden wie bei Proton alle Schließen-Buttons angezeigt
    • Sind die Tabs bis zum Ende gefüllt und die Breite reicht nicht aus, werden die Schließen-Buttons der Hintergrund-Tabs ausgeblendet
    • Um versehentliche Klicks zu reduzieren, wird die Größe des Schließen-Buttons verkleinert; beim Hover über einen Hintergrund-Tab kann er aber weiterhin geschlossen werden
    • Tab-Titel werden durch Anpassung von Padding und Gradient effizienter sichtbar gemacht
    • Es wird Platz gespart, damit beim letzten Tab der Text New sichtbar ist
    • Anpassungen erfolgen nur bei geringer Breite, damit das Wort „wiki“ klar sichtbar bleibt
    • Lepton zeigt mehr Webinhalte, und Photon sowie Lepton haben Trennlinien zwischen Tabs

  • Distributionsformen und Geschmack

    • Die Kriterien für eine gute UI unterscheiden sich von Person zu Person und sind bis zu einem gewissen Grad eine Frage des Geschmacks
    • Es werden drei Tab-Konzepte angeboten
      • Der allgemeine Lepton-Tab, angepasst an Proton
      • Photon-Tabs mit rechtwinkliger Kontextlinie
      • Der ursprüngliche Proton-Tab
    • Dieses Theme ist besonders für die Unterstützung der Photon-Tab-UI bekannt

Icons und Padding anpassen

  • Panels und Kontextmenüs

    • Durch das Hinzufügen von Icons und die Anpassung des Paddings werden bestehende Kritikpunkte reduziert
    • Das Problem mit unbalanced strokes wurde von Contributor @zapSNH behoben, sodass browserweit ein konsistentes und gut erkennbares Icon-Set vorhanden ist

  • Vergleich der Menüs von Edge, Chrome und Lepton

    • Edge hat Menüs, in denen Icons ohne besonderen Grund fehlen, und die Icons ähneln sich insgesamt zu stark, was das schnelle Erfassen erschwert
    • Einige Icon-Metaphern in Edge, etwa New InPrivate window, werden als verwirrend angesehen
    • Die Icons von Chrome wirken stilistisch nicht modern, sind im Vergleich zur abgerundeten UI zu kantig und erscheinen im Verhältnis zur Textgröße zu klein
    • Lepton bietet ein konsistentes Icon-Set mit modernem Stil und passender Größe
    • Nur bei wichtigen Icons werden gefüllte Icons verwendet, um die Scanbarkeit zu erhöhen, und es werden Metaphern genutzt, die sich optisch unterscheiden

  • Kontextmenüs und Shortcut-Gruppen

    • Bei Edge ist unklar, warum Add all tabs to favorites kein Icon hat
    • Chrome hat überhaupt keine Kontextmenü-Icons
    • Lepton platziert Icons so, dass sie klar unterscheidbar sind
    • In Kontextmenüs von Webseiten platziert nur Firefox oben eine Shortcut-Gruppe und erzielt damit einen Effekt, der ähnlich wie bei einem Pie Menu schnellen Zugriff ermöglicht

  • Weitere Icons anwenden

    • Dem globalen Menü und verschiedenen Panels werden Icons hinzugefügt
    • Wenn ein Ordner in der Lesezeichenbibliothek geöffnet wird, reagiert auch das Menü-Icon
    • Menüs und Panels werden kleiner, und die Startposition des Textes wird ausgerichtet
    • Icons werden für verschiedene Layout-Fälle hinzugefügt

Unterstützung für OS, Themes und Farben

  • System-Standard-Theme

    • Lepton passt die UI an unterschiedliche Betriebssysteme und Einstellungen an
      • Windows 7: folgt dem Aero-Fensterdesign möglichst genau
      • Windows 8.1: sorgt dafür, dass die Titelleiste ähnlich gut passt wie unter Windows 7
      • Windows 10 Light: folgt den Farben von Legacy Edge unter Windows 10
      • Windows 10 Dark: wendet denselben Maßstab an
      • Windows 10 Dark + Accent titlebar: folgt der Akzentfarbe, wenn die Einstellung für die hervorgehobene Titelleiste aktiviert ist
      • MacOS Light/Dark: folgt den Mac-Farben
    • Nutzer von Windows 11 können mit der Option userChrome.compatibility.os.win11 Windows-11-Farben verwenden, die Edge ähneln
    • Funktioniert auch unter Linux und behebt Farbprobleme sowie Probleme mit nicht nativen Titelleisten-Buttons

  • Platz für Titelleisten-Buttons

    • Bei Varianten wie Tabs on bottom oder One Liner muss in der Toolbar Platz für die Titelleisten-Buttons reserviert werden
    • Werte und Positionen unterscheiden sich je nach OS
      • Win7, Win8: 105px, rechts
      • Win10: 138px, rechts
      • Mac: 72px, links
      • Linux: 84px; kann je nach System-Theme variieren
    • Im Vollbildmodus wird die native UI verwendet, daher muss dies als 0px behandelt werden
    • Links und rechts sind beide möglich; außerdem können es drei Buttons sein oder auch nicht

  • Ergänzungen zum Proton-Theme

    • Behebt Barrierefreiheitsprobleme, die durch den mangelnden Farbkontrast des Proton-Themes selbst entstehen
    • Verbessert Farbkontrast und Konturschatten der gebündelten Themes
    • Wendet dies auch auf Bereiche an, in denen das Proton-Theme nicht angewendet wurde, und macht die UI dadurch einheitlicher
    • Wendet den Dark Mode auch auf Bereiche an, in denen er bisher nicht angewendet wurde
    • Sorgt dafür, dass Farben auch bei Custom Themes statt des Standard-Themes korrekt angewendet werden
    • Fügt Tabellen und Listen für gerade Zeilen eine andere Hintergrundfarbe hinzu, um die Lesbarkeit zu verbessern
    • Verpasst dem Audio-Player abgerundete Ränder im Proton-Design
    • Macht Inhalte im Video-Player besser sichtbar und überarbeitet auch die Icons ansprechender

Interaktion und Animation

  • Hilfreiche Interaktionen

    • Wenn sich beim Hover der Mauszeiger oder ein Element ändert, gibt das einen Hinweis darauf, dass etwas ausgeführt wird
    • Bei Elementen, die sich wie die Zoom-Befehle in Panels anders verhalten und klein wirken, hilft eine Änderung des Mauszeigers
    • Wenn beim Bewegen der Maus über ein Feld ein Rahmen erscheint, wird intuitiv deutlich, dass es anklickbar ist
    • Für den Text aktiver Elemente wird die Akzentfarbe verwendet
    • Gelöschte Elemente werden wie deaktivierte Elemente dargestellt, indem das Icon in Graustufen angezeigt und der Titel durchgestrichen wird; beim Hover erscheint jedoch der Titel ohne Durchstreichung

  • Animationsdesign

    • Animationen machen eine UI weicher und natürlicher, können sich aber manchmal langsam anfühlen
    • Die Designkriterien sind folgende
      • Folgt der Easing Curve von Photon: schnelle Beschleunigung am Anfang und sanftes Abbremsen am Ende
      • Verkürzt die Dauer von Startanimationen, damit die UI schnell reagiert wirkt
      • Verlängert die Dauer von Endanimationen, damit sie sich weich anfühlen
      • Große Objekte haben eine längere Dauer als kleine Objekte
      • Auch die Dauer innerhalb verschachtelter Objekte sollte länger sein
    • Dieselben Prinzipien werden auf Hintergrundfarben, Pfeilrotationen, Container-Tabs, Sound- und angeheftete Tabs sowie die Sidebar angewendet
    • Dieselben Prinzipien werden auch auf optionale Funktionen angewendet, die nicht standardmäßig aktiviert sind
      • Autohide Back Button
      • Autohide Page Action
      • Autohide Tab Bar

  • Wiederherstellung von Illustrationen

    • Die freundlichen Illustrationen von Photon sollen die Verunsicherung in Fehlersituationen verringert haben
    • Dieses Theme stellt diese Illustrationen wieder her
    • Beispiele für die Anwendung sind die Bildschirme Welcome back, DNS error, Session restore und Search result

Fazit und Grenzen

  • Dieses Theme berücksichtigt Konventionen, Psychologie und Forschungsergebnisse und übernimmt die Stärken bestehender Themes
  • Es unterstützt Betriebssysteme, Dark Mode, Custom Themes und kontextbezogene Interaktionen
  • Wegen CSS-Einschränkungen gibt es auch Dinge, die sich nicht umsetzen lassen, etwa das Verhalten des Page-Action-Buttons
  • Das Ziel lautet: „🦊 I respect proton UI and aim to improve it.“

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-02-21
Hacker-News-Kommentare

  • Das Unbequemste an der neuen UI war, dass alle Elemente viel zu groß geworden sind.
    Auf einem Smartphone-Bildschirm, den man mit dem Finger bedient, wäre das verständlich, aber auf einem normalen Desktop verschwendet es enorm viel Platz.
    Die im Artikel erwähnte größere Padding ist ebenfalls ein Grund, aber die Entfernung der Option compact UI density wiegt auch schwer.
    Wenn man in about:config browser.compactmode.show aktiviert und dann über Menü > Weitere Werkzeuge > Symbolleiste anpassen > unten „density“ geht, kann man sie wieder nutzen.
    Bei der Option steht zwar „not supported“, aber das ist schon seit Jahren so.

    • Ich bevorzuge Interfaces mit großzügigem Padding deutlich.
      Ausreichendes Padding reduziert visuelles Rauschen und Komplexität und gibt den Elementen Raum zum Atmen.
      Auch wenn es vielleicht keinen konkreten praktischen Vorteil gibt, fühlt man sich schon beim Anschauen weniger unruhig.
    • Auf der einen Seite gibt es Leute, die sagen: „Bitte verschwendet keinen Platz mit Padding“, und jedes Mal, wenn KDE zur Sprache kommt, gibt es Leute, die sagen: „Ohne Padding werden Informationen und Text so hineingequetscht, dass es schwer lesbar ist.“
      Man wird kritisiert, egal ob man es macht oder nicht.
    • Ich frage mich, ob jemand den Hintergrund kennt, warum es als „not supported“ angezeigt wird.
    • Genau das war mein Problem; ich werde dieses Flag heute mal ausprobieren.
    • „not supported“ wirkte wie Boshaftigkeit gegenüber Leuten, die diese „moderne“ Designentscheidung kritisiert haben.

  • Ich bin der Autor von Lepton, einem beliebten Theme für Firefox.
    Aus meiner Sicht kann man sehen, wie ich verschiedene Entscheidungen getroffen habe und wie ich Mozillas enttäuschende Entscheidungen verbessert habe.
    Das kann erklären, wie ich es verbessert habe und warum es populär wurde.
    Dieser Artikel ist Teil einer Serie.

    • https://github.com/black7375/Firefox-UI-Fix/wiki/%5BArticle%...
    • Ich frage mich, wo man Lepton finden kann.
      Im Theme-Bereich des Add-on-Stores erscheint unter diesem Namen nichts.
      Vielleicht ist Lepton auch die alte Firefox-UI und nur noch in älteren Releases vorhanden.
      Ich habe den Artikel gelesen, aber vielleicht habe ich etwas übersehen.
    • Normalerweise passe ich die UI nicht stark an und versuche einfach, mich an die Defaults zu gewöhnen.
      Denn es verursacht weniger Reibung, und ich mag es, mich direkt nach der Installation an die Standardeinstellungen anpassen zu können.
      Firefox-UI-Customizing ist für mich aber eine Ausnahme, weil es einfach einzurichten und qualitativ gut ist.
      Dass es sich gewartet anfühlt, ist ebenfalls ein wichtiger Vorteil.
      Ich wusste nicht, dass du so lange darüber geschrieben hast; es wirkt interessant und gut dokumentiert, also werde ich es lesen.
    • Besonders interessant ist, dass Telemetrie genutzt wird, um das Entfernen von Interface-Elementen zu rechtfertigen.
      Persönlich finde ich, dass die Adressleiste enorm groß ist und selbst mit 10 Buttons noch Platz übrig hätte.
      Daher fällt es mir schwer, mir einen Grund vorzustellen, Elemente zu entfernen, außer dem Wunsch, alles zu entfernen, bis nichts Entfernbares mehr übrig ist.
      Da du dich offenbar gut mit UI/UX auskennst, habe ich eine Frage: Ich habe die Theorie, dass schwarz-weiße Icons schlechter sind als farbige Icons; gibt es dazu Forschung oder einen Konsens?
    • Die Installation war sehr einfach.
      Ich würde allerdings empfehlen, die Schritte zunächst schlicht zusammenzufassen und den Advanced-Bereich komplett nach unten zu verschieben. 
      1. Skript in der OS-Kommandozeile ausführen  
2. Zu `about:support` gehen und auf Start-Cache leeren klicken

  • Bessere Browser-UX beginnt, zugespitzt gesagt, bei vertikalen Tabs
    Horizontale Tabs werden schon bei 6–8 geöffneten Tabs schwer zu verwalten oder nachzuverfolgen
    Bei vertikal verschachtelten Tabs werden Links, die in neuen Tabs geöffnet werden, automatisch zu Kind-Tabs, und ihre Struktur und ihr Kontext lassen sich viel leichter erschließen als bei horizontalen Tabs
    Fügt man dazu noch Farben pro Website hinzu, werden auch Tab-Gruppen besser sichtbar, und man kann den Tab-Baum als Lesezeichen speichern, um den Fortschritt bei Recherche- oder Dokumentationsarbeit festzuhalten
    Ein CSS-File und ein paar Screenshots gibt es hier: https://gist.github.com/aclarknexient/88673880d373864eee1927...
    Ich muss noch einen Screenshot mit verschachtelten und farbigen Tabs hinzufügen; das mache ich nach dem Posten des Kommentars

    • Ich mag vertikale Tabs, und für meine Art zu browsen, bei der ich zwischen mehreren langfristigen Aufgaben wechsle, sind sie ein großer Vorteil
      Tabs eignen sich dafür besser als Lesezeichen, weil die Lesezeichenverwaltung aller Browser auch 2024 noch unausgereift ist und das Organisieren von Lesezeichen miserabel bleibt
      Verschachtelte Tabs reizen mich nicht besonders, aber die Möglichkeit, mit einem Klick zwischen Tab-Gruppen zu wechseln, die in der Tab-Seitenleiste angezeigt werden – wie die „panes“ der Firefox-Erweiterung Sidebery oder die „spaces“ von Arc –, ist mächtig
      Besonders gut wäre es, Panels/Spaces mit Browser-Profilen zu verknüpfen
      So könnte man zum Beispiel ein Browserfenster zwischen normalem Browsen, Shopping, Online-Uni-Vorlesungen und Softwareentwicklung umschalten und bei Bedarf ein bestimmtes Panel/einen bestimmten Space vorübergehend in ein neues Fenster ausgliedern
    • Geschmacksunterschiede erkenne ich an, aber ich glaube stark an das genaue Gegenteil
      Es stimmt, dass bei mehr als 6–8 geöffneten Tabs in einer horizontalen Tableiste Verwaltung und Überblick schwierig werden
      Ich habe in den letzten sechs Monaten Arc benutzt, und auch in einer vertikalen Tableiste waren 6–8 geöffnete Tabs genauso schwer zu verwalten und nachzuverfolgen
      Am Ende habe ich alle vier Stunden alles geschlossen und neu angefangen
      Zwei Argumente beider Seiten kann ich besser nachvollziehen
      Erstens: Wenn man die Pixel zählt, die eine Tableiste horizontal und vertikal einnimmt, habe ich noch keine praxistaugliche vertikale Tableiste gesehen, die gleich viele oder weniger Pixel verbraucht als eine horizontale
      Zweitens gibt es das Argument, dass Monitore fast immer mehr horizontale als vertikale Pixel haben und eine vertikale Tableiste das Seitenverhältnis des Monitors daher besser nutzt
      Das fühlt sich bei 16:9 und breiter richtig an, wirkt auf den bei MacBooks üblichen 16:10-Displays für mich persönlich aber weniger überzeugend
    • Wenn man sich die „kontroversen“ FF89-Screenshots ansieht, scheint eine der größten Änderungen das Redesign der Tabs mit mehr Padding gewesen zu sein
      Da ich aber die obere Tableiste ausblende und Tree Style Tab benutze, das gut zu Firefox passt, habe ich selbst diese Änderung nicht bemerkt
      Ich mag Firefox an sich nicht besonders, aber der UX-Gewinn durch den Tab-Baum überwiegt die kleinen Details, die Chrome/Safari etwas besser machen, sodass ich nicht lange überlegen muss
      Für Frontend-Arbeit nutze ich wegen der Entwicklertools allerdings Chrome
    • Ich weiß nicht, ob es gegen die HN-Etikette verstößt, auf meinen eigenen Kommentar zu antworten, oder ob das eine gute Strukturierung von Informationen ist :)
      Im erweiterten Bereich der Optionsseite von Tree Style Tab gibt es ein Feld für ein Benutzer-Stylesheet, das live neu geladen wird
      Das ist sehr praktisch, um Schriftauswahl zu testen, ohne den Browser neu zu starten
      Ich habe es so geändert, dass Apples kondensierte SF Pro-Schrift verwendet wird
      Iosevka Mono, das ich sonst fast überall nutze, passte irgendwie nicht zu Tab-Titeln
      Das CSS sieht so aus: 
      :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;  
}
      Ich habe dem Link aus dem vorherigen Kommentar einen Screenshot des Ergebnisses dieses CSS hinzugefügt: https://gist.github.com/aclarknexient/88673880d373864eee1927...
    • Auf Laptops werden vertikale Tabs langsam weniger gut
      In Firefox ist mein Hack für eine automatisch ausgeblendete Seitenleiste kaputtgegangen, und ich habe keine Lust, ihn zu reparieren; jetzt habe ich ein paar Zoll grauen Leerraum, obwohl ich nicht einmal 100 Tabs offen habe
      Meistens lasse ich nur etwa 5–10 Tabs offen
      Noch nerviger ist, dass viele Websites heutzutage nicht anhand des User-Agents, sondern anhand der Browser-Viewport-Größe zwischen Mobil und Desktop unterscheiden
      Weil ich durch Tree-Style-Tabs ohnehin schon einen Zoll Breite verliere, bleibt kaum Breite übrig, die ich reduzieren kann, bevor eine Website denkt, sie sei auf einem iPad
      Deshalb muss ich den Browser praktisch im Vollbild nutzen; andernfalls bekomme ich jede Menge Hamburger-Menüs mit kaputten Zeilenumbrüchen, was die Navigation schlechter macht
      Meistens muss ich die Seitenleiste komplett abschalten, wodurch beim Tabwechsel jedes Mal ein paar zusätzliche Klicks dazukommen

  • Der Beitrag scheint überzeugen zu wollen, dass der Theme-Autor auf Basis von UX-Regeln ein objektiv besseres Firefox-Theme gebaut hat, aber die meisten Änderungen wirken wie persönliche Vorlieben
    Es ist zweifellos gut gemacht und gepflegt, aber persönlich finde ich es visuell nicht besonders ansprechend, und manches wirkt komplizierter
    Menschen haben unterschiedliche Vorlieben, und Firefox hat sich zwar für ein Design entschieden, unterstützt solche Änderungen aber ebenfalls, was an sich gut ist
    Etwas amüsant wirkt nur, dass der Autor offenbar beweisen will, seine Vorlieben seien empirisch richtig

    • UI ist eindeutig Geschmackssache, deshalb habe ich die Distribution in drei Varianten gebaut
      Aber es war verwirrend, wenn nicht angezeigt wurde, ob ein Tab stummgeschaltet ist oder lädt, oder wenn es keine Trennlinien zwischen Tabs gab

  • Seit Firefox die Tabs kaputtgemacht hat, habe ich aufgegeben, ihn als Standardbrowser zu nutzen.
    Ab und zu öffne ich ihn zum Testen, und wenn sie immer noch wie Buttons aussehen statt wie Tabs, notiere ich mir gedanklich, es in etwa einem halben Jahr wieder zu versuchen.
    Das helle Theme ist besonders beleidigend: weiße Buttons auf hellem Grau.
    Auch die Windows-System-Theme-Einstellungen werden nicht richtig beachtet.
    Unter Windows kann man für Apps ein helles Theme beibehalten und zugleich Farbe auf Taskleiste, Startmenü und Titelleiste anwenden; Edge versteht das, und Chrome hat, auch wenn nicht, wenigstens genug Kontrast.
    Firefox liegt völlig daneben.

    • Ich nutze Firefox als Zweitbrowser, aber jedes Mal, wenn ich ihn starte, stört und unterbricht er mich zuerst, um mir neue Änderungen und Funktionen wie Pocket oder VPN zu zeigen, die seit dem letzten Mal hinzugekommen sind.
      Bitte einfach aufhören und mich mit dem Browsen anfangen lassen, wofür ich gekommen bin.
      Ich wünschte, man würde nicht den Dark Patterns von Microsoft folgen, das zwischen Updates Office 365 und Game Pass aufdrängt.
      Solche Funktionswerbung kann man Leuten zeigen, die Firefox noch nicht installiert haben; ich bin bereits „Kunde“, also nervt mich nicht.
      Deshalb nutze ich hauptsächlich Chrome.
      Er mag minderwertiger sein und mich überwachen können, aber wenigstens stellt er sich mir nicht in den Weg.
    • Installiere Sidebery[1] und blende die Standard-Tabs aus[2].
      Das ist der Weg :)
      [1] https://addons.mozilla.org/en-US/firefox/addon/sidebery/
      [2] https://superuser.com/a/1424494

  • Ich frage mich, ob es noch andere gibt, denen es völlig egal ist, dass Tabs „wie Buttons aussehen“.
    Manchmal kommt es mir vor, als wäre ich damit allein.
    Ich weiß nicht, ob es Neulinge wirklich so sehr stört.

    • Ich nutze Firefox täglich, wusste aber nicht einmal, dass das als „Problem“ gilt.
      Bis ich diese Kommentare gelesen habe, habe ich nie darüber nachgedacht, und weil sich die Tab-Leiste für mich so, wie sie jetzt ist, völlig brauchbar anfühlt, werde ich wohl auch nicht weiter darüber nachdenken.
    • Dass Tabs wie Buttons aussehen, stört mich an sich nicht besonders.
      Es ist eher eine gängige Alternative zur Tab-Form, und soweit ich weiß, gab es sogar in den Tab-Controls von Windows 95 einen Modus, der Tabs wie Buttons aussehen ließ.
      Ich glaube, ursprünglich wurde das auch in der Taskleiste verwendet, und seit den 90ern in mIRC zum Wechseln zwischen Channels/Fenstern.
      Allerdings gefällt mir das Aussehen dieser konkreten „Tab-Buttons“ persönlich nicht.
      Sie sehen aus wie längliche Pillen, die schwer zu schlucken wären, und ich bin an das frühere tabartige Aussehen gewöhnt; ich sehe keinen Grund, warum man das unbedingt ändern musste.
      Zum Glück lässt sich das Aussehen von Firefox anpassen, also habe ich es per userChrome.css so geändert, dass es mir besser gefällt.
    • Es beeinflusst meine Nutzung von Firefox nicht.
      Allerdings werden Pixel verschwendet, indem Lücken eingefügt werden, für die es keinen Grund gibt.
      An diesem Punkt hat man sich an unsinnige UI-Entscheidungen gewöhnt und nimmt einfach hin, was Organisationen einem vorsetzen.
      Es scheint kaum noch jemanden zu geben, dem Konsistenz oder leichte Auffindbarkeit wichtig sind.
    • Es unterscheidet sich ausreichend von anderen Dingen mit Tabs, zum Beispiel nicht nur Browsern, sondern auch Dateimanagern oder Editoren, dass es stört.
      Ich verstehe nicht, warum man die Semantik komplett über Bord wirft.
      Sie sehen aus wie Buttons, verhalten sich aber nicht wie Buttons.
    • Ich habe es nie bemerkt, und selbst nachdem man mich darauf hingewiesen hat, ist es kein Problem.
      Bei den Leuten, die es als Problem empfinden, wirkt es ziemlich wie Haarspalterei.

  • Da alle ihre jeweiligen Beschwerden aufschreiben, schreibe ich meine auch mal auf.
    Wenn der Lesezeichen-Ordnerbaum groß ist, ist es furchtbar, sich in dem kleinen Popup der „Add Bookmark“-UI zu der Stelle durchzuklicken, an der ein neues Lesezeichen abgelegt werden soll.
    In der Lesezeichen-Seitenleiste kann man nach Namen suchen, aber nicht herausfinden, wo sich dieses Lesezeichen befindet.
    Ein Lesezeichen-Such-Add-on wie Bookmark search plus 2 löst das, sollte aber eigentlich nicht nötig sein.
    Edit: Ich habe Rechtsklick -> Show in Folder entdeckt, und das ist großartig.
    Es ist allerdings nicht die beste UI, und das erwähnte Add-on ist immer noch deutlich intuitiver.
    Man kann nicht mehrere Seitenleisten gleichzeitig haben.
    Deshalb kann ich Tree Style Tabs für vertikale Tabs und den Lesezeichenordner/die Suche nicht gleichzeitig geöffnet haben.
    Absurd.
    Im Grunde ist das alles, und das meiste davon betrifft die Lesezeichen-Verwaltung.
    Ich weiß nicht, ob der Rest der UI okay ist oder ob ich mich nur daran gewöhnt habe und die Mängel nicht mehr sehe, aber Firefox nutze ich ziemlich bequem.
    Wie andere hatte ich nicht das Bedürfnis, mich groß über das Style-Redesign zu beschweren.

    • Aus unbekannten Gründen wurden Lesezeichen in allen Browsern erbärmlich vernachlässigt.
      Wenn man einen Browser von vor 20 Jahren hervorholt, ist die Lesezeichenverwaltung fast gleich oder in manchen Fällen sogar ein wenig besser.
      Verbesserungen bei Lesezeichen sind wohl nicht sexy, deshalb kümmert es niemanden.
    • Ich frage mich, ob da noch Muskelgedächtnis für die Tastenkombination Ctrl+Shift+B vorhanden ist, die früher das große Seitenpanel geöffnet hat.
      Jetzt zeigt sie nur noch eine schmale horizontale Leiste.
      Auch deshalb nervt mich dieses Redesign definitiv, aber ich habe Ctrl+Shift+O entdeckt, die Tastenkombination für „Lesezeichen verwalten“.
      Sie öffnet ein größeres Popup-Fenster mit den Lesezeichen, und bisher wirkt es fast so bequem wie das alte Seitenpanel.
      Man kann Lesezeichen auch durchsuchen, und wenn man per Rechtsklick im Kontextmenü „show in folder“ auswählt, wird auch angezeigt, wo sie sich in der Hierarchie befinden.
      Allerdings liegen meine Lesezeichen alle unter „other bookmarks“, daher werde ich das vermutlich nicht oft nutzen.

  • Die größte Beschwerde über eine „unnötige Firefox-UI-Änderung“ ist die Entfernung von browser.urlbar.clickSelectsAll vor vier Jahren
    Wie zu erwarten, interessiert es Mozilla nicht
    Wenn man den Bug-Report liest, lässt sich das außer mit Nutzerfeindlichkeit kaum erklären: https://bugzilla.mozilla.org/show_bug.cgi?id=1621570
    Kein Textfeld irgendeiner UI verhält sich so
    Ich verstehe nicht, warum Mozilla dieses „Feature“ ausrollt und gleichzeitig sogar die Option entfernt hat, es abzuschalten
    Es ist okay, wenn manche Nutzer das bevorzugen, aber man sollte mir nicht meine verdammte Option wegnehmen und es mir aufzwingen

    • Tatsächlich war Mozillas Logik, dass alle anderen großen Browser sich so verhalten
      Wenn man es in Chrome überprüft, verhält er sich tatsächlich wie Firefox
      In Sachen Nutzerfeindlichkeit lautete die Logik: Wer das neue Verhalten nicht mag, hat Telemetrie nicht aktiviert und verdient daher nicht, die gewünschte Funktion zu bekommen
      Ziemlich ironisch, wenn man bedenkt, dass der wichtigste Vorteil von Firefox sein auf Datenschutz ausgerichtetes Modell ist
    • Stimme vollkommen zu
      Vier Jahre später stolpere ich immer noch täglich darüber
      Ironischerweise scheitere ich meist genau in dem Fall, bei dem diese Änderung angeblich helfen sollte
      Wenn ich die gesamte URL auswählen will und instinktiv doppelklicke, wird beim ersten Klick alles ausgewählt und beim zweiten Klick die Auswahl auf ein einzelnes Wort reduziert
      Dann bin ich kurz verwirrt und fange wieder an zu klicken; nun muss ich noch dreimal klicken, um die gesamte URL auszuwählen
      Das ist erstaunlich nervig
      Die Erklärung im Tracker wirkt wie: „Vielleicht machen wir irgendwann in Zukunft noch irgendetwas anderes, das dies rechtfertigt“
      Vier Jahre später ist davon immer noch nichts zu sehen
    • Nachdem dieses Feature aus Firefox entfernt wurde, bin ich zu Vivaldi gewechselt
      Vivaldi lässt dieses Verhalten immer noch auswählen
      Ich frage mich, ob es noch andere Unix-Browser gibt, bei denen man die vollständige Auswahl beim Klick abschalten kann
      Insgesamt bin ich mit Vivaldi zufrieden, aber mehr Auswahl wäre schön
    • Es ist immer noch kaputt
      Denn die Funktion „Paste and Go“ funktioniert nicht richtig
      Nach gesundem Menschenverstand sollte „Paste and Go“ dasselbe sein wie erst „Paste“, das den Text aus der Zwischenablage korrekt an der Cursorposition einfügt, und danach „zur Adresse in der Adressleiste wechseln“
      Wenn man aber die automatisch ausgewählte URL abwählt, den Cursor darin platziert und dann „paste and go“ verwendet, ignoriert Firefox die bestehende URL und versucht direkt, zum Text aus der Zwischenablage zu navigieren
      Das könnte sogar ein Sicherheitsrisiko sein, weil man Nutzer dazu bringen könnte, eine URL zu besuchen, die sie nicht beabsichtigt hatten
      Wenn man es nicht reparieren will, sollte man es passend zum tatsächlichen Verhalten in „Clear, Paste, and Go“ umbenennen
    • Man sagt zwar, „Mozilla interessiert es nicht“, aber eine interne Option ist eben nur eine interne Option, und ohne etwas wie einen Supportvertrag mit einem Großunternehmen interessiert sich kein Browser sonderlich dafür
      Wenn man für etwas, das nicht mit Entwicklung oder Mobile-Device-Management zu tun hat, in about:config gehen muss, sollte man nicht erwarten, dass es nach Updates dauerhaft weiter funktioniert
      Jede Option ist Code, der gewartet werden muss
      Ich vermute, dass sie den Code, der diese Option nutzte, neu geschrieben haben und den schnelleren, billigeren Weg gegangen sind, ein offiziell gar nicht unterstütztes Feature nicht erneut zu implementieren

  • Der eigentliche UI/UX-Albtraum von Firefox sind Altlasten
    Gefühlt öffnet sich jede grundlegende Browserfunktion in einer anderen Ansicht
    Einstellungen sind ein Browser-Tab, die Chronik ist eine Seitenleiste
    Aber das gilt nur für Strg+H; die Verwaltung der Chronik öffnet mit Strg+Umschalt+H ein separates Fenster
    Lesezeichen und Downloads sind ebenfalls in diesem Fenster, dem Library-Fenster, das wirkt, als stamme es noch aus Firefox-3/4-Zeiten
    Für Downloads gibt es auch ein kleines Popup, aber Strg+J und die Download-Verwaltung öffnen dieses Fenster
    Bei Lesezeichen öffnet Strg+Umschalt+O dieses Fenster, Strg+B dagegen die Seitenleiste
    Profile haben auf fast schon lächerliche Weise praktisch keine brauchbare Nutzerfunktion, und in about:profiles versteckt sich eine altmodisch wirkende Oberfläche
    Passwörter öffnen sich in einem Browser-Tab, haben aber ein eigenes Aussehen, das zu nichts anderem richtig passt
    Kohärent ist höchstens, dass Einstellungen und Add-ons beide Browser-Tabs sind und gegenseitig verlinkt sind
    Der Rest ist ein Durcheinander aus Browser-Tabs, Fenstern, Seitenleisten, Pop-outs und unterschiedlichen UIs
    Das ist schon ziemlich lange so ein Chaos, und mangels einer einheitlichen Vision oder ernsthafter Aufräumbemühungen wird es wohl auch so bleiben
    Auch das kürzlich hinzugefügte Firefox View wirkt wie ein weiteres Ding, das noch eine UI obendrauf setzt
    Dort gibt es ebenfalls eine Chronik, sodass es ungefähr drei Möglichkeiten gibt, die Chronik anzusehen, von denen mindestens eine zu viel ist
    Vielleicht ist es ja der Versuch, die Funktionen des Library-Fensters in den View-Tab zu verschieben, aber im Moment sorgt es nur für mehr Verwirrung
    Gewissermaßen ist das natürlich übertrieben
    Andere Browser mögen neuerdings auch Seitenleisten und haben Popups und Menüs
    Was hier aber besonders auffällt, ist der Gegensatz zwischen dem altmodisch wirkenden Library-Fenster, das überall auftaucht, und Funktionen wie Einstellungen/Add-ons/Passwörter, die in Browser-Tabs geöffnet werden
    Am Ende ist schwer vorherzusagen, welche Form erscheint, wenn man eine Browserfunktion öffnet; am Anfang ganz sicher, und selbst wenn man sich daran gewöhnt hat, bleibt das Gefühl, dass „einfach alles irgendwie anders aufgeht“
    Man gewöhnt sich daran, aber es bleibt trotzdem ein Durcheinander

    • Ich finde, bei manchen Funktionen ist es in Ordnung, sowohl ein Popover als auch ein Fenster zu haben
      Es muss nur intelligent umgesetzt sein
      In Safari sind Downloads zum Beispiel standardmäßig ein Popover, aber man kann dieses Popover „abreißen“ und daraus ein Fenster machen
      So werden beide Anwendungsfälle unterstützt und trotzdem bleibt die Konsistenz erhalten
      Firefox bräuchte ziemlich dringend mehr von dieser Denkweise

  • Das Schlimmste an der Proton-UI, worüber kaum jemand spricht, ist, dass sie objektiv ein großer Rückschritt ist, wenn man keinen modernen Monitor mit 1080p oder mehr nutzt
    Mein Laptop ist ein alter X220 ThinkPad, und diese Änderung hat sinnlos so viel Bildschirmfläche verschwendet, dass sie meine tatsächliche Arbeitseffizienz beeinträchtigt hat
    Sie ist Teil eines nutzerfeindlichen Trends im Software Engineering, der Menschen schadet, die sich keine neuere Hardware leisten können oder sie aus irgendeinem Grund nicht nutzen wollen
    In diesem Fall geht es nicht einmal darum, alles zu aufgeblähten Electron- oder React-Apps zu machen, sondern Mozilla hat die UI ohne Grund schlechter gemacht, nur um oberflächlich den Eindruck zu erwecken, als würde man sich noch um Firefox kümmern
    Proton ist für meine Nutzung so schlecht, dass ich ein angepasstes userChrome verwende