(後編)「スマホ版:入力フォーム改善メソッド(後編)」です。今回は入力エラーを未然に防ぐ4つのメソッドを解説し、スマホサイトのフォーム離脱を防ぐUI改善施策(EFO)を紹介します。スマホサイトのUI改善、どうぞお気軽にお問合せください。【いますぐチェック!】入力エラーを未然に防ぐ4つのメソッドスマートフォンなどのタッチデバイスは、指で直感的に操作できる一方、タップ領域がPCとは異なるため細かな操作が苦手です。フォームに関してはその影響が顕著です。誤タップによる入力エラーや、ユーザー負荷が高い選択項目を設けてしまうことで、ユーザーのページ離脱に直結することもしばしば。高いコンバージョン率を達成する為には、デバイスの特性に沿ったUIを選択することが重要です。UIの見直しでユーザーストレスを軽減し、快適かつ的確な情報入力を促しましょう。1.タッチエリアを調整しようボタン領域が小さかったり要素同士が隣接しすぎると、スピーディーな入力をすることは不可能です。タッチエリアを意識し余白や横幅を調整するだけで、選択項目の誤タップを大幅に改善することができます。2.テキスト入力をなるべく減らそうスマホでの文字入力は、PCに比べると大幅に時間がかかります。スマホサイトの入力項目は、なるべくテキスト入力は無くす事を意識しましょう。「生年月日」や「都道府県」など、値が固定できるものはプルダウンで選択させることでエラーを未然に防ぐことができます。3.radioボタンをカスタマイズしようPCサイトで頻繁に使用されるradioボタンも、スマホサイトだと視認性が悪く、タッチエリアも統一されていないため使い勝手がよいUIとはいえません。radioボタンはボタン化し、よりスマホライクに変身させましょう。項目数の多いradioボタンの場合、selectボックスとして配置すれば表示エリアのボリュームダウンにもつながりますよ。4.入力ボックスには適切な入力モードを設定しようスマートフォンでは、入力ボックス毎に入力モード(typeプロパティ)が設定できます。適切なtypeプロパティを指定することで、デフォルトで立ち上がるキーボードを固定できます。全角のような基本的なエラーも意識せずに回避することができます。前編〜後編にわたって入力フォームのスマホ最適化について解説しました。これらの内容を網羅した入力フォーム最適化の2つの成功例をご紹介します。あるUIと効果的なモーダル表現でフォーム全体の入力エラーを回避テキスト入力が無いまま試算結果まで遷移できるのも◎http://www.symmetric.co.jp/genecode/customers/ins-saison/どんなに綺麗なサイトを作っても、フォームで離脱されては意味がありません。あなたのサイトのフォームで離脱率が高いようなら、フォームの内容に問題があることは明らかです。今回のフォーム最適化でUIを見直してみてください。スマホサイトのUI改善、どうぞお気軽にお問合せください。弊社の製品である「ジーンコード」を使用すれば、これらのUI変換も容易に行うことができます。スマホサイトのUI改善にお悩みなら、ぜひ一度弊社までご相談ください。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)検索:最近の投稿レスポンシブデザインのレイアウトパターンと実装方法レスポンシブ対応するためのCSSの書き方レスポンシブサイト用ブレイクポイント考察!時代に適するサイズとは?レスポンシブデザインがSEOに有利な理由レスポンシブデザインの確認が簡単に出来るChromeのデベロッパーツールの使い方レスポンシブ対応ページの簡単な作り方!導入部分を解説します。modernthemes.net。