Form Design Patterns ―シンプルでインクルーシブなフォーム制作実践ガイド

著者 : Adam Silver 株式会社Bスプラウト

• ボーンデジタル (2019年12月24日発売)

作品紹介・あらすじ

本書ではあらゆるユーザーにとって利用可能なフォームの実装のしかたを解説しています(ロバスト、プログレッシブエンハンスメント、アクセシビリティ、といった軸で、ウェブの特質を最大限に活かした形でのフォーム実装を説く内容です)。

フォームのパターンごとにHTMLタグの意味が丁寧に解説されており、フレームワークを弄ることから入門したようなフロントエンドエンジニアの方々でも違和感なく学習できます。機能、ビジュアルデザイン、実装用コードで構成されており、本書をベースにデザインシステム(パターンライブラリ)に発展させることが可能です。


目次と概要
登録フォーム|フォームの基本的な品質とその考え方
決済フォーム|決済フローのステップごとのデザインパターンの適用
航空券予約フォーム|ARIAを用いたカスタムフォームコンポーネント
ログインフォーム|ユビキタスなログインフォーム
メール受信ボックス|メールの管理インターフェースからARIAパターンを学ぶ
検索フォーム|見つけやすく、シンプルで、使いやすいレスポンシブな検索フォーム
フィルターフォーム|ユーザーが満足できるフィルタリング(選択、抽出ほか)
アップロードフォーム|ファイルの選択とアップロード、ドラッグ&ドロップ型への対応
経費申請フォーム|応用1:大量に追加する項目があるフォーム
長くて複雑なフォーム |応用2:入力に長時間を要するフォーム

感想・レビュー・書評

[japapizzaさんの感想 · 2021年8月28日]

フォームのお勉強。

第1章 登録フォーム
　まずは簡単な登録フォームを例に、適切にデザインされたフォームの基本的な性質と考えかたについて紹介します｡ 質問プロトコルと呼ばれる手法を適用することで、インターフェースをこねくり回すことなくフリクションを減らす方法を学 びます。また、フォームに欠かせないバリデーションなども紹介します。

第2章 決済フォーム
　「1ページにつき1つのこと」パターンは、優れたフォームのデザインに欠かせません。この理由を説明し､決済フォームに応用していきます。 その後、決済プロセスの各段階を分析しながら､ フローと順序を考察します。 また、いくつかの入カタイプと､それらがモバイルやデスクトップブラウザでのユーザー体験にどう影響を与えるか考察しながら、初回のユーザーも2回めのユーザーも素早く簡単に注文できる方法を考えます。

第3章 航空券予約フォーム
　プログレッシブエンハンスメントの世界に飛び込み、 ARIAを使ったカスタムフォームコンポーネントをデザインします。 到着地､ 日付 乗客数 座席をユーザーに選択してもらう最善の方法を模索します。ネイティブフォームコントロールを詳細に分析し、必要であれば慣例を破ることも考えます。

第4章 ログインフォーム
　よくあるログインフォームを見ていきます。 ログインフォームは一見すると単純ですが、ユーザビリティの問題を抱えるウェブサイトは少なくありません。また最近ではソーシャルログインもよく見られますが、問題がないわけではないので、それについても説明します。

第5章 受信トレイ
　メールをまとめて管理および処理する方法をデザインします。 本書の中では初 めて扱う管理用のインターフェースです。 ARIAを使用したレスポンシブなアク ションメニュー、複数選択、同一ページ内での通知メッセージ表示など、独自の
課題とバターンがあります。

第6章 検索フォーム
　どのページからでもすぐに利用できる、 レスポンシブな検索フォームを作成します。また、それを支える検索メカニズムの重要性についても考察します。 これらを組み合わせると、見つけやすく、シンプルで便利な検索機能ができ上がります。

第7章 フィルターフォーム
　ユーザーは、膨大で扱いにくい検索結果を絞り込まなくてはなりません。 適切にデザインされたフィルターなしでは、 ユーザーはあきらめてしまうでしょう。フィルターには、 興味深いユニークなデザインの問題が数多くあります。 ベストブラクティスに挑戦し、よりよいユーザー体験を提供することが大切です。

