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

お気に入りのウェブサイトやアプリについて考えてみましょう。何がお気に入りですか？次に、気に入らないウェブサイトやアプリについて考えてみましょう。気に入らない点は何ですか？ユーザーがデザインとどのようにやり取りするか、ウェブサイトやアプリでのユーザーエクスペリエンスは、ユーザーによって異なります。

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

インクルーシブデザイン

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

アクセシビリティ、インクルーシビティ、ユーザビリティがすべて中央で交わるベン図。

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

アクセシビリティに重点を置いたインクルーシブデザインの原則は 7 つあります。

同等のエクスペリエンスを提供する: インターフェースがすべての人に同等のエクスペリエンスを提供できるようにします。これにより、コンテンツの品質を損なうことなく、ユーザーのニーズに合った方法でタスクを完了できます。
状況を考慮する: ユーザーの状況に関係なく、価値のある体験を提供できるインターフェースにしてください。
一貫性を持たせる: 慣例的な方法を使用し、論理的な方法で適用します。
制御を許可する: ユーザーが好みの方法でコンテンツにアクセスして操作できるようにします。
選択肢を提供する: 複雑なタスクや標準外のタスクについては、ユーザーがタスクを完了するためのさまざまな方法を提供することを検討してください。
コンテンツの優先順位付け: コンテンツとレイアウト内で要素を優先順位順に配置することで、ユーザーがコアタスク、機能、情報に集中できるようにします。
価値を追加する: 機能の目的と重要性、およびさまざまなユーザーのエクスペリエンスをどのように改善するかを検討します。

ペルソナ

新しいデザインや機能を開発する際、多くのチームはユーザーのペルソナをプロセス全体で活用しています。ペルソナは、デジタルプロダクトを使用する架空の人物です。多くの場合、定量的および定性的なユーザー調査に基づいて作成されます。

ペルソナは、設計と開発のプロセス全体で機能をテストして優先順位を付けるための、迅速かつ安価な方法でもあります。サイトコンポーネントに関する意思決定に焦点を当て、実際の状況を考慮したレイヤを会話に追加することで、戦略を調整し、特定のユーザーグループに焦点を当てた目標を作成するのに役立ちます。

障がいを取り入れる

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

「人はそれぞれ違います。私の経験からしかお話できません。1 人のろう者と出会ったからといって、すべてのろう者と出会ったわけではありません。」
ID24 の Meryl Evans 氏による講演「Deaf Tech: Travel Through Time from Past to Future」

ペルソナに障がいのある人を含めることで、インクルーシブデザインツールとしてペルソナを使用できます。これにはさまざまな方法があります。障害固有のペルソナを作成したり、既存のユーザーペルソナに障害を追加したり、状況、一時的、永続的な障害の動的な現実を反映するペルソナスペクトルを作成したりすることもできます。

障害のあるユーザーをペルソナに組み込む方法に関係なく、実在の人物やステレオタイプに基づいてペルソナを作成することは避けるべきです。ペルソナはユーザーテストの代わりにはなりません。

ペルソナ: Jane Bennet

特定のユースケースをサポートするペルソナの例をご覧ください。

ジェーンスミスは背が高く、長い黒髪で、グレーの長袖シャツとジーンズを着用しています

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

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

震えによって細かい運動能力が低下し、マウスの使用がますます困難になっています。彼女はウェブの操作にキーボードをますます活用するようになっています。Jane は常に体力維持に熱心に取り組んでいます。ロードレースと BMX が大好きです。昨年、若年性パーキンソン病と診断されたときのショックは、計り知れないものでした。

障がいシミュレーター

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

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

「シミュレーションアクティビティは、視覚障害者が心と頭で知っておくべき最も重要な理解の一部に影響を与えないことを、完全に正直に伝える必要があると思います。盲目は私たちを定義する特徴ではなく、盲目に対する誤解や低い期待が最大の障害です。
そうした誤解が、私たちが十分に活動することを妨げる人工的な障壁を生み出し、そうした誤った制限が、私たちを阻むものへと変わっていくのです。」
Mark Riccobono 氏、全米視覚障害者連盟会長。

ユーザー補助に関する経験則

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

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

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

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

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

ナビゲーションと道案内のチェックポイントのアクセシビリティヒューリスティックレビューの例を次に示します。

ナビゲーションと道案内のチェックポイント	優れている（+2 ポイント）	パス（+1 ポイント）	不合格（-1 ポイント）	該当なし（0 ポイント）
フォーカスを受け取ったアクティブな要素すべてに、明確で視認可能なインジケーターが設定されているか。
ページ固有の情報が最初に記載された、意味のあるタイトルテキストがページにありますか？
ページタイトル要素と H1 は同じか、類似しているか。
各主要セクションに意味のある見出しが付いているか。
リンクの目的は、リンクテキストのみ、またはその直前のコンテキストから定義されていますか？
ページの最上部にスキップリンクが用意されており、フォーカス時に表示されるか。
ナビゲーション要素の配置は、道案内を容易にするものですか？

チームの全員がページまたはコンポーネントを確認し、アクセシビリティヒューリスティックレビューを実施したら、各チェックポイントの合計が集計されます。この時点で、見つかった問題を修正する方法や、デジタルアクセシビリティのサポートに不可欠な欠落を修正する方法を決定できます。

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

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

一般に、アノテーションはクリエイティブの選択を説明したり、デザインのさまざまな側面を説明したりするために使用されます。ユーザー補助機能に関するアノテーションは、設計チームやユーザー補助機能に特化したスペシャリストのガイダンスに基づいて、デベロッパーがよりアクセシビリティの高いプログラマティックな選択を行える領域に焦点を当てています。

ユーザー補助機能のアノテーションは、ワイヤーフレームから高忠実度のモックアップまで、設計プロセスのどの段階でも適用できます。ユーザーフロー、条件付きの状態、機能を含めることができます。プロセスを効率化し、デザインを主な焦点として維持するために、記号やラベルがよく使用されます。

次のデザインのイラストの例は、Figma 用の Indeed.com のアクセシビリティアノテーションキットから引用しています。