Androidアクセシビリティ デザイン編
アクセシビリティ向上でどう言う問題を解決したいか理解するために、基礎知識の編から読んでみてください🙇♀️
仕様確認の段階で問題を発見すれば、後で余計な苦労が避けれますので、
今回は、実装に入る前に確認すべきポイントを見てみましょう。
1. シンプルなレイアウト
a. 情報や機能の数を絞る
一つの画面にある情報を減らして、ユーザーの認知負担を出来るだけ軽くしましょう。
情報が多いと、ユーザーの集中力が途切れてしまいます。
でもユーザーはいつでもこちらのアプリを閉じて、別のアプリに乗り換えますので、
注目をなくすのが、アプリにとって一番望ましくないことです。
そして一つの画面にある機能の数も減らしましょう。
選択肢が多すぎると、ユーザーは混乱してしまいます。
最悪の場合、面倒くさがって、何も選ばなくなる可能性があります😧
伝えたい事・使って欲しい機能がたくさんあるでしょうが、
ユーザーに逃げられないように気をつけましょう。
b. コンテンツを細かく分ける
小さい部分で分けたら、目的が分かりやすくなって、
ユーザーに取って欲しいアクションも明確になります。
ほとんどの場合は「画面の最重要目的」を決めれば、自然な流れが作れます。
例えば、「リストのアイテムをタップしてもらう事」を最重要目的にすれば、自然にリストのアイテムに表示される情報やアイコンが減ります。
c. 一貫性を持たせる
自分のアプリのPC版との一貫性だけではなく、プラットフォーム（Android）が決めたルールにも従いましょう。
例えば、Androidの場合はダイアログの「キャンセル」ボタンが通常左に置いてありますので、自分のアプリだけあえて右にしましたら、ユーザーは間違いやすくなります。
嫌な思いをさせないように、同じ操作で他のアプリと同じ結果を提供したりして、
ユーザーの慣れたメンタルモデルから大きく離れないようにしましょう。
マテリアルデザインのカードビューの例を見ると、上記の３点を満たしています。
- a. 情報や機能の数を絞る：リスト画面は最低限の情報しか持っていなくて、電話番号や住所は詳細画面で表示されます。
- b. コンテンツを細かく分ける：「連絡先/コンタクトを選ぶ」を目的にして、その他の機能（名前の編集など）は詳細画面で行います。
- c. 一貫性を持たせる：フルスクリーンダイアログのガイドラインに従って、戻るボタンを左上に置いてます。
2. 読みやすさ
a. 小さい文字を避ける
文字のサイズ基準は自分の視力に頼らず、ガイドラインに従いましょう。
原則最低12sp以上を保つように推薦されています。
b. システムのフォントサイズ(sp)を使う
システム全体のフォントサイズを拡大しないと読めない方もいますので、
「デザインが崩れるの嫌だからフォントサイズを固定する」のような考え方は、もうやめましょう🙅♀️
むしろ最初から拡大されることを想定したデザインで行きましょう！
完全に崩れないことは避けれませんが、改行とかでエレガントな崩れ方は出来ます。
c. コントラスト比を確認する
背景とテキストのコントラスト比を充分な値にしましょう。
こちらも参考にできるマテリアルデザインのガイドラインがあります：
ちなみにArcticFox以上のAndroidStudioはコントラスト比の警告を出してくれます。
d. ダークテーマでのテストを忘れない
ダークテーマで、背景の色、テキストの色、アイコンの色など、全ての値が変わりますので、再度確認が必要になります。
（AndroidStudioの警告も頼れなくなります。。）
確認方法は、オンラインツールを使えます。
こちらは先程の読みにくいテキストの例です：
結果は「1.11:1」になりますから、ガイドラインの「3:1」以下ですね。
3. 複数の手がかり
a. 必ず2つ以上の手がかりで伝える
情報を伝える時に一つの手がかりしかなければ、認識されない可能性がありますので、
必ず２つ以上の手がかりを提供しましょう。
音、色、モーション、形など、方法はいくらでもあります。
下記にさまざまな状況で考えるために、具体的な例を用意しました🤔
例1：通知が来た事を知らせてくれる方法は、音だけでしたら、うるさい場所にいれば聞こえません。
こういう状況のために、バイブレーションも設定できるようになってます。
例2：右側のアイコンがチェックされた状態を意味として、緑色に変更されてます。
しかし色覚異常の方は、その変更が分からない可能性があります。
こんな風に色だけではなく、形も変えてみれば、色の違いが分からなくても、状態の変更が必ず伝わります✨
例3：こちらは入力内容にエラーがありますが、TalkBackを使う方は何が間違ってるか分かりません。
そして右側の注意アイコン（⚠️）がなければ、色覚異常の方はどの項目が問題になっているかと言うより、そもそもエラーになっている事さえ分かりません。
しかしちゃんとエラーメッセージもくっ付ければ、どの項目をどう修正して欲しいか必ず伝わります！一石二鳥ですね✨
b. アイコンとテキストをセットで使う
こちらの例はグーグル翻訳のデザイナーの方が記事で説明した話です。
カメラで写真を撮って、その写真に映るテキストがリアルタイムで翻訳される機能を、
左側のように提供されていましたのに、あまり使われてなかったそうです。
むしろ、ユーザーにアンケートを出したら、「こんな機能あって欲しい」と何度も言われたそうです。
つまりアイコンだけで意味が伝わらなくて、機能の存在さえ知らなかったユーザーが多かったです😱
いろいろ試した結果、アイコンとテキストを一緒に使う右側のデザインが一番効果があったそうです。
c. テキストボタンは注意する
マテリアルデザインのボタンを見ると、３つの種類があります：
枠のないテキストボタンは、ボタンである事、そしてタップできる事が認識しにくくなりますので、扱い方は気をつけましょう。
完全に「テキストボタンを使わない方が良い」と言うわけではないです。
例えばダイアログの「キャンセル」ボタンとしては問題ないです。
ただ、ユーザーに取って欲しいアクションとしては不適切でしょう。
（ちなみに右側のコンテンドボタンは、上記b.の説明通りに、アクションの意味をさらに分かりやすくするためにアイコンを付けてますね👀）
テキストボタンの正しい扱い方につきまして、この記事が詳しく説明してくれます：
4. タップのしやすさ
a. タッチ可能領域は充分なサイズにする
ボタンを正確に押せない方のために、タッチ可能領域のサイズもちゃんと考えるべきです。
マテリアルデザインを参考にすれば、アイコン自体が必ず48x48dpのサイズではなくても大丈夫ですが、paddingとかを使って、タッチ可能領域を最小このサイズになるように広げましょう、との話です。
b. ボタンの間もスペースを空ける
間違って隣のボタンを押してしまう事で、ユーザーが嫌な思いをしないように、
ボタンの間はちゃんとスペースを置いて、操作しやすくしてあげましょう。
グーグルデザインの記事によって、ボタンの間に16dpの距離を確保すると、日差しが強い状況や、タッチのレスポンスフィードバックが良くないデバイスでのユーザー体験が改善されるそうです。
5. ジェスチャーに頼らない
a. 別のやり方を用意する
最後に一番よく見る問題なので、ジェスチャーに頼るデザインについて考えましょう。
ある機能を一つのやり方でしか使えない場合、
しかもそれがスワイプとか、ジェスチャーになってる場合、
その機能を使えないユーザーがいると言う結果となります😵
例えば、リストのアイテムを削除するには、「右へスワイプ」と言う方法しかなければ、アイテムを削除出来ないユーザーもいるという意味になります。。
別のやり方も必要ですね。
今回の例はアイテムの右上にメニューボタンを置いて、ドロップメニューからアクションを提供すれば、ジェスチャーを使えないユーザーでも削除が出来るようになります。
b. 最初からインクルーシブなデザインにする
障害のある方も含めて、誰にでも使えるデザインにすれば、良い事尽くめです！
- みんなの体験が良くなる：公共トイレでよく見かける蛇口の自動センサーは、行動に困らない方にとっても便利でしょう。そして駅のエレベーターは階段を登れる方も使う事があると同様です。
- 自分を障害者だと認めたくない人が多い：特に一時的に怪我をした状況的障害者や、年寄りと呼ばれる一歩手前の年齢の方はこの傾向があるようでしょう。こちらのユーザー層は文字拡大などのアクセシビリティ補助ツールをあえて使いませんので、注意すべきです。
- 保守が難しくなる：機能が増えれば、デフォルトと、その他の体験の保守がどんどん難しくなります。エンジニアが泣きます。
是非デフォルトの体験から考え直して、インクルーシブなデザインにしましょう✊
以上、デザイン編でした。
もっと詳しく知りたければ、「デザイナー x エンジニア」の視点で書かれているこの記事がおすすめです：
次回はAndroidエンジニア向けのアクセシビリティ実装話を始めます。
ﾉｼ
