入力フォームにおけるユーザビリティを考える

こんにちは。コモテック制作チーム コーダーです。
コロナ禍でお問い合わせフォームや申込フォームを作成したという方も多いと思いますが、作った"後"はどうしていますか･･･？
今日はフォームのユーザビリティについて少しお話したいと思います。

そもとも「ユーザビリティ」とは

ユーザビリティという言葉には「有用性」「使い勝手」というような意味があります。
たとえば、赤いボールペンと青いボールペンを購入したとしましょう。
赤いボールペンはノック式で片手で扱えますが、青いボールペンはキャップがついているのでキャップを外したあとにペン尻にキャンプを被せる必要があります。つまり両手を使わないと書ける状態にならないというわけです。
この場合、赤いボールペンは青いボールペンより使い勝手が良い、ユーザビリティが高いと言えます。

フォームのユーザビリティを考える

では「有用性のあるフォーム」「使い勝手の良いフォーム」とはなんでしょうか。分かりやすい点を4つ挙げてみます。

①可能な限り項目数を減らす
あれもこれもと盛り込んでいるうちに長いフォームになっていませんか？
情報を登録してもらう為のフォームではなく、まずはお問い合わせや申込をしてもらう為のフォームということにスポットを当てると意外と不要な項目が多かったりするものです。
今ある項目が本当に必要な項目が改めて考えてみてください。

②フォームの入力欄は縦一列に配置にする
一般的に人がHPを閲覧する時は左上から右へ移動するような動きでHPを閲覧すると言われています。一般的なカンパニーサイトを想像してもらうと分かりやすいです。左上に会社ロゴがあり、その右横にメニューがあってその下に内容が連なっているというようなレイアウトが多く見られるかと思いますが、これはその為だといえます。
左上から右にサイトを見ている場合、横に複数の入力欄が並んでいる状態だと横1列に対して複数の内容が並列されることになります。
ユーザーは上から下にフォームを入力していく為、こういったレイアウトになっている場合、入力しずらくなってしまいます。
論理的な根拠がない場合は横1列に対して1項目に収めるのがベストです。

③必須及び任意項目の表記は一目見て分かるようなデザインにする
「＊」を必須のマークとしているフォームを見かけますが、これはユーザーに『＊が必須と意味する』という情報を理解してもらってからフォームを入力してもらう必要がありますよね。
特別な理由がない限りは「必須」「任意」といった一目で分かる言葉で表記するのが良いでしょう。

④プレースホルダテキストに入れる情報には適切なものを選ぶ
プレースホルダテキストとはフォームの入力欄内に薄く表示されるテキストのことです。
入力に関する指示など補足的な内容は欄内に書いてしまいたくなりますが、ここに表示されるテキストは入力中や入力後には表示されてなくなってしまいます。
ユーザーが何を入力しているかが一目で分かるよう、プレースホルダテキストの使用や表示する文言は適切に選ぶようにしましょう。

いかがでしたでしょうか。
折角作成したフォームもお問い合わせの数が少ないとちょっと悲しいですよね。使うユーザーの立場に立ち返ると必要なこととそうでないことが見えてくると思います。
今一度、目の前のフォームをじっくり見てみるといいかもしれません。