よりインクルーシブなデザインシステムはより良い体験をつくる | アドビ UX 道場 #UXDojo

デザイナーは、より良い体験を提供するべく熱心に働いています。テクノロジーの消費者として、デザイナーはデバイスやテクノロジーに苛立たせられたときの感情をよく理解しています。アプリが期待通りに動作しないときや、簡単なフォーム入力が画面内の要素が近づきすぎているために困難なときの感情です。その苛立ちは、障がいに起因する挑戦に直面すると、さらに度合いを増します。2 つの前線、すなわちインターフェイスおよび障がいと同時に闘うことは、日々の生活におけるユーザーの挑戦を飛躍的に困難なものにします。

障がいは、驚くほど多くの人々に影響を及ぼしています。米国国勢調査局によると、2014 年には米国の居住者の 27.2% が障がいを抱えていました。彼らは、私たちの友人、隣人、同僚、家族、顧客であり、将来的には全ての人です。というのは、人は、時間の経過とともに若返ったり、動きが機敏になったりはしないからです。デザイナーの使命は、すべての人のための、より良い、より人間中心の体験を構築することです。

アクセシビリティとデザインシステム

アクセシビリティのためのデザインは、色のコントラスト比や文字サイズ以上のものです。デザイナーは、問題をつくり出すことも、解決することもできます。もし、要件を満たしているか確認すればよいものとしてアクセシビリティを扱うなら、より良い製品やサービスをデザインする機会を逃してしまうでしょう。

企業にとって、デザインシステムの役割は、一貫したデジタル体験を構築するためのツールであると考えることができます。だとすれば、デザインシステムが本質的にインクルーシブであるように構築されている場合、それはユーザだけでなく企業にとっても大きな意味を持ちます。アクセシブルなパターンを含み、インクルーシブな体験を確立できるデザインシステムは、組織のデジタル体験全体に「悪い慣習」が広がることを防ぎます。

この記事では、デザインシステムの開発に取り込める、インクルーシブなアプローチの例とトレンドを紹介します。

インクルーシブな文化を確立する

アクセシビリティは、組織の基盤として位置づけられるべきものです。採用活動において多様性やインクルーシブを重視する企業はますます増えています。この変化は、デザインシステムやそれを使用するチームにより良い環境を提供し、仕事の質を向上させるものです。もしチームに障がいを持つ人がいれば、異なる視点から問題解決に貢献できるため、制作されるデザインは、まず確実により良いものになるでしょう。

アクセシビリティを自社の文化に組み込むもう一つの方法は、視覚的な注意喚起やコミュニケーションのための道具をデザインシステム内につくることです。Sainsbury 社の Luna Design System には、アクセシビリティ関連のさまざまなテーマを伝えるポスターがあり、チームはそれを印刷して仕事場や共有スペースに貼ることができます。デザインシステムにこうしたポスターを取り入れると、組織としてのインクルーシブへの意識が強化されます。

コンポーネントに固有のガイダンス

より多くのデザインシステムが、コンポーネントライブラリの一部として、アクセシビリティの実装に関する考慮点を要約したドキュメントを含めるようになっています。以前であれば、デザインシステムのコンポーネントは WCAG 2.0 AA 準拠であることを伝え、デザインシステムのアクセシビリティについては、一般的な記述を注記として含めているだけでした。コンポーネント固有のガイダンスを含めると、すべてのプロジェクトにおいて、コンポーネントとそれを使用した体験を実装する際に、アクセシビリティを優先すべき項目として考えられるようになります。

アクセシビリティを考慮したデザインとコーディング

色のコントラストとタイポグラフィについてのアクセシビリティ指針を提供すれば、基本的なアクセシビリティ要件は満たせます。しかし、これだけで一貫性を確保することはできません。もしデザインシステムのコンポーネントが、定義済みのアクセシビリティへの考慮と共にコーディングされていれば、それらのコンポーネントが適切に使用される可能性は高まります。Aria タグやカスタマイズ可能なステートをコードスニペットに含めると、アクセシビリティを損なうことなくコンポーネントをカスタマイズできるようになります。このアプローチは、デザインから開発への引き継ぎを容易にします。

靴屋の子供たちに新しい靴を

「靴屋の子には靴がない」ということわざを聞いたことがありますか？他人のために何かをつくることに熱中しすぎると、自分たちのチームに必要なものが見えなくなってしまうことがあります。ところで、アクセシブルなデザインシステムをつくるチームが使用するツールを、もっとアクセシブルにすることはできるのでしょうか？

