読書ログ:Form Design Patterns

Form Design Patternsを読んだ感想をまとめました。

上記アフィリンクじゃないです!

何を期待して読んだか/なぜ読んだか

・DailyUIでフォームを作る時に、なんとなくではなくしっかりした基準が持てると嬉しいなと思ったので
・元々フォームの最適化に興味があったので
・本業でアプリやサイトのワイヤーを作る時に役に立つことがあるかもしれないと思ったので
・(参加できなかったけど)UX Days Tokyoの読書会イベントで扱われていたので

という感じです。DailyUI初日のお題が登録フォームだったのですが、なんとなくこうすると見栄えが良いかな?という感じでふわっと作ってしまったので戒めのために買いました。あとDailyUIって完成系が画像なので(動画でやってる方もいらっしゃいますが)、フォーム入力中やエラーの挙動等をどういう風にするのかは考えたり発表したりする機会がなく…たとえアウトプットに出ないとしても理想的なパターンを知っておいた方が良いなと思ったので読んでみました。
あとは他にフォームデザインに関する本って私の知る限りでは出ておらず、選択肢が絞られていたのもこの本に即決できた理由です。

役に立った情報は何か(かいつまんで)

インクルーシブデザインの原則をなんとなくさらえた
この本はインクルーシブデザインの原則に沿って書かれています。
「インクルーシブデザイン」とは、「障がい者をはじめとした何らかのハンディキャップを持つ人が上流から関われるデザインである」という定義だそう。「ユニバーサルデザイン」との違いは、ハンディキャップを持つ当事者が関わって作るかそうでないかのところにあるかなと認識しています。ただこの本では、「ハンディキャップのある人に関わってもらう」というような要素は少なく、「ハンディキャップのある人に配慮してデザインする」という要素が多いので、どちらかと言うとユニバーサルデザインの方に近い気がします。
ではこの本で理想的な思想として扱われている「インクルーシブデザインの原則」は何かというと、

・全てのユーザーに同等の体験を提供する
・ユーザーが利用している状況を考慮する
・一貫性を保つ
・利用者に制御させる
・選択肢を提供する
・コンテンツの優先順位をつける
・価値を付加する

といったもの。以下のページが詳しいです。
Inclusive Design Principles
https://inclusivedesignprinciples.org/ja/

印象的だった例だと、フォームの構成を考える際に「その質問は本当に必要か、任意項目ではダメなのか、誰が必要としているのか」などを自問し妥当性を検討するものとして紹介されていた「質問プロトコル」。これは「コンテンツの優先順位をつける」という原則に沿っています。
また、検索結果を絞り込むフィルターフォームにおいて、インタラクティブフィルター(絞り込む条件を選択すると即時でフィルタリングされるもの)ではなくバッチフィルター(絞り込む条件を選択後確定させるとフィルタリングされるもの)を採用していた例も面白かったです。インタラクティブフィルターの場合はユーザーが複数条件で絞り込みたい時にいちいち読み込み処理が走ってしまうのに対し、バッチフィルターは絞り込み条件が1つでも複数でも同じように利用可能であるという点も考慮して採用されており、これは「利用者に制御させる」「選択肢を提供する」という原則に沿っていて非常にわかりやすい考え方だなと思いました。

前述の通りパッと出てくるインクルーシブデザインの定義とは微妙にズレがある…?ように思えるのでこれを読んで「インクルーシブデザインの原則完全に理解した!」とは言えないかもしれませんが、とても共感できる原則だったので今後のデザインにおいてはぜひ覚えておきたい原則だと思っています。

