より良いデフォルトの Firefox UI を作る方法

 (github.com/black7375)
1 ポイント 投稿者 GN⁺ 2024-02-21 | 1件のコメント | WhatsAppで共有
  • Firefox v89のProton UIは、2021年のリリース後にタブ、余白、アイコンをめぐる論争を引き起こし、Firefox-UI-Fixはそれを補うテーマとしてWaterfoxとFloorpのデフォルトテーマにも採用されている
  • 設計判断はA/Bテストではなく、Jakob’s Law、ゲシュタルト心理学、Fittsの法則、Nielsen Norman Groupの研究といったUX理論や事例に依拠している
  • ボタンのように見えるタブ、広いパディング、テキスト中心のメニューは、選択状態の認識やクリック効率、小さな画面でのコンテンツ表示、アクセシビリティを低下させる可能性がある
  • Lepton Themeは36px〜240pxの範囲内でタブ状態を一貫して表現し、閉じるボタン・アイコン・パディング・テーマカラー・OSごとのタイトルバー領域を調整する
  • 目標はProton UIを否定することではなく、Proton UIを尊重しつつ改善することであり、CSSの制約によりpage action buttonの挙動のように実装が難しい領域も残っている

Firefox v89以降のUI論争とプロジェクト範囲

  • この文書はFirefox v89時点のUIを中心に扱っており、その後に一部改善があったことを前提としている
  • Firefox v89が2021年にリリースされた後、Proton UIをめぐる論争がRedditやHacker Newsで大きく起きた
  • Firefox-UI-FixリポジトリはProton UIのさまざまな問題を補いながら急速に人気を集め、WaterfoxとFloorpもこのテーマをデフォルトとして使用している
  • MozillaはWindows 7とWindows 8のサポート終了を決定しており、Firefox v115がレガシーWindowsをサポートする最後のバージョンである
    • Firefox v115は2024年9月まで提供される予定だった
    • Mozillaもプロジェクト側もレガシーWindows関連のコードと機能を整理する必要があり、この文書ではレガシーWindows UIもあわせて扱う

UI/UXを判断する基準

  • 設計基準は大きく直感性、効率性、柔軟性の3つに整理される
  • A/Bテストに必要なデータや環境がないため、ユーザー行動を予測し、複数の理論を用いて演繹的に判断している

  • 直感性

    • Simplicity: 不要な要素を取り除く、または単純化して認知負荷を下げる
    • Visibility: 主要機能を見えやすくして操作しやすくする
    • Accustomably: すばやく慣れられるよう学習量を減らす
    • Consistency: 例外を減らして記憶しやすくする
    • Predictability: ユーザーが自分で制御できると感じられるようにし、不安を減らす
    • Affordance: 操作方法についての手がかりを与える

  • 効率性

    • Clearly: 区別が明確に認識できなければならない
    • Proximal: すばやく移動できる程度に近くなければならない
    • Bulky: 大きいサイズは認識や移動を容易にする
    • Snappy: 滑らかで途切れなく反応しなければならない

  • 柔軟性

    • Accessibility: 年齢や障害の有無などにかかわらず幅広い範囲を受け入れる
    • Functional: 要求を満たせるよう多様な機能を受け入れる
    • Contextual: 各状況の中で自然に存在していなければならない
    • Harmonious: 各要素と自然に調和していなければならない
    • Pleasure: 楽しさや創造性のための満足を追求する
    • Compatibility: 低いバージョンのAPI、上位バージョンのロードマップ、upstream、OS、RTLなどを考慮する

Proton UIで問題と見なされた3点

  • Firefox v89 Developer Editionの第一印象はすっきりしていたが、実際の使用では不便さが大きかったと見ている
  • 核心的な問題は3つに集約される
    • Tab: タブがボタンのように見える
    • Padding: 余白が大きすぎる
    • Icons: アイコンだけでは判読しにくく、アイコンの削除が別の問題を生む

ボタンのように見えるタブの問題

