短時間で分かるインクルーシブウェブデザイン

主なポイント:

インクルーシブデザインは、デジタル製品を設計する際に、多様なユーザーグループの視点を取り入れることを目的とする。
ユーザーの製品体験に影響を与える可能性のある一時的・状況的な要因を考慮する。
インクルーシブウェブデザインには8つの原則があり、デザイナーがインクルーシブな体験を生み出す際に利用可能。
インクルーシブなウェブ製品をデザインするための演習の１つとして、マイクロソフトのインクルーシブデザイン思考がある。

インクルーシブ・ウェブデザインはアクセシブルデザインと同じ意味だとよく誤解されがちです。実際のところ関連性はありますが、アクセシビリティは機能や製品を複数の層の視点から見るインクルーシブデザインの1つの要素であることを認識することが重要です。この記事では、よりインクルーシブなユーザー体験を構築するにはどうすれば良いのかについて考察します。

インクルーシブデザインとは？

インクルーシブデザインとは、デザイナーが多様なユーザーグループや層の環境や状況を考慮し、狭い範囲のユーザーではなく、すべての人が製品を利用できるようにするUX手法のことを言います。インクルーシブデザインのプロセスに従うと、UXデザイナーはデジタル製品を意図通りに使うことを妨げる恒常的、一時的、および状況的な要因について考えるように促されます。デザイナーはインクルーシブデザインを考える際、性別、年齢、人種、その他一般的な人口統計のような偏見や思い込みを避けなければなりません。

インクルーシブデザインとアクセシブルデザインの比較

インクルーシブデザインは、アクセシビリティ含めた言葉です。インクルーシブは、言葉の壁、身体的制限、技術的制約、さらにはインターネット接続など、ユーザーが排除されていると感じるかもしれない他の要因にも焦点を当てたことを言います。アクセシビリティが永続的な制限や障害に対応するのに対し、インクルーシブデザインのアプローチでは一時的な要因や状況に応じた要因に注目します。

インクルーシブデザインの永続的、一時的、状況的の考察

UXデザイナーがインクルーシブウェブデザインを考えるとき、3つのカテゴリーがあります。

永続的
一時的
状況的

これらのカテゴリーには、それぞれ障がい、制限、制約があります。

ビジュアル
器用さ
聴覚
認知機能
スピーチ

デザインチームは、アクセシビリティや全体のデザインを行う際に、永続的な障がいについて考える必要があります。しかし、一時的と状況的な聴覚障がいにおいてはどのような点を工夫をしてデザインすれば良いでしょうか。

永続的: 永続的に耳が聞こえない、または聴覚に障がいがある人。
一時的: 怪我などにより一時的に聴力に障がいがある人。
状況的: 混雑した通勤電車でヘッドホンを付けていたり、身の回りの環境で聞こえない人

永続的な聴覚障がいの方のためにデザインすると、一時的、状況的なユーザーも恩恵を受けることがよくあります。しかし、デザイナーはそれぞれの状況を把握し、包括的な体験を保証する必要があります。

この聴覚障がいにおいて、ビデオ字幕は3つのカテゴリーすべてに良い状況をもたらします。しかし、通勤電車の利用者（状況的利用者）が周囲の人の邪魔にならないように、ビデオをミュートでスタートさせるという状況のことも考えたほうが良いでしょう。

インクルーシブデザインの重要性

インクルーシブ・ウェブデザインは、社会的な観点から良いアイデアであるだけでなく、ビジネス的な価値においても非常に重要な役割です。特定の状況の人々を考えられていない製品は、企業にとって収益の機会を逃すことになってしまいます。

例えば、米国市場向けのアプリをデザインする際、誰もが英語を話すと仮定していますが、実際には米国には4100万人のスペイン語ネイティブスピーカーが住んでおり、これは人口の10%以上にあたります。

また、身体に障がいのある人だけが手を使えない場合も同じです。しかし、腕を怪我している人はどうでしょう？また、子どもを抱っこしている親は、片手しか使えないのでしょうか？

障がい、制限、制約の可能性を推定すると、インクルーシブデザインのアプローチの重要性と、それがビジネスと顧客にどのような影響を与えるかが見えてきます。

