スマートフォンのEFO:俯瞰しにくい小さな画面だからこそ注意したいポイント

スマートフォンのユーザビリティを考える時には、その小さな画面領域を考慮する必要がありますね。
PC向けフォームではさほど問題なかった点でも、スマートフォンの場合は大きくユーザビリティを損なってしまう可能性もあります。

今回は、画面領域が小さいスマートフォンだからこそ、気をつけたい点について考えていきます。

スマートフォンフォームの画面はとにかく小さい

スマートフォンのフォームは、ユーザーが閲覧できる画面がとにかく小さくなります。

ただでさえ小さいディスプレイに加え、フォームの入力時には画面内にソフトウェアキーボードが現れるため、下半分はこのキーボードで隠れてしまいます。

Androidテキストフォーカス時

Androidテキストフォーカス時

画面が小さいと何が起こるか

画面が小さいと、当然、部分的にしかページを閲覧できませんので、全体を俯瞰することが難しくなります

とくに、iphoneの場合は通常フォーム要素のタップ時には画面のズームインが起こります。(この動作はオフにすることが可能です)
このズームインが起こると、せいぜい確認できるのは直前と直後の入力項目くらいで、ほぼそれ以外の情報は確認することいが難しくなります。
iphoneテキストフォーカス時

それでは、全体を俯瞰しづらいという前提条件のもと、具体的にどんな点に気をつけるべきなのでしょうか。

項目の順番は適切に

まず、ページが俯瞰しにくいスマートフォンのフォームでは、関連する入力項目はなるべく固めて配置するようにしましょう。

PCでは、関連項目が離れて配置されていたとしても、以前の項目にさかのぼって確認することは容易です。
少しのスクロールか、視線を移動するだけで済みます。

いっぽいスマートフォンの場合、以前の項目を遡って元の位置に戻ってくるという行動はなかなかスムーズにいきません。
ときにはスクロールしすぎてしまったり、スクロールしようとして入力項目をタップしてしまったりと、ストレスの溜まる可能性もあります。

スマートフォンのフォームでは、ユーザーがフォームを前後する必要が内無いように、項目の順番を適切に設計し、互いに参照する可能性が高い関連項目は上下並べて配置しておくようにしたいものです。

文脈によらない

スマートフォンのEFOで意外と見落としがちなのは、ラベルの文言。
ラベルがわかりやすいというのは大前提ですが、とくにスマートフォンの場合、文脈に依存しないようなラベリングを行うことが大切です。

たとえば、下記のようなPC向けフォームについて考えてみます。
文脈

「お届け先」、「請求先」それぞれの名前、住所を問う内容となっています。
PC向けの場合、この形でとくに問題なさそうですよね。

いっぽう、スマートフォンの場合はどうでしょうか。

スマホの文脈

スマートフォンに向けに単純に最適化した場合、上記のような画面になると思いますが、
この場合、スクロールの位置によっては、何の「お名前」と「ご住所」なのかが画面上わからなくなる可能性があります。

PCの場合は、入力項目を情報の文脈によってカテゴリ分けし、見出しなどをつけてまとめると非常にわかりやすくなりますが、スマートフォンの場合はそうはいきません。

スマートフォンでは、この場合「請求先住所」「請求先お名前」のように、文脈に依らなくとも単体で入力内容を理解できるようなラベリンクを心がけるようにしましょう。

最後に

いかがだったでしょうか。
本日は、画面の狭いスマートフォンにおけるフォーム設計の注意点についてまとめてみました。

今後もスマートフォン向けのEFO情報をお届けしていきたいと思いますので、お楽しみに。

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

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

エフトラEFO機能アイコン

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

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

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

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

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

メールアドレスを入力

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