Mozilla Flux

Mozilla関係の情報に特化したブログです。

Firefoxのデザインと「ビジュアル階層化」の関係

Firefox 3のデフォルトテーマである"Strata"。FirefoxのUIデザイナー、Alex Faaborg氏は、"Firefox Themes: The Contention Between Visual Hierarchy and Toolbar Customization"の中で、Strataのデザインが、「ビジュアル階層化」(visual hierarchy)という設計思想に基づくと述べている。

「ビジュアル階層化」とは、ユーザーの注意を特定の要素に引きつけると同時に、別の要素から注意をそらすため、「色、コントラスト、質感、形、位置、方向性、サイズ」をコントロールしようという考え方だ。とりたてて目新しいものではなく、AV機器のリモコンやWebデザインで既に繰り返し実践されているアイデアにすぎない。このアイデアをWebブラウザのデザインに取り込むと、どういうメリットがあるのだろうか。

より軽くてシンプルな外観を作ることができる

たくさんのボタンをただ並べるだけでは、ゴテゴテした印象になるばかりか、ユーザーが操作に迷う。そこで、機能的なまとまりに合わせてボタンを一体化させ、すっきりした外観にすれば、使いやすさもアップする。iPodのコントローラがそのいい例だ。

Firefoxでは、「戻る」と「進む」のボタンを一体化させた。

主要なコントロールボタンの比重を大きくできる

Firefoxでは、「戻る」ボタンを大きく表示させている。これは、最もよく使うボタンの場所をユーザーが瞬時に把握できるようにするための工夫である。

コントロールボタンの差異化をやりやすく

これは、ビデオのリモコンをイメージするとわかりやすい。大きくて目立つ一時停止ボタンを真ん中に据え、上に再生ボタン、下に停止ボタン、右に早送りボタン、左に巻き戻しボタンをそれぞれ配置する。このとき、周囲のボタンは中央のボタンと識別しやすいように、形や大きさを変えておくことも大事だ。

最も印象に残りやすいボタンの周囲に、関連性が強く、かつ使う頻度の高いボタンを、適切な方向性をもって配置すること。この発想をFirefoxのデザインに反映させた結果、一体化した「戻る」「進む」ボタンは他のボタンとの区別がより強調され、「更新」と「中止」のボタンはあえて小さめに作られた。

アイコン的な形を作る

簡単に言えば、デザインにその製品を象徴させてしまうということだ。Firefoxの一体化した「戻る」「進む」ボタンは、鍵穴(keyhole)の形をしていて、このデザインはどのOS版でも共通になっている。その背景には、この形を見たらFirefoxだとユーザーに認識してもらおうという意図がある。

実現できなかったもの

試作品の段階では、「ホーム」ボタンを外したうえ、一体化した「戻る」「進む」ボタンと「更新」ボタン、「中止」ボタンはグループ化され、ロケーションバーとつなげられる計画だった。理由は、これらのボタンがロケーションバーの内容に影響を与えるものであることを視覚的にはっきりさせるため。「ホーム」ボタンを含めなかったのは、これがむしろブックマークの一種なので、ブックマークツールバーに置くほうが適切だと考えられたからだ。

だが、β版をテストしたユーザーから反発が出て、「ホーム」ボタンを元の位置に戻した。また、ロケーションバーとつなげる計画も実現できなかった。理由の一つは、カスタマイズとの兼ね合いだ。ボタンをいろいろ変更しても、うまくグループ化されて、ロケーションバーとつながるようにするには、複雑な処理が必要になる。プログラムが複雑化し、パフォーマンスも低下してしまう。このパフォーマンス低下のおそれが、もう一つの理由である。

このように、「ビジュアル階層化」という設計思想は確実にStrataのデザインに反映されているのだが、一部では妥協も強いられている。そこが開発の難しいところであり、逆に言えば効果的で実現されやすいデザインをどう作るかがUIデザイナーの腕の見せ所でもあるといえる。