過剰な余白とアイコンの削除

  • 余白とコンテンツの視認性

    • ウェブブラウザはウェブコンテンツのビューアであるため、コンテンツ表示を妨げてはならない
    • Proton UI は多くのパディングのせいで、コンテンツ表示の面で不利になっている
    • 13インチのノートPCのような小さな画面のデバイスでは、この問題は致命的である

  • Fitts’s Law から見たクリック効率

    • Fitts’s Law は、目標領域まで素早く移動するのに必要な時間が、目標までの距離と目標幅の比率によって変わるとする
    • 中核となる式は MT = a + b · ID = a + b · log₂(2D/W) である
    • MT は移動完了までの平均時間、a と b は入力デバイスの選択による定数、ID は難易度指数である
    • D は開始点から目標中心までの距離、W は移動軸に沿って測定した目標幅である
    • 定数と対数を除けば、2D/W の比率が重要である
    • まず距離を縮め、幅を最大化しつつ距離が伸びないようにする必要がある
    • 余った空間を埋めて、パディングが大きくなりすぎるのも防ぐべきである
    • Photon(v88) は Amazon アイコンとメニューにおいて、より押しやすい UI と評価される
      • Amazon アイコンは W がより大きい
      • メニューは W がやや小さいが、D ははるかに小さい
    • アイコンが実際のクリック領域より小さく見えると不利になるため、パディング領域を埋めてアイコンをより大きく見せるほうがよい

  • Compact UI の差がほとんど消えた問題

    • Mozilla は compact UI を deprecated にした
    • v89 の Compact UI、Normal UI、Touch UI はタブバーとツールバーの高さが少し違うだけで、差はほとんど意味がないと見ている

  • テキストのみの UI とアクセシビリティ

Lepton Theme のタブ再設計

  • タブ状態を一貫して表示する

    • タブ設計は見た目だけでなく、複数の状態を扱う問題でもある
    • タブは次のような状態を持ちうる
      • 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 など
    • これらの状態は 36px~240px の中で一貫して表現されなければならない

  • Photon、Proton、Lepton の選択状態比較

    • Photon と Lepton は、選択されたタブがツールバーとつながっており認識しやすい
    • Lepton は視覚的な過負荷を減らすため、背景タブのコンテナ表示を短くしている
    • Proton は強調された背景色と上部バーの間で、どのタブが選択されているのか区別しにくい
    • 上部バーはコンテナタブ表示だが、以前の UI である Photon の選択タブに似た印象を与える
    • Selected、Multiple selected、Hovered、General 状態の比較は次のように整理される
      • Photon はツールバーとの接続で Selected を認識し、上部コンテキストラインの色で Multiple selected と Hovered を区別する
      • Proton は Selected と Multiple selected がほとんど同じに見える
      • Lepton はツールバーとの接続と異なる背景色で状態を区別する

  • ミュート、PIP、固定タブなどの複合状態

    • Muted、Hover、PIP の組み合わせでは、ブラウザごとの差が大きい
      • Photon では Muted と Muted + Hover が区別されず、PIP 表示があると Muted の位置が大きく変わる
      • Proton English は Muted をテキストのみで表示し、PIP は hover 状態でしか分からない
      • Proton Korean は表示言語によって UI が変わり、Muted が favicon を隠し、PIP 表示も得られない
      • Lepton はすべての情報を表示し、Muted と PIP の位置を一定に保ち、hover 時に操作可能であることを示す
    • より複雑な組み合わせでは、Proton は日本語環境でほとんど使いにくかったと見ている
    • Lepton は複合状態を次のように処理する
      • 常にすべての情報を表現する
      • favicon がなければ Muted のサイズを大きくして代替する
      • Pinned 状態でも位置を常に同じに保つ
      • Container と Titlechanged のように位置が重なる場合は結合して表示する

  • タブ幅に応じた空間活用

    • Lepton はタブ幅に応じて動作を調整する
    • 幅が十分なら Proton のようにすべての閉じるボタンを表示する
    • タブが端まで埋まって幅が足りなくなると、背景タブの閉じるボタンを隠す
    • 誤クリックを減らすために閉じるボタンのサイズは小さくするが、背景タブに hover すれば引き続き閉じられる
    • タブタイトルはパディングとグラデーションを調整して、より効率的に見せる
    • 最後のタブで New テキストが見えるように空間を節約する
    • 幅が足りないときだけ調整し、wiki の単語がはっきり見えるようにする
    • Lepton はウェブコンテンツをより多く表示し、Photon と Lepton はタブ区切り線を持つ

  • 配布形態と好み

    • 良い UI の基準は人それぞれであり、ある程度は 好み の問題である
    • 3つのタブコンセプトを提供する
      • Proton に合わせた一般的な Lepton タブ
      • 直角のコンテキストラインを持つ Photon タブ
      • 元の Proton タブ
    • このテーマは特に Photon タブ UI のサポートで知られている

