Don't Make Me Think

本書は学術研究論文ではなく、実践マニュアルである。著述はすべて科学的に裏付けられ、過去の最高のアイデアと科学者たちによる説得力のある発見を統合したものだ。参考にしている分野は、生物学、神経科学、哲学、心理学などだ。特に重要なアイデアを見いだし、すぐ実行できる形で結びつけることで役に立つ構成になっている。

1. ユーザーに考えさせない: 直感的で明快なデザイン

ページが自明でないなら、少なくとも自己説明的である必要がある。

直感的なデザインが鍵。 ユーザーはウェブサイトの使い方を理解するために考えるべきではない。ナビゲーションからコンテンツまで、すべての要素が即座に理解できるものであるべきだ。ユーザーが不明瞭なものに出会うと、認知的摩擦が生じ、速度が落ち、最悪の場合サイトから離れてしまう可能性がある。

自明 vs. 自己説明的。 理想的には、デザインは自明であるべきで、理解するために考える必要がない。もしそれが不可能なら、自己説明的であることを目指し、ユーザーが最小限の努力で概念をすぐに把握できるようにする。これはボタンのラベルからサイト全体の構造に至るまで適用される。

認知的負荷を減らす。 ユーザーの心に疑問符を残さないようにする。選択肢を明確にし、明瞭な言語を使用し、確立されたウェブの慣例に従う。ユーザーがサイトの使用について考える必要が少ないほど、コンテンツや製品に集中できる。

2. ウェブユーザーは読むのではなくスキャンする: 迅速な理解のための最適化

私たちはページを読むのではなく、スキャンする。

スキャンが標準。 ほとんどのユーザーはウェブページを徹底的に読むことはない。彼らはキーワード、フレーズ、視覚的な手がかりを探して素早くスキャンする。この行動は時間のプレッシャー、すべてを読む必要がないという知識、そして「十分な情報収集」の経験によって駆動される。

スキャナー向けのデザイン。 コンテンツを簡単にスキミングできるようにするための技術を使用する：

• 明確で説明的な見出しとサブ見出し
• 箇条書きリスト
• 短い段落
• 強調されたキーワード
• 意味のある画像とキャプション

重要な情報を前面に出す。 最も重要なコンテンツをページの上部や段落の冒頭に配置する。ジャーナリズムの逆ピラミッドスタイルを使用し、結論から始めてサポートする詳細を提供する。

3. 明確な視覚的階層と慣例を作成する

慣例は友達である。

視覚的階層がユーザーを導く。 重要な要素をサイズ、色、位置、余白を通じてより目立たせる。関連する項目を視覚的にグループ化する。ネスティングを使用して、何が何の一部であるかを示す。明確な視覚的階層は、ユーザーがページを一目で理解するのに役立つ。

慣例を活用する。 ウェブの慣例は理由があって進化してきたもので、それは機能するからだ。ユーザーは特定の要素が特定の場所にあることを期待している（例：左上のロゴ、右上の検索）。非常に良い理由がない限り、これらの慣例に従うべきだ。

革新と親しみやすさのバランス。 創造性は価値があるが、基本的な機能のために車輪を再発明しないでください。親しみやすいパターンは認知的負荷を減らす。もし革新するなら、新しいデザインが直感的で学習曲線を必要としないか、少しの学習曲線を正当化するほどの価値を追加することを確認する。

4. ページを明確に定義されたエリアに分割する

理想的には、ユーザーはどのよくデザインされたウェブページでも、ディック・クラークの古いゲームショー「$25,000 Pyramid」のバージョンをプレイできるべきだ。

明確なゾーンが理解を助ける。 ページを明確に定義されたエリアに分割することで、ユーザーがどの部分に焦点を当て、どの部分を無視するかを迅速に決定できるようになる。これは、ユーザーが徹底的に読むのではなくスキャンする傾向があることを考えると特に重要だ。

エリアを一目で認識できるようにする。 ユーザーは各エリアの目的を一目で識別できるべきだ：

• ナビゲーション
• 検索
• コンテンツ
• 広告
• ブランディング要素

視覚デザインを使用して区分を強化する。 余白、境界線、背景色、一貫したスタイリングなどの技術を使用して異なるエリアを区別する。この視覚的な組織化は、ユーザーがサイトの構造のメンタルモデルを構築するのに役立つ。

5. クリック可能なものを明確にする

人々がウェブで行っていることの大部分は、次にクリックするものを探すことなので、何がクリック可能で何がそうでないかを明確にすることが重要だ。

明確なアフォーダンスがフラストレーションを減らす。 ユーザーは何がインタラクティブであるかを推測する必要がない。リンクやボタンを際立たせるために：

• 一貫したスタイリング（例：リンクのための下線付きテキスト）
• 色の差別化
• ホバー効果
• 重要なアクションのためのボタンのような形状

誤ったアフォーダンスを避ける。 非インタラクティブな要素をクリック可能に見せない。これにより混乱が生じ、インターフェースへの信頼が損なわれる。

モバイルインタラクションを考慮する。 タッチデバイスでは、タップターゲットを十分に大きくし、適切に間隔を空ける。タップに対する視覚的フィードバックを提供してインタラクションを確認する。

