インクルーシブな体験を画面を越えてデザインするためのUIキット | アドビUX道場 #UXDojo

Creative Cloud UI/UX & Web

主要なアプリやサイトのほとんどが、ユーザーに状況や通知を知らせるためにテキストを使用しています。しかし、テキスト依存のUIは、いろいろなグループのユーザーとの関りを除外します。読み書きする能力のない人々、強度の失読症患者、そして視覚障がいを持つ人々です。

世界では20%が読み書き能力に欠け、アメリカでは43%が識字能力の低い状態です。視覚障がいは、アメリカだけでもさらに3千4百万人に関連します。そして、失読症などの読み書きに関する障がいは人口の最大15%に影響するかもしれません。こうした識字に関わる障がい者は誰もが、テキストに大きく依存するUIを利用できない可能性があります。特に、テキストが分かりやすいアイコンと共に提供されていない場合は問題です。アイコンは情報を伝えることができ、適切なコントラストとシンプルな形状であれば、視覚障がいを持つ人々にはテキストよりも識別しやすいこともあります。

それが、テキスト依存のGUIの代替となるUIのためのText-Free UI Kit for Adobe XDをデザインした理由です。UIキットの詳細と、アクセシブルな体験の実現にテキストフリーの体験が重要な理由について、これから説明します。

新しい技術は前進の機会になる

スクリーンリーダーやテキスト読み上げソフトウェアのような特化型の支援機能は、アプリやサイトを使う際にすらすらと読むことができない人々を補助するために存在します。しかし、調査によれば様々な要因によりスクリーンリーダーの機能が妨げられることがあります。画像に対する代替テキストの欠如、音声オプションが無い視覚的な表現、画像内に書かれたテキストなどは、スクリーンリーダーに遺贈んする人たちにとってのアプリやサイトのユーザビリティを減少させます。

音声UIや拡張現実などに代表される、今日利用可能な技術の進歩があれば、テキストは使いやすいUIに必ずしも必要のものではなくなります。音声を第一につくられたユーザーインターフェースは、識字や失読症に苦しむ人々、そして読み書きを覚える前の子どもにも、アプリやサイトの操作を手が届くものにします。コンピュータが媒介する現実、すなわち有用な情報を加えて視覚的な障害になる可能性のあるものを削除する拡張現実の一種は、視覚障がい者がGUIを操作する際に、テキストの代替となるイメージやアニメーションによる明確な指示を提供して、彼らの体験を支援します。

Adobe XD用のテキストフリーUIキット

現在主流のUIと、アクセシビリティとの間にある溝について学び、Adobe XDの音声プロトタイプ機能の実験をしばらくした後に、テキストフリーのUIキットをつくろうと思い立ちました。その時最初に浮かんだ疑問は、「そもそも、それはどんな見た目になるのだろう?」というものでした。これまでに目にしたUIキットはどれもテキストを使用したUIコンポーネントに大きく依存していました。ヘッダー、パンくずリスト、入力フィールド、そして説明用のテキストなどです。デザインをする上での大きな懸念は、テキストに依存することなく情報や機能をユーザーに知らせるにはどうするべきかということでした。仮にテキストを置き換えられるアイコンや画像を見つけられたとして、使いやすくなじみやすいUIをデザインするにはどうしたらよいのでしょう?

この疑問に答えるため、既存の研究を調べました。いくつかの調査がテキストフリーのユーザーインターフェースを扱っていましたが、そこには、公的に利用可能なワイヤーフレームやUI要素は含まれていませんでした。最終的に、これらの調査の主要な結論を頼りにして、テキストフリーUIキットをデザインすることにしました。

単語やテキストの使用はダメでも、数字をデザインに使うことは問題ありません。

An example of a text-free user interface powered by voice commands.

UIキットの目的は、テキストフリーの体験にも使い道や意味を持つ場面があることを伝えつつ、画面を越えてデザインしたいデザイナーのための見取り図になるものを提供することでした。

The user flow for a text-free AR navigation interface.

Text-Free UI Kitは、テキストフリーの体験に関する2つのコンセプトから構成されています。どちらも音声ヒントとARの要素を利用しています。1つ目のコンセプPolarisは、音声コマンドとARによる指示の組み合わせにより、ユーザが目的地への道のりを見つける行為を支援するモバイルナビゲーションアプリです。

A demo, text-free navigation app that uses visual AR cues to guide the user through their mobile camera viewfinder.

2つ目のコンセプトARtieは、見慣れないものや場所を特定し、日々の暮らしの中で出会うかもしれない一般的な問題を解決するスマートフォン用のバーチャルアシスタントです。

The user flow for a text-free image recognition app.

アイコンとコンポーネントのライブラリも含まれています。音声やAR体験の読み込み画面、音声コマンドを聞いている画面、メニューに使えるシンボルなど、画面のデザインを始めるのに役立つ素材集です。

A set of recognizable icons available in the text-free ui kit.
A example of the different states of components in the text-free ui kit.

音声やARのようなツールの拡散に伴い、既存のUIの限界を超えて、デザイナーはよりアクセシブルでインクルーシブな体験をつくり始めることが可能になりました。これが意味するのは、従来除外されていた人々をユーザーベースの一部に加えられるということだけではありません。すべてのユーザーに対して、より多様でより柔軟な体験を提供することができるのです。このUIキットは、画面の外に広がる2つの体験の例を示しています。テキスト依存のUIでは実現できない、よりインクルーシブな体験です。


この記事はDesigning Inclusive Experiences that Go Beyond the Screen(著者:Cara Neel)の抄訳です

POSTED ON 2019.11.25