インクルーシブデザインの８つの原則

「インクルーシブデザインの法則」は、UXデザイナーがユーザーのために全体の体験を作り出すために使える8つの原則を提示している。

同等の体験を提供する
状況的な課題を考える
一貫性をもつ
ユーザーをコントロールする
選択肢を提供する
コンテンツの優先順位を決める
付加価値がある
多様な視点を得る

多くのデザイナーは、これらの原則をすでにデザインに適用しているかもしれませんが、これらの原則がどのように包括性を高めるかの理解することで、より深く検討し、さらに改善の余地を見出すことができるかもしれません。

1) 同等の体験を提供する

ユーザーインターフェースは、すべてのユーザーが同等の価値、品質、効率でタスクを達成できるようにする必要があります。例えば、アイコンや画像などのグラフィックにaltテキストを使用することで、視覚に障がいのあるユーザーでも視覚的なコンテンツを消化できるようにすることが挙げられます。

UXデザイナーは、技術によってユーザーが排除される可能性があることも考慮しなければなりません。例えば「デスクトップとモバイルで同じ作業ができるのか？」や「AndroidとiOSで違いはあるのか？」ということです。

2) 状況的な課題を考える

環境がユーザーエクスペリエンスにどのような影響を与えるのか？デザイナーがユーザーに共感し、さまざまな状況下でデジタル製品の使用テストを行うことで、状況に応じた解決策を考えたデザインをすることができます。

例えば、片手しか使えない人が切符を買えるようにすることは、障がいの無い人が電車に乗るために歩きながら片手だけで切符を買うことができるようにも繋がります。

3) 一貫性をもつ

デザインの一貫性は、どのようなデジタル製品体験にも不可欠ですが、インクルーシブを考慮する場合は特に重要です。認知機能に問題のあるユーザーは、ユーザーインターフェースのナビゲートに苦労することが多いため、一貫性のないデザインや命名規則では、さらに人々を混乱させ、フラストレーションを与えてしまう可能性があります。

デザインシステムを構築することは、組織が一貫性を維持し、アクセシビリティのための基盤を作るための1つの方法です。アクセシブルデザインシステムがあれば、UXチームは、プロジェクトごとにスタイルガイドを使ってUIコンポーネントをゼロから構築するのではなく、ユーザビリティの中核となる問題の解決により多くの時間を費やすことができます。

4) ユーザーをコントロールする

良いデザインは、人々が自分のユーザーエクスペリエンスをコントロールするための機能を提供します。また、方向やフォントサイズ、ズーム、コントラストなど、ブラウザやデバイスの設定の上書きすることは避けたいものです。

障がいのあるユーザーは、デジタル製品を使用するために特定の設定を必要とすることがよくあります。これらの設定を上書きすると、利用が妨げられ、ユーザーエクスペリエンスから排除されることになります。

デザイナーは、UXパターンやアニメーションをどのように適用するかも考慮する必要があります。キーボードやスクリーン・リーダーしか使わないユーザーにとって、ずっとスクロールするということは大変になるでしょう。「もっと見る」ボタンを追加すれば、同じレベルの利便性を提供しながら、ユーザー自身がコントロールできるようになります。

5) 選択肢を提供する

UXデザイナーは、利便性と選択肢のバランスを取る必要があります。例えば、スワイプは素早く便利ですが、誰にでもできるわけではありません。同じタスクを達成するためのボタンやリンクを提供することで、すべてのユーザーがその機能を利用できるようになります。

6) コンテンツの優先順位を決める

コンテンツやレイアウトに優先順位をつけることで、ユーザーがコアなタスクをこなし、情報を簡単に見つけられるようになります。また、アコーディオンなどのUIコンポーネントを使用すれば、ユーザーがすぐに必要としないコンテンツを隠すことができます。

たとえば、FAQセクションにアコーディオンを使用すると、スクリーンリーダーはすべてのQ&Aを確認することなく、必要な答えをすばやく見つけることができます。他のユーザーも、各質問をスキャンして必要なものを見つけることができるため、このFAQ形式の恩恵を受けることができます。