6. 気を散らす要素と混雑を排除する

各ページの単語を半分に減らし、次に残りの半分を減らす。

集中が重要。 ページ上の不要な要素はすべてユーザーの注意を競う。混雑したデザインは、ユーザーが探しているものを見つけたり、メッセージを理解したりするのを難しくする。

徹底的に編集する。 排除する：

• 不要な単語やコンテンツ
• 重複するナビゲーションオプション
• 純粋に装飾的な画像
• 過度に複雑なレイアウト

余白を受け入れる。 すべてのピクセルを埋める必要はない。余白はコンテンツを整理し、読みやすさを向上させ、重要な要素に余裕を持たせる。

徹底的に優先順位をつける。 ページ上のすべての要素について、「これはこのページの主要な目標をサポートしているか？」と問う。そうでない場合は、削除するか、目立たなくすることを検討する。

7. 効果的なナビゲーションをデザインする: 見つけやすく理解しやすくする

ウェブナビゲーションは、サイトの階層を具現化し、「そこにいる」感覚を作り出すことで、この欠けている場所の感覚を補う。

明確なナビゲーションが重要。 良いナビゲーションは、ユーザーにサイトに何があるか、どう使うかを伝え、サイトの作成者に対する信頼を与える。それはサイト全体で一貫しており、ユーザーがサイトの構造内でどこにいるかのコンテキストを提供するべきだ。

主要なナビゲーション要素：

• 永続的なナビゲーション（すべてのページに存在）
• 明確なセクション名
• 「ホーム」リンク
• 検索機能
• 深い階層のためのパンくずリスト

カテゴリを自明にする。 ユーザーは各セクションで何が見つかるかを予測できるべきだ。明確で説明的なラベルを使用し、曖昧な名前を避ける。

8. ホームページを最適化する: 明確な目的と簡単な出発点

ホームページはすべての人に対応しなければならない、これは単一の駐車スペースに「誰でも駐車できます」と言うようなものだ。

目的を即座に伝える。 数秒以内に、新しい訪問者はサイトが何であり、何を提供しているかを理解するべきだ。明確なタグラインと簡潔な説明文を使用する。

主要な機能を表示する。 サイトで最も重要なタスクを開始する方法を明確にする。検索、アカウント作成、製品の閲覧など、これらのエントリーポイントは目立つようにする。

競合するニーズのバランスを取る。 ホームページはしばしば複数のオーディエンスとビジネス目標に対応する必要がある。徹底的に優先順位をつけ、最も重要な要素に焦点を当てる。すべてを宣伝する誘惑に抵抗する。

9. 予算内でのユーザビリティテスト: シンプルにして頻繁に行う

プロジェクトの初期に1人のユーザーをテストすることは、終了間際に50人をテストするよりも良い。

定期的なテストが非常に価値がある。 小規模で非公式なユーザビリティテストでも大きな問題を明らかにすることができる。開発プロセス全体を通じて早期かつ頻繁にテストを行うことを目指す。

シンプルに保つ：

• 各ラウンドで3〜4人のユーザーをテストする
• 主要なタスクと痛点に焦点を当てる
• ユーザーの思考過程を理解するために考えながら話すプロトコルを使用する
• 複数のユーザー間でパターンを探す

洞察に迅速に対応する。 目標はデザインを改善することであり、詳細なレポートを作成することではない。各ラウンドのテスト後、最も重要な問題を特定し、迅速に修正を実施する。

10. アクセシビリティが重要: すべてのユーザーのためにデザインする

ページを自明にすることは、店内の良い照明のようなもので、すべてがより良く見えるようになる。

包括的なデザインはすべての人に利益をもたらす。 アクセシビリティを考慮したデザインは、障害を持つユーザーだけでなく、すべてのユーザーの使いやすさを向上させることが多い。また、法的なコンプライアンスや倫理的なビジネス慣行の観点からもますます重要になっている。

主要なアクセシビリティの考慮事項：

• 画像の代替テキストを提供する
• キーボードナビゲーションを確保する
• 十分な色のコントラストを使用する
• 論理的なコンテンツ構造を作成する
• フォームをアクセシブルにする

基本から始める。 アクセシビリティの小さな改善でも大きな違いを生むことができる。最も影響力のある変更に焦点を当て、徐々にアクセシビリティを向上させる。

11. ウェブ向けの文章を書く: 簡潔でスキャン可能、客観的に

無駄な話は排除する。

簡潔さが鍵。 ウェブユーザーは限られた時間と注意力しか持っていない。不要な言葉、導入文、マーケティング的な表現を削除する。迅速かつ明確に要点に到達する。

テキストをスキャン可能にする：

• 意味のある見出しとサブ見出しを使用する
• 箇条書きや番号付きリストを使用する
• 重要な用語やフレーズを強調する
• 短い段落と十分な余白を使用する

客観的で率直に。 誇張や過度な主張を避ける。ユーザーはマーケティング言語に懐疑的であり、明確で事実に基づいた情報を評価する。製品やサービスが自らを語るようにする。

Last updated: August 22, 2024