入力・フォーム
フォームの離脱を減らしたい
- §09-03Inline validation
入力欄ごとに正誤をその場で表示する。
送信を待たずに入力の誤りをその場で知らせ、まとめて差し戻される手戻りをなくす。項目が多い登録フォームや形式の厳しい入力で効く。
入力・フォーム - §09-02Autosave (status 表示)
入力を自動保存し状態を表示する。
保存ボタンを押し忘れても入力が失われず、保存されたかどうかを常に確認できる。長文編集や複数項目の設定画面で安心感を与える。
入力・フォーム - §09-01マルチステップ wizard
長い入力を複数の画面に分け、進捗を示す。
項目の多い申し込みや設定を一度に見せず、段階的に進めさせる。長いフォームを見て離脱されるのを防ぎ、残りの量を把握させる。
入力・フォーム - §09-26Form 復元 (戻ってきたら入力残ってる)
離脱後に戻った際、入力途中の内容を復元する。
誤ってページを閉じたり他の画面へ移っても、入力をやり直さずに済む。長いフォームや途中で参照が必要な申請で効く。
入力・フォーム - §09-27Optimistic submit
サーバーの応答を待たずに送信結果を画面に出す。
送信した内容を即座に画面に反映し、待ち時間を感じさせない。コメント投稿やチェックの切り替えなど、失敗が少なく小さな操作に向く。
入力・フォーム - §15-01Skeleton loader
読み込み中にコンテンツの形を灰色で示す。
空白やスピナーより何がどこに現れるかが先に分かり、待ち時間が短く感じられる。一覧やカードなど形が決まった領域の読み込みに使う。
パフォーマンス feedback
参考: baymard.com
入力速度を上げたい
- §09-04Autocomplete (タグ/型)
入力に合わせて候補を出し選択で確定する。
長い名前や正確な表記を覚えていなくても入力できる。タグや住所、ユーザー名など、候補が決まっている入力欄で誤入力を減らす。
入力・フォーム - §09-10Mention picker
@ の入力で候補を出し相手を選ぶ。
名前の一部を打つだけで正しい相手を選べ、表記ミスで通知が届かないことを防ぐ。コメントやチャットの入力欄に組み込む。
入力・フォーム - §09-11Emoji picker
絵文字を検索して選べるパネルを開く。
絵文字を名前で探して素早く挿入でき、OS のキーボードに頼らずに済む。チャットや反応機能で、表現の幅を手軽に広げたいときに使う。
入力・フォーム - §09-21タグ入力 (chip 入力)
入力した語を Enter でチップに変えて並べる。
複数のラベルや宛先を自由入力で追加する。候補が決まっていない語を付けたいときや、入力済みの項目を個別に外したいときに向く。
入力・フォーム - §09-07リッチテキストエディタ (block)
ブロック単位で編集し「/」でブロックを挿入する。
見出しや画像などを段落単位で組み合わせ、書式を意識せずに文書を組める。ノートや記事の執筆で、キーボードから手を離さずに要素を足したいときに向く。
入力・フォーム
大量データを編集させたい
- §10-05テーブル (sortable/filter/group)
並び替えや絞り込み、グループ化ができる表を示す。
多数の行から目的の項目を見つけ、比較できる。管理画面の一覧や売上明細など、列が多く件数も多いデータを扱うときに使う。
レイアウト・配置 - §09-05ドラッグ&ドロップ upload
ファイルをドラッグして置く領域でアップロードする。
ファイル選択ダイアログを開かずに直接ファイルを渡せるようにする。複数ファイルや画像をまとめて送る場面で手数を減らす。
入力・フォーム