スマートフォンは画面が小さいばかりか、指でタップして操作しなくてはならないために、マウスのような緻密なコントロールが困難です。
そのために、スマートフォン向けのフォームでEFOを考えるときは、そのようなタッチデバイス特有の操作性を考慮してユーザーインターフェースを設計する必要が出てきます。
今回は、指で操作したときに使いやすくするためのスマートフォンサイトデザインのポイントをお伝えします。
タップエリアを広げる
指には厚み・幅があるため、指で触れる以上、画面との接地面積がある程度生じます。
タップエリアが小さいと、ユーザーが目標とするオブジェクトを思い通りにタップできず、ストレスを感じる可能性があります。
そのため、ボタンやフォームコンポーネントなど、タップするオブジェクトの面積は大きく確保するようにしましょう。
具体的には、
- 内側に余白を大きくとる
- 文字サイズを大きくする
- 横幅を広げる(1カラムにする)
などの方法によってタップエリアを拡大することができます。
まわりの余白は必ずもたせる
例えば、こんな経験はないでしょうか?
- スマートフォンで、あるフォーム項目やボタン、リンクなどをタップしようとした際に、意図せずに隣り合っている別のオブジェクトをタップしてしまった経験。
あるいは、こんなパターンはどうでしょうか。
- スマートフォンでページをスクロールするつもりが、誤ってリンクやボタン、バナー等をタップしてしまった経験
上記の例では、最悪の場合、これまでの入力内容が消えたり、手順を最初から踏まないといけないような自体を引き起こし、ユーザーの離脱を招きかねません。
しかしこれらはすべて、タップ可能な項目同士の余白を充分に確保することで、多くの場合防止することができます。
余計なリンクを極力排除する
指での操作は、意図せずに画面に触れてしまう機会が多く、マウスに比べてもページ内の余計なリンクが意図しない遷移を引き起こす危険性が高まります。
とくに要注意なのはバナー広告。なかでもスクロールに追随する形で画面内に固定して配置していたり、スクロール位置によってバナーの表示位置を切り替えているようなバナーは誤操作を引き起こす危険性が非常に高まります。
そのような広告はフォーム内に入れないほうが良いでしょう。
フォーム操作に関係のないリンクは極力排除するようにしたいですね。
最後に
本日は、指による操作でストレスが溜まらないスマートフォンフォームを作るためのEFOポイントを3点、ご紹介しました。
- タップエリアを広げる
- まわりの余白は必ずもたせる
- 余計なリンクを極力排除する
上記のポイントに注意しつつ、必ず実際に触って操作感を確かめながらスマートフォンのフォーム改善を進めてみてくださいね。