アクセス可能なWebフォームに関する新しい本である「フォームデザインパターン」をご覧ください。

フォーム。 「あくび」という言葉が韻を踏むのは偶然ではありません。Webフォームはコードが鈍く、訪問者が入力するのも鈍いです。しかし、フォームがなければ、Webは単なる図書館になります。 彼らは私たちにコメント、収集、予約、購入、共有、そして他の多くの動詞をさせてくれます。 そして、ほとんどの場合、これらのことを、厄介で、不透明で、混乱し、奇妙で、苛立たしく、警戒し、または疎外する方法で行うことができます。 フォームはウェブの非常に重要な部分ですが、私たちは常にフォームをうまく設計していません。 それらが過剰に設計されていない場合、通常はまったく設計されていません。

新しいフォームデザインパターンの本で、この問題に取り組みたいと思います。 一般的な現実の問題を段階的に説明することで、ユーザーが何があっても作業を行えるようにする、シンプル、堅牢、軽量、応答性、アクセス可能、プログレッシブエンハンスド、相互運用性、直感的なフォームを設計する方法を学びます。 そして、本の終わりまでに、あなたはあなた自身のプロジェクトですぐに使うことができるデザインシステムとして提供されるコンポーネントのほぼ網羅的なリストを手に入れるでしょう。 （目次にジャンプします。）

目次

各章は特定の問題を中心に展開しています—結局のところ、それが私たちが現実の問題を解決する方法です。 ただし、心配する必要はありません。各章から生まれたスタイル、コンポーネント、パターンの多くは再利用可能であり、詳細をはるかに超えて適用できます。本を読み進めるうちに、この例を見ることができます。

PDFの抜粋を無料（0.7 MB）でダウンロードして、本の中身を感じてください。

1. 登録フォーム
   うまく設計されたフォームの基本的な性質と、それらについて考える方法を見ていきます。 質問プロトコルと呼ばれるものを適用することにより、インターフェースに触れることなく摩擦を減らす方法を見ていきます。 次に、検証を含め、すべてのフォームに使用する重要なパターンをいくつか見ていきます。
2. チェックアウトフォーム
   チェックアウトフローを検討し、いくつかの入力タイプと、それらがモバイルブラウザとデスクトップブラウザのユーザーエクスペリエンスにどのように影響するかを確認しながら、初めての顧客とリピーターの両方が迅速かつ簡単に注文できるようにする方法を検討します。
3. フライト予約フォーム
   ARIAを使用して、プログレッシブエンハンスドのカスタムフォームコンポーネントの世界に飛び込みます。 これを行うには、ユーザーが目的地を選択し、日付を選択し、乗客を追加し、座席を選択できるようにするための最良の方法を模索します。 ネイティブフォームコントロールを分析し、必要に応じて慣例から脱却する方法を検討します。
4. ログインフォーム
   ユビキタスログインフォームを見ていきます。 そのシンプルな外観にもかかわらず、非常に多くのサイトが苦しんでいるユーザビリティの失敗がたくさんあります。
5. 受信トレイ
   電子メールを一括で管理する方法を設計します。最初に管理インターフェイスを確認します。 そのため、これには、応答性の高いARIAで説明されているアクションメニュー、複数選択、同じページのメッセージングなど、独自の一連の課題とパターンが伴います。
6. 検索フォーム
   すべてのページでユーザーがすぐに利用できるレスポンシブ検索フォームを作成し、それを強化する検索メカニズムの重要性についても検討します。
7. フィルターフォーム
   多くの場合、ユーザーは扱いにくい検索結果の大規模なセットをフィルタリングする必要があります。 適切に設計されたフィルターがなければ、ユーザーは諦めざるを得ません。 フィルタは、ユーザーにより良いエクスペリエンスを提供するためのベストプラクティスに挑戦することを余儀なくされる可能性のある、多くの興味深い独自の設計上の問題を引き起こします。
8. アップロードフォーム
   写真共有、メッセージング、および多くのバックオフィスアプリケーションなどの多くのサービスにより、ユーザーは画像やドキュメントをアップロードできます。 ファイル入力と、それを使用して一度に複数のファイルをアップロードする方法について学習します。 次に、キーボードとスクリーンリーダーのユーザーを含むドラッグアンドドロップのAjax拡張インターフェイスの複雑さを見ていきます。
9. 経費フォーム
   たくさんの費用（または他のもの）を作成してシステムに追加する必要があるという特別な問題を調査します。 これは、管理インターフェースで役立つことが多い別のパターンの追加をカバーするための言い訳です。
