101 UX Principles

1. ユーザー共感と客観性を重視したデザイン

UXにおいて優れたスキルは共感と客観性である。

共感は理解を促進する。 ユーザーの立場に立つことで、彼らのニーズ、フラストレーション、目標を予測することができる。この洞察により、技術的要件を満たすだけでなく、ユーザーに真に役立つインターフェースを設計することが可能になる。

客観性は明確さを保証する。 個人的な偏見や組織の圧力から解放され、設計の決定を批判的に評価することができる。この視点は、見落とされがちな欠陥や改善点を特定するのに役立つ。

共感と客観性を重視したデザインの重要な側面：

• 多様なユーザーニーズを理解するためのユーザーリサーチを実施する
• 実際のユーザーでデザインをテストし、フィードバックを取り入れる
• 仮定に挑戦し、デザインを修正する意欲を持つ
• 派手な機能を見せるのではなく、ユーザーの問題を解決することに焦点を当てる
• 内部組織の好みよりも使いやすさを優先する

2. タイポグラフィと視覚的階層の簡素化

情報の階層を示すために文字サイズを使用する

可読性が最優先。 見出し用と本文用の最大2つの書体を選ぶ。これにより視覚的一貫性が生まれ、ユーザーの認知負荷が軽減される。可能な限りシステムフォントを使用し、デバイス間での読み込み速度と見慣れた外観を確保する。

サイズは階層にとって重要。 重要な情報には大きな文字サイズを使用し、ユーザーの注意を重要な要素に導く。これにより、ユーザーはインターフェースの構造を迅速に把握できる。明確な階層を維持しつつ、2つから3つの異なる文字サイズを目指す。

タイポグラフィのベストプラクティス：

• 本文のデフォルトサイズとして16pxを使用する
• 最適な可読性のために行間を1.5に保つ
• テキストと背景の間に十分なコントラストを確保する（最低4.5:1の比率）
• 新しい書体を導入するのではなく、強調のために太字やイタリックを使用する
• タイポグラフィが異なるデバイスサイズにスケールする方法を考慮する

3. 直感的で機能的なUIコントロールの作成

ボタンはボタンのように見せる

アフォーダンスはインタラクションを導く。 コントロールがその機能を視覚的に伝えるように設計する。ボタンは微妙な影、テクスチャ、または色の違いを通じて「クリック可能」に見えるようにする。これにより、ユーザーはインタラクティブな要素を即座に認識し、推測や試行錯誤を避けることができる。

一貫性は親しみを生む。 検索フィールド、日付ピッカー、ナビゲーションメニューなどの一般的なコントロールには確立されたパターンを使用する。これにより、ユーザーの既存のメンタルモデルを活用し、インターフェースの学習曲線を減少させる。ユーザーに不慣れなインタラクションパターンを学ばせる新しい任意のコントロールを発明するのは避ける。

UIコントロールのベストプラクティス：

• ボタンをタップ/クリックしやすい適切なサイズにする
• 関連するコントロールを論理的にグループ化する
• 可能な限りシステムネイティブの入力コントロールを使用する（例：日付ピッカー）
• ユーザーのインタラクションに対して明確な視覚的フィードバックを提供する（ホバーステート、アクティブステート）
• テキストラベルと一緒に認識可能なアイコンを使用して明確さを高める

4. フォームとデータ入力の最適化

良いフォーム体験を提供できれば、ユーザーはあなたの製品を愛するだろう

摩擦を最小限にする。 フォームはしばしば必要悪だが、苦痛である必要はない。必要な情報だけを求めることでデータ入力を簡素化する。適切な入力タイプ（例：電話番号用の数字キーパッド）を使用し、可能な限りデバイスの機能（例：自動入力）を活用する。

慎重にバリデートする。 ユーザーがフィールドを入力する際にリアルタイムでフィードバックを提供するが、クレジットカード番号のスペースなどの小さなフォーマットの問題には寛容である。ユーザーが間違いを修正する方法を示す明確なエラーメッセージを表示する。バリデーションエラーがあっても、ユーザーが入力したデータを常に保持する。

フォーム最適化の戦略：

• ほとんどのフォームに単一列のレイアウトを使用する
• 関連するフィールドを論理的にグループ化する
• 各フィールドに明確で具体的なラベルを提供する
• パスワード要件を事前に表示する
• マスクされたパスワードを一時的に表示できるようにする
• eコマースフローで「ゲストチェックアウト」オプションを提供する

5. ナビゲーションとユーザージャーニーの強化

ユーザーは常にどの段階にいるかを知っているべきである

ユーザーを方向付ける。 製品内の現在の位置を理解するための明確な視覚的およびテキストの手がかりを提供する。パンくずリストナビゲーション、進行状況インジケーター、インターフェースの異なるセクションのための明確な視覚デザインを使用する。

脱出ルートを提供する。 ユーザーがプロセスのオプションのステップを簡単に戻ったりスキップしたりできるようにする。これにより、ユーザーが閉じ込められたと感じることを防ぎ、製品の柔軟な探索が可能になる。常に「ホーム」または開始点に戻る明確な方法を提供する。

ナビゲーションのベストプラクティス：

• 製品全体で一貫したメニュー配置を使用する
• アクセシビリティのために「コンテンツにスキップ」リンクを実装する
• 大規模なサイト/アプリには検索機能を提供する
• ナビゲーション項目には説明的でアクション指向のラベルを使用する
• 複数のナビゲーションオプションを提供することを検討する（例：トップメニューとフッターリンク）

6. アクセシビリティと包括性を優先する

