本日Econsultancyで公開された記事「10 simple tips for improving mobile form UX」より、モバイルフォームのユーザー体験を向上するための10のシンプルなヒントを紹介したいと思います。
なお、スマートフォンフォームのEFOについては以前下記の記事でまとめていますので、あわせてご覧になってみてください。
【保存版】スマートフォンEFO（フォーム改善）のための15カ条
https://f-tra.jp/blog/smartphone/4832
モバイルフォームのユーザー体験を向上するための10のシンプルなヒント
それではさっそく、具体的な内容紹介に移りましょう。
記事内で紹介されていたヒントは下記のとおりでした。
- 垂直方向にラベルを配置する
- 大きなフィールドを使用する
- GPSを使用する
- ボタンは可能なかぎり大きくする
- 任意項目は削除する
- 可能な場合は、単一のページに凝縮
- シンプルに設計する
- プログレスバーを使用する
- 適切な入力ツールを提供する
- パスワードをマスクする
以下、大まかなポイント／意図を紹介させていただきます。
ここでは概要のみの紹介としますので、気になったかたはぜひ元記事（英語）もお読み下さい。
※元記事（英語）はこちらです。
10 simple tips for improving mobile form UX | Econsultancy
垂直方向にラベルを配置する
フォームのラベルの配置は、水平方向ではなく垂直方向にするべきと述べられています。
１カラムレイアウト（左）と２カラムレイアウト（右）。
水平方向に配置すると、以下のような問題があるとされています。
- 外観が雑然とする
- フィールドをクリックしにくくなる
- ラベルとフィールド両方の要素のサイズを小さくしなければならない
エフトラEFOチームでも、スマートフォンフォームのラベルは基本的には垂直方向に配置するべきと考えています。
ただし、例外も存在します。それぞれのメリットやデメリット・使い分けなどについて下記の記事で詳しく触れています。
スマホEFO：１列V.S.２列レイアウトはどっちが良いの？
https://f-tra.jp/blog/smartphone/7033
大きなフィールドを使用する
クリックしやすく、そして誤って別の要素をクリックしてしまうことを防止するために、フォームの入力欄は大きくするべきと述べられています。
具体的には、フォントサイズや内部の余白を大きくするといったところですね。
テキストフィールドを使いやすくするための施策については、以前こんな記事も書きました。
快適なテキストボックスを作る、たった５つの条件
https://f-tra.jp/blog/column/3070
GPSを使用する
フォームがユーザの位置を必要とする場合には、GPSを活用することで入力が非常に簡単になる、とのことです。
たとえば乗り換え検索サービスのナビタイム様のフォームがこちら。ユーザーの現在地をGPSで取得し、周辺駅の候補を表示するようになっています。
ナビタイム様のフォームでは、ユーザーの現在地をGPSで取得し、周辺駅の候補を表示する
GPS入力はモバイルならではの機能。積極的に利用したいですね。
ボタンは可能なかぎり大きくする
スマートフォンに限らず、フォームにおいて送信ボタンを目立たせることは非常に重要です。
具体的な方法として以下の３つが挙げられていました。
- 44×44ピクセル以上
- 誤ってクリックすることを防止するため、 周りの余白を多くする
- ページ要素の残りの部分とは異なる色を使用する
ボタンについては以前のこの記事で詳しくお伝えしています。
【EFO施策】フォーム最適化・最大の要＜送信ボタン＞を攻略する、9つの掟https://f-tra.jp/blog/column/1862
任意項目は削除する
モバイルフォームでは可能な限り不要な要素を取り除くべきであり、任意の入力項目は廃止することをおすすめする、と述べられています。
スマートフォンにおいては、入力そのものがユーザーにとってはストレス。入力項目数は最低限にとどめるようにしたいですね。
可能な場合は、単一のページに凝縮
項目数を減らしておくことが前提にはなりますが、すべての入力欄を単一のページに凝縮するというのも改善方法のひとつ、とのこと。
単一ページで設計することは、1ページあたりの入力に時間がかかりすぎるというデメリットがありますが、その一方でページ間の遷移時のストレスを解消することが可能、と述べられています。
※エフトラEFOブログでは、以前こんな記事も書きました。
どちらが正解？複数ステップのフォームVS単一ページのフォーム
https://f-tra.jp/blog/column/5696
シンプルに設計する
モバイルユーザーは、デスクトップでの訪問者とは別の目的を持っている可能性があるため、フォームの特定の機能を取り除くすることが可能かもしれない、と述べられています。
その例としてExpeadiaのフライト検索フォームが挙げられています。デスクトップ版に比べモバイル版はかなり検索軸が厳選されていました。
プログレスバーを使用する
このブログでは「フロー」と読んでいる、フォームの全体像と現在を示すプログレスバーを使用することが推奨されています。
フロー表示（プログレスバー）
とくに入力画面が複数に分かれている場合は、配置は必須ですね。
適切な入力ツールを提供する
入力内容に応じたキーボードを表示することや、その他日付け入力にカレンダーのUIを用意するなどの配慮も重要だと述べられています。
The Kayakの宿泊日（期間）の入力画面。
例えば上記は以前も取り上げたことのある、ホテルや航空券の検索サービス「The Kayak」の期間入力。起点と終点の2種類の日付入力が伴うパターンが多いですが、このUIであれば、同一のカレンダー上で期間を一気に入力でき、非常にスムーズです。
パスワードをマスクする
背後からスクリーンを覗かれてもパスワードが流出しないよう、パスワードの入力フォームをマスキングすることは重要ですが、マスキングをすることで誤った内容を入力しても気づくことができないというメリットがあります。
パスワードのマスキング
多くのサイトが、最後の文字を表示し、短い遅延の後に伏せ字にするという方法をとっているとのことです。
当ブログでも以前パスワードのマスキングについて取り上げました。
実はユーザビリティを落としていた！パスワード入力欄マスキングの脅威
https://f-tra.jp/blog/column/4567
最後に
いかがだったでしょうか。本日は海外記事よりスマートフォンフォームのユーザー体験を向上させるための10のヒントをご紹介しました。ぜひ、ご担当のスマートフォンフォームの改善に取り入れてみてください。
なお、以前にも同様に海外記事からスマートフォンの改善Tipsをご紹介したことがありますので、以下リンクしておきます。あわせてご活用いただければと思います。
【スマートフォンEFO】購入フォームをより良くするための10のこと
https://f-tra.jp/blog/overseas/5516
海外EFO情報：スマートフォンフォームのデザイン戦略
https://f-tra.jp/blog/overseas/4819
海外EFO情報：スマートフォンフォームのUXを改善する、10のシンプルなヒント | EFO・フォーム改善ブログ https://t.co/tR7z0ydZpi