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

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

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

Androidテキストフォーカス時
Androidテキストフォーカス時

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

画面が小さいと、当然、部分的にしかページを閲覧できませんので、全体を俯瞰することが難しくなります
とくに、iphoneの場合は通常フォーム要素のタップ時には画面のズームインが起こります。(この動作はオフにすることが可能です)
このズームインが起こると、せいぜい確認できるのは直前と直後の入力項目くらいで、ほぼそれ以外の情報は確認することいが難しくなります。
iphoneテキストフォーカス時
それでは、全体を俯瞰しづらいという前提条件のもと、具体的にどんな点に気をつけるべきなのでしょうか。

項目の順番は適切に

まず、ページが俯瞰しにくいスマートフォンのフォームでは、関連する入力項目はなるべく固めて配置するようにしましょう。
PCでは、関連項目が離れて配置されていたとしても、以前の項目にさかのぼって確認することは容易です。
少しのスクロールか、視線を移動するだけで済みます。
いっぽいスマートフォンの場合、以前の項目を遡って元の位置に戻ってくるという行動はなかなかスムーズにいきません。
ときにはスクロールしすぎてしまったり、スクロールしようとして入力項目をタップしてしまったりと、ストレスの溜まる可能性もあります。
スマートフォンのフォームでは、ユーザーがフォームを前後する必要が内無いように、項目の順番を適切に設計し、互いに参照する可能性が高い関連項目は上下並べて配置しておくようにしたいものです。

文脈によらない

スマートフォンのEFOで意外と見落としがちなのは、ラベルの文言。
ラベルがわかりやすいというのは大前提ですが、とくにスマートフォンの場合、文脈に依存しないようなラベリングを行うことが大切です。
たとえば、下記のようなPC向けフォームについて考えてみます。
文脈
「お届け先」、「請求先」それぞれの名前、住所を問う内容となっています。
PC向けの場合、この形でとくに問題なさそうですよね。
いっぽう、スマートフォンの場合はどうでしょうか。
スマホの文脈
スマートフォンに向けに単純に最適化した場合、上記のような画面になると思いますが、
この場合、スクロールの位置によっては、何の「お名前」と「ご住所」なのかが画面上わからなくなる可能性があります。
PCの場合は、入力項目を情報の文脈によってカテゴリ分けし、見出しなどをつけてまとめると非常にわかりやすくなりますが、スマートフォンの場合はそうはいきません。
スマートフォンでは、この場合「請求先住所」「請求先お名前」のように、文脈に依らなくとも単体で入力内容を理解できるようなラベリンクを心がけるようにしましょう。

最後に

いかがだったでしょうか。
本日は、画面の狭いスマートフォンにおけるフォーム設計の注意点についてまとめてみました。
今後もスマートフォン向けのEFO情報をお届けしていきたいと思いますので、お楽しみに。