インクルーシブなデザインシステムが実現する、より良いユーザー体験 | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
良質の体験を提供するべく勤しむデザイナー達は、一方ではテクノロジーを利用する側として、デバイスやテクノロジーがつくり出すフラストレーションをよく知っています。アプリが期待どおりに動作しなかったり、フォームへの記入に困難を感じることは珍しくありません。そこに障害が関わっている場合、フラストレーションはさらに上乗せされます。高齢であることが原因であれ、パーキンソン病などの神経系の症状であれ、使いづらいインターフェイスと障害という2つの課題を抱えた時、ユーザーの行為の難易度は、とてつもなく高まります。
障害は驚くほど多くの人に影響を与えています。米国国勢調査局の2014年の調査によると、米国に居住する人の27.2％が障害を持っています。これらの人々は、私たちの友人、隣人、同僚、家族、顧客であり、年齢に伴う衰えを考えれば、誰も逃れることのできない状況でもあります。すべての人にとって、よりインクルーシブな体験をつくり出すのはデザイナーの役割です。
先に障害を考慮してからデザインした場合、通常の人のためにデザインするよりも優れたソリューションになることがよくあります。
エリーズ・ロイ — TED トーク、「When We Design for Disability, We All Benefit（障害を考慮してデザインすれば、すべての人の役に立つ）」
アクセシビリティとデザインシステム
アクセシビリティは、色のコントラストやフォントサイズ以上のものでなくてはなりません。デザイナーの強みは、問題を発見して解決する能力です。アクセシビリティを後から確認するだけの単純な項目として扱っているなら、より良い製品やサービスをデザインする機会を逃しているかもしれません。
デザインシステムの役割は、一貫したデジタル体験を構築するためのツールを企業に提供することです。だとしたら、インクルーシブなデザインシステムを構築するのはどうでしょう？これはすべての人の役に立つはずです。インクルーシブな体験を実現し、アクセシブルなパターンを含むデザインシステムは、デジタル体験全体から望ましくない実践を取り除く役割を果たすでしょう。
これから、デザインシステムに組み込むことができるインクルーシブな体験の例とトレンドをいくつか紹介します。
「インクルーシブ」を企業文化として確立する
アクセシビリティは、組織の中に組み込まれているべきものです。採用活動において、多様性とインクルージョンを重視する企業が増えていますが、このような取り組みは、デザインシステムへのアプローチや、デザインシステムを使用するチームの環境改善に貢献します。チームに障害を持つ人がいれば、その人が異なる視点から問題の解決を支援できます。そのため、より優れたデザインに近づく可能性が高まります。
企業文化にアクセシビリティを組み込むもうひとつの方法は、デザインシステム内に、視覚的なリマインダーやコミュニケーションツールを取り入れることです。SainsburyのLunaデザインシステムには、さまざまなアクセシビリティのテーマに関連するガイドラインが含まれていますが、それに加えて、印刷して共有ペース等に貼れるポスターも含まれています。
SainsburyのLunaデザインシステムでは、ポスターを使用してインクルーシブデザインを強化している
コンポーネント固有のガイダンス
以前のデザインシステムといえば、コンポーネントについてはWCAG 2.0 AAに準拠していることを示唆する記述を、アクセシビリティに関する一般的なドキュメントに追加する程度の扱いでした。今では、より多くのデザインシステムが、コンポーネント固有のアクセシビリティに関連する考慮事項を記述したドキュメントを提供するようになっています。コンポーネント固有のガイダンスを提供することには、体験やコンポーネントを実装するときに、アクセシビリティを最優先にする意識を持たせる効果があります。
コンポーネントのアクセシビリティ実装ガイドラインを示すU.S. Web Design Systemからの例
U.S.Web Design System のガイドラインには、さまざまなボタンコンポーネントが、アクセシビリティの観点から必要なステートと共に示されている
アクセシビリティを考慮したデザインと実装
色のコントラストとタイポグラフィ関連のアクセシビリティガイドを提供すれば、主要なアクセシビリティ要件は満たせるかもしれません。しかし、それだけでは一貫性の保証には不十分です。デザインシステムのコンポーネントがアクセシビリティを考慮した上でコーディングされていれば、適切な実装が行われる可能性が高まるでしょう。さらに、ARIAタグとカスタマイズ可能なステートをコードスニペットに含めれば、アクセシビリティを損なうことなくコンポーネントをカスタマイズできるようになります。このアプローチには、デザインと開発のハンドオフを容易にする効果もあります。
ShopifyのPolarisデザインシステムには、アクセシブルでカスタマイズ可能なコーディング済みのコンポーネントが含まれている
ツール自体をアクセシブルにする
「靴職人の子が裸足で歩く」ということわざを聞いたことがありますか？他の人のために忙しく物を作るあまり、自分達が必要なものを見失うこともあるのです。では、アクセシブルなシステムの作成に使用するツール自体を、よりアクセシブルにすることはできるのでしょうか。
IBM のチームは、フェルト、紙とノリ、つまようじ、その他のテクスチャから触知型コンポーネントライブラリを構築しました。視力の弱いパートナーがコンポーネントの配置を感じて体験できるようにすることで、構築されているインターフェイスに関する彼らからのフィードバックを得られるようにする取り組みです。この例のように、デザインシステムの開発者は、エンドユーザー向けのコンポーネントのアクセシビリティを考慮するだけでなく、デザインシステムのユーザーが使用するツールに対しても同じように配慮するべきです。そうすれば、身体的あるいは認知的な障害を持つデザインシステムのユーザーにとって、デザインシステムのコンポーネントを使用することがより容易になるでしょう。
IBM の触知型コンポーネントライブラリ
キーボードナビゲーションの改善
視覚障害または運動機能障害のあるユーザーにとって、マウスを使ったナビゲーションは困難だったり、不可能な場合もあります。従って、ユーザーがキーボードを使ってナビゲーションできるよう考慮するのは、アクセシビリティに関するとても重要な事項です。一般的なキーボードナビゲーションは、タブ、矢印、スペース、エンター、エスケープなどの標準キーを組み合わせて行われます。ページを正しくデザインすれば、ほとんどのユーザーはページ内の階層やフローをナビゲートできるようになります。
標準的なナビゲーションサポートに加えて、UIの機能をキーボードコマンドから利用できるようにしている一部の企業もあります。Slackは、特定の機能を呼び出すためのキーボードコマンドを、インターフェイス内のコンポーネントに組み込んで提供している好例です。ユーザーは、タスクに必要な機能に直接ショートカットでアクセスできます。関係のない領域をタブで移動する必要はありません。
音声とサウンドの使用
音声ユーザーインターフェイス（VUI）は、障害のある人がユーザーインターフェイスをより効率的に使用するのに役立ちます。既存のデザインシステムに従来からのデザインパターンを補完するものとしてVUIのガイドラインを追加することもできますし、新たに一連のパターンの組み合わせとして確立することもできます。VUI コンポーネントには、トリガー、開始キュー、フィードバック、エラー状態、および終了キューを含めるようにします。音声インターフェイスは、視覚的UIコンポーネントの補助機能として使えるため、すべてのユーザーのアクセシビリティに貢献します。
サウンドは、体験を構築するためのツールとしてどんどん普及しています。デザインシステムには、応答などに使用するサウンド関連の項目を含めるようにして、視力の弱いユーザーにとっての有用性を確保するべきです。視力のあるユーザーにとってサウンドは体験内の特定のパターンまたはアクションを強化する感覚やフィードバックを追加する機能となります。
Appleの音声制御インターフェイスは、各UIコンポーネントに番号を割り当てて、音声コマンドを使用する際の速度と精度を向上させている
変化する体験
より良いUXデザインを追求した結果、デザインシステムの方向性やユーザー体験そのものが変わる場合があります。数年前のプロジェクトですが、Project Phoebeでは、テクノロジーがユーザーの身体的なニーズに対応することの可能性を示しました。「ミューテーションデザイン」は、システムを個々のユーザーに適応させる能力を持ち、ユーザーの背景、関心事、学習スタイル、スキルあるいは能力が、体験の最適化の条件として考慮されます。
システムがユーザーについての学びを得ると、基本的な体験とUIが属性または考慮事項に基づいて調整されます。たとえば、視力の弱いユーザー向けには、カラーパレットとフォントサイズを調整して、より読みやすい高コントラストの体験が生まれるかもしれません。このアプローチにより、すべてのユーザーにとってより柔軟かつ一貫した体験を実現するデザインシステムを作成できる日が近い将来やってくるかもしれません。
よりインクルーシブな方向へと、広く業界で取り組みが行われていることは明白です。デザイナーの役割は重要で、デザインする際はアクセシビリティ要件により生まれる機会も含めて、より優れた製品をつくり出す好機であると捉えるべきです。そして、企業にはそれを自社の文化に深く根付かせるべきです。デザイナーはより優れたコンポーネントとドキュメントを作成する必要があり、会話型インターフェイスなどの新しい技術の検討も含めて、インクルーシブなデザインシステムを考え始めるべき時です。インクルーシブデザインの考えを持てば、すべてのユーザーに対し、遥かに優れたシームレスな体験を提供することができるでしょう。
この記事は、Ogilvyデザインシステムシリーズの一部として Ogilvyと共同で作成されました。
この記事はMore Inclusive Design Systems Lead to Better Experiences（著者:Mason Magyar）の抄訳です