第8章 アップロードフォーム
　写真共有、メッセージ 事務管理系アプリケーションなど多くのサービスで、ユーザーは画像や文書をアップロードします。ここでは､ファイル入力と、それを使って複数のファイルを一度にアップロードする方法を学びます。その後、 Ajaxでエンハンス (強化) した、キーボートユーザーやスクリーンリーダーユー ザーにも対応したドラッグ&ドロップのインターフェースを見ていきます。

第9章 経費フォーム
　たくさんの経費(ほかの項目でもかまいません) 情報を作成したり追加する必要がある場合､ある特殊な問題が生じます。 その対応策として、 管理用のインターフェースでよく使われる｢さらに追加」パターンを紹介します。

第10章 長くて複雑なフォーム
　フォームの中には、完了までにとても長い時間を要するものもあります。 長い フォームを管理しやすくするためのパターンをいくつか紹介します。

「インクルーシブデザインの原則」について
　本書では、 原則寄りの視点で語ることはしませんが、原則が重要な位置を占めるのは変わりありません。原則がなければ、デザインしたものが客観的に優れているかどうかの判断は困難です。
　原則とは、どこから生まれるのでしょうか? ほかの人が作った原則を使うことも、自分で定義することもできますが､ まずは､ そもそもどのようにして原則へとたどり着くのかを考えてみましょう。
　原則は、通常、信念や信条から生まれます。人は、物事に対してこうすべきだという信念を持っており、たいてい正当な理由からそれに従っています。よくある例は、「会議には遅れない」という考えかたでしょう。遅刻 (少なくとも故意のもの)は、ほかの参加者や会議の目的を軽視していることになるからです。もしも信念に正当な理由がなかったら、原則は厳しくその意義を問われ、崩壊するはずです。
　本書のテーマは、ウェブのフォームのデザインです。ウェブそのもの本質を無視していたら、著者としての義務を怠っていることになります。 ウェブの力とは、リーチの大きさとアクセシビリティです。ブラウザとインターネット接続さえあれば、誰でもウェブを使えます。本書における原則は、この概念に沿っている必要があり、ウェブの本質を守るものでなければなりません。
　私も大好きなデザイン記事のひとつ、 「The Web's Grain」 (ウェブの木目)での中で、 フランクチメロ(Frank Chimero) は詳しく語っています。 その主旨は、複雑さというのは抗うべきものではなく、そもそも受け入れるべきものであること。そしてそのためには「木目に逆らわず」、ウェブの制約を受け入れるようにしたいというものです。
　これは、 何かをデザインするのに最も簡単かつ経済的な方法であるばかりでなく、最終的には、ユーザーが操作しやすいシンプルなインターフェースを実現することにもつながります。とにかくユーザーが望むのは、コンテンツと機能なのです。
　何を作るにしても、結局のところ大切なのはユーザーです。1人だって置き去りにしたくありません。ウェブは､すべての人のためのものです。私が知っている中で最も優れた原則は、The Paciello Groupの「インクルーシブデザインの原則」です。
　この原則は、優れたデザインについて掲げられたものです。 そして優れたデザイ ンとは､すなわちインクルーシブです。

①同等の体験を提供する
　あなたの作ったインターフェースがすべての人に同等の体験を提供できるようにして、利用者がそれぞれのニーズに合った手段を用いても、 コンテンツ品質が 損われることなくタスクを達成できるようにしましょう。
②状況を考慮する
　利用者は様々な状況であなたの作ったユーザーインターフェースを使います。状況に関係なく、あなたの作ったユーザーインターフェースが利用者に貴重な体 験を提供できるようにしましょう。
③一貫性を保つ
　馴染みのある慣例を用いて、それを一貫して適用しましょう。
④利用者に制御させる
　利用者が自ら制御できるようにしましょう。利用者はそれぞれ好みの方法によって、コンテンツにアクセスして､コンテンツとやりとりできるようにすべきです。
⑤選択肢を提供する
　特に複雑なタスクや標準的でないタスクには、利用者がそれらのタスクを完遂できるように、様々な手段を提供することを検討しましょう。
⑥コンテンツの優先順位を付ける
　利用者が主たるタスク、 機能、 情報に集中できるように､ それらをコンテンツやレイアウト内で優先順位付けしましょう。
⑦価値を付加する
　機能の持つ価値や、その機能によって様々な利用者の体験をどう向上させることができるかを考えましょう。


