UI密度（Density）の意味とデザイン方法
(matthewstrom.com)インターフェースの密度は低下している
- 現在のWebサイトやアプリケーションを2000年代と比較すると、ソフトウェアが間延びしている傾向を無視するのは難しい。
- UI密度とは何か？
- UI密度は、ある瞬間のインターフェースの見た目そのものではない
- インターフェースが複数の瞬間にわたって提供する情報量に関係している
- デザイン上の意思決定が、それらの瞬間をどのようにつなぎ、ソフトウェアが提供する価値とどう結びつくかに関するものである
視覚的密度（Visual density）
- 密度はまず視覚から考えられがちである
- 視覚的密度とは、与えられた空間の中でどれだけ多くのものを見られるかを意味する
- 視覚的に密度の高いソフトウェアインターフェースは、画面上に多くの要素を表示する
- 視覚的に密度の低いインターフェースは、画面上に表示する要素が少ない
- 例: Bloomberg Terminal
- Bloomberg Terminalは視覚的密度の代表例である
- 1つの画面に、主要な市場指数のスパークライン、詳細な出来高分布、数十の行と列を持つテーブル、最新ニュースの見出し、キーボードショートカットやクイック操作用UIの案内などが表示される
- 例: CraigslistとMcMaster-Carr
- Craigslistは、何百ものシンプルなリンクと検索・フィルターインターフェースにより、視覚的に高密度である
- McMaster-CarrのWebサイトも似たデザイン要素を共有しており、小さな空間に多数の製品バリエーションの詳細を列挙している
- 密度認識の直感的判断
- こうしたWebサイトの密度に対する意見は、ほんの数秒で形成される
- こうした判断は、潜在意識の中で素早く直感的に行われる
- しかし、このような速い判断は偏っていたり、信頼できなかったりする可能性がある
- 視覚的密度の例示画像
- 2つの長方形の例:
- 左: 無作為に並べられた多数の点
- 右: 同じ数の点が行と列にきれいに配置されている
- ほとんどの人は右の画像の方が密度が高いと感じる
- 別の例示画像:
- 左: 行と列にきれいに配置された多数の点
- 右: 2つのグループに分かれてきれいに配置された同数の点
- 点の数が同じでも、グループに分けると密度に対する認識は変わる
- 2つの長方形の例:
- 視覚的密度の不確実性
- デザインにおいて完全に客観的であることはできない
- それでも密度について対話するには、一貫性があり、意味があり、有用な定義を目指すべきである
情報密度（Information density）
- エドワード・タフティ（Edward Tufte）は『The Visual Display of Quantitative Information』でチャートやグラフのデザインを論じている
あらゆるグラフィックのインクには理由があるべきであり、その理由は新しい情報を提供することでなければならない。
- データインク（Data-ink）
- データインクとは、ある可視化における有用な部分を意味する。
- データではない視覚要素は取り除くべきである。
- データインクはチャートが占める空間とは異なる。情報密度に関する概念である。
- 情報密度の計算
- 情報密度は、チャート内のデータインク量を、そのチャートを印刷するのに必要な総インク量で割ることで計算できる。
- データインクの定義は主観的になり得るが、重要なのは比率をできるだけ1に近づけることである。
- 比率を高める方法:
- データインクを追加する: 追加の有用なデータを提供する。
- 非データインクを削除する: データを伝えないグラフィック部分を取り除く。
- 例
- 余分なインクが多いグラフィックの例と、少ないインクで多くの情報を伝える改善例。
- 情報密度には上限があり、インクを削りすぎたり、情報を追加しすぎたりすることがある。
- 受け手も重要である。上級ユーザーは高密度を、小学生は低密度を好むかもしれない。
- 情報密度と視覚的密度の関係
- 情報密度が高いほど、視覚的にも高密度に見える傾向がある。
- 例: 1885年のE.J. Mareyによる列車時刻表の可視化。到着・出発時刻が小さく高密度な空間に表示されている。
- タフティはデータ密度を重視し、データを合理的に最大化すべきだと主張した。
- Shrink Principle
- グラフィックは大幅に縮小できる。
- 情報密度はチャートやグラフには有用である。
- インターフェースにも適用できるだろうか？
- インターフェースでの情報密度の適用
- 情報は画面にも適用できる。
- インターフェースの各部分は、できるだけ多くの情報を見せるべきである。
- インクをピクセルと考えたくなるが、インターフェースには、要素間の関係理解を助ける区切り線、構造的要素、サインポストが必要である。
- Shrink Principleに従ってあらゆる余白を取り除きたくなる誘惑がある。
- しかし、一部の余白は視覚要素と同じくらい重要な意味を持つ。影、グラデーション、色の強調の役割も考慮すべきである。
- 情報密度は有用な概念だが、全体像の一部にすぎない。
- インターフェースにおけるすべてのデザイン上の意思決定を、より客観的かつ定量的に理解する方法を模索すべきである。
デザイン密度（Design Density）
- デザイン上の意思決定という観点から密度を定義する最初の課題は、何が意思決定に当たるのかを見極めることである。
- デザイン上の意思決定を理解する
- UI、UX、プロダクトデザインにおいて、私たちは情報を伝えるために意識的または無意識的に多くの決定を下している。
- なぜある選択が意味を伝えるのか、どの選択が単なる美的判断なのか、どの選択が実際に重要なのかを問う必要がある。
- ゲシュタルト原則
- 20世紀のドイツの心理学者たちが研究した、人間が形態やパターンを理解する方法。
- ゲシュタルト（Gestalt）という用語は「形態」を意味する。
- この研究で、いくつかの基本的なデザイン法則が見いだされた:
- 近接性（Proximity）: 近くにあるものを1つのグループとして認識する。
- 類似性（Similarity）: 形、サイズ、色などが似たオブジェクトは互いに関連して見える。
- 閉合性（Closure）: デザインの隙間を補完し、全体の形を認識する。
- 対称性（Symmetry）: 対称的な形を中心点を基準にグループ化する。
- 共通運命（Common Fate）: 同じように動くオブジェクトを一緒にグループ化する。
- 連続性（Continuity）: 重なり合っているオブジェクトを別個のものとして認識する。
- 過去経験（Past Experience）: 見慣れた形やパターンを、未知の状況でも認識する。
- 図地関係（Figure-Ground Relationship）: 2D画像の中で前景要素と背景要素を区別する。
- ゲシュタルト原則がUIデザインに与える影響
- 類似性の原則のおかげで、同じサイズ、フォント、色のテキストは同じ目的を表す。
- 近接性の原則は、チャートが見出しの近くにあると、その見出しがチャートを説明していることを示す。
- 過去経験と図地関係の原則のおかげで、ユーザーはトグルスイッチがどう機能するかを即座に理解できる。
- デザイン密度の概念
- ピクセルに注目する代わりに、ゲシュタルト原則を使って意図的に意味を伝えるデザイン上の意思決定を考える。
- タフティのデータインク比がチャートに必要なインクと総インクを比較するように、デザイン密度は必要なデザイン上の意思決定と全意思決定の比率を比較する。
- 主観的ではあるが、ユーザーインターフェースではデータやインクの量を数えるよりも、デザイン上の意思決定を数える方が有用である。
- デザイン密度の限界
- ユーザーインターフェースは、作業、楽しみ、時間つぶし、理解の形成、個人的つながりの促進などのために存在する。
- ユーザーがそのジャーニーの中で取るあらゆる行動を含めなければならない。
- 密度は、コンポーネント、レイアウト、画面を超えて、空間と時間の中でユーザーが取るすべての行動を考慮すべきである。
時間的密度
- 与えられた時間内にユーザーが実行できる作業量が、時間的密度を決定する。
- ロード時間は時間的密度の最大要因である。インターフェースの反応が速く、新しいページや画面の読み込みが速いほど、UIは高密度になる。
- Bloomberg Terminalはデータをほぼ即座に読み込むため、時間的密度が非常に高い。
- 時間的密度を高める方法
- ロード時間を可能な限り短縮することで、時間的密度を高められる。
- しかし、すべてのロード時間を短縮できるわけではない。たとえば、ユーザーのインターネット接続速度やCPU速度は変更できない。
- 一部の作業（ファイルアップロード、カスタマーサポートの返答待ち、決済処理など）は、複雑なシステムと予測不能な変数に関係している。
- 時間知覚を変える方法
- 100ミリ秒以内: 2つの動作の間隔が100ミリ秒以内なら、同時に起きたように感じられる。この場合、アニメーションはかえってアプリを遅く感じさせることがある。
- 100ミリ秒から1秒の間: 2つの動作のつながりが切れ始める。アニメーションやトランジションは、この知覚上のギャップを埋められる。
- 1秒から10秒の間: アニメーションだけでは不十分である。10秒以内にユーザーがページを離れる可能性が高くなる。この場合、不確定ローディングインジケーターを使い、システムが正常に動作していることを知らせるべきである。
- 10秒から1分の間: 不確定ローディングインジケーターは10秒を超えると静的に感じられ始める。この場合、明確なローディングインジケーター（例: プログレスバー）を使い、残り時間を明示すべきである。
- 1分以上: ユーザーがページを離れたり、別の作業をしたりできるようにすべきである。1分以上何もできない状態はフラストレーションを生みうる。長いプロセスではエラー発生の可能性も高くなる。
- 時間と空間の密度
- UIの密度はあくまで手段にすぎない。UIの価値はその見た目ではなく、達成できる結果にある。
- 密度とは、最小限の時間、空間、ピクセル、インクで最大限の価値を提供することにある。
価値密度（Density in Value）
- 価値密度は、ユーザーが得る結果の価値に関係する。
- 例: 長いフォームを小さな部分に分割し、ウィザード形式のインターフェースにするのは良い。途中まで入力されたフォームには価値がないからである。
- すべての質問を1ページに載せれば視覚的には高密度に見えるかもしれないが、入力に時間がかかると、多くのユーザーは送信しない。
- フォームの例
- 複数の部分に分け、エラーとその解決方法を明確に示したフォーム。
- エラーを減らし、ユーザーにフォームを最後まで入力してもらうには、デザイン上より多くの空間と時間が必要になることがある。
- しかし、視覚的密度や時間的密度を多少犠牲にしても、その結果がより価値あるものになるなら、全体の価値密度は高まる。
- 価値密度の向上
- フォームをより小さくし、読み込みを速くし、エラーを減らすことで、視覚的密度と時間的密度を高められる。
- それによってユーザー価値やビジネス価値が損なわれないなら、全体の密度は向上する。
- タフティのアプローチにならい、可能な限り価値密度を高めるよう努めるべきである。
- 最適化問題
- 最適化問題を解くと、逆説的な結果が生じることがある。
- 初期のインターネットでは、Craigslistのような企業が情報を集約し、ページリンクとして表示することで価値密度を高めていた。
- YahooやAltavistaは情報を検索可能にしたが、依然として集約を重視していた。
- Googleは別のアプローチを取り、インターネット上のリンクチェーンを通じて得た情報を検索ボックスに活用した。
- 情報はそれ自体で集約され、ユーザーに必要だったのは、単一のテキスト入力からWeb全体にアクセスすることだった。
- GoogleとYahooのアプローチ
- Googleの初期画面（2001年）と2024年の画面を比較すると、視覚的密度は低いが、価値密度は非常に高い。
- 結果として、Googleの価値は2004年の$23Bから現在では$2T超に増加した。Yahooは2000年の$125Bから現在の$4.8Bへと下落した。
- 視覚的密度より価値密度の方が重要な場合は多い。
- ユーザーが得る価値を最大化するために、デザインと機能を最適化することが重要である。
結論
- UI密度を考慮したデザインは、インターフェースの視覚的側面を超えなければならない。
- 私たちが下すすべての明示的・暗黙的なデザイン上の意思決定と、画面に表示するすべての情報を含む。
- ユーザーがソフトウェアから価値を得るために費やすすべての行動と時間を含めるべきである。
- UI密度の具体的定義
- UI密度 = ユーザーがインターフェースから得る価値 / インターフェースが占める時間と空間
- 重要な要素
- 速度
- 使いやすさ
- 一貫性
- 予測可能性
- 情報の豊かさ
- 機能性
- 成功するインターフェースの理由: これらすべての要素を考慮すると、あるインターフェースが成功し、別のインターフェースが失敗する理由を理解できる。
- デザイン目標
- 密度を考慮したデザインを通じて、人々が私たちの作ったソフトウェアからより多くの価値を得られるようにすべきである。
1件のコメント
Hacker Newsの意見
Hacker Newsコメントまとめ要約
レストランのメニューの物理的な形態がモバイルサイトのメニューより優れている理由
形式より機能を重視するデータの重要性
時間的密度という概念
モバイルインターフェースが疎になる理由
UIの疎化が進むことへの批判
複雑なUIとトレンドの問題
伝統的なUIの利点
情報密度の不均衡
モバイルUIの問題点
密度が不足したUIの例