アイコンとパディングの調整

  • パネルとコンテキストメニュー

    • アイコンの追加とパディング調整によって、従来の不満を減らす
    • unbalanced strokes issue はコントリビューターの @zapSNH が修正し、ブラウザ全体で一貫性があり認識しやすいアイコンセットを備えるようになった

  • Edge、Chrome、Lepton メニューの比較

    • Edge には特別な理由もなくアイコンが空いているメニューがあり、全体としてアイコンが似すぎていてざっと見で判別しにくい
    • New InPrivate window のような一部の Edge のアイコンメタファーは分かりにくいと見ている
    • Chrome はアイコンスタイルが現代的ではなく、丸みのある UI に対して角張っており、テキストサイズに比べてアイコンが小さすぎるように見える
    • Lepton は現代的なスタイルと適切なサイズの一貫したアイコンセットを提供する
    • 重要なアイコンにのみ塗りつぶしアイコンを使ってスキャンしやすさを高め、外見を区別しやすいメタファーを用いる

  • コンテキストメニューとショートカットグループ

    • Edge の Add all tabs to favorites にアイコンがない理由は分からないと見ている
    • Chrome にはコンテキストメニューのアイコンがまったくない
    • Lepton はアイコンを明確に区別できるよう配置している
    • ウェブページのコンテキストメニューでは Firefox だけが上部にショートカットグループを置いており、pie menu のように素早くアクセスできる効果を得ている

  • さらに多くのアイコン適用

    • グローバルメニューとさまざまなパネルにアイコンを追加する
    • ブックマークライブラリのフォルダが開くとき、メニューアイコンも反応する
    • メニューとパネルのサイズは小さくなり、テキストの開始位置がそろう
    • 複数のレイアウトケースに合わせてアイコンを追加する

OS、テーマ、色への対応

  • システム既定テーマ

    • Lepton は異なる OS と設定に合わせて UI を調整する
      • Windows 7: Aero ウィンドウデザインに近づける
      • Windows 8.1: Windows 7 のようにタイトルバーが自然になじむようにする
      • Windows 10 Light: Windows 10 の Legacy Edge の色に従う
      • Windows 10 Dark: 同じ基準を適用する
      • Windows 10 Dark + Accent titlebar: タイトルバーのアクセントカラー設定が有効ならそれに従う
      • MacOS Light/Dark: Mac の色に従う
    • Windows 11 のユーザーは userChrome.compatibility.os.win11 オプションで Edge に似た Windows 11 の色を使える
    • Linux でも動作し、色の問題や非ネイティブのタイトルバーボタンの問題を修正する

  • タイトルバーボタン用スペース

    • Tabs on bottom や One Liner のような場合は、ツールバー内にタイトルバーボタン用のスペースを確保する必要がある
    • OS ごとに値と位置が異なる
      • Win7, Win8: 105px、右側
      • Win10: 138px、右側
      • Mac: 72px、左側
      • Linux: 84px で、システムテーマによって変わる場合がある
    • 全画面ではネイティブ UI を使うため、0px として扱う必要がある
    • 左右どちらにも対応でき、ボタンが 3 つとは限らない

  • Proton テーマの補完

    • Proton テーマ自体の色コントラスト不足によって生じるアクセシビリティ問題を修正する
    • バンドルテーマの色コントラストとアウトラインのシャドウを改善する
    • Proton テーマが適用されていない部分にも適用して、より均一にする
    • ダークモードが適用されていない部分にもダークモードを適用する
    • 既定テーマではないカスタムテーマを使うときも、色が適切に適用されるようにする
    • テーブルとリストでは偶数行に別の背景色を追加して読みやすくする
    • オーディオプレーヤーには Proton デザインに従う角丸の枠線を適用する
    • ビデオプレーヤーはコンテンツがより見やすくなるようにし、アイコンも見やすく修正する