情報を伝えるために色だけを使用しない

すべてのユーザーのためにデザインする。 様々な能力を持つ人々や異なるデバイスを使用する人々が製品を利用できるようにする。これには、視覚、聴覚、運動、認知のアクセシビリティの考慮が含まれる。多くのアクセシビリティの改善は、より明確で堅牢なインターフェースを作成することで、すべてのユーザーに利益をもたらす。

支援技術でテストする。 スクリーンリーダー、キーボードナビゲーション、その他の支援ツールを使用して定期的に製品を評価する。これにより、アクセシビリティを向上させる領域を特定し、すべてのユーザーにとってより包括的な体験を保証する。

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

• 十分な色のコントラストを維持する（最低4.5:1の比率）
• 画像やアイコンにテキスト代替を提供する
• すべてのインタラクティブ要素に対してキーボードナビゲーションを確保する
• スクリーンリーダーの互換性を高めるためにARIAラベルと役割を使用する
• レイアウトを崩さずにテキストを拡大できるようにする
• 意味を伝えるために色だけに頼らない

7. 明確で一貫性のあるコピーを作成する

人間らしく書く

ユーザーの言葉で話す。 インターフェースのコピーに専門用語、技術用語、「企業の言葉」を避ける。ターゲットオーディエンスが簡単に理解できる明確で簡潔な言葉を使用する。これにより、認知負荷が軽減され、製品がより親しみやすく感じられる。

一貫性を保つ。 製品全体で同じ用語を使用して、同様の概念やアクションを説明する。これにより、ユーザーはインターフェースの動作について一貫したメンタルモデルを構築できる。スタイルガイドを作成して、製品の異なる部分やチームメンバー間で一貫性を確保する。

コピーライティングのベストプラクティス：

• より明確で直接的な指示のために能動態を使用する
• 長いテキストブロックをスキャンしやすい箇条書きや短い段落に分割する
• 見出しやボタンラベルに重要な情報を前面に配置する
• 「ログイン」や「登録」ではなく「サインイン」や「サインアップ」を使用する
• ユーザーが間違いを修正する方法を示す役立つエラーメッセージを提供する

8. 検索とeコマース体験の簡素化

検索結果ページは最も関連性の高い結果をページの上部に表示するべきである

関連性が鍵。 最も関連性の高い結果を優先する堅牢な検索機能に投資する。結果を論理的なセクションに分類し、ユーザーが探しているものを迅速に見つけられるようにする。明確なフィルタリングとソートオプションを提供し、ユーザーが検索を絞り込むことができるようにする。

購入を簡素化する。 親しみやすさのために確立されたeコマースパターンに従う。購入を完了するために必要なステップ数を最小限に抑える。明確な製品情報、透明な価格設定、複数の支払いオプションを提供し、信頼を築き、放棄を減らす。

検索とeコマースの最適化：

• 検索クエリのオートコンプリート/サジェスト機能を実装する
• ユーザーが検索を簡単に修正または絞り込めるようにする
• 各カテゴリの結果数を表示する
• ゲストチェックアウトオプションを提供する
• チェックアウトプロセスのフォームフィールドを最小限に抑える
• 送料と推定配達日を明確に表示する

9. 確立されたパターンとデフォルトを活用する

確立されたメタファーを活用する – それは盗むことではない

親しみやすさは使いやすさを生む。 ユーザーは他のウェブサイトやアプリでほとんどの時間を過ごしている。一般的なデザインパターンを採用することで、ユーザーの既存の知識を活用し、製品の学習曲線を減少させる。説得力のある理由がない限り、車輪の再発明は避ける。

スマートなデフォルトを選ぶ。 製品のデフォルト設定とオプションを慎重に検討する。良いデフォルトは、ユーザーが行う必要のある決定の数を大幅に減らし、体験を簡素化する。必要に応じて、ユーザーがこれらのデフォルトを簡単に変更できるようにする。

確立されたパターンの活用：

• インスピレーションを得るために成功した競合他社や業界リーダーを研究する
• 認識可能なアイコンやUI要素を使用する（例：ハンバーガーメニュー、ショッピングカート）
• プラットフォーム固有のガイドラインに従う（iOS Human Interface Guidelines、Material Design）
• 一般的なジェスチャーやインタラクションを実装する（ピンチズーム、プルリフレッシュ）
• 破壊的なアクションに対して簡単にアクセスできる「元に戻す」オプションを提供する

10. ユーザーの時間と労力を尊重する

ユーザーが明示的に要求しない限り、ユーザーが入力したデータをクリアしない

ユーザーの入力を尊重する。 ユーザーが作成したデータやコンテンツを最大限に尊重する。明示的な確認なしにユーザーが入力した情報を破棄しない。適切な場所で自動保存機能を実装し、偶発的なデータ損失を防ぐ。

効率を最適化する。 ユーザーが目標を迅速かつ最小限の労力で達成できるようにインターフェースを設計する。これには、キーボードショートカットの提供、バルクアクションの提供、ユーザーの好みを記憶して反復作業を減らすことが含まれる。

ユーザーの時間と労力を尊重する戦略：

• フィードスタイルのコンテンツには「無限スクロール」を実装するが、位置に戻る方法を提供する
• 複数ステップのプロセスには明確な進行状況インジケーターを提供する
• 複雑なタスクを保存して再開できるようにする
• 繰り返しのアクションに対してバッチ操作を提供する
• 非同期読み込みと楽観的なUI更新を使用して速度感を作り出す
• キーボードユーザーのために「コンテンツにスキップ」リンクを実装する

最終更新日: August 22, 2024