2008年06月30日

携帯サイトのフォーム設計のコツ

ソーシャルブックマーク  はてなブックマークに登録  この記事をクリップ!  Yahoo!ブックマークに登録  Google Bookmarks に追加  Buzzurlにブックマーク  del.icio.us に登録  | 

ユーザビリティコンサルタント
土井 博貴

PC向けサイトの資料請求ページなどでは、入力フォームに近接して入力例を置くことで入力形式の違いによるエラーを防ぐことができます。

001.GIF

しかし携帯サイトの場合、入力フォームの周りに入力例を表示したとしても、パソコンとは違い実際にユーザが入力する際には入力画面に切り替わってしまうため、ユーザが例を見ながら入力することができません。

携帯サイトの場合は、以下のように入力情報を細かく分けてフォームを配置するなど、ユーザが入力形式をすぐに理解できるように設計すると良いでしょう。

002.GIF

入力フォームについてもう1点注意することがあります。
例えば上記にて、年月日の入力フォームを縦に並べてしまうと、スクロールのしかたによっては携帯サイトの画面に月日の入力フォームが表示領域外に隠れて見えなくなるケースが発生し、ユーザが誤って年のフォームに月日も同時に入力してしまう可能性があります。

003.GIF

入力フォームは横並びにする、入力フォームに文字数制限を設けることが有効です。

同じ役割を持つ画面でも、PCと携帯という物理的な環境やユーザの使用環境の違いを考慮すると違った設計になる場合があることに注意しましょう。

ソーシャルブックマーク  はてなブックマークに登録  この記事をクリップ!  Yahoo!ブックマークに登録  Google Bookmarks に追加  Buzzurlにブックマーク  del.icio.us に登録  | 

<< 色や模様が購入の決め手となる商品の見せ方 | トップ | Ajaxによるエラーチェックの注意点 >>



AI搭載 モーメント分析クラウド「USERGRAM(ユーザグラム)」