【UX】ヤコブの法則を学ぶ
なぜ作成したのか
- UXの知見を広げた気になりたい
参考
UXデザインの法則 [第2版]
ユーザーは他のサイトで多くの時間を費やしているので、あなたのサイトにもそれらと同じ挙動をするように期待している
ヤコブの法則（Jakob’s Law）とは？
ヤコブのインターネット・ユーザーエクスペリエンス法則。
ヤコブ・ニールセンによって提唱された法則で、次のように述べられています：
「ユーザーは他のサイトやアプリで慣れ親しんだデザインや機能を期待する。」
簡単に言えば、ユーザーは他のサービスで得た経験を元に新しいサービスを直感的に使おうとするため、よく知られたデザインパターンや操作方法を採用することがUX設計において効果的だという考えです。
具体的な適用手法と事例
1. ナビゲーションメニュー
-
適用例: 多くのウェブサイトでは、トップナビゲーションバーが上部にあり、重要なリンクは左から右に並べられます。
-
事例: ECサイト（例：Amazon、楽天）
- 通常、ユーザーは「カテゴリ」「カート」「検索バー」などが特定の位置にあることを期待しています。
- もしこれらが慣れ親しんだ配置にない場合、ユーザーは混乱し、離脱率が高まる可能性があります。
-
効果:
- 一貫したレイアウトにより、ユーザーは初見でもすぐに使えるため、学習コストが削減される。
- 滞在時間の増加とコンバージョン率の向上が見込まれる。
2. 検索バーの設置
-
適用例: 多くのサイトやアプリでは、検索バーが画面上部の中央または右側にあります。
-
事例: YouTubeやNetflix
- 動画検索がメインの操作になるため、どちらもページ上部に検索バーを配置しています。
- GoogleやAmazonで慣れた操作により、すぐに目的の動画や商品にたどり着くことができます。
-
効果:
- ユーザーが迷うことなく、すぐに目的のコンテンツを発見できるため、利便性が向上。
- サイト内の検索頻度が増加し、コンテンツの利用率が高まる。
3. フォームの設計
-
適用例: 一般的にフォームの項目は、縦に並び、ラベルは各入力フィールドの上または左側に配置されます。
-
事例: 登録フォーム（例：FacebookやGoogleのログインページ）
- どのサービスでも、氏名、メールアドレス、パスワードの入力フィールドが決まった順序で配置されており、送信ボタンも一貫した位置にあるため、スムーズに入力できます。
-
効果:
- 入力にかかる時間が短縮され、離脱率の低下が見込める。
- 特にスマホ環境において、標準化されたフォーム設計は重要であり、フラストレーションを軽減する。
4. カート機能と購入フロー
-
適用例: 購入手順が「カートに追加 → 注文確認 → 支払い情報入力 → 購入完了」の流れに沿っている。
-
事例: Amazon、Zaraなどの大手ECサイト
- 多くのECサイトが同様の購入プロセスを採用しており、ユーザーはその流れに慣れています。
-
効果:
- 親しんだ購入手順によって心理的な抵抗が減少し、購入完了率が向上する。
- 新規ユーザーの離脱防止や再訪率の向上に貢献。
ヤコブの法則を無視した場合のリスク
- 学習コストの増加: 新しいUI設計に適応するために時間がかかる。
- 離脱率の増加: 使いづらいと感じたユーザーは競合他社へ流れる可能性が高まる。
- 信頼性の低下: 一貫性の欠如がサービス全体の品質や信頼感に悪影響を与える。
ヤコブの法則に基づく設計のベストプラクティス
-
デザインパターンのリサーチ
- 競合や同業他社のUXパターンを分析し、共通部分を把握する。
-
標準コンポーネントの使用
- ボタン、フォーム、ナビゲーションなど、標準コンポーネントはユーザーの期待に応えるため重要。
-
ユーザーテストの実施
- 他のサービスに慣れているユーザーにテストしてもらい、直感的に操作できるかどうかを確認する。
メンタルモデルとは？
メンタルモデル（Mental Model）は、ユーザーがあるシステムや概念を理解する際に頭の中で形成する認知的なモデルです。これにより、ユーザーは未知の状況に直面しても、過去の経験や知識に基づいて行動し、予測します。
- メンタルモデルは過去の経験、直感、および学習した知識に依存します。
- 各ユーザーが異なるバックグラウンドを持つため、メンタルモデルも異なることがありますが、多くの場合、類似した操作経験によって形成される共通点があります。
メンタルモデルの具体例
-
ファイルフォルダのシステム
- ユーザーはPCのフォルダ構造を、物理的なファイルキャビネットに似たものだと捉えます。このメンタルモデルのおかげで、新しいOSを触る際もフォルダ操作に困らず直感的に使えます。
-
ショッピングカート
- ECサイトで「カートに追加する」ボタンをクリックすると、実際の買い物かごに商品を入れるイメージと一致し、次のステップ（支払い、購入確認）もすぐに想像できます。
-
検索バーの理解
- ユーザーはGoogleなどでの経験を基に、検索バーにキーワードを入力するとすぐに情報が得られると考えます。このメンタルモデルが確立しているため、他のサービスでも同じように行動します。
ヤコブの法則とメンタルモデルの関係
ヤコブの法則は、「他のサービスで慣れた操作やデザインにユーザーが適応している」という前提に立つものであり、これはまさにユーザーが持つメンタルモデルの存在を前提とした法則です。
ヤコブの法則とメンタルモデルの関係を以下のように整理できます：
| メンタルモデル | ヤコブの法則とのかかわり |
|---|---|
| 他サービスでの経験に基づいて、システムの動作やデザインを予測する | 他のサイトやアプリで確立された操作やデザインパターンを守ることで、ユーザーは新しいサービスでも直感的に利用できる |
| 誤ったメンタルモデルを形成すると、混乱やフラストレーションにつながる | ユーザーの期待（メンタルモデル）と異なるデザインや操作性は、使いづらさや離脱率の増加を引き起こす |
| メンタルモデルの更新には時間がかかる | ヤコブの法則に基づいた設計を行うことで、メンタルモデルの大きな変化を強いず、スムーズなUXを提供できる |
具体例：ヤコブの法則とメンタルモデルの融合
1. フォーム入力の順序
- メンタルモデルの影響: ユーザーは多くのサイトで、フォーム項目（氏名、メールアドレス、パスワード）の入力順序や送信ボタンの位置が一定であると期待しています。
- ヤコブの法則に基づく設計: 慣れ親しんだパターンを守ることで、ユーザーは直感的に操作でき、入力ミスや離脱が減少します。
- もし無視したら？: 順序や配置が異なると、ユーザーは操作に戸惑い、間違えたり、途中でやめてしまう可能性があります。
2. スクロールとナビゲーション
- メンタルモデルの影響: スマホやPCで多くのウェブサイトを訪れるユーザーは、「ページを下にスクロールすれば次の情報にたどり着く」と予測します。
- ヤコブの法則に基づく設計: コンテンツの表示順序やページの区切り方が他サイトと似ていれば、ユーザーは自然に操作を継続できます。
- もし無視したら？: スクロールできない、または不自然なナビゲーション構造だと、混乱して離脱することがあります。
ヤコブの法則とメンタルモデルを意識した設計のポイント
-
ユーザーリサーチによる期待値の把握
- ユーザーが他のサービスでどのような操作を日常的に行っているかを調査し、彼らのメンタルモデルを理解します。
-
既存のデザインパターンに依存する
- 成功したアプリやサービスが使用している標準的なパターンを積極的に採用することで、メンタルモデルに寄り添います。
-
ユーザビリティテストの実施
- 新しいUI設計がユーザーの期待に沿ったものであるかどうかをテストし、メンタルモデルに反する部分がないか検証します。
-
変化が必要な場合は段階的に導入する
- メンタルモデルが大きく異なるデザイン変更は、ユーザーが徐々に慣れるよう段階的な導入を検討するべきです。
同質化（Sameness）とは？
同質化（Sameness）とは、UXデザインにおいて、多くのサービスが似たようなデザインパターンやインタラクションの方法を採用することを指します。これは、ヤコブの法則やメンタルモデルに基づく自然な結果であり、ユーザーが異なるサービスにおいても直感的に使えることを意図した設計アプローチの一環です。
ヤコブの法則、メンタルモデルと同質化の関係
-
ヤコブの法則からの影響
- ヤコブの法則は、「他のサイトやアプリで慣れた操作やデザインにユーザーが適応している」という前提から、新しいサービスでもその期待に応えるデザインにするべきと示唆しています。
- これにより、多くの企業が成功したUIパターンを模倣するようになり、結果として多くのアプリやウェブサイトが同じようなインターフェースや操作感を持つようになっています。
-
メンタルモデルの影響
- メンタルモデルはユーザーが過去の経験を基に新しい環境を理解しようとするため、他のサービスで確立した期待に応えるデザインが自然に求められます。
- これにより、メンタルモデルに一致するような共通のデザインパターンが生まれ、それが同質化を促進します。
同質化が具体的に表れるポイント
-
ナビゲーションバー
- ほとんどのウェブサイトでナビゲーションバーは画面上部または左側に配置され、主要なリンクやカテゴリが表示されます。
- 例：ECサイト（Amazon、楽天）、ニュースサイト、SNS（Facebook、Twitter）
-
検索バー
- 検索バーは画面の上部中央または右上に設置されるのが標準的です。
- 例：Google、YouTube、Amazonなどで確立した配置が多くのサービスに採用される。
-
無限スクロールやページネーション
- SNS（Instagram、Twitter）によって確立された「無限スクロール」は、他の多くのサービスでも採用され、フィード型の情報提供において同質化しています。
-
ボタンやアイコンの標準化
- 「三本線のメニューボタン（ハンバーガーメニュー）」や「ゴミ箱アイコンによる削除」など、共通のアイコンが広く使われる。
同質化のメリット
-
学習コストの削減
- ユーザーが新しいサービスに訪れた際でも、既存のメンタルモデルに沿った操作が可能なため、使い方を学ぶ時間が短縮される。
- 例：ECサイトでの「カートに追加」ボタンの位置や購入フローが共通であれば、ユーザーは新しいECサイトでも迷わない。
-
ユーザー体験の一貫性
- 一貫したUI要素により、異なるサービス間でのスムーズな体験が実現する。
- 例：SNSやメッセージングアプリの「いいねボタン」「共有機能」はどこでも同じように操作できる。
-
効率的な開発と運用
- 一般的に使われるデザインパターンを利用することで、開発コストが削減され、ユーザビリティテストの負担も軽減される。
同質化のデメリットと注意点
-
差別化の欠如
- 同じようなデザインが増えると、競合との差別化が難しくなり、ブランドアイデンティティが薄まる可能性がある。
- 例：多くのSNSが似たようなUIになり、何が独自の価値なのかがわかりにくくなることがある。
-
革新的なデザインの停滞
- ユーザーの期待に沿いすぎると、大胆で新しいデザインの採用をためらうことがあり、イノベーションが妨げられる。
- 例：Appleは独自のUIを構築することで革新を促してきたが、同質化が進むとそのような挑戦が難しくなる。
-
特定パターンへの依存
- ユーザーが特定のメンタルモデルに固執しすぎると、新しいデザインに対する柔軟性が低下する。
同質化のデメリットを防ぐための対策
-
重要なポイントで独自性を出す
- 基本的なデザインはユーザーの期待に沿いつつ、特定の重要な要素（ブランドカラー、アニメーション、インタラクション）で差別化を図る。
- 例：Spotifyは音楽再生という基本的な操作性は他と共通しつつ、独自のビジュアルデザインやインタラクションでブランドの独自性を確立しています。
-
ユーザーテストによるバランスの確認
- ユーザーにとって何が「使いやすい標準」であり、どの部分で独自性が許容されるかをテストする。
-
漸進的な変化を導入
- すぐに大きな変更を加えるのではなく、段階的にユーザーを新しいデザインに適応させる。
まとめ：同質化の適切な活用方法
- ヤコブの法則とメンタルモデルによって、多くのサービスが共通のデザインパターンを採用し、同質化が自然に進んでいます。
- 同質化は、学習コストを削減し、スムーズなユーザー体験を実現するために非常に有効ですが、過度な同質化による差別化の欠如が課題となる場合があります。
- 成功の鍵は、標準的なUXパターンを守りつつ、重要な部分で独自性を出すバランスを取ることです。
簡単な図解イメージ
[標準化されたデザイン要素] ---------------- [独自性のあるデザイン要素]
ユーザーが期待する部分を守る 差別化によりブランドを強調
同質化は単なる模倣ではなく、ユーザーが直感的に使える環境を維持しつつ、ブランドの価値を高めるための戦略的な設計手法と捉えるべきです。
所感
- 非UXデザイナーとしては、導入サービスがヤコブの法則に沿った環境を軸に評価できるよう、多くのサービスに触れてメンタルモデルを補強、言語化できるようにしておくのが大事なのかなあという気持ち
Discussion