インタラクションとアニメーション

  • 役立つインタラクション

    • hover 時にマウスポインターや要素が変わると、何かが実行されるというヒントになる
    • パネルの拡大・縮小コマンドのように、ほかの動作と性質が異なり小さく見える要素では、マウスポインターの変更が役立つ
    • フィールドにマウスが乗ったときに枠線が現れると、押せることが直感的に伝わる
    • アクティブ項目のテキストにはアクセントカラーを使う
    • 削除された項目は無効化されたようにアイコンをグレースケールにし、タイトルに取り消し線を引くが、hover すると取り消し線のないタイトルが表示される

  • アニメーション設計

    • アニメーションは UI をより滑らかで自然にするが、ときには動作が 遅く 感じられることもある
    • 設計基準は次のとおり
      • Photon の easing curve に従い、序盤で素早く加速し、終わりで滑らかに減速する
      • 開始アニメーションの持続時間を短くして、素早く 反応する感覚を与える
      • 終了アニメーションの持続時間を長くして、滑らかに 感じられるようにする
      • 大きいオブジェクトは小さいオブジェクトより長い持続時間を持つ
      • 入れ子になったオブジェクト内部の持続時間も長くすべきである
    • 背景色、矢印の回転、コンテナータブ、サウンドタブおよびピン留めタブ、サイドバーに同じ原則を適用する
    • 既定ではない選択機能にも同じ原則を適用する
      • Autohide Back Button
      • Autohide Page Action
      • Autohide Tab Bar

  • イラストの復元

    • Photon の親しみやすいイラスト は、エラー状況での戸惑いを減らしていたと考えている
    • このテーマはそのイラストを復元する
    • 適用例は Welcome back、DNS error、Session restore、Search result 画面

結論と限界

  • このテーマは慣習、心理学、研究結果を考慮し、既存テーマの長所を受け継いでいる
  • OS、ダークモード、カスタムテーマ、状況に応じたインタラクションをサポートする
  • CSS の限界により、page action button behavior のように実装できないものもある
  • 目標は「🦊 I respect proton UI and aim to improve it.」である

関連記事

1件のコメント

 
GN⁺ 2024-02-21
Hacker News のコメント

  • 新しい UI でいちばん不便だったのは、あらゆる要素が大きくなりすぎたこと
    指でタップするスマートフォン画面なら理解できるが、一般的なデスクトップサイズではスペースの無駄が大きい
    記事で述べられているパディング増加も原因だが、compact UI density オプションを削除した影響も大きい
    about:config で browser.compactmode.show を有効にしたあと、メニュー > その他のツール > ツールバーをカスタマイズ > 下部の “density” に行くと、再び使える
    オプションには “not supported” と付いているが、何年もその状態のまま

    • インターフェースにはゆったりしたパディングがあるほうをずっと好む
      パディングが十分にあると、視覚的なノイズや複雑さが減り、要素に余白が生まれる
      具体的な実用上の利点はないかもしれないが、見ているだけで不安が少なくなる
    • 一方には「パディングでスペースを無駄にしないでほしい」という人たちがいて、KDE の話が出るたびに「パディングなしで情報やテキストを詰め込みすぎて読みにくい」という人たちがいる
      やっても文句を言われ、やらなくても文句を言われる構図
    • なぜ “not supported” と表示しているのか、その背景を知っている人がいるのか気になる
    • それが自分の問題だったので、今日はそのフラグを試してみる
    • “not supported” は、「モダンな」デザイン選択を批判した人たちへの意地悪のように見えた

  • Firefox 向けの人気テーマ Lepton の作者です
    私の視点から、さまざまな判断をどう下したのか、Mozilla の残念な判断をどう改善したのかを見ることができます
    そのため、どう改善したのか、なぜ人気を得たのかの説明になるかもしれません
    この記事は連載の一部です

    • https://github.com/black7375/Firefox-UI-Fix/wiki/%5BArticle%...
    • Lepton はどこで見つけられるのか気になる
      アドオンストアのテーマでその名前を検索しても何も出てこない
      もしかすると Lepton は以前の Firefox UI で、古いリリースにだけ残っているのかもしれない
      記事は読んだが、何か見落としている可能性はある
    • 普段は UI をあまりカスタマイズせず、そのまま既定値に慣れようとするほう
      摩擦が少なく、インストールしたらすぐに既定設定へ適応できるのがよいから
      ところが Firefox の UI カスタマイズは設定しやすく品質も高いので例外になった
      メンテナンスされている感じがあるのも重要な利点
      これほど長く記事を書いてきたとは知らず、興味深く文書化もしっかりしていそうなので読んでみるつもり
    • テレメトリーがインターフェース項目の削除を正当化するために使われている点が特に興味深い
      個人的にはアドレスバーは非常に大きく、ボタンを 10 個入れてもスペースが余りそうに思う
      だから、削除できるものがもうなくなるまで全部削除したい、ということ以外に、あえて項目をなくす理由を想像しにくい
      UI/UX に詳しそうなので質問があります: 白黒アイコンはカラーアイコンより悪いという仮説を持っているのですが、関連する研究や合意はあるのでしょうか
    • インストール手順はとても簡単だった
      ただし、手順をまず単純にまとめて、高度なセクションは完全に下へ移すことを勧める 
      1. OS コマンドラインでスクリプトを実行  
