どうしても縦に長くなるスマートフォン向けフォームを快適にする方法

フォームにかぎらず、スマートフォン向けのウェブページは、PC向けページに比べるとどうしても縦に長くなってしまいがちですね。
本日はそんスマホの”縦長問題”とその対策方法について考えて行きたいと思います。

スマホフォームはどうしても縦長になる

スマートフォンデバイスは横幅が小さいため、カラムを落としてレイアウトしたり、文字を大きく設定することがユーザビリティを担保する上で重要です。

スマートフォンで２カラム表示にすると、ラベルが見きれてしまうことも

このことで、どうしてもスマートフォン向けのページは縦に長くなります。

ただしユーザーにとって、スマートフォンのようなタッチデバイスのスクロール操作は、PCの場合ほどは苦痛に感じない傾向があるようですし、
相対的に、縦方向に最適化することで得られる快適性を重視して良いのではないでしょうか。

とはいえ、あまりに縦に長過ぎるとストレスに

スマートフォンのEFO：俯瞰しにくい小さな画面だからこそ注意したいポイントなどでもお伝えしていますが、スマートフォンはただでさえ画面が小さく、全体を俯瞰することが困難です。
フォームの全体像を把握できないにもかかわらず、縦に延々と入力欄が続くフォームは「いつまで続くのだろう…」とユーザーにストレスを与えてしまいます。

表示面積はフォーム入力時にはさらに狭くなる

上述の通り、ある程度ページが縦長になるのはやむを得ないですが、縦幅を節約できるに超したことはありません。

以下、ページが縦に長いことで与えてしまうストレスを少しでも軽減する方法について考えていきます。

縦長のストレスを軽減するための工夫 目次

• 入力欄を工夫する
• 余計なコンテンツを表示しない
• ガイド表示の導入

入力欄を工夫する

入力欄の表示方法で、操作のユーザビリティを保ちながら縦幅を少しでも節約しましょう。
具体的には下記のようなアプローチがあると思います。

項目をまとめる

複数項目に分かれているテキストボックスを、可能な場合は1つの入力欄にまとめてしまえると良いでしょう。

余計な項目消す

任意項目が多い場合、思い切ってページから消してしまうというのも手です。

セレクトボックスを活用

単一選択のフォームコンポーネントは、ラジオボタンではなくセレクトボックスを利用するとスペースの節約になります。

セレクトボックス

余計なコンテンツを表示しない

ユーザーは画面右横のスクロールバーで画面の長さを認識しています。全体の俯瞰はスクロールバー頼みとも言えるでしょう。

スクロールバーの表示（スマホ）

特にフッター等のフォームの送信ボタン以下にリンクやバナー等のコンテンツが配置されている場合は要注意。不必要にフォームが長く続く印象を与えてしまってる可能性があります。
ファーストビューの領域を考慮することはもちろんですが、できるだけフォームの下側にも余計なコンテンツは配置しないほうが良いでしょう。
　

スマホにおけるガイド表示の導入

フォームのゴールをユーザーに伝える手段として有効なEFOの定番機能に「ガイドナビゲーション」があります。
あといくつ項目を入力すればよいかをユーザーに伝えることで、入力完了までの道のりが明確となります。

弊社EFOツール「エフトラEFO」のスマートフォン向けガイド表示では、下記のようなUIで残り項目数を表示することができます。

エフトラEFOのスマートフォン向けのガイド表示。残り項目のカウントダウンを上部に固定表示。色や表示方法などカスタマイズも可能

残りの項目数が見えているだけでゴールが明確となり、入力を続けるうえでの不安を取り除くことができますね。

最後に

いかがだったでしょうか。本日は縦長になりがちなスマートフォンフォームの改善方法を紹介しました。

スマートフォンのページがレイアウト上縦に長くなってしまうことはある程度は仕方がないことですが、その他の部分でカバーしてユーザビリティを担保できるようにしたいですね。