デザインとユーザーエクスペリエンス

自分のお気に入りのウェブサイトやアプリについて考えてみましょう。なぜお気に入りなのか？次に、気に入らないウェブサイトやアプリについて考えてみましょう。気に入らない点は何ですか？ユーザーがデザインを操作する方法や、ウェブサイトとアプリでのユーザーエクスペリエンスは異なる場合があります。

こうした体験は、時間帯、使用しているデバイスの種類、前夜に十分な睡眠をとれたかどうか、体調が悪いかどうか、支援技術を使用しているかどうかなどによって変化する可能性があります。世界には 80 億人近くの人々が暮らしており、ユーザーがデザインをどのように使用し、体験するかの可能性は無限です。

インクルーシブデザイン

ユーザーの潜在的なニーズをすべて一度に解決するにはどうすればよいですか？インクルーシブなデザインを心がけましょうインクルーシブなデザインでは、包括性、ユーザビリティ、ユーザー補助を 1 つにまとめた人間中心のアプローチを採用しています。

アクセシビリティ、インクルーシブネス、ユーザビリティのすべてが真ん中でインクルーシブなデザインとして満たされるベン図。

ユニバーサルデザインが、できるだけ多くの人が使用できる単一のデザインに重点を置くのとは異なり、インクルーシブデザインの原則は、特定の個人やユースケース向けに設計し、その設計を他のユーザーに拡張することに重点を置いています。

アクセシビリティに重点を置いたインクルーシブな設計原則は次の 7 つです。

同等のエクスペリエンスを提供する: ユーザー全員がコンテンツの品質を損なうことなく、ニーズに合った方法でタスクを完了できるように、インターフェースがすべてのユーザーにとって同等のエクスペリエンスを提供できるようにします。
状況を考慮する: ユーザーの状況に関係なく、インターフェースがユーザーに価値のあるエクスペリエンスを提供するようにします。
一貫性を保つ: 慣れ親しんだ規則を使用し、論理的な方法で適用します。
ユーザーにコントロールを委ねる: ユーザーが好みの方法でコンテンツにアクセスして操作できるようにします。
選択肢を提供する: タスクを完了するためのさまざまな方法（特に複雑なタスクや標準以外のタスク）を提供することを検討してください。
コンテンツに優先順位を付ける: コンテンツとレイアウト内でこれらの要素を優先順位に従って配置することで、ユーザーがコアタスク、機能、情報に集中できるようにします。
価値を追加する: 機能の目的と重要性、さまざまなユーザーのエクスペリエンスを改善する方法について検討します。

ペルソナ

新しいデザインや機能を開発する際に、多くのチームはユーザーのペルソナを使用してプロセスを進めます。ペルソナは、多くの場合、量的および質的なユーザー調査に基づいてデジタル商品を使用する架空のキャラクターです。

ペルソナは、設計と開発のプロセス全体で、これらの機能を迅速かつ低コストでテストし、優先順位を付ける方法も提供します。会話に現実的な考慮事項を追加することで、サイトコンポーネントに関する意思決定に集中し、戦略を調整して特定のユーザーグループに焦点を当てた目標を設定できます。

障がいを組み込む

障がいには、永続的、一時的、あるいは状況的なものがあります。これらの障がいは、触覚、視覚、聴覚、発話に影響する可能性があります。 — Microsoft の Inclusive 101 Toolkit のペルソナスペクトル。

「人によって状況は異なります。私から言えるのは、私の経験に基づくものです。1 人のろう者と出会ったとしても、それは 1 人のろう者であって、すべてのろう者ではありません。」
ID24 トーク「Deaf Tech: Travel Through Time from Past to Future」のメリルエバンス氏。

障がいのあるユーザーをペルソナに組み込む場合は、ペルソナを包括的な設計ツールとして使用できます。これを行う方法はさまざまです。障がいに固有のペルソナを作成したり、既存のユーザーペルソナに障がいを追加したり、状況的な障がい、一時的な障がい、永続的な障がいのダイナミックな現実を反映するペルソナスペクトルを作成したりできます。

どのような方法で障がいのある人を自分のペルソナに組み込むかにかかわらず、障がいのある人は実在の人物や固定観念に基づくものであってはなりません。ペルソナはユーザーテストの代わりにはなりません

ペルソナ: Jane Bennet

特定のユースケースをサポートするペルソナの例を確認する。

名前: Jane Bennet
年齢: 57 歳
所在地: 英国エセックス
職業: UX エンジニア
障がい: 若年発症パーキンソン病（YOPD）による手の振戦
目標: 音声文字変換入力を使用してコード候補を簡単に追加し、キー入力を最小限に抑えてオンラインで自転車用品を探す。
不満: キーボードのみのサポートが不足しているウェブサイト、タップ操作用の領域が小さいデザインのアプリ。

UX エンジニアである Jane は、会社のサイトの関連性を維持するために不可欠なページをデザイン、構築しています。彼女は一日中多くのチームメンバーをサポートしています。技術的な問題の解決に長けており、予期せぬ事態が発生したときには、部門の全員が彼女に頼ります。

震えにより微細運動能力が低下し、マウスの使用がますます困難になっています。ウェブの操作にキーボードをますます頼るようになっています。ジェーンさんはいつも体力を重視してきました。ロードレースと BMX が大好きです。そのため、昨年若年性パーキンソン病と診断されたときは、さらに大きなショックでした。

障がいシミュレータ

障がいシミュレータを使用してペルソナをエミュレートまたは補完する場合は、細心の注意を払ってください。

