f-traコンバージョンアップのためのUI改善情報をお届け。EFOやCTAのハウツーなど。BOOTH」より、スマートフォンフォームに関する興味深い記事を紹介させていただきます。今やスマートフォンの画面に最適化されたページを容易するのが当たり前となってきました。デスクトップPC向けのみのページしか持たなかったサイトでモバイル用の最適化をした、あるいはその最中だという方も多いのではないでしょうか。最適化を急ぐあまりスマートフォン独特の特性を考慮できていないケースも、実は多いのかもしれません。今回取り上げるのは、「モバイルフォームのデザイン戦略」というタイトルで投稿された記事で、とくにデスクトップ向けのサイトと比較して、画面が小さいという特性を持つモバイルデバイスにおいてより効率的かつエラーが少ないフォームを設計するための戦略を紹介しています。モバイルフォームのデザイン戦略さっそく、具体的な戦略の内容紹介に移りましょう。記事内で紹介されていたポイントは下記のとおりでした。選択肢をブレークダウンする最適な入力コンポーネントを使用する最適なリスト選択方法を使用する適切なデフォルト値を容易するそれぞれ大まかなポイント/意図を紹介させていただきます。垂直方向のラベル配置スマートフォンのフォームコンポーネントは、標準でフォーカス時にズームインするように作られています。そのため、項目の横側にラベルを配置すると見きれてしまう可能性が。垂直(縦)方向にラベルと項目を配置すればこの問題を回避することができますね。この点については過去に当ブログでも紹介いたしました。(下記の記事です)すぐ対策したい!スマートフォン向けフォームでありがちなストレスを生む5つの要因https://f-tra.jp/blog/smartphone/1246ちなみに、ズームインを禁止する設定を追加することでも回避が可能だと思います。不要な要素や機能を排除することでユーザーがフォーム入力に集中でき、エラーの可能性を最大限に抑えることができることから、スマートフォンのフォームは可能な限り単純で簡単である必要があると述べています。そのために効果的なのが任意項目などそれほど重要でない項目をなくしてしまうことだとしています。ただでさえ最低限に抑えたいフォームの項目数ですが、画面が小さく縦に長いスマートフォンフォームではなおさら心がけたいものですね。エントリーフォームを改善するなら、不要な項目は消してくれ!https://f-tra.jp/blog/column/684項目同士をつなげるフォームをシンプルmにするためのもう一つの方法として、類似の入力フォールドを組み合わせることを手法として挙げています。名前の性と名、電話番号や郵便番号の複数項目に分かれている項目をひとつにしてしまうというような改善策ですね。GPS機能の活用スマートフォンには現在地を取得するGPS機能が備わっているため、入力内容によっては活用するべきです。「現在地」のような入力項目にはうってつけです。選択肢をブレークダウンする選択肢の多すぎるセレクトボックスはスマートフォンでは非常に使い勝手が悪くなります。そのため、選択肢をブレークダウンし、数回のステップに分けて選択させるほうがユーザビリティは向上すると筆者は述べています。最適な入力コンポーネントを使用する例えばデスクトップ向けフォームにおける2~3つの選択肢の単一選択には通常ラジオボタンが使われます。スマートフォンの場合はセレクトボックスを用いたほうがフォームが煩雑に見えません。最適なリスト選択方法を使用する複数の選択肢から選ぶ項目では、セレクトボックス型や入力サジェスト式など複数の可能性を検討しましょう。適切なデフォルト値を容易するスマートフォンを利用するユーザーは外出先など時間的な圧力下にあることが多いため、デフォルト値が適切に設定されていることでユーザーの手間を軽減してくれるとしています。適切な【フォーム項目の初期値】設定で、ユーザーの入力を楽にするコツhttps://f-tra.jp/blog/column/2651最後にいかがだったでしょうか。本日はモバイルフォームのデザイン戦略に関する海外記事の概要を紹介いたしました。元記事では豊富な実例紹介を交えた詳しい解説がありますので、ぜひご覧いただければと思います。Boothツイートこの記事が気に入ったらいいね!しようUI改善ブログの最新情報をお届けしますUI改善ブログを運営する株式会社エフ・コードではUI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。当ブログの更新情報は以下の各種アカウントから購読できます。Facebookを見るTwitterでフォローするFeedlyで購読するRSSを登録するメールマガジンを購読するブログの更新情報やセミナーのお知らせなど、UI改善に関する情報を1~2週間に1回お届けします。PRESSで執筆しましたEFOに関する特集記事を寄稿しています。Vol.89特集3:エントリーフォーム最適化入門2015年10月24日発売Web担当者Forumで連載中!公式Facebookページf-tra(エフトラ)について株式会社エフ・コードのマーケティングテクノロジーブランド「f-tra(エフトラ)」。現在は入力フォーム最適化(EFO)を簡単に実施できる「f-traEFO」と、ユーザーの行動喚起を促すためのUI検証する「f-traCTA」の2種類のUI改善ツールを提供しています。講演/取材/執筆についてEFOに関する講演、雑誌への寄稿、出版、取材などのご依頼は、弊社のお問合せフォームより承っております。お気軽にお問合せくださいませ。田中エフトラEFOサポートチームを統括する傍ら、EFOに関する講演、セミナー登壇、執筆などにも従事。Web担当者Forumにて連載を執筆しています。