【翻訳】ブラウザとGUIクローム

www.nngroup.com

要約:「クローム」は、ユーザーデータとWebページのコンテンツを囲むユーザーインターフェイスの塊です。クロームが肥大化すると、利用可能な描画領域の大部分を侵食してしまう可能性もありますが、量が適切であれば、ユーザビリティを向上させます。

ユーザーインターフェースデザインにおける「クローム」とはどういう意味なのでしょうか?─ 先日行われた「モバイルとタブレットのためのビジュアルデザイン」の講座で、参加者からこんな質問がありました。誰かが私たちに基本的な質問をするときはいつも、より多くの人が同じように答えを欲しがっていると仮定します - したがって書かれたクロームに関するこの記事では、

  • 以下のように定義します:クロームは、ユーザーに画面のコンテンツに関する情報や操作のコマンドを与える視覚的なデザイン要素である(コンテンツの一部であるのとは対照的)。これらのデザイン要素は、オペレーティングシステム、ウェブサイト、アプリケーションなどの基本システムによって提供され、ユーザーのデータを取り囲みます。
  • 偶然ではありませんが、「クローム」はGoogleのウェブブラウザーの名前でもあります。

ロームという言葉を誰が言い出したか知りませんが、1950年代のアメリカの大型車にメタルクロームが使われていたことを視覚的に類推したのではないでしょうか。車のボディ(座る部分)の周りには、バンパーやテールフィンなどにピカピカのクロームが施されていますよね。

それと同じように、最近のGUIでは、画面の端にクロームが位置し、ユーザーのデータ専用である中央のエリアを取り囲んでいるのです。

システムレベルの違いによるクロームの違い

以下は、「基盤となるシステム」によって異なるクロームの例です。

  • Windows PCの場合、基盤となるシステムはWindows OSです。Windows 7では、クロームは、スタートボタン、タスクバー、システムトレイ、ごみ箱で構成されています。特に、ユーザーがシステムに付属するガジェットに拘るような場合は、ガジェット領域もクロームと考えることができます(ユーザーの惰性と標準化の力によって、多くの人がそうしているのです)。
  • ワープロなどのアプリケーションソフトでは、メニューバー、リボンツールバー、ルーラー、スクロールバー、そしてWordの類語辞典バーやPhotoshopの色見本パレットなど、さまざまな専用ペインにクロームが表示されます。
  • ウェブブラウザでは、URLフィールド、ブラウザツールバー、ブラウザボタン、タブ、スクロールバー、ステータスフィールドがクロームに含まれます。
  • モバイルアプリでは、画面上部にステータスバー、下部にコマンドアイコン付きのタブバーが表示されます。また、ステータスバーの下にナビゲーションバーがある場合もあります。
  • ウェブサイトでは、クロームは、ナビゲーションバー、フッター、ロゴ、ブランディング、検索ボックスなどを含んでいます。

ロームの肥大化:ピクセル食べすぎ注意

ロームの欠点は明確です。ロームは画面のスペースを占有するため、目的のコンテンツやデータを置くスペースが少なくなることです。これは、タブレット端末やPCよりも画面占有率が高いモバイル端末では特に深刻です。しかし、私の30インチのデスクトップモニターでも、WindowsExcelのクロームを組み合わせると、スプレッドシートでは理論上画面に収まるはずの80行のデータが67行しか表示されないことになるのです。つまり、クロームがなければ、約19%多くのデータを確認することができるのです。

このスプレッドシートの例では、クロームのもう一つの欠点が示されています。クロームは、システムが他のシステムの層の中に入れ子になり、それぞれが独自のクロームを持つことによって蓄積されます。例えば、あなたがFacebookを利用しているとします。一般的なデスクトップ・ブラウザーのウィンドウでは、ユーザーのFacebookのニュースフィードはウェブページの約48%しか占めておらず、残りの52%はFacebookのクロームと無駄なスクリーンスペースが占めているのです。(私たちの定義によれば、広告は無駄なので真のクロームではないが、それでも塊の一部であるため、ここでカウントしています)。さらにブラウザとOSのクロームを差し引くと、ユーザーのニュースフィードはスクリーンスペースの40%以下しか許されていないことになります

9年前にさまざまなウェブサイトのホームページを分析したところ、実際のコンテンツはユーザーの画面のわずか20%しか割り当てられていなかったのです。現在の大型モニターでは、OSやブラウザのクロームが消費する相対的な領域はそれほど肥大化していないため、Facebookが許容している40%は、おそらく主要なウェブサイトの代表的なものだと思われます。

蓄積したクロームが描画領域の半分以上を占めることも多いので、ロームの肥大化に意識的であることがガイドラインに含まれることになります。

もうひとつは、一部のクローム一時的に隠すなど、必要なときだけ表示させる方法を考えることです。ただ、これを行うのはとても危険ではあります。なぜなら、目に見えないものは、しばしば頭にも残らないからです。そして、ユーザーインターフェースのデザインにおいて、短期的な記憶力を頼りにすることは絶対にできません。こういった方法でもクロームが機能するのは、以下の場合のみです。

  • シンプルかつ確実な操作でクロームを表示させる(わかりにくいジェスチャーや誤って起動してしまうような操作は使わない)。
  • 学習を阻害するような逸脱行為や例外を排除し、過度なほどの反復を通じて、非表示となったクロームの存在をユーザーの長期記憶に刻み込むような強固な一貫性を提示する。

ロームのメリット

コストは高くつきますが、クロームにはかなりの利点があります。

  • ロームは、常に見えるところにあるコマンドやオプションを提供することで、ユーザーを助力します(少なくとも、私のガイドラインに従えば、簡単に明らかになります)。また、クロームは同じ場所に表示されるため、ユーザーはクロームの位置を確認する必要がありません。さらに、ユーザーは特定のウェブページやコンテンツのデザイナーの気まぐれから解放されます。これが、戻るボタンがウェブ上で最も人気のある機能の1つである理由の1つです。クロームは画面のピクセル数では場所を専有してしまうかもしれませんが、ユーザーは指先ひとつで、不快なウェブページや無駄なウェブページからすぐに逃げ出すことができるのです。
  • ロームは、フレームワーク内に現れるあらゆる種類のコンテンツやデータに対して機能する汎用的なコマンドを提供しています。常に同じコマンドを使用するため、ユーザーは覚えることが少なく、コンピューター上で起きることよりも実世界のニーズに集中することができます。
  • ロームユーザーインターフェースの一貫性と標準化を推進し、学習しやすく、ユーザーが自分の体験をよりコントロールしやすいようにします(もちろん、ユーザーを混乱させるような奇妙なクロームを独自に考案するのではなく、標準に従った場合のみ適用されます)。

バランスさえ保てば、クロームユーザビリティにとって良いものです。ただ、やりすぎは禁物ですよ。