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

Firefox のデフォルト UI 改善方法

• Firefox v89 以降、UI をめぐる論争があり、それに対応するこのリポジトリは人気を得た。
• Waterfox と Floorp ブラウザーもこのテーマをデフォルトテーマとして採用している。
• 2023 年時点で Mozilla は Windows 7 と Windows 8 のサポート終了を決定。v115 が最後のサポート版で、2024 年 9 月まで使用可能である。

原則

• UI/UX デザインに対して、主に 3 つ、細かくは 16 の基準を設けている。
• A/B テストを行えないため、ユーザーの行動を予測することが重要。
• 直感性、シンプルさ、可視性、適応性、一貫性、予測可能性、操作性、効率性、明確性、近接性、サイズ、反応性、柔軟性、アクセシビリティ、機能性、文脈性、調和、楽しさ、互換性などを考慮する。

問題点

• Firefox v88 の Photon UI と v89 の Proton UI の間の問題点を指摘している。
• タブがボタンのように見えること、パディングが大きすぎること、アイコンだけでは読み取りにくいことなどが主な問題点である。

タブの問題（適応性、操作性）

• 適応性と操作性を踏まえて、タブデザインの問題点を分析している。
• Apple Safari の事例を挙げ、ユーザー不満に基づくタブデザインの変更例を紹介している。

空間が多すぎる問題（可視性、近接性、サイズ、文脈性）

• 可視性、近接性、サイズ、文脈性を考慮して、空間が多すぎることがなぜ問題なのかを説明する。
• Fitts の法則を使って、クリックしやすい UI を設計する方法を説明する。
• Google Chrome の UI 間隔との比較により問題点を分析する。

アイコンの役割（明確性、アクセシビリティ）

• 明確性とアクセシビリティを考慮して、アイコンの重要性を説明する。
• 2023 年の Chrome デザインリフレッシュの事例を通して、アイコンの重要性を強調する。

タブの再デザイン

• タブの状態に対するさまざまなデザイン選択肢を説明し、Proton UI での一般的なミスを指摘する。
• タブの幅に応じて、スマートで効率的に動作する設計を行う。

分布

• 良い UI への個人的基準はあるが、ある程度は「好み」の問題である。
• Lepton、Photon、Proton のタブを比較し、それぞれのコンセプトに合う事例を選んでいる。

アイコン追加とパディング調整

• アイコン追加とパディング調整で、以前の不満を解消する。
• Edge、Chrome、Lepton のメニューアイコンを比較することで、Lepton のアイコンデザインの優位性を強調する。

テーマ

• 多様な OS と設定に適応する UI を提供する。
• Windows 7 から macOS まで、さまざまな OS のデザインに準拠する。

相互作用

• ユーザーが何が起きているか理解するのに役立つ相互作用と、ユーザーを楽しませる相互作用を設計する。

結論

• このテーマは、慣習、心理学、研究結果を考慮して、既存テーマの優れた特徴を継承している。
• OS、ダークモード、カスタムテーマ、インタラクションを状況に応じてサポートする。

GN⁺の意見

• 本稿で最も重要なのは、ユーザー体験を向上させるためのデザイン原則と問題解決アプローチを深く分析している点。
• Firefox ユーザーにとって、このテーマはより良いブラウジング体験を提供し得る実用的な代替案となり得る。
• UI/UX デザインに関心がある人には、デザイン判断の背景とその影響を理解するのに役立つ有益な資料となる。

[GN⁺]

Hacker Newsコメント