IBM のチームは、実世界のモノから構成される触覚コンポーネントのライブラリを構築しました。フェルト、紙と糊、つまようじなどを使い、弱視の開発パートナーがコンポーネントの配置を体験して感じ取り、デザインシステムのコンポーネントから構築されるインターフェイスへの具体的なフィードバックをできるようにしたのです。デザインシステムの開発者は、ユーザー体験のために構築するコンポーネントのアクセシビリティだけでなく、デザインシステムが提供するツールにも同様の配慮をするべきでしょう。これにより、身体的または認知的な障がいに関係なく、デザインシステムのあらゆるユーザーが、デザインシステムのコンポーネントを用いた制作を簡単に行えます。

キーボードナビゲーションをさらに進化させる

視力や運動機能に障がいのあるユーザーは、マウス操作が困難、あるいは不可能な場合があります。キーボードによるナビゲーションをユーザーに提供することは、アクセシビリティの中核的な考慮事項です。これにより、ページが正しく設計されていれば、ほとんどのユーザーは適切な階層とフローに沿ってページ内を移動できます。標準的なキーボードによるナビゲーションは、タブキー、矢印キー、スペースバー、Enter、Esc などの標準的なキーの組み合わせにより実現されます。

企業によっては、さらに一歩進んで、特定の機能に対するキーボードのコマンドを用意しています。Slack のようなアプリケーションが明らかにしているのは、インターフェイスから特定の機能を呼び出すためのキーコマンドを、デザインシステムのコンポーネントに組み込めるということです。これにより、ユーザーは、現在のタスクに関係のない部分をタブで通過することなく、目的の機能へ直接ショートカットできます。

音声とサウンドの活用

音声ユーザーインターフェイス（VUI）は、障がいを持つ人がインターフェイスをより効率的に操作するのに役立つ場合があります。VUI のガイドラインやパターンは、より伝統的なデザインパターンとコンポーネントの補足として、既存のデザインシステムの中に定義することができます。もしくは、特定の用途やツールのための一連のパターンとして構築することもできます。

VUI コンポーネントには、トリガー、先導キュー、フィードバック、エラー状態、終了キューなどが含まれます。音声インターフェイスは、補足のための視覚的な UI コンポーネントを持つことがあります。これらは、視覚障がい者だけでなく、他のタイプのユーザーにもアクセシブルになるように定義する必要があります。

サウンドは、体験を構築する道具として普及しています。デザインシステムには、視認できないユーザーも同じ機能を得られるように、サウンドに関する属性が含まれているべきです。視認できるユーザーにとって、サウンドは、操作やフィードバックの感覚を提供し、ブランド体験に含まれる特定のパターンや行為を強調する追加のレイヤーです。

変化する体験

体験をデザインする有望な手法を探求する行為には、デザインシステムのあり方とすべてのユーザーの体験を変える可能性があります。その一例は、ミューテイティブデザイン（mutative design）です。何年か前に、Project Phoebe は、テクノロジーがユーザーの身体的ニーズに反応する可能性を示しました。ミューテイティブデザインは、個々のユーザーにシステムを適応させる能力を持ちます。属性、興味、学習スタイル、能力、素質などのあらゆる要素が、提供可能な最適の体験の流れの計算に考慮されます。

システムがユーザーについて学習すると、基本的な体験と UI は、属性と考慮事項に基づいて調整されます。例えば、弱視のユーザー向けのインターフェイスは、カラーパレットや文字サイズを適合させて、より快適な高コントラストの体験を実現することができるかもしれません。このアプローチは、すべてのユーザーにとって、より柔軟で、しかも一貫性のある体験を可能にするデザインシステムを構築できる可能性を示しています。

おわりに

デザイン業界において、よりインクルーシブになるための協調的な取り組みが行われていることは明白です。デザイナーは、アクセシビリティ要件がつくり出す機会も含めて、より良い製品を構築し、体験を革新するあらゆる機会を捉えるべきです。また、企業は、それを自社の文化に根付かせる必要があります。より良いコンポーネントやドキュメントを作成し、会話型インターフェイスなどの新しい操作手段を採用して、デザインシステムが基礎からインクルーシブであるように努めましょう。インクルーシブデザインの考えは、すべてのユーザーにとって、より有益で調和した体験へとつながる道です。

この記事は、Ogilvy との提携により、デザインシステムシリーズの一環として制作されました。

この記事は More Inclusive Design Systems Lead to Better Experiences（著者: Mason Magyar）の抄訳です