海外EFO情報:スマートフォンフォームのUXを改善する、10のシンプルなヒント

本日Econsultancyで公開された記事「10 simple tips for improving mobile form UX」より、モバイルフォームのユーザー体験を向上するための10のシンプルなヒントを紹介したいと思います。

なお、スマートフォンフォームのEFOについては以前下記の記事でまとめていますので、あわせてご覧になってみてください。

【保存版】スマートフォンEFO(フォーム改善)のための15カ条
https://f-tra.jp/blog/smartphone/4832

モバイルフォームのユーザー体験を向上するための10のシンプルなヒント

それではさっそく、具体的な内容紹介に移りましょう。
記事内で紹介されていたヒントは下記のとおりでした。

  1. 垂直方向にラベルを配置する
  2. 大きなフィールドを使用する
  3. GPSを使用する
  4. ボタンは可能なかぎり大きくする
  5. 任意項目は削除する
  6. 可能な場合は、単一のページに凝縮
  7. シンプルに設計する
  8. プログレスバーを使用する
  9. 適切な入力ツールを提供する
  10. パスワードをマスクする

以下、大まかなポイント/意図を紹介させていただきます。
ここでは概要のみの紹介としますので、気になったかたはぜひ元記事(英語)もお読み下さい。

※元記事(英語)はこちらです。
10 simple tips for improving mobile form UX | Econsultancy

垂直方向にラベルを配置する

フォームのラベルの配置は、水平方向ではなく垂直方向にするべきと述べられています。

ラベルを垂直方向に配置した1カラムレイアウト(左)と、水平方向に配置した2カラムレイアウト(右)。

1カラムレイアウト(左)と2カラムレイアウト(右)。

水平方向に配置すると、以下のような問題があるとされています。

  • 外観が雑然とする
  • フィールドをクリックしにくくなる
  • ラベルとフィールド両方の要素のサイズを小さくしなければならない

エフトラEFOチームでも、スマートフォンフォームのラベルは基本的には垂直方向に配置するべきと考えています。
ただし、例外も存在します。それぞれのメリットやデメリット・使い分けなどについて下記の記事で詳しく触れています。

スマホEFO:1列V.S.2列レイアウトはどっちが良いの?
https://f-tra.jp/blog/smartphone/7033

大きなフィールドを使用する

クリックしやすく、そして誤って別の要素をクリックしてしまうことを防止するために、フォームの入力欄は大きくするべきと述べられています。

具体的には、フォントサイズや内部の余白を大きくするといったところですね。
テキストフィールドを使いやすくするための施策については、以前こんな記事も書きました。
快適なテキストボックスを作る、たった5つの条件
https://f-tra.jp/blog/column/3070

GPSを使用する

フォームがユーザの位置を必要とする場合には、GPSを活用することで入力が非常に簡単になる、とのことです。

たとえば乗り換え検索サービスのナビタイム様のフォームがこちら。ユーザーの現在地をGPSで取得し、周辺駅の候補を表示するようになっています。

ナビタイム様のフォームでは、ユーザーの現在地をGPSで取得し、周辺駅の候補を表示する

ナビタイム様のフォームでは、ユーザーの現在地をGPSで取得し、周辺駅の候補を表示する

GPS入力はモバイルならではの機能。積極的に利用したいですね。

ボタンは可能なかぎり大きくする

スマートフォンに限らず、フォームにおいて送信ボタンを目立たせることは非常に重要です。

具体的な方法として以下の3つが挙げられていました。

  • 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

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です