ヤコブの法則という言葉を知った
「ヤコブの法則」とは、「ユーザーはほとんどの時間を他のサイトで過ごしている」ということ。
上記でほぼ説明がついてしまいそうな気もしますが、詳しい内容に関しては以下の動画でヤコブ・ニールセンご本人が語っています。
https://youtu.be/wzb4mK9DiHM
ざっくり言うと、「ユーザーは他のサイト(サービス)で過ごす時間が長いわけだから、それらで使われているデザインと同じように作ればユーザーは使い方を瞬時に理解できるよ」「めちゃくちゃ斬新なデザインは理解されないよ」というような内容です。
自分がデザインする時もある程度競合プロダクトや対象ユーザーが使っていそうなサービスを参考にしてはいたのですが、「法則」と呼ばれるほどしっかりした裏打ちがあるとは思っていなかったので今回知ることができて良かったです。

ただ、この本では「他のサイトで間違ったデザインが浸透していて、ユーザーがそれに慣れてしまっているかもしれない」という文脈で、健全化のためには逆らった方が良いものとして挙げられていたのが印象的でした。

期待と違った/いまいちだったところはどこか

フォームじゃないものも含まれていた
良い意味で期待と異なった点。
この本はフォームの種類ごとに章が分けられており、登録フォーム・決済フォーム・航空券予約フォーム・ログインフォーム・受信トレイ・検索フォーム・フィルターフォーム・アップロードフォーム・経費フォーム・長くて複雑なフォーム の10章編成になっています。
受診トレイとかフィルターはフォームという認識がなかったので、載っていてちょっとびっくりしました。

障がいを持つユーザーへの配慮が厚かった
これはもう厚くて悪いことはないんですが!インクルーシブデザインに沿って書かれていることもあり、スクリーンリーダーを使うユーザーや色覚異常のあるユーザー、認知に障がいを持つユーザーなどへの対応を考えた上でのベストプラクティスがかなり手厚く書かれています。私は非障がい者なので、どんな挙動・フィードバックになるのかを想像しづらい部分はちょこちょこありました。
そんなこともあって正直、自分のサービスは障がいを持つユーザーが使っていなそうだからいいかなあ…と読み飛ばしてしまうところが多かったのですが、読み終わってみると私のように「うちはいいか〜」ってしちゃったサービスが多いから苦労しているユーザーも多いのかなと思うようになりました。それに、この本で推されてるデザインパターンは障がいを持つユーザーへの配慮以外にもメリットがあるものだったので、「これの通りに作ったら非障がい者にはメリットがないものになっちゃった…」ということもないと思いますし…

コードの例が多かった
(HTML/CSS以外の)デザイン系の書籍で、こんなにコードを見るとは思いませんでした…
しかも最後にまとめて実装見本!とかの形ではなく合間合間に出てくるので、ワイヤー描くのがゴールで実装は他の人がやるよ!というような人には読む上でのテンポが掴みづらいかなと思います。コードが多めに載ってる理由は多分、障がいを持つユーザーへの配慮としてコード上で実現できるものが多いことと、動きまで含めて解説したい部分が多いこと。とはいえ自分は実装力がないので、コードを見て「なるほどこうなってるのね〜」とかはできず、とりあえず読み飛ばしてしまいました…
ただ、逆にコーダーさんやエンジニアさんと一緒に読んで共通言語にしたら非常に強みになる書籍だと思います。自社のエンジニアさんにもぜひ読んでほしい…貸すので…

kindle版が出ていなかった
賃貸暮らしなので極力kindle版を買うようにしているのですが、出ていなかったので泣く泣く物理本を購入しました(でもこの本、特殊印刷で表紙のインクがぷくっとしていて可愛いので装丁好きな方にはおすすめです)
この本、上で述べた通りフォームごとの章立てなので、例えば「エラー文言の表示についてってどこに買いてあるっけ」とかを探そうとするとkindleよりも検索性は若干悪いかな…という感じです。目次見ればほぼ解決するんですが…

(自分宛に)どんな時に読み返すべきか

・フォームのデザインをする時(この本に100%沿う必要はないが、メリットデメリットの再確認をしてUIの決定材料にする)
・デザイン全般において、インクルーシブデザインの原則を確認したくなった時
(Inclusive Design Principlesを読む方が早い時もあるかも https://inclusivedesignprinciples.org/ja/

この記事が気に入ったらサポートをしてみませんか?