指で操作しやすい?タッチデバイスのフォームデザインで気をつけたいこと

スマートフォンは画面が小さいばかりか、指でタップして操作しなくてはならないために、マウスのような緻密なコントロールが困難です。
そのために、スマートフォン向けのフォームでEFOを考えるときは、そのようなタッチデバイス特有の操作性を考慮してユーザーインターフェースを設計する必要が出てきます。

今回は、指で操作したときに使いやすくするためのスマートフォンサイトデザインのポイントをお伝えします。

タップエリアを広げる

指には厚み・幅があるため、指で触れる以上、画面との接地面積がある程度生じます。
タップエリアが小さいと、ユーザーが目標とするオブジェクトを思い通りにタップできず、ストレスを感じる可能性があります。

そのため、ボタンやフォームコンポーネントなど、タップするオブジェクトの面積は大きく確保するようにしましょう。

具体的には、

  • 内側に余白を大きくとる
  • 文字サイズを大きくする
  • 横幅を広げる(1カラムにする)

などの方法によってタップエリアを拡大することができます。

以前の記事でクリックエリアを広げつための方法をお伝えしました。この内容をそのまなスマートフォン向けサイトにも利用できます。

以前の記事クリック領域を広げよう!フォームの使いやすさを劇的にアップする、たった3つの工夫でクリックエリアを広げつための方法をお伝えしましたが、この内容をそのまなスマートフォン向けサイトにも利用できます。

まわりの余白は必ずもたせる

例えば、こんな経験はないでしょうか?

  • スマートフォンで、あるフォーム項目やボタン、リンクなどをタップしようとした際に、意図せずに隣り合っている別のオブジェクトをタップしてしまった経験。

あるいは、こんなパターンはどうでしょうか。

  • スマートフォンでページをスクロールするつもりが、誤ってリンクやボタン、バナー等をタップしてしまった経験

上記の例では、最悪の場合、これまでの入力内容が消えたり、手順を最初から踏まないといけないような自体を引き起こし、ユーザーの離脱を招きかねません。

しかしこれらはすべて、タップ可能な項目同士の余白を充分に確保することで、多くの場合防止することができます。

余計なリンクを極力排除する

指での操作は、意図せずに画面に触れてしまう機会が多く、マウスに比べてもページ内の余計なリンクが意図しない遷移を引き起こす危険性が高まります。

とくに要注意なのはバナー広告。なかでもスクロールに追随する形で画面内に固定して配置していたり、スクロール位置によってバナーの表示位置を切り替えているようなバナーは誤操作を引き起こす危険性が非常に高まります。
そのような広告はフォーム内に入れないほうが良いでしょう。
フォーム操作に関係のないリンクは極力排除するようにしたいですね。

最後に

本日は、指による操作でストレスが溜まらないスマートフォンフォームを作るためのEFOポイントを3点、ご紹介しました。

  1. タップエリアを広げる
  2. まわりの余白は必ずもたせる
  3. 余計なリンクを極力排除する

上記のポイントに注意しつつ、必ず実際に触って操作感を確かめながらスマートフォンのフォーム改善を進めてみてくださいね。

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です