会員登録とかに代表される入力項目がたくさんある入力フォームを見ると、パソコンの、ワードの、キーボードのプロであるところの僕ですらうんざりする。一言でいうと苦行。
たくさん入力したすえに登録ボタンを押したら「〇〇が間違ってます」とか言われると悲しくなる。もっと早く言えよ、と思う。
ということで、できるだけ入力フォームの苦行を和らげる工夫を調べたり、考えたりしたのでメモ。
たくさん入力したすえに登録ボタンを押したら「〇〇が間違ってます」とか言われると悲しくなる。もっと早く言えよ、と思う。
ということで、できるだけ入力フォームの苦行を和らげる工夫を調べたり、考えたりしたのでメモ。
特に大事なのは、スタート地点であるところの会員登録フォームだと思うので、以下は会員登録フォームを強く意識してます。
- 本当に必須にする必要があるものだけ必須にする。
繰り返すけど、会員登録はスタート地点で、これをクリアしてもらわないと会員ゲットとならない。だからここで欲かいて、使い道も決まっていない誕生日や性別などの項目の入力を強制するのはよくない。
特に生年月日の入力、もしくは選択は、会員登録フォームの中でも１、２を争う苦行である。
誕生日を入力させようとしたために会員ゲットの機会を損失した例は、全国合計したら1万、2万の騒ぎじゃないかもしれない。まったく根拠ないけど。
生年月日を入力してほしかったら、ログインしたらその日の運勢がでるような機能でもつけておきなさい。そうしたら占いしてほしい人は生年月日入力してくれるよ。
言いたいことは、ユーザーに苦行をしてもらうならそれに見合ったメリットがないとダメよ。ってことだよ。 - 入力書式は、各項目の横っちょに書いておく。
必須っていうからイヤイヤ入力したら5文字以上9文字以下で入力してくださいとか言われて憤慨。後から言わないでくれよって思う。心底思う。軽い気持ちで登録しようとした人なら、ここでヘソまげて画面を閉じてしまう。
そんなもんは最初から入力項目の横ちょに書いときなさい。アメリカ人風にいうと「ユーザーは会員登録において、謎解きゲームを望んではいない」的な。
- 例も書いておく。
２の延長線上。郵便番号だと、3桁4桁をハイフンで区切ってください。みたいなのはわかりづらい。ので例も書いておくとわかりやすい。
例）123-4567
- 書いてる端から、その入力値が妥当かどうか教えてあげる。
クレジットカードの番号が必要になって「母さん、サイフ！」ってサイフをとってもらってカードだして入力して、で、住所とか入力している間に母さんサイフしまっちゃって、で「登録」ボタン押したら「クレジットカードが間違ってます」って早くいえよおい。またサイフからカードださなきゃと思ったら母さんサイフかたづけちゃったの？もういいやめんどくせえ。ってなるかもしれない。
下手したらよかれと思ってサイフ片付けた母さんが、なんで頼んでないのに片付けちゃうんだよとか因縁つけられて夫婦仲まで悪くしちゃうかもしれない。使いづらい登録フォームはそんくらいの破壊力を持っていることを知っておかなければならない。
ここはエンジニアの小手先の技の活かしどころ。Javascriptでリアルタイムにチェックしてあげるとこんな悲劇は起きない。いろいろツールはあるけど、LiveValidationが一番気に入った。使い方も簡単なのでおすすめ。最初オプションのつけ方に手間取るかもしれないけど、サイトの説明とソース見ればわかるから。たぶん。わかんなかったらコメントに書いてくれたら僕が説明するから。
あ、バックエンドでのチェックは忘れちゃダメよ。ここでのチェックはあくまでも夫婦仲を壊さないための工夫で、セキュリティ確保にはならないから。 - 入力補助ツールを使う。
日付入力とか、よく年月日でそれぞれ分かれてたりするのを見るけどアレもつらい。まあ、普通に入力させようと思うと、日付の書式なんてたくさんあるから、それも微妙だよね。みんながみんな必ず３の例を見てくれるとは限らないし。
じゃあもう選択しないジャンと思いきや、今はカレンダーの絵から日付が選べる素敵なツールがいくつもある。
「入力補助 日付」とかでググって、気に入ったのを使ってみる。ちなみに僕はprotocalendarがおすすめ。
なお、ワードやエクセルのプロが集まるようなサイトは、もしかしたら「こちとら、こんなちゃらちゃらした絵から選択してる時間があったら10回は入力できるんだよ」と言われてしまうかも知れないので、その辺は想定ユーザーを思い浮かべながら選択すること。これは、この項目だけじゃなく全部にあてはまることだけど。 - 全角とか半角をできるだけ強制しない。そんなもんは直してやる。
となりにいるカミさんとか彼女に「全角半角とは何か述べよ」と聞いてみなさい。「え？なにそれ新しいあらびき芸人？」とか言われるかもしれない。「Aとaでしょ？」とか言われるかもしれない。
驚くほどよくみるのが、住所で全角で入力してくださいとか。市区町村までガーッと入力して流れるようにテンキーに伸びていく自分の手を見ながら気持ちよくなってたら、「住所が間違ってます」って間違ってねーよ。
そんなものは、システムの裏側(表でもいいけど）で数字とハイフンくらい全角に直してあげなさい。つーかなんで全角を強制するのか不思議。後で検索したいから？だとしたらそんなの検索するときになんとかしたらいいじゃん。ユーザーにその苦行を押し付けてはいけない。あなたは検索するときになんとかすることができるけど、ユーザーには代替手段はないのだから。いや、代替手段はある。登録をやめることである。（アメリカ人風） - 自分がめんどくせーなと思ったことがあるものは、対応しろ。
もう、書くのがめんどくさくなってきた。１～６も要はこういうことなんだよね。ありがちなのを挙げてみただけで。
あと思いつく具体例は、２とか３の豪華版で、なじみのない項目とか、なんで入力しなきゃいけないの？的な項目に対してヘルプをつけてあげるとか。？マークにマウスもっていくとバルーンがでるやつに代表されるやつね。
ちなみに、まだわかってない可能性があるので伝えておくと、「なじみのない項目」というのは、チミにとってなじみのない項目ではないから。ユーザーにとってなじみのない項目だからね。だから、ユーザーIDとかも往々にして入るんだろうね。
小手先系だとimeを制御してやることとか、
<input style="ime-mode:disabled;" ～ />
ってやると、フォーカスあてると半角モードになってくれる。FFとIEで確認。
他は、知っていたり予測できる値は最初から入れといてあげるとか。
まとめると、つまりはアレなわけで。
昔おばあちゃんに言われなかっただろうか。
「自分がされて嫌なことは、人にしてはいけない」
そんな感じで。後半にかけて失速感たっぷりだけどそんな感じで。
コメントする