格言：大本あかね / 記事作成・イラスト：nayumi
ウェブサイト上でユーザーに快適に操作を行ってもらうためには、画面上で適切な誘導を表示した方が負担が少なくなる場合があります。
分かりやすい例では「入力フォーム」です。
スポーツジムの入会フォームの例
スポーツジムの店舗窓口で、新規入会手続きのため指定されたウェブサイトをスマホ使って手続きしました。
その時の会員情報登録フォームは以下になりますが、長くて大変な経験をしました。
詳細は、こちらになります。
会員情報登録フォーム
入力すべき項目を整理すると以下のようになります。
- 既にお客様番号や、会員番号がある人のための検索フォーム
- 入会者の情報登録
- 未成年の保護者情報の登録
- 個人or企業orスクールかの種目登録
- 来館予定日の登録
これらがひとつの画面内に表示されています。
情報量の多さに戸惑ってしまったのか、入力ミスを連発してしまいました。
さらにこの会員情報登録フォームを終え、別の登録をしている最中にもなにか操作ミスをしたらしく、もう一度Googleで最初のサイトを探すところからやり直しになってしまいました。
「もうフォームの入力は嫌だ、ジムの入会なんてしたくない」
窓口での申し込みだったため、なんとか入会までこぎつけましたが、これが自宅からの登録だったら確実に挫折し、二度とジムへの入会は行わなかったでしょう。
そのユーザーにとって必要なものを表示しよう
例えば、上記のジム登録の場合、私にとって必要だったのは
入会者の情報登録、個人or企業orスクールかの種目登録だけです。
このページにたどり着く以前に、不必要な入力フォームは省かれるように情報登録ページへ誘導すれば、混乱が少なかったかもしれません。
一例として、5つに分けた項目ごとにページを分けて、不要な場合はスキップできるように設計すれば、面倒な入力もユーザーにとってはそれほど負担に感じない可能性が高くなります。
長すぎるフォームは分割しよう
フォームの設問はできる限り削減し、どうしても内容が長くなってしまうのであれば数画面に分けて表示することで、ユーザーの負担が削減できるでしょう。
別のスポーツジム入会の画面
汎用的な表現より具体的な表現をしよう
「送信」「登録」といった汎用的な表現のアクションボタンよりは、そのボタンを押したことによりどんなアクションが起きるのかを示した方が、ユーザに与える不安が軽減するでしょう。
エラーは極力回避させよう
アクションボタンを押した後に通知されるエラー
入力エラーの表示も送信ボタンを押した後ではなく、入力した直後にリアルタイムでエラーを表示させることでユーザーのストレスを軽減することができます。
必須項目が未入力だった場合、そのフォームが目立つように枠線が付いたり、色が変化するなどのカラーリングがあれば、より判別しやすくわかりやすくなります。
リアルタイムにエラーを表示し、エラー箇所が目立つフォーム
必須項目がすべて入力された際に、次ステップへ遷移するボタンが有効になるなどの方法も効果的です。
このようにユーザーにとって必要な情報を必要なタイミングで表示させれば負担が減り、快適な体験を提供することができるでしょう。