• 新しいUIの主な問題は、すべてが過剰に大きいことにある。これはスマートフォンの画面には適していても、一般的なデスクトップ画面ではスペースの浪費になる。これは記事で指摘されているようにパディングが増えていることも原因だが、「compact」UI密度オプションを削除したことも一因だ。ただし、about:configでbrowser.compactmode.showを設定することで再び有効化できる。このオプションは「サポートされていない」と表示されるが、何年もそのまま維持されている。
• Firefoxの人気テーマであるLeptonの作者として、Mozillaの見劣りする判断をどのように改善したか、そしてそれがどうやって人気を得たかという視点で私が下したいくつかの決定を見られる。この記事はシリーズの一部だ。
• ブラウザのUX改善は、縦タブから始めるべきだと強く思っている。水平タブでは6〜8個のタブを開くと管理や追跡が難しくなる。縦のネストタブを使えば、新しいタブで開いたリンクが自動的に子タブになる。これにより、水平タブよりも構造と文脈を理解しやすくなる。ここにサイトを表す色を追加すれば、タブグループがより見やすくなる。さらに、調査やドキュメント作業の進捗を保存するためにタブの「ツリー」をブックマークできる。CSSファイルといくつかのスクリーンショットはここにある。
• この投稿は、テーマ作成者がUX原則から出発し、客観的により良いFirefoxテーマを作ったと読者を納得させようとしているが、変更の大半は個人的な好みとして見える。確かにしっかり作られ、管理されているが、個人的には視覚的に魅力的ではなく、部分的にはむしろ複雑に見える。人それぞれ好みは異なり、Firefoxはひとつのデザインを選択したものの、こうした変更をサポートできるようにしているのは良いことだ。よいことだ。しかし、作者が自分の好みが経験的に正しいと実証しようとするのは、やや馬鹿げているようだ。
• Firefoxがタブを台無しにした後、デフォルトブラウザとして使うのをやめた。ときどきテストのために開くが、ボタンの代わりにタブを見るたびに、半年後にもう一度試してみようと心の中でメモしている。特にライトテーマは、薄いグレーの背景に白いボタンがあり、さらに恥ずかしい。さらに、Windowsのシステムテーマ設定を尊重しない。Edgeは理解するが、Chromeはそうではないものの、少なくともコントラストは十分だ。Firefoxは完全に見落としている。
• タブが「ボタン」であることを全く気にしない人もいる。初めて使う人にとって本当に不便だろうか？ときどき自分だけそう思っている気がする。
• 皆がそれぞれのこだわりを述べているので、ここに私の不満を挙げておく:
  • ブックマークフォルダにたくさんある大きなツリーがある場合、「ブックマーク追加」UIの小さなポップアップで新しいブックマークを追加するのは最悪だ。
  • ブックマークサイドバーは名前で検索できるが、ブックマークがどこにあるかは見つけられない。ブックマーク検索Plus 2がこれを解決するが、必要ないはずだ。
  • 複数のサイドバーを持つことができない。そのため、縦タブ処理用のTree Style Tabsとブックマークフォルダと検索を同時に開くことができない。信じられない。
  • 実際それだけだ。大半はブックマーク処理に関するものだ！残りのUIは、良いものなのか、それとも慣れていてもう変な点が見えなくなっているのかがよくわからない。でもFirefoxにはかなり満足している。僕も他人のようにリデザインに不満を言う強い必要性を感じない。
• 最も大きな「不要なFirefox UI変更への不満」は、4年前にbrowser.urlbar.clickSelectsAllが削除されたことだ。言うまでもなく、Mozillaは気に留めない。バグレポートを読む限り、これは明らかにユーザー非友好的としか言えない。ほかのどのテキストフィールドもこのようには動かない。Mozillaがこの「機能」を出し、選択しないオプションを外した理由は理解できない。
• Firefoxの現実的なUI/UXの悪夢は、レガシーの遺物にある。すべての標準ブラウザ機能が別々の別画面で開かれる。設定はブラウザタブで、履歴はサイドバーで開くが、履歴を管理するには？別ウィンドウで開かれる。ブックマークとダウンロードもそのウィンドウで開く。ダウンロードには小さなポップアップがあるが、ダウンロード管理はそのウィンドウで行われる。ブックマーク - ctrl+shift+oはそのウィンドウを開くが、ctrl+bはサイドバーを開く。プロフィール？ユーザーフレンドリーなプロフィール機能はないが、about:profilesは隠されたレガシーインターフェイスのように見える。パスワード？ブラウザタブで開き、他とまったく一致しない独自の見た目をしている。
• Proton UIの最悪な点で誰も触れないのは、現代的な1080p（あるいはそれ以上）のモニターを使わない場合、客観的に見て大幅アップグレードに見えることだ。私のノートPCは古いX220 Thinkpadなので、その変更は画面スペースを無意味に浪費し、効率的に作業する能力に影響する。これはElectronやReactアプリを巨大化させるのと同じではなく、MozillaがまだFirefoxを気にかけているかのように見せるために、不要にUIを変更したように見える。Protonが私にとってあまりにも嫌だったので、カスタムuserchromeを実行している。