10. 本当に長くて複雑なフォーム
    一部のフォームは非常に長く、完了するまでに数時間かかります。 長いフォームを管理しやすくするために使用できるパターンのいくつかを見ていきます。

著者について

Adam Silverは、Tesco、BBC、Just Eat、Financial Times、労働年金省など、さまざまな企業で15年以上Webに携わってきたインタラクションデザイナーです。

彼は特に包括的なデザインとデザインシステムに興味を持っており、これについて彼のブログやA ListApartなどの人気のあるデザイン出版物に書いています。 これも彼の最初の本ではありません。彼は以前、 CSSを使用した保守可能なUIの作成に関する本であるMaintainableCSSを作成しました。

技術的な詳細

• 384ページ、 14 × 21 cm（ 5.5 × 8.25インチ）、
• ISBN： 978-3-945749-73-9 （印刷）、
• ステッチされた製本とリボンページマーカーを備えた高品質のハードカバー、
• eBookは、PDF、EPUB、およびAmazonKindleで利用できます。
• ドイツからの無料の世界的な航空便の輸送。 配達時間。
• 印刷された高品質のハードカバーと電子書籍として利用できます。

お客様の声

この本をできるだけ実用的で有用なものにすることが私たちの目標でした。 小規模から大規模のウェブサイトを作成している人々から非常に肯定的なレビューを受け取ったことを光栄に思います。

• 「私は20年以上HTMLでフォームを書いています。 この本は、標準を採用し、シンプルでアクセス可能なフォームを段階的に強化して提供することの本質を捉えています。 私たち全員が使用および実装できるデザインパターンを形式化することにより、開発者とデザイナーは自分のWebサイトと製品に集中できます。 これが20年前に利用可能であったらいいのにと思います！」
  — Paul Duncan、設計技術者およびアクセシビリティ教師
• 「ひどくマークアップされたフォームの世界では、この本は、よりアクセスしやすいユーザーエクスペリエンスへの道を照らす光のビーコンです。 よくあるフォームアクセシビリティの落とし穴を避けるために、ユーザーインターフェイスを設計または開発する人には強くお勧めします。」
  — Marcy Sutton、アクセシビリティ擁護者
• 「フォーム。 「あくび」と韻を踏むという言葉が偶然の一致ではありません。フォームはコード化が鈍く、訪問者が入力するのがさらに鈍くなります。したがって、この本の具体的なヒント、コード、マイクロコピーを使用して、すべての人にとってより効果的に機能するようにしてください。 そして、アダムシルバーがあなたのためにすべての調査とコーディングを行ったので、あなた自身のあくびを取り除いてください。」
  — Bruce Lawson、Web標準の提唱者
• 「フォームデザインパターンは、単純なフォームと潜在的に複雑なフォームの両方について、常識と包括的なソリューションを提示しています。 よりシンプルで簡単なインタラクティブなウェブを作成するために努力するとき、それはあなたの仲間です。」
  — Heydon Pickering、UXおよびアクセシビリティコンサルタント

この本があなたのためである理由

この本は、デジタルサービス、製品、およびWebサイトのあらゆる種類のフォームを設計、プロトタイプ作成、および構築する必要がある人のための実用的なガイドです。 あなたは学ぶでしょう：

1. 利用可能なネイティブフォーム要素とその能力、制限、および制約。
2. いつ、どのようにアクセス可能なカスタムフォームコンポーネントを作成するか。これにより、ユーザーはネイティブの同等のコンポーネントと比較してより優れたエクスペリエンスを得ることができます。
3. 言語、流れ、順序を注意深く使用して、フォームの摩擦を大幅に減らす方法。
4. ユーザーがフォームエラーを簡単に修正できるようにする方法（およびそうでない方法）。
5. ユーザーがファイルをアップロードし、あらゆる種類の複数のアイテムを追加できるようにする複雑なインターフェイスを処理する方法。
6. ユーザーが自分のメンタルモデルに従って多数の結果セットを検索およびフィルタリングできるようにする方法。
7. 顧客が記入するのに数週間かかる可能性のある特に長くて複雑なフォームに記入するのを支援する方法。

この本についてのあなたの考えを聞くのが待ちきれません！ よろしくお願いします。この本が私たちと同じように役立つことを願っています。 もちろん、読み始める前にコーヒー（またはお茶）を用意しておいてください。 スマッシングを続けて...ニャー！