ホームからサービスからスマートフォン対策からスマートフォンサイトのエントリーフォームにおけるユーザービリティ6のポイント

サービス

スマートフォン対策

スマートフォンサイトのエントリーフォームにおけるユーザービリティ6のポイント

PC向けに用意していた既存のフォームをそのままに表示すると、画面サイズや操作方法の違いから 「入力欄が小さい」「手で画面拡大しなければならない」「設問が確認出来ない」等、様々な問題が起こります。

起こりがちなフォームのトラブル事例とともにユーザビリティのポイントをご紹介します。

  1. フォームの項目名の配置
  2. 入力ボックスの配置
  3. 横列配置
  4. 入力ボックスの入力モード設定
  5. 1つの入力ボックスでの複数の文字種類
  6. プルダウンの文字数

フォームの項目名の配置

入力ボックスの左に配置していると、入力時に項目名が見えなくなる。
項目名や入力例は入力ボックスの上または下に配置することを推奨します。

スマートフォンサイトのエントリーフォームにおけるユーザービリティ6のポイント フォームの項目名の配置

入力ボックスの配置

姓名など横並びにしがちな入力ボックスですが入力時に右側のフォームが見えなくなる可能性があるのでなるべく避けることを推奨。回避策として、ズームしても項目が隠れない横幅を指定する方法もあります。

横列配置

ラジオボタンやチェックボタンの複数行の横列配置は避けることを推奨。

  • ・ズームアウトすると文字が小さすぎて読みづらく、選択エリアをタップしづらい
  • ・ズームインすると選択肢が一覧しづらい

などデメリットがあります。
改善案として、横列を増やしすぎない。単一回答の場合はプルダウンにする。などがあります。

スマートフォンサイトのエントリーフォームにおけるユーザービリティ6のポイント 横列配置

入力ボックスの入力モード設定

設定がされていないと、ユーザは手動で入力モードを切り替える必要があり、入力を面倒なものと敬遠し離脱する可能性が高くなります。
HTML5では、入力ボックス毎に入力モード(typeプロパティ)を設定でき、適切なモード設定がされているとユーザがわざわざ自分で入力モードを変える必要がなく、快適に入力できます。
例:type:"text"、type:"tel"、type:"email"

1つの入力ボックスでの複数の文字種類

「2012年12月」のように複数の文字種から構成される情報入力を求められると、入力モードを何度も切り替える必要があり、面倒な印象を与えてしまいます。
1入力ボックスにつき1文字種類が理想です。場合によっては入力ボックスの分割等も検討する。

プルダウンの文字数

iPhone3GSのプルダウンでは、縦向きの場合は全角文字11文字、横向きの場合は全角17文字を超えると項目内容が省略されてしまい、内容が分からない危険があります。
1項目の文字数は全角11文字(半角15文字)以内におさめます。

お問い合わせ

関連サービス

Services & Solutions

Official Account

プレミア Google Partner