7) 付加価値がある

UXデザイナーは、ユーザーにとっての価値を高めるために、デバイスの機能を活用する必要があります。デバイスのマイク、カメラ、振動、ジオロケーションなどは、さまざまな人に役立つツールです。

たとえば、音声検索とコマンドのために製品を最適化することは、スクリーン・リーダーだけでなく、Alexa、Siri、またはBixbyを使用する人々にも利益をもたらします。

UXデザイナーは、デジタル製品のユーザーエクスペリエンスを向上させ、誰にとってもより多くの価値を生み出すために、デバイスの機能を活用できる状況が数多く存在します。

8) 多様な視点を持つ

user bad good review satisfaction opinion

UXデザイナーは、ステークホルダーやユーザビリティの参加者から多様な視点を求めなければなりません。リサーチとテストには、ユーザーペルソナの外にいる可能性のある参加者を含める必要があります。

もしかしたら、障がいや制限のある人々は、製品自体がそれらの状況のユーザーの除外してしまっているのかもしれません。その上で、彼らはその製品を使用していない可能性もあります。顧客データや分析に基づいてのみテストを実施すると、知らず知らずのうちに人々を排除している可能性があります。

インクルーシブデザイン思考の応用

マイクロソフトのインクルーシブデザインツールキットは、UXデザイナーのためのデザイン思考の方法論を概説しています。

方向性を定める：ユーザーの障害や制限、およびさまざまな人がテクノロジーとどのように相互作用するかについて、自分自身を教育することから始めてください。
フレーム越しに見る：人間の限界というレンズを通して、あなたのデザインを見ます。
アイデアを出す：ステップ2の制限と設計との間のミスマッチを識別してください。製品設計に万能はないことを認識してください。
反復する：プロトタイプを作成し、コンセプトをテストします。
最適化する：デザインソリューションが製品体験にどのような影響を与えるか、実現可能か、そして実際の使用時にどう反映されるかを検討します。

UXPinを使ったインクルーシブWebデザイン

デザインプロセスにおけるプロトタイピングとインクルーシブテストは難しい作業です。

デザイナーは、プロトタイピングとテストにおいて、アクセシビリティとインクルーシビリティの問題を除かなければならず、これらは最終製品に反映され、ユーザーに悪影響を与えることになります。しかし、画像ベースのプロトタイプは、正確なテストを行うための忠実度と機能性に欠けています。また、UXデザイナーは、ステークホルダーから有意義なフィードバックを得るのに苦労します。

UXPinは、コードベースのデザインおよびプロトタイピングツールで、UXデザイナーは最終製品の機能を備えた忠実度の高いプロトタイプを作成する能力を備えています。また、UXPinに組み込まれたアクセシビリティツールにより、ウェブコンテンツ・アクセシビリティ・ガイドラインに基にした色やコントラストのテストも可能です。

UXPinの高忠実度で完全に機能するプロトタイプにより、UXデザイナーはユーザビリティ調査において正確なテストを実施し、障がいを持つユーザーを含む多様なユーザーグループから有意義な結果を得ることができます。

また、デザインチームは、没入感のあるプロトタイプ体験によって関係者に感銘を与え、デザインコンセプトを伝え、意思決定者からの賛同を得ることができます。

一般的なイメージベースのデザインツールにはない、コードベースのプロトタイピングの4つの機能。

ステート：1つの要素やコンポーネントに複数の状態を適用し、それぞれに異なるプロパティ、インタラクション、アニメーションを設定することができます。
インタラクション：高度なアニメーションや条件付き書式設定により、複雑なインタラクションを作成できます。
変数：ユーザーの入力を取得、保存し、その情報を使ってアクションを起こしたり、ユーザー体験をパーソナライズすることができます。
エクスプレッション：Javascriptのような関数を使って、完全に機能するフォームの作成、パスワードの検証、ショッピングカートの更新などを行えます。

無料トライアルに登録し、UXPinの高度なエンドツーエンドデザインツールで、よりインクルーシブなユーザーエクスペリエンスのデザインを始めましょう。