ユーザーエクスペリエンスに関する情報を提供する「UX BOOTH」より、スマートフォンフォームに関する興味深い記事を紹介させていただきます。
今やスマートフォンの画面に最適化されたページを容易するのが当たり前となってきました。
元々デスクトップPC向けのみのページしか持たなかったサイトでモバイル用の最適化をした、あるいはその最中だという方も多いのではないでしょうか。
ただし、最適化を急ぐあまりスマートフォン独特の特性を考慮できていないケースも、実は多いのかもしれません。
今回取り上げるのは、「モバイルフォームのデザイン戦略」というタイトルで投稿された記事で、とくにデスクトップ向けのサイトと比較して、画面が小さいという特性を持つモバイルデバイスにおいてより効率的かつエラーが少ないフォームを設計するための戦略を紹介しています。
モバイルフォームのデザイン戦略
さっそく、具体的な戦略の内容紹介に移りましょう。
記事内で紹介されていたポイントは下記のとおりでした。
- 垂直方向のラベル配置
- 余計な項目を削除する
- 項目同士をつなげる
- GPS機能の活用
- 選択肢をブレークダウンする
- 最適な入力コンポーネントを使用する
- 最適なリスト選択方法を使用する
- 適切なデフォルト値を容易する
それぞれ大まかなポイント／意図を紹介させていただきます。
垂直方向のラベル配置
スマートフォンのフォームコンポーネントは、標準でフォーカス時にズームインするように作られています。
そのため、項目の横側にラベルを配置すると見きれてしまう可能性が。
垂直（縦）方向にラベルと項目を配置すればこの問題を回避することができますね。
この点については過去に当ブログでも紹介いたしました。（下記の記事です）
すぐ対策したい！スマートフォン向けフォームでありがちなストレスを生む５つの要因
https://f-tra.jp/blog/smartphone/1246
ちなみに、ズームインを禁止する設定を追加することでも回避が可能だと思います。
余計な項目を削除する
筆者は、
不要な要素や機能を排除することでユーザーがフォーム入力に集中でき、エラーの可能性を最大限に抑えることができる
ことから、
スマートフォンのフォームは可能な限り単純で簡単である必要がある
と述べています。
そのために効果的なのが任意項目などそれほど重要でない項目をなくしてしまうことだとしています。
ただでさえ最低限に抑えたいフォームの項目数ですが、画面が小さく縦に長いスマートフォンフォームではなおさら心がけたいものですね。
エントリーフォームを改善するなら、不要な項目は消してくれ！
https://f-tra.jp/blog/column/684
項目同士をつなげる
フォームをシンプルｍにするためのもう一つの方法として、類似の入力フォールドを組み合わせることを手法として挙げています。
例えば名前の性と名、電話番号や郵便番号の複数項目に分かれている項目をひとつにしてしまうというような改善策ですね。
GPS機能の活用
スマートフォンには現在地を取得するGPS機能が備わっているため、入力内容によっては活用するべきです。
例えば「現在地」のような入力項目にはうってつけです。
選択肢をブレークダウンする
選択肢の多すぎるセレクトボックスはスマートフォンでは非常に使い勝手が悪くなります。
そのため、選択肢をブレークダウンし、数回のステップに分けて選択させるほうがユーザビリティは向上すると筆者は述べています。
最適な入力コンポーネントを使用する
例えばデスクトップ向けフォームにおける２～３つの選択肢の単一選択には通常ラジオボタンが使われます。
しかし、スマートフォンの場合はセレクトボックスを用いたほうがフォームが煩雑に見えません。
最適なリスト選択方法を使用する
複数の選択肢から選ぶ項目では、セレクトボックス型や入力サジェスト式など複数の可能性を検討しましょう。
適切なデフォルト値を容易する
スマートフォンを利用するユーザーは外出先など時間的な圧力下にあることが多いため、デフォルト値が適切に設定されていることでユーザーの手間を軽減してくれるとしています。
適切な【フォーム項目の初期値】設定で、ユーザーの入力を楽にするコツ
https://f-tra.jp/blog/column/2651
最後に
いかがだったでしょうか。
本日はモバイルフォームのデザイン戦略に関する海外記事の概要を紹介いたしました。
元記事では豊富な実例紹介を交えた詳しい解説がありますので、ぜひご覧いただければと思います。
