お気に入りのウェブサイトやアプリを思い浮かべてください - お気に入りである理由は何ですか？では 気に入らないウェブサイトやアプリについて 気に入らない点は何ですかユーザーがウェブサイトまたはアプリでのデザインやエクスペリエンスにどのように関わっているかは、場合によって異なります。
こうしたエクスペリエンスは、時間帯、使用するデバイスの種類、前夜に十分な睡眠をとれているか、体調が悪いか、支援技術を使用しているかなどによって変化します。80 億人もの人々が世界中にいます。デザインの利用方法や体験は無限大です。
インクルーシブなデザイン
潜在的なユーザーのすべてのニーズに同時に対応するにはどうすればよいですか？インクルーシブなデザインを目指しましょう。インクルーシブな設計では、人間中心のアプローチが採用されており、インクルーシブ、ユーザビリティ、アクセシビリティが 1 つにまとめられています。
1 つのデザインを可能な限り多くの人が使えるようにするユニバーサル デザインとは異なり、インクルーシブなデザインの原則では、特定の個人やユースケースに合わせた設計を行い、そのデザインを他の人に拡張することに重点が置かれています。
ユーザー補助に焦点を当てたインクルーシブな設計原則には、次の 7 つがあります。
- 同等のエクスペリエンスを提供する: ユーザー全員がコンテンツの質を損なうことなく、ニーズに合った方法でタスクを完了できるように、インターフェースのエクスペリエンスを平等に提供します。
- 状況を考慮する: ユーザーの状況にかかわらず、インターフェースがユーザーに価値あるエクスペリエンスを提供するようにしてください。
- 一貫性を保つ: 馴染みのある規則を使用し、論理的な方法で適用します。
- 管理できるようにする: ユーザーが好みの方法でコンテンツにアクセスし、操作できるようにします。
- 特典を選択: ユーザーがタスクを完了するさまざまな方法（特に、複雑なコンテンツや標準的でないもの）を提供することを検討します。
- コンテンツに優先順位を付ける: コンテンツやレイアウト内でこれらの要素を適切な順序で配置することで、ユーザーが主要なタスク、機能、情報に集中できるようにします。
- 付加価値: 機能の目的と重要性、および機能によってさまざまなユーザーのエクスペリエンスがどのように向上するかについて検討します。
ペルソナ
新しいデザインや機能を開発する場合、多くのチームはユーザー ペルソナに頼ってプロセスを指示しています。ペルソナとは、デジタル プロダクトを使用する架空のキャラクターのことであり、多くの場合、ユーザーに関する量的、定性的な調査に基づいています。
ペルソナは、設計と開発プロセス全体を通じてこれらの機能をテストして優先順位を付けるための迅速かつ安価な方法も提供します。会話に現実世界での考慮事項のレイヤを追加することで、サイトのコンポーネントに関する意思決定に集中できます。これにより、戦略を調整し、特定のユーザー グループに焦点を当てた目標を作成できます。
障がいの組み込み
「人は皆、千差万別です。自分の経験からしか話せません。ろうの人に会うと、私たち全員ではなく、1 人の聴覚障がい者に出会うことになります。」
ID24 の Meryl Evans が「Deaf Tech: Travel Through Time from Past to Future」について講演しています。
ペルソナは、障がいのある人々を自分のペルソナに取り入れる際に、インクルーシブなデザインツールとして使用できます。これにはさまざまな方法があります障がい固有のペルソナを作成したり、既存のユーザー ペルソナに障がいを追加したり、状況的な障がい、一時的、永久的な障がいの動的な現実を反映したペルソナのスペクトルを作成したりできます。
どのような方法で障がいのある人を自分のペルソナに組み込んだとしても、現実の人物や固定観念に基づいているべきではありません。ペルソナはユーザーテストに代わるものではありません。
- 名前: Jane Bennet
- 年齢: 57 歳
- 所在地: エセックス（英国）
- 職業: UX エンジニア
- 障がい: 若年発症パーキンソン病（YOPD）による手の振戦
- 目標: 音声入力を使用してコードの候補を簡単に追加できるようにする、最小限のキー操作でオンラインで自転車用品を見つける。
- 不満: ウェブサイトがキーボードのみに対応していない、タップ操作用の領域が狭いデザインのアプリ。
UX エンジニアである Jane は、会社のサイトの関連性を保つうえで不可欠なページをデザインし、作成しています。彼女は一日を通して多くのチームメンバーをサポートしています。 彼女は技術火事の女王であり、予期せぬ事態に直面したときは、部門の全員が頼りになります。
震えで細かい運動能力が失われ、ネズミを使うのがますます難しくなっている。ウェブ ブラウジングでキーボードを普段より頼りにしてきました。Jane はいつも体を鍛えています。彼女はロードレースと BMX が大好きです。 昨年若年発症パーキンソン病と診断されたとき、さらに大きな打撃を受けました。
障がいシミュレーター
障がいシミュレータを使用してペルソナを模倣または補完する場合は、特に注意してください。
障がいシミュレータは、同情や共感を築くことができるという点で諸刃の剣です。これは、個人、シミュレータが使用される状況、その他多くの制御不能な要因によります。ユーザー補助の擁護者の多くは、障がいシミュレータ ツールの使用に反対して、障がいのある人が作成した映画、デモ、チュートリアル、その他のコンテンツを探して、自分の体験を直接学ぶことをすすめています。
「シミュレーション アクティビティは、目撃者に心と頭の中で知ってもらいたい最も重要な理解のいくつかには影響しないことを、完全に正直に言わなければならないと思います。目の見えない状態は私たちを特徴づける特性ではありません。また、盲目についての誤解や期待の薄いことが、私たちの最大の障害になっているのです。
こうした誤解が人為的な障壁を生み出し、完全な参入を妨げ、こうした誤った制限が、私たちを妨げている要因となっています。」
全米視覚障がい者連合会長 Mark Riccobono 氏
ユーザー補助ヒューリスティック
ペルソナと設計を構築する際に、ワークフローにheuristicsを追加することを検討してください。ヒューリスティックは、インタラクション デザインのシンプルなルールで、1990 年に Jakob Nielsen と Rolf Molich によって導入されました。 この 10 の原則は、ユーザビリティ エンジニアリングの分野での長年の経験に基づいて策定されたものであり、設計や人間とコンピュータのインタラクション プログラムで採用されています。
2019 年に進み、Deque のデザインチームは、デジタル アクセシビリティに焦点を当てた新しいヒューリスティックを作成し、共有しました。同社の調査によると、ウェブサイトまたはアプリのユーザー補助機能のバグの最大 67% は、設計プロセスにユーザー補助が含まれる場合に回避できます。これは、コードを 1 行も記述する前でも大きな効果を発揮します。
元のヒューリスティックと同様に、設計を計画する際に考慮すべきユーザー補助ヒューリスティックが 10 個あります。
- 操作方法とモダリティ: ユーザーは、任意の入力方法（マウス、キーボード、タップなど）を使用して、システムを効率的に操作できます。
- ナビゲーションとウェイファインディング: ユーザーは簡単に移動したり、コンテンツを検索したり、システム内で自分の現在地を特定したりできます。
- 構造とセマンティクス: 各ページのコンテンツの構造と、システム内での操作方法を把握できます。
- エラーの防止とエラー状態: インタラクティブなコントロールには、間違いを防止するための永続的なわかりやすい説明が用意されています。また、エラーの状態をわかりやすく示し、エラーが返されたときの問題点とその修正方法を示すこともできます。
- コントラストと読みやすさ: テキストやその他の意味のある情報を簡単に区別して読むことができます。
- 言語と読みやすさ: ユーザーはコンテンツを簡単に読んで理解できます。
- 予測可能性と一貫性: ユーザーは各要素の目的を予測できます。各要素がシステム全体とどのように関連しているかが明らかになります。
- タイミングと保持: ユーザーはタスクを完了するのに十分な時間を与えられ、時間（セッションなど）がなくなった場合でも情報が失われないようにします。
- 移動と点滅: ユーザーは、移動、点滅、またはアニメーション化されるページ上の要素を停止できます。これらの要素によってユーザーが注意をそらしたり、害を及ぼしたりしてはなりません。
- 視覚的および聴覚的な代替手段: ユーザーは、情報を伝える視覚または聴覚のコンテンツをテキストベースの代替手段を利用できます。
これらのユーザー補助ヒューリスティックについて基本事項を理解したら、ユーザー補助ヒューリスティック ワークシートを使用して、指示に沿って、ペルソナまたはデザインにそのヒューリスティックを適用できます。この演習は、複数の視点が集まるとより有意義な内容になります。
ナビゲーションと道案内のチェックポイントに対するユーザー補助ヒューリスティック審査の例を次に示します。
チームの全員がページまたはコンポーネントを確認してユーザー補助のヒューリスティック レビューを行った後、チェックポイントごとに合計が集計されます。この時点で、見つかった問題を修正する方法や、デジタル アクセシビリティをサポートするうえで最も重要な不備を修正する方法を決定できます。
ユーザー補助アノテーション
設計を開発チームに引き渡す前に、ユーザー補助アノテーションの追加を検討してください。アノテーションは通常、クリエイティブの選択やデザインのさまざまな側面を説明するために使用されます。ユーザー補助アノテーションは、デザインチームまたはユーザー補助の専門家の指導のもと、デベロッパーがプログラマティックに選択しやすくなる領域に重点を置いています。
ユーザー補助アノテーションは、ワイヤーフレームから高忠実度モックアップまで、設計プロセスのあらゆる段階で適用できます。これらには、ユーザーフロー、条件状態、機能などが含まれます。プロセスを効率化し、デザインをメインに据えるために記号やラベルを利用することがよくあります。
以下のデザインイラストの例は、Figma 用の Indeed.com のユーザー補助アノテーション キットから引用したものです。
設計プログラムに応じて、複数のユーザー補助アノテーション スターター キットから選択する必要があります。必要に応じて、独自のセットを作成することもできます。いずれの場合も、引き渡しチームにどの情報を伝える必要があるか、どの形式が最適かを判断する必要があります。
ユーザー補助アノテーションでは、次のような点を考慮する必要があります。
- 色: パレット内のすべての色の組み合わせのコントラスト比を指定します。
- ボタンとリンク: デフォルト、カーソルを合わせた状態、アクティブ、フォーカス、無効の各状態を示します。
- リンクをスキップ: 隠れた/見えるデザインの側面と、ページ上のリンクの場所をハイライト表示します。
- 画像とアイコン: 重要な画像やアイコンについて、推奨される代替テキストを追加します。
- 音声と動画: 字幕、文字起こし、音声による説明の領域またはリンクをハイライト表示します。
- 見出し: プログラマティックなレベルを追加し、見出しのようなものをすべて含めます。
- ランドマーク: HTML または ARIA を使用して、デザインのさまざまなセクションをハイライト表示します。
- インタラクティブ コンポーネント: クリック可能な要素、マウスオーバー効果、フォーカス エリアなどを識別できます。
- キーボード: フォーカスの開始位置（アルファ ストップ）とタブの順序を指定します。
- フォーム: フィールド ラベル、ヘルパー テキスト、エラー メッセージ、成功メッセージを追加します。
- わかりやすい名前: 支援技術が要素を認識する方法を指定します。