フォームデザインのベストプラクティスを探求する
フォームはユーザビリティの問題を引き寄せる1万ボルトの電磁石である
── ヘイドン・ピカリング
使いづらさの問題の多くはフォームにある、とインターフェース・デザイナーのヘイドン・ピカリングさんは主張します。
アプリケーションはフォームによってユーザーと情報のやりとりができますが、体が不自由な方や高齢者など、ユーザーのあらゆる状況が考慮されていないと、一部のユーザーにとってコミュニケーション不能になってしまうことがあります。
だれにとっても使いやすいフォームをデザインするため 、 Kanmu のフロントエンドエンジニアとデザイナーは、フォーム・デザイン・パターン勉強会を開催しました。その学びの一部を紹介いたします。
👇 参考文献👇
見やすくする
日本人男性の20人に1人は、色だけでは見た目を区別しづらい（色弱）と言われています。また、視力の低い人や目の疲れやすい人など、さまざまな視覚特性に配慮することで、使いやすさを向上させることができます。
コンテキストを伝えるアイコン
エラーメッセージを黄色や赤色などの警告色で表現するパターンはよくありますが、色だけでは一部のユーザーにうまく文脈を伝えられないことがあります。
下図は色弱のP型色覚の見え方を再現したものです。青色はほぼそのままの見え方ですが、赤系の色の区別がむずかしくなります。
そこで、メッセージの内容に応じたアイコンを添えるなどすると、色に代わって「注意」などのコンテキストを伝えることができます。
ラベルの位置
ユーザーにどこを見るべきかを示すことや、スムーズに視線を誘導することはビジュアルを構成するときにデザイナーがよく考えることです。
ラベルの位置についてはフィールドの横ではなく、上に配置することで視線移動の負荷を下げることができます。一方向に視線を動かすだけでラベルとフィールドの両方をとらえることができるからです。
ただし、大きなスクリーンの場合は左右のスペースを持て余すことになるので、スペース活用とのバランスを見て決めることにしています。
聞きやすくする
最近までムンクの「叫び」という作品を「ムンクの叫び」というタイトルだと勘違いしてました。ところで、文字は読むものだと思いがちですが、目の不自由な方などが利用する音声読み上げ機能を介すと、文字は聞くものでもあるんです。その場合、先のような「」に頼った文章の説明では意図が伝わりづらそうですね。
パスワードの表示ボタン
このパスワード設定フォームは入力した文字が ⚫️ で隠され、👁 アイコンを押すと入力文字が表示されます。これを音声読み上げ機能のユーザーがきちんと理解するためには、どのように読み上げられると良いでしょうか。
👁 アイコンを押したときに「パスワードを表示する」や「パスワードを非表示にする」と読み上げられると、その役割が理解できそうでしょうか。
ところが、音声読み上げ機能のユーザーは、読み上げ方が異なると違うボタンだと認識することがあるそうです。なので「パスワードの表示スイッチ、OFFになっています」「パスワードの表示スイッチ、ONになっています」と読み上げられる方が、押すとステータスが切り替わるということがわかりやすそうです。
理解しやすくする
デザインは往々にして一方通行。いまもどこかでユーザーが文字やサインを誤認識していたとしても、ぼくたちはそのことにすぐには気づけません。また、認知能力も人それぞれであることを念頭に置かなければなりません。
プレースホルダーのリスク
下図のテキストボックスはプレースホルダーがラベルの役割を兼ねています。このパターンはログイン画面など、ユーザーが見慣れている画面でよく利用され、スペースを節約できるという利点があります。
反対にデメリットとして挙げられるのは、空のテキストボックスが本来提供する「中を埋めてください」というアフォーダンスを奪うことになり、入力済みテキストと勘違いされるケースがある点です。
ログイン画面の場合は、入力する項目がIDとパスワードの組み合わせであることが多く、多くのユーザーがそのことを学習しているので、日本語で「ユーザーID」や「パスワード」と書いていれば入力済みのテキストでないことは比較的分かりやすいです。
ただ、あらゆる人に誤認されないようデザインするなら、ラベルをフィールドの外側に置くことが無難な選択であると考えています。
ヒントを与えるコピー
プレースホルダーの役割はヒントを提供することです。何を入力すればいいのか、制約はあるのかといった疑問に短い文言で答えることができるなら、プレースホルダーを利用することができます。（※入力済みテキストと混同しないように配慮すべきなのは先の話のとおり）
ただしプレースホルダーは入力がはじまると見えなくなるため、記憶が必要なほど長い文章のヒントには向いていません。その場合は入力欄の外側にヒントを記載することを検討します。
なお、新規登録の画面であればパスワード入力欄のラベルは「パスワード」より「パスワードを設定」の方が新しくパスワードを設定することがより明確になります。
「ユーザー名とパスワードが一致しません」問題
ログイン時のエラーで、ユーザー名とパスワードのどちらが間違っているかをユーザーに教えないケースがあります。パスワードの間違いだと教えてしまうとユーザー名が正しいことになるので、不正ログインを試みるユーザーに考えうるパスワードが試されてしまいリスキーだ、という考え方がかつて多くのセキュリティ担当者の見解でした。
実際にはそのユーザー名でアカウント登録を試みると登録済みであるかを簡単に確認することができます。現在はGoogle のログインに代表されるようにユーザー名とパスワードを別画面に分けて、存在しないユーザー名を入力した時点でエラーを返す形式も増えてきています。
参考文献の見解としては、ヒントを与えないことでログインをあきらめる人も出てくるのでどっちが間違えているかを示すべき、です。同様のメッセージを導入しているサービスは、セキュリティ担当者と相談のうえ、メッセージを見直してみるのも良いかもしれません。
扱いやすくする
「はじめてのおつかい」という番組が好きです。3歳くらいの子が「八百屋でほうれんそう買って、ケーキ屋でいちごのショートケーキを買って、お花屋さんでカーネーションを買って」と口頭でいっぺんにお使いを伝えられても達成できるのか、すごいなと。アプリではいっぺんにタスクをお願いしなくても大丈夫です。
1ページに1つのこと
Boots.com というECサイトでは、2008年頃、配送先の指定・配送オプションの設定・支払方法の指定を1ページに収めていたようです。その後、各フローを別々のページに分けると、コンバージョンが大幅に向上しました。
ページを分割する場合、どこまで細かく分割していいものか。フォームの専門家キャロライン・ジャレットさんはログインでユーザー名とパスワードの入力を別々のページに分けることをテストしました。
当時、さすがにこれを分けるのはやりすぎだろうな、と思っていたそうですが、実際にテストしてみるとユーザーは特に気にしないということが分かりました。現在は Google や Yahoo のログインもユーザー名とパスワードの入力は別ページになってます。
ユーザーは1度に1つのことしか集中できない、と割り切って考えても差し支えないかもしれません。
まとめ
多くの人にとって使いやすいフォームを目指すなら、色の識別が難しい人でも見やすく、目で見なくとも聞きやすく、様々な認知能力をカバーできるよう理解しやすく、判断に迷わないように扱いやすくデザインしましょう。それを様々な事例を通じて学習しながらデザインし続け、そして、自分たちのデザインしたフォームがベストプラクティスと呼ばれる日が来るように（意気込み）。
追伸、一緒に学びませんか？
弊社カンムでは学習と共有を継続しながら、さらに強いチームと成長するべくメンバーを募集しています。
ご興味のある方は、ぜひお話させていただく機会をいただければと思います。デザイナー、フロントエンドエンジニア、その他の職種の方も、ぜひぜひご連絡ください。
次回記事のため、書籍代等のインプットに使わせていただきます！