障がいシミュレータは、共感や共感を構築できるという点で両刃の剣です。これは、個人、シミュレータが使用されるコンテキスト、その他多くの制御不可能な要因によって異なります。多くのユーザー補助の提唱者は、障がいシミュレーションツールの使用に反対しており、障がい者によって作成された映画、デモ、チュートリアルなどのコンテンツを探し、障がい者の経験を直接学ぶことを推奨しています。

「シミュレーションアクティビティは、視覚障がい者が心と頭で理解してほしい最も重要な理解に影響しないことを、正直に伝える必要があります。盲目であることが私たちを定義する特徴ではなく、盲目に関する誤解と低い期待が最大の障害である。
こうした誤解は、私たちが完全に参加することを妨げる人為的な障壁を生み出し、こうした誤った制限は、私たちを抑制する要因になります。」
全米視覚障害者連盟会長の Mark Riccobono 氏

ユーザー補助に関するヒューリスティクス

ペルソナとデザインを作成する際に、ワークフローにヒューリスティクスを追加することを検討してください。ヒューリスティクスは、1990 年に Jakob Nielsen と Rolf Molich によって導入された、インタラクションデザインのルールです。この 10 の原則は、ユーザビリティエンジニアリングの分野で長年にわたる経験に基づいて開発され、それ以来、設計プログラムやヒューマンコンピュータインタラクションプログラムで使用されてきました。

2019 年、Deque の設計チームは、デジタルアクセシビリティに焦点を当てたヒューリスティクスの新しいセットを作成して共有しました。調査によると、ウェブサイトやアプリのすべてのユーザー補助バグの最大 67% は、ユーザー補助を設計プロセスの一部に含めると回避できます。これは、コードを 1 行も記述する前に大きな影響を与えることができます。

元のヒューリスティクスセットと同様に、設計を計画する際に考慮すべきアクセシビリティのヒューリスティクスが 10 個あります。

操作方法とモダリティ: ユーザーは、選択した入力方法（マウス、キーボード、タップなど）を使用してシステムを効率的に操作できます。
ナビゲーションと案内: ユーザーはシステム内の移動、コンテンツの検索、現在地の確認を常に行うことができます。
構造とセマンティクス: ユーザーは各ページのコンテンツの構造を理解し、システム内での操作方法を理解できます。
エラーの防止と状態: インタラクティブコントロールには、間違いを防止するための永続的で意味のある指示があります。エラーが返されたときは、問題の内容とその修正方法を示す明確なエラー状態をユーザーに提示します。
コントラストと判読性: ユーザーがテキストやその他の有意な情報を簡単に区別して読めるようにします。
言語と読みやすさ: ユーザーがコンテンツを簡単に読み、理解できる。
予測可能性と一貫性: ユーザーは各要素の目的を予測できます。各要素がシステム全体とどのように関連しているかが明確です。
タイミングと保持: ユーザーには、タスクを完了するのに十分な時間が与えられ、時間（セッションなど）を使い切っても情報が失われないようにします。
移動と点滅: ページ上の要素の移動、点滅、アニメーションを停止できます。ユーザーがこれらの要素によって気を散らしたり、害を受けたりしない。
視覚と聴覚の代替手段: ユーザーは、情報を伝えるビジュアルコンテンツや聴覚コンテンツの代わりに、テキストベースの代替コンテンツを利用できます。

これらのユーザー補助ヒューリスティクスの基本を理解したら、ユーザー補助ヒューリスティクスのワークシートを使用して、提供されている手順に沿って、ペルソナまたは設計に適用できます。この演習では、複数の視点を集めるとより有益です。

ナビゲーションとウェイファインディングのチェックポイントのユーザー補助ヒューリスティクスレビューの例を次に示します。

ナビゲーションとウェイファインディングのチェックポイント	優れている（+2 ポイント）	パス（+1 ポイント）	失敗（-1 ポイント）	該当なし（0 pt）
フォーカスを受け取ったすべてのアクティブな要素に、わかりやすい視覚的なインジケーターが設定されていますか？
ページ固有の情報が先頭にある、わかりやすいタイトルテキストがページに含まれているか。
ページタイトル要素と H1 は同じか類似していますか？
主要なセクションごとにわかりやすい見出しはあるか。
リンクの目的は、リンクテキストのみから定義されていますか？それとも、その直近のコンテキストから定義されていますか？
ページの一番上にスキップリンクが配置されており、フォーカス時に表示されます。
ナビゲーション要素の整理により、ウェイファインディングが容易になっているか

チームの全員がページまたはコンポーネントを確認してユーザー補助機能ヒューリスティックレビューを行うと、チェックポイントごとに合計が集計されます。この時点で、検出された問題の修正方法を決定したり、デジタルアクセシビリティのサポートに不可欠な不足を修正したりできます。

ユーザー補助のアノテーション

設計を開発チームに引き渡す前に、ユーザー補助機能のアノテーションを追加することを検討してください。

一般的に、アノテーションはクリエイティブな選択を説明し、デザインのさまざまな側面を説明するために使用されます。ユーザー補助機能のアノテーションは、デベロッパーがデザインチームやユーザー補助機能に重点を置くスペシャリストのガイダンスに沿って、よりユーザー補助機能に優れたプログラマティックな選択を行うことができる領域に焦点を当てています。

ユーザー補助アノテーションは、ワイヤーフレームから高忠実度モックアップまで、設計プロセスのどの段階でも適用できます。これには、ユーザーフロー、条件状態、機能を含めることができます。多くの場合、シンボルやラベルは、プロセスを合理化し、デザインを主眼に置くために使用されています。

次のデザインイラストの例は、Figma 用の Indeed.com のユーザー補助アノテーションキットから抜粋したものです。