2. `about:support` に移動し、起動キャッシュを消去をクリック

  • より良いブラウザーUXは、強く言えば縦タブから始まる
    横タブは6〜8個開いただけでも管理や追跡が難しくなる
    縦のネストタブでは、新しいタブで開かれるリンクが自動的に子タブになり、その構造と文脈を横タブよりはるかに簡単に推測できる
    ここにサイトごとの色を加えるとタブグループもより見やすくなり、タブツリーをブックマークして調査やドキュメント作成作業の進捗状態も保存できる
    CSSファイルとスクリーンショットがいくつかここにある: https://gist.github.com/aclarknexient/88673880d373864eee1927...
    ネストされ色付きのタブのスクリーンショットも追加する必要があるので、コメントを投稿したあとで入れる予定

    • 縦タブが好きで、複数の長期作業を行き来する自分のブラウジング方法には大きな利点がある
      タブはブックマークよりこうした用途に向いている。というのも、2024年になっても、どのブラウザーのブックマークマネージャーも未成熟で、ブックマークの整理がひどいからだ
      ネストタブにはそれほど惹かれないが、Firefox拡張のSideberyの「panes」やArcの「spaces」のように、タブサイドバーに表示されるタブグループをワンクリックで切り替える機能は強力だ
      特にパネル/スペースをブラウザープロファイルと結び付けるとさらに良い
      たとえば1つのブラウザーウィンドウを、通常のブラウジング、ショッピング、オンライン大学講義、ソフトウェア開発用に切り替えられ、必要なら特定のパネル/スペースを一時的に新しいウィンドウとして切り離すこともできる
    • 好みの違いは認めるが、自分はまったく逆だと強く信じている
      横タブバーで6〜8個以上開くと管理と追跡が難しいのはその通り
      ここ6か月Arcを使ったが、縦タブバーでも6〜8個開いていると管理と追跡が難しいのは同じだった
      結局4時間ごとに全部閉じてやり直すことになる
      より共感できる双方の主張は2つある
      第一に、横と縦でタブバーが占めるピクセル数を数えてみると、横より同じか少ないピクセルで済む実用的な縦タブバーを見たことがない
      第二に、モニターはほぼ常に縦より横のピクセル数が多いので、縦タブバーのほうがモニターのアスペクト比をうまく活用できるという主張もある
      これは16:9以上では正しいように感じるが、MacBookで一般的な16:10では個人的にはあまり当てはまらないように見える
    • 「物議」を醸したFF89のスクリーンショットを見ると、最も大きな変更の1つは、タブをより多くのパディングで再設計したことのようだ
      しかし上部のタブバーを隠し、Firefoxとよく馴染むTree Style Tabを使っているので、その変更にすら気づかなかった
      Firefox自体が特別好きというわけではないが、タブツリーのUX上のメリットが、Chrome/Safariが少しだけうまくやっている細かな点を上回るので迷わない
      ただし開発者ツールのため、フロントエンド作業にはChromeを使う
    • 自分のコメントに返信するのがHNのマナー違反なのか、それとも良い情報構造化なのか分からない :)
      Tree Style Tabのオプションページの詳細セクションには、リアルタイムで再読み込みされるユーザースタイルシート領域がある
      ブラウザーを再起動せずにフォント選択をテストするのに非常に便利だ
      私はAppleのSF Pro Condensedフォントを使うように変更した
      普段ほぼあらゆる場所で使っているIosevka Monoは、タブタイトルにはどこか合わなかった
      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;  
}
      前のコメントと同じリンクに、このCSSの結果スクリーンショットを追加した: https://gist.github.com/aclarknexient/88673880d373864eee1927...
    • ノートPCでは縦タブがいまいちになり始める
      Firefoxで自動非表示サイドバーのハックが壊れ、直すのが面倒だったので、今はタブを100個も開いていないのに数インチ分の灰色の空白ができる
      たいてい5〜10個程度しか開いていない
      さらに腹立たしいのは、最近の多くのWebサイトがユーザーエージェントではなくブラウザーのビューポートサイズでモバイル/デスクトップを判定する点だ
      すでにツリースタイルタブのせいで横幅を1インチ失っているので、サイトがiPadだと勘違いし始める前に縮められる幅がほとんどない
      そのため事実上ブラウザーを全画面で使うしかなく、そうしないとテキストの折り返しがめちゃくちゃなハンバーガーメニューだらけになり、ナビゲーションがさらに悪くなる
      ほとんどの場合サイドバーを完全にオフにしなければならず、タブを切り替えるたびにクリックが数回増える

  • この記事は、テーマ作者がUXルールに基づいて客観的により良いFirefoxテーマを作ったのだと説得しようとしているように見えるが、変更の大半は個人の好みに見える
    よく作られ、メンテナンスされているのは確かだが、個人的には視覚的にそれほど魅力的ではなく、一部はより複雑に見える
    人によって好みは異なり、Firefoxは1つのデザインを選んだが、こうした変更もサポートしているので、それ自体は良い
    ただし作者が、自分の好みが経験的に正しいことを証明しようとしているように見える点は少し滑稽だ

    • UIは確かに好みの問題なので、配布版を3つの形態で作った
      ただしミュート中なのに読み込み中かどうかの表示がなかったり、タブの区切り線がなかったりするのは分かりにくかった

  • Firefox がタブを台無しにして以来、既定のブラウザとして使うのは諦めた
    たまにテスト用に開いてみて、まだタブではなくボタンのように見えるなら、半年後くらいにまた試そうと心の中でメモしている
    明るいテーマでは、明るいグレーの上に白いボタンなので特に侮辱的だ
    Windows のシステムテーマ設定にもきちんと従わない
    Windows では、アプリは明るいテーマのままにしつつ、タスクバー、スタートメニュー、タイトルバーには色を適用できるが、Edge はこれを理解しているし、Chrome はそうでなくてもコントラストは十分だ
    Firefox は完全に的外れだ

    • Firefox をサブブラウザとして使っているが、起動するたびにまず邪魔をして割り込み、前回以降に追加された Pocket や VPN などの新しい変更や機能を知らせてくる
      頼むからやめて、こちらがしに来たブラウジングを始めさせてほしい
      アップデートの合間に Office 365 や Game Pass を押し付けてくる Microsoft のダークパターンをまねしないでほしい
      そういう機能の宣伝は、まだ Firefox をインストールしていない人にすればいい。私はすでに「顧客」なのだから、煩わせないでほしいということだ
      だから主に Chrome を使っている
      より劣っていて、私を監視できるとしても、少なくとも進路をふさぎはしない
    • Sidebery[1] をインストールして、標準のタブを非表示にすれば[2]いい
      これが道だ :)
      [1] https://addons.mozilla.org/en-US/firefox/addon/sidebery/
      [2] https://superuser.com/a/1424494

  • タブが「ボタンのように見えること」がまったく気にならない人がほかにもいるのか気になる
    時々、自分だけなのではと思う
    初めて使う人たちにとって本当にそんなに気になるものなのか分からない

    • Firefox を毎日使っているが、これが「問題」と見なされていることすら知らなかった
      このコメントを見るまで一度も考えたことがなく、タブバーは今のままで完全に使えると感じているので、考え直すこともなさそうだ
    • タブがボタンのように見えること自体は、あまり気にならない
      むしろタブ形状の一般的な代替案で、Windows 95 のタブコントロールにもタブをボタンのように見せるモードがあったと記憶している
      もともとタスクバーにも使われていた気がするし、90年代から mIRC でチャンネル/ウィンドウの切り替えにも使われていた
      ただ、この特定の「タブボタン」の見た目は個人的には好きではない
      細長い錠剤みたいで飲み込みにくそうにも見えるし、以前のようにタブらしく見えるものに慣れているのに、わざわざ変える理由を感じない
      幸い Firefox は見た目をカスタマイズできるので、userChrome.css でより好みに合うように変えて使っている
    • Firefox の使用には影響しない
      ただ、あるべき理由のない隙間を入れてピクセルを無駄にしている
      ここまで来ると、ばかげた UI 判断に慣れてしまい、組織が出してくるものをそのまま受け入れて流されるようになる
      一貫性や見つけやすさに関心があるところはほとんどなさそうだ
    • ブラウザだけでなくファイルマネージャやエディタなど、タブを持つほかのものと十分に違っていて気になる
      セマンティクスをなぜ全部窓の外へ放り投げるのか分からない
      ボタンのように見えるが、ボタンのようには動作しない
    • 気づいたこともないし、指摘された後でも問題には感じない
      問題だと感じる人たちには、かなり難癖のように見える

  • みんなそれぞれ不満を書いているので、自分のも書いてみる
    ブックマークフォルダツリーが大きい場合、「Add Bookmark」UI の小さなポップアップで新しいブックマークを追加する場所を探してたどる作業はひどい
    ブックマークサイドバーでは名前で検索できるが、そのブックマークがどこにあるかは分からない
    Bookmark search plus 2 のようなブックマーク検索アドオンが解決してくれるが、本来は必要ないはずだ
    追記: 右クリック -> Show in Folder を知った。これは素晴らしい
    ただし最高の UI ではなく、前述のアドオンのほうが今でもずっと直感的だ
    複数のサイドバーを同時に置けない
    そのため、縦型タブを扱うための Tree Style Tabs と、ブックマークフォルダ/検索を同時に開けない
    あり得ない
    実質的にはこれがすべてで、ほとんどはブックマーク処理に関するものだ
    それ以外の UI が良いのか、それとも慣れてしまって欠点が見えないのかは分からないが、Firefox はかなり快適に使っている
    ほかの人たちのように、スタイルの再設計に大きく文句を言う必要はあまり感じなかった

    • 不明な理由で、どのブラウザでもブックマークは悲惨なほど注目されてこなかった
      20年前のブラウザを持ち出しても、ブックマーク管理はほとんど同じか、場合によってはむしろ少し良い
      ブックマーク改善は魅力的なテーマではないので、誰も気にしないようだ
    • 以前、大きなサイドパネルを開いていた Ctrl+Shift+B ショートカットに筋肉記憶が残っているのではないかと思う
      今は細い横バーだけが表示される
      私もそのせいでこの再設計には確かにいらだつが、「ブックマーク管理」ショートカットである Ctrl+Shift+O を見つけた
      ブックマークが入ったより大きなポップアップウィンドウを開いてくれて、今のところ以前のサイドパネルとほぼ同じくらい便利に見える
      ブックマーク検索もでき、右クリックしてコンテキストメニューの「show in folder」を選ぶと、階層構造のどこにあるかも表示してくれる
      ただ、私のブックマークはすべて「other bookmarks」にあるので、あまり使うことはなさそうだ

  • 最大の「不要な Firefox UI 変更」への不満は、4年前に browser.urlbar.clickSelectsAll が削除されたこと
    予想どおり Mozilla は気にしていない
    バグレポートを読むと、ユーザー敵視以外では説明がつかない: https://bugzilla.mozilla.org/show_bug.cgi?id=1621570
    どんな UI のどんなテキストフィールドも、こんな動作はしない
    Mozilla がなぜこの「機能」を配布し、同時に無効化できるオプションまで削除したのか理解できない
    一部のユーザーが好むのは構わないが、こちらの忌々しいオプションを奪って強制的に押し付けるべきではない

    • 実際、Mozilla の論理は、他の主要ブラウザがすべてそう動作しているというものだった
      Chrome で確認してみると、実際に Firefox のように動作する
      ユーザー敵視という点では、新しい動作を嫌う人たちはテレメトリを有効にしないので、望む機能を享受する資格がないという論理だった
      Firefox の主な強みが プライバシー保護志向のモデル であることを考えると、かなり皮肉だ
    • 完全に同意
      4年たった今でも毎日つまずいている
      皮肉なことに、私が普段失敗するのは、この変更が助けるはずだったまさにそのケースだ
      URL 全体を選択したくて本能的にダブルクリックすると、1回目のクリックで全体が選択され、2回目のクリックで選択範囲が1語に縮む
      一瞬戸惑ってからまたクリックし始めるが、今度は URL 全体を選択するにはさらに3回クリックしなければならない
      これが驚くほどイライラする
      トラッカーの説明は「いつか将来、これを正当化する別の何かをするかもしれない」という程度に見える
      4年後の今でも、そんなものは見当たらない
    • この機能が Firefox から削除されたあと Vivaldi に移った
      Vivaldi は今でもこの動作を選べるようにしてくれる
      クリック時の全選択をオフにできる他の Unix ブラウザがあるのか気になる
      おおむね Vivaldi には満足しているが、選択肢がもっとあるとうれしい
    • いまだに壊れている
      「Paste and Go」機能が正しく動作しないからだ
      常識的には「Paste and Go」は、クリップボードのテキストをカーソル位置に正しく挿入する「Paste」のあとに、「アドレスバーのアドレスへ移動」を実行するのと同じであるべきだ
      ところが、自動選択された URL を解除してその中にカーソルを置いたうえで「paste and go」を使うと、Firefox は既存の URL を無視してクリップボードのテキストへ直接移動しようとする
      ユーザーが意図しない URL を訪問するようだませるため、セキュリティリスクにもなり得る
      直す気がないなら、実際の動作に合わせて「Clear, Paste, and Go」に名前を変えるべきだ
    • 「Mozilla は気にしていない」と言うが、内部オプションはあくまで内部オプションであり、大企業向けサポート契約のような場合でなければ、どのブラウザも大して気にしない
      開発やモバイル端末管理に関係しない用件で about:config に入らなければならないなら、更新後も動き続けると期待するのは難しい
      すべてのオプションは保守しなければならないコードだ
      推測だが、そのオプションを使っていたコードを書き直す際、公式にサポートしてもいない機能を再実装しない、より速く安い道を選んだのだろう

  • Firefox の本当の UI/UX の悪夢は レガシーの残骸 だ
    基本的なブラウザ機能ごとに、まるでそれぞれ別のビューで開くように感じる
    設定はブラウザタブ、履歴はサイドバーだ
    ただしそれは Ctrl+H の場合だけで、履歴の管理は Ctrl+Shift+H で別ウィンドウが開く
    ブックマークとダウンロードもそのウィンドウ、Firefox 3/4 時代から引きずってきたような Library ウィンドウだ
    ダウンロードには小さなポップアップもあるが、Ctrl+J とダウンロード管理はそのウィンドウを開く
    ブックマークは Ctrl+Shift+O がそのウィンドウを開く一方、Ctrl+B はサイドバーを開く
    プロファイルは冗談のようにユーザー向けとして使える機能が実質的になく、about:profiles にレガシーに見えるインターフェースが隠れている
    パスワードはブラウザタブで開くが、他のどれともあまり合わない独自の見た目だ
    まとまりがあるのは、設定とアドオンがどちらもブラウザタブで、互いにリンクがあることくらいだ
    残りはブラウザタブ、ウィンドウ、サイドバー、ポップアウト、ばらばらの UI が入り混じった混乱状態だ
    かなり長い間このようにぐちゃぐちゃで、単一のビジョンや整理しようとする実質的な努力がないため、今後もそうなりそうだ
    最近追加された Firefox View も、また別の UI を上乗せするもう一つのものに見える
    そこにも履歴があるので、履歴を見る方法が3つほどあることになり、少なくとも1つは多すぎる
    もしかすると Library ウィンドウの機能を View タブへ移そうとする試みなのかもしれないが、現時点では混乱を増やしているだけだ
    ある程度誇張しているのは確かだ
    他のブラウザも最近はサイドバーを好み、ポップアップやメニューを持っているからだ
    それでも特に目立つのは、あちこちで出てくるレガシーに見える Library ウィンドウと、設定/アドオン/パスワードのようにブラウザタブで開く機能との対比だ
    結局、ブラウザ機能を開いたときにどんな形で出てくるのか予測しにくく、最初は確実にそうだし、慣れても「ただそれぞれ勝手に開く」という感じが残る
    慣れはするが、それでも依然としてめちゃくちゃだ

    • 一部の機能にポップオーバーとウィンドウが両方あってもよいと思う
      ただし賢く実装されている必要がある
      たとえば Safari ではダウンロードは基本的にポップオーバーだが、そのポップオーバーを「切り離して」ウィンドウにできる
      2つのユースケースをどちらもサポートしつつ、一貫性も保っている
      Firefox にもこういう考え方がかなり必要だ

  • Proton UI について人々があまり言わない最悪の点は、最新の 1080p 以上のモニター を使っていなければ客観的に大きな後退だということだ
    私のノートPCは古い X220 ThinkPad なので、その変更は画面スペースを無意味に大量に浪費し、実際の作業効率に影響した
    より新しいハードウェアを買う余裕がない、あるいは何らかの理由で使いたくない人たちに被害を与える、ユーザー敵視的なソフトウェアエンジニアリングの流れの一部だ
    今回の場合は、すべてを肥大化した Electron や React アプリにするわけでもなく、Mozilla がまだ Firefox を気にかけているように見せる表面的な印象を作るために、理由もなく UI を悪く変えただけだ
    Proton は私の使い方にはあまりに合わないので、カスタマイズした userChrome を使っている