UXの法則
(lawsofux.com)- デザインのユーザビリティと認知心理に関する法則を、それぞれ短い定義とともにまとめ、インターフェースを理解し利用する方法に影響を与える概念を一か所に整理している
- 選択と意思決定の領域では、Hick’s Law、Cognitive Loadのように、選択肢の数、複雑さ、精神的リソース量がユーザーの判断とインタラクション速度に直接結び付く
- 視覚認識と情報構成の領域では、Law of Proximity、Law of Similarityのように、近さ、類似性、接続性、共通境界が要素をひとつのグループとして知覚させる
- インタラクションと行動の領域では、Doherty Thresholdの400ms未満の反応、Fitts’s Lawの距離とサイズのように、操作効率と目標到達時間に影響を与える基準を扱う
- 記憶と体験の領域まで含め、Peak-End Rule、Zeigarnik Effectのような法則もあわせて提示し、UX設計全般で繰り返し使われる判断フレームワークを幅広く提供している
UXの法則の構成
- Laws of UXは、デザインのユーザビリティと認知心理に関する法則を、それぞれ短い定義とともに整理している
- 各項目は個別の法則ページにつながっており、インターフェースを理解し利用する方法に影響を与える概念としてまとめられている
- 選択、記憶、注意、目標追求、視覚的グルーピングなど、UX設計で頻繁に扱われるテーマを幅広く網羅している
主な法則
-
認知と意思決定
- Choice Overload: 多くの選択肢が与えられると圧倒感が増し、paradox of choiceとほぼ同義で使われることが多い
- Cognitive Bias: 判断の合理性に影響を与える体系的な思考の誤りが、世界認識と意思決定能力に作用する
- Cognitive Load: インターフェースを理解しインタラクションするために必要な精神的リソース量を指す
- Hick’s Law: 決定にかかる時間は、選択肢の数と複雑さが増えるほど長くなる
- Mental Model: システムとその動作方式について理解していると考える内容を圧縮した内的モデルである
- Miller’s Law: 平均的な人は作業記憶に7個 ± 2個程度しか保持できない
- Occam’s Razor: 同程度に予測できる仮説の間では、仮定が最も少ないものを選ぶ
- Tesler’s Law: どのシステムにも削減できない複雑さの量が残る
- Working Memory: 作業遂行に必要な情報を一時的に保持し操作する認知システムである
-
視覚認識と情報構成
- Aesthetic-Usability Effect: ユーザーはより美的に魅力的なデザインを、より使いやすいデザインとして認識する傾向がある
- Chunking: 個別の情報の断片を分け、再び意味のある単位としてまとめる過程である
- Law of Common Region: 明確な境界を共有する要素は同じグループとして知覚される
- Law of Proximity: 互いに近いオブジェクトはひとまとまりとして認識される
- Law of Prägnanz: 曖昧または複雑なイメージは最も単純な形として解釈される
- Law of Similarity: 類似した要素は離れていても、ひとつの図形・形態・グループとして認識されやすい
- Law of Uniform Connectedness: 視覚的につながった要素は、つながっていない要素よりも関連性が高く見える
- Von Restorff Effect: 似たオブジェクトの中では、異なるひとつが最もよく記憶される
-
インタラクションと行動
- Doherty Threshold: コンピュータとユーザーが400ms未満の速度でインタラクションすると、互いに待つ必要がなくなり生産性が大きく向上する
- Fitts’s Law: 目標を獲得するまでの時間は、距離とサイズの関数である
- Flow: 活動に完全に没入し、エネルギー、集中、深い関与、楽しさを同時に感じる精神状態である
- Goal-Gradient Effect: 目標に近づくほど、その目標へ向かおうとする傾向が強まる
- Jakob’s Law: ユーザーは大半の時間を他のサイトで過ごすため、すでに慣れ親しんだサイトと似た方法で動作することを好む
- Paradox of the Active User: ユーザーはマニュアルを読まず、すぐにソフトウェアの利用を始める
- Parkinson’s Law: どんな作業でも、利用可能な時間をすべて使い切るまで膨らむ
- Postel’s Law: 受け入れる入力には寛容に、送信する出力には保守的に対応する
- Selective Attention: 環境中のさまざまな刺激の中でも、通常は目標に関連する一部にだけ注意を集中する
-
記憶と体験
- Pareto Principle: 多くの事象では、結果のおよそ**80%が原因の20%**から生じる
- Peak-End Rule: 体験全体の総和や平均よりも、絶頂と終わりでの感情をもとに体験を判断する
- Serial Position Effect: 連続した項目の中では、最初と最後の項目を最もよく記憶する傾向がある
- Zeigarnik Effect: 完了した課題よりも、未完了または中断された課題をよりよく記憶する
1件のコメント
Hacker Newsの意見
これはよく見返してしまう。ポスター風のデザインも良いし、こうした「法則」のかなり多くが長年にわたる Nielsen Norman Group のデータと研究から来ているのはいつも驚かされる。
Jakob's Law や Norman Door のように名前が付いたUX概念も多く、UX業界はこの小さな観察者集団の影響を大きく受けている。
ただ、私見では現代の UX/HCI 理論 はこうした柔らかいルールにだんだん縛られすぎている面もある。特に、放送のような 非インタラクティブなメディア のユーザーパターンから現れたルールを過度に一般化しているように思う。
前のシリーズページは良かったが、今回は少し 作り込みが足りない ように見える。
たとえば Cognitive Bias を辞書的に定義しただけで「法則」として載せているのは、法則でもないし、その形では実用的な概念でもない。
UIデザイナーや開発者が適用できるルール集というより、用語をいくつか選んで定義を付け、ポスター販売用 にまとめたような印象のほうが強い。
こういう資料は良いし、もちろん 絶対不変のルール でもない。
伝統的なデザイナーではないので、こうした best practice や法則のまとめがあると助かる。頭の中にずっと保持しておくのが難しいルールを、AIが画面単位でまとめて点検してくれる出発点としてはちょうど良さそうだ。
個人的にはソースコード整形ショートカットのように、ビジネスソフトウェアを作るときにこうした法則セットを sanity check 用のショートフローとして使うとかなり有用だと思う。
実際に UX Laws のスクリーンショット とダッシュボードのスクリーンショットをダウンロードして、ChatGPTとClaudeにその法則基準でレビューし、推奨事項を反映した新しいモックアップを作るように指示した。
Project 1: CMMS Dashboard For Maintenance
Dashboard old: https://imgur.com/a/R3wrMpr
Dashboard new (Claude): https://imgur.com/a/cYq4gE8
Project 2: https://swellslots.com のサーフ予報アプリ
Forecast old: https://imgur.com/a/W3daZrP
Forecast new: https://imgur.com/a/kNi2Nvg
こういうふうに互いに衝突する法則セットの問題は、優れたデザイナーはどのルールを無視し、どのルールを使うかを 文脈に合わせて直感的に判断 している点にある。
プロンプトに目的や役割を具体的に入れたのか、それともオープンにしたまま回したのか気になる。
法則0 は、私がクリックしようとしているUI要素をリフローさせたり、あちこち動かしたりしないことだ。
もちろん、より良い解決策は開発者とデザイナーがこうしたディテールに 職人気質 と誇りを持つことだ。最悪のインターフェースを見ると、たいていバックエンドと ギガビット接続 された環境でしかテストしておらず、こうした問題を見落としているように思える。
デザインの象徴のように見られている会社がその基本すら外すなら、業界のどこかが大きく間違っている。
これは素晴らしい資料だと思う。
ただ、2番目の項目である Choice Overload を見ると、選択肢が多すぎると人は圧倒されると書いておきながら、実際のページでは30個の「法則」をすべてテキストで詰め込み、視覚空間の半分は 無関係な絵30枚 が占めている。
きれいではあるが、これが 学習しやすい構造 とは言えない。
Doherty Threshold のように、コンピューターとユーザーが互いに待たなくて済む 400ms未満 でインタラクションできると、生産性は大きく上がる。
だからプログラミングでは小さなモデルのほうをずっと好む。十分に速くて作業フローの リアルタイム性 が保たれるからだ。
そうすると仕事もより小さな単位に分割し、継続的に検証するようになるので、自分が能動的に関与できるし メンタルモデル もずれない。
以前、簡単なコード変更3件を大きなモデルと小さなモデルにそれぞれ任せてみたが、どちらも成功した。ところが大きなモデルは3倍遅く、コストは10倍だった。
それ以来、私の Best Model の基準はベンチマーク1位ではなく、実際の仕事を安定してこなせる最も小さく、速く、安いモデルになった。
安定性 も入れるとよいと思う。変化のための変化や、新しい流行を追うためだけに変え続けるべきではない。
意味のない アイコン は使うべきではない。
情報を木構造のように隠して、ユーザーにボックスを1つずつ開かせるより、線形の流れ で見せるほうがよい。
意見を事実であるかのように提示してもいけない。
アジアの大手 e-commerce プラットフォーム の1つをリデザインした際、ここにある法則のいくつかを実際の UX戦略 に活用した。
共有してくれてありがとう。ほぼ10年間 full stack で働いてきたが、今になってようやくUIをより深く掘り下げていて、UXはまだ表面を触った程度だ。
少し話は逸れるが、モバイルやWebアプリでよく使われる UIパターン を整理した資料があるのか気になる。たとえば hamburger menu や toast notification のようなものだ。
体系的に整理されていて、範囲が広く、視覚的な例 まであるサイトを探している。
当時はスマートフォン初期でモバイルの比重が小さかったが、最新版はモバイルもかなり扱っているようだ。
https://www.oreilly.com/library/view/designing-interfaces-3rd/9781492051954/