読者です 読者をやめる 読者になる 読者になる

ログマニアックス

日々学んだこと、気づいたことをメモ代わりに残していければ。カバー範囲は割と広めです。

モバイル向け入力フォームを作る時のチェックリスト

最近はほとんどの操作をモバイル端末で行っています。
特に家にいるときはなおさらです。
入力フォームをモバイルで使用することも多いですが、入力フォームを最適化するための七つのポイントの紹介。

元ネタはこちら

Seven tips for optimising your ecommerce checkout forms | ClickZ

最近多いですが、例のごとく、clickzからです。

入力している項目の目的を知らせる


例えば誕生日を入力させるのは誕生日割引のためだとか、個人情報を集める根拠が必要です。
昨今は意識もより高まってるので、なおさら責任説明が求められているかも。

正しくキーボードを設定する


設定しておくことで、テキストなのか、数字だけなのかなど、入力しやすいキーボードを選ばせるようにできます。
正しい値を入れることによるCVR改善も実現できそうです。

検索エンジンのようなサジェスト


住所など間違えが多い項目を中心に入力内容の提案をしてくれるのもいいかも

解像度に合わせたフォームサイズ

モバイルデバイスの小さい画面サイズに合わせた横幅で設定しましょう。

どこまで進んだのかを見せる


プロセスがどこまであって今どこにいるのかを見せていくのも良い考えです。

説明は左揃えで並べて


これはおそらくは縦長画面で使うことが大きいからでしょうが、PCのように説明と入力欄を横に並べるのではなく、縦に並べたほうが入力がしやすいなります。

同じことは何度も聞かない

特にメールアドレスやパスワードなど、一定以上の長さの文字列を二回以上入力させることはストレスになります。

まとめ

小さい画面、限定された入力サイズでどこまで簡潔にするか、というのがポイントになりますが、多くの点は実はPCでも援用できるものです。
そういえば特にモバイルアプリではGoogleやFacebookによる認証をベースにしたアプリが増えているのも、そのあたりをイメージしてのことかもしれません。
ただ作るだけではなく、フォームの改善ポイントとしても参考になりそうですね。