第１章　登録フォーム
・チェックリスト
〇簡潔に表記する
〇一貫性を保つ
〇具体的に示す
〇専門用語を避け、人間味が感じられるようにする
〇平易な言葉を使用する
〇能動態を使用する
〇ユーザーを非難しない

まとめ
　…フィールドを無理にコンパクトにして、奇抜で不自然な形でスペースを節約するのは避けましょう。ユーザビリティを損なうことなく、快適に利用できるようにすることが大切です。
■避けるべきこと
・placeholder属性をラベルとヒントテキストを格納するメカニズムとして使用する。
・不適切なtype属性を使用する。
・ボタンとリンクを同じスタイルにする。
・ユーザーの入力と同時にフィールドのバリデーションを実行する。
・送信ボタンを無効化する。
・複雑な専門用語やブランドの影響を受けたマイクロコピーを使用する。


第２章　決済フォーム
・１ページにつき１つのこと

・インクルーシブデザインの原則６（コンテンツの優先順位を付ける）では、「ユーザーが主たるタスク、機能、情報に集中できるように、それらをコンテンツやレイアウト内で優先順位付け」する必要がある、としています。ユーザーは「一度にひとつのことにしか集中することができない」からです。「１ページにつき１つのこと」パターンは文字通りこの原則に従っており、ユーザーの認知負荷を大幅に減らします。
・ユーザーが入力するフォームが小さければ、エラーはたいてい早い段階で発見できます。修正箇所が１つなら簡単に修正できるため、ユーザーがタスクを途中であきらめる可能性が低くなります。
・ユーザーが軽量なら、読み込みも速いです。ページが素早く表示されればユーザーが離れるリスクが減少し、信頼も築けます。
・頻繁に情報を送信すれば、ユーザー情報を細かく保存できます。たとえばユーザーが中断しても、ユーザーにメールを送信して注文を完了するよう促せます。
・反対に、長いフォームでは、ページ表示がタイムアウトしたり、コンピューターがフリーズする可能性が高まります。
・ユーザーはコンスタントに一歩ずつ処理を進めることができるため、進んでいる感覚が得られ、弾みが増します。
・大きなフォームの一部としてだとうまく機能しないインターフェスであっても、このパターンを用いることで、画面スペースを最大限に活かしてインターフェースをデザインすることができます。

まとめ
チェックリスト
・合理的な順番で質問する。
・登録しなくても (ゲストとして) 決済できるようにする。
・入力する文字数がある程度決まっている場合は、 フィールドの幅をそれに合わせる。
・fieldsetおよびlegendを使用して、ラジオボタンやチェックボックスのグ ループにアクセシブルなラベルをつける。
・そうする価値がある場合、質問を追加する。タスク完了までの時間だけが有用な成果指標ではないことに留意する。
・送信前にユーザーが入力内容をチェックできるようにする。
・送信後の確認ページは、一連の取引の最後にくるが、ユーザーとの長期的な関係をスタートするチャンスにもなっている。
・リピーター顧客の体験を改善したりコンバージョンを高めるために、ユー ザーの情報を保存する。
・「戻る」ボタンを問題なく使えるようにする。

第３章 航空券予約フォーム
避けるべきこと
・チェックボックスのように見えるラジオボタンを使用する (その逆もしかり)。 ほかによい方法があるにも関わらずセレクトボックスを使用する。
使いやすいインターフェースのデザインに最善を尽くさず、ユーザーに負荷 をかける。
・fieldset を入れ子にする。

第４章 ログインフォーム
避けるべきこと
・セキュリティの名の下であいまいなマイクロコピーやエラーメッセージを使用する。
・登録フォームの横にログインフォームを並べる。
・フィールド間を自動でタブ移動する。
・1つのフィールドに複数のテキストボックスを使用する。
・「パスワードをお忘れの場合」 リンクをフォーム内に配置する。
・ユーザー名など、どんな文字列を使ってもよいフィールドでオートコレクト、自動大文字化、スペルチェックを有効にする。

第５章 受信トレイ
●幅の異なるデバイスやブラウザは次から次に登場しています。よって、すべてのデバイス幅に合わせたデザインを用意するのは不可能です。
●このようなデザインを生成するには追加のコードが必要ですが､ ページの読み込みが遅くなるのでユーザー体験が悪化します。
●すべてのコンポーネントがブレークポイントを必要とするわけではありません。コンポーネントの多くは、画面の大小に関係なく同じ動作をするようにデザインすることが可能です。
●大事なことは、使用するデバイスの種類に関係なく、一貫性を保った形での体験をユーザーに提供することです (インクルーシブデザインの原則3)。 たとえば、デバイスをポートレートからランドスケープに回転しても、 ユーザーがインターフェースを学び直さなくても済むようにします。余計な認知負荷をユーザーにかけてはいけません。
× 避けるべきこと
・処理に対して不適切な要素を使用し、それをJavaScriptで修正する。
・標準のHTMLが利用できる状況でARIAを使う。
・チェックボックスやセレクトボックスを、ボタンやメニューコンポーネントに使用する。
・選択した行の強調など、価値のないあしらいをする。
・フォームへの入力が適切になされるまで送信ボタンを無効にしておく。
・通知を自動的に非表示にする。
・繰り返し行うタスクに減速帯を設ける。

第６章 検索フォーム
チェックリスト
・データベースに格納されている情報に限らず、何でも検索できるようにする。
・role="search" ランドマークを使用して、 スクリーンリーダーユーザーが素早く検索を利用できるようにする。
・フォームがヘッダー内にうまく収まらない場合は、JavaScriptを使って表示/非表示を切り替えられるようにする。
・ 検索結果の表示では無限スクロールを避ける。

第7章 フィルターフォーム
×避けるべきこと
・リンクをラジオボタンやチェックボックスのような見た目にする。
・よりシンプルなほかの手法を試すことなしに、 安易にフォームを自動送信させる。
・Ajax が常により高速で快適なユーザー体験を提供するという想定に立つ。
・ユーザーのニーズよりも、一般的にベストプラクティスとされている手法を優先する。

第８章 アップロードフォーム
×避けるべきこと
・機能より形態を優先させる。
・未サポートのブラウザを考慮せずに、 ファイル入力 (<input type="file"> ) で multiple を使用する。
・標準のファイルピッカーを、(プログレッシブエンハンスメントでない形で) ド
ラッグ&ドロップのインターフェースに置き換える。 ・自動変換が可能にも関わらず、ユーザーに特定のファイルフォーマットのみを強要する。

第９章 経費フォーム
×避けるべきこと
・フォーカスされている要素がドキュメントから削除されたとき、どこにフォーカスを移すかをブラウザに任せる。
・Tabキーなどでフォーカスできない(プログラムによるフォーカスは可能な)要素にフォーカスがあたったとき、その枠で囲む。
・1つのアクションに対して複数の余計なフィードパックを提供する。
・実用的な目的がないのにインターフェースの部品にアニメーション効果を加える。

第10章 長くて複雑なフォーム
▲その他の検討事項
・それぞれのタスクの文脈で必要となるもの (たとえば書類など) を説明する。
・それぞれのタスクの所要時間を、おおよそでよいので示す。 提示できない場合は、タスクをさらに細かく分割することを検討する。
・タスク名は動詞で表現する (「条件に同意する」、「件名を作成する」、「テンプレートを選択する」など)。
・タスクは発生順にリストに並べ、その際、順序つきリストを使用する。
・誰がタスクを実行するかを明らかにする (複数の人がタスクに関与する場合)。
・タスクの規模を揃える。 完全に揃える必要はないが、あるタスクに20の設問があり、別のタスクに2つの設問しかないような場合は見直しが必要である。

[Rio Azumaさんの感想 · 2021年2月1日]

エンジニア向けの内容が6割以上だが、デザイナーでも読む価値のある本だった。サクッと読める。

[cooboo2011さんの感想 · 2020年7月20日]

Webフォームについてだけ取り扱った珍しい本。
ユーザにとって使いやすくて、視覚障害があるような方も包括（=インクルーシブ）したフォームとはどういうものか詳しく解説しています。html, jsも掲載しており実用的です。
レイアウトがゆったりしてて字も大きくてリーダブルです。

[fraserlibさんの感想 · 2020年1月24日]

請求記号　547.48/Si 4