708. 名前とシリアルNoを一発入力〜オンラインソフトにみるフォーム入力の工夫

Tweet

Share on Tumblr

写真はMac用のswitchResXというオンラインソフトを購入した時に送られてきたシリアルナンバー通知メールです。ここに書かれているユーザ名とシリアルナンバーをソフトに入力することで購入証明となり、体験版として動作しているソフトが永続的に利用可能になる仕組みです。

赤線の部分に「上の二行をコピーしてから"シリアルナンバーの入力”ボタンを押すと、自動的に欄が埋まりますよ」と書かれてます。これはスゴい。ユーザ名とシリアルナンバーを二回にわけてコピペしなくて済むどころか、項目ラベル部分を抜いて範囲選択する必要すらありません。ザクっと二行まとめてコピーして、あとはソフト側でボタンを押すだけです（ペースト操作も不要）。

この手の長い文字列はソフトのシリアルナンバーに限らず、オンラインショッピングのクレジットカード番号などでよく入力する機会があるのですが、4桁ごとにハイフンが入っていて、入力欄の方も4桁分ずつで欄が分かれてたりすると、最悪4桁ずつ選択してコピペを繰り返さなければならなかったりします。ちょっと気が利いているところだと、4桁タイプすると自動的に次の欄にカーソル（フォーカス）が移動してくれたりもしますが、それに気付かず自分でも画面を見ずにTABキーおしてフォーカス移動しちゃったりして…。更に気が利いているところだと、ハイフンまで入った状態でペーストすると、自動的にハイフンを抜いて、4桁ずつ各枠に分割して貼り付けてくれたりしてとても気持ちが良かったりします。またマイクロソフト製品のプロダクトキー入力画面なんかでは欄は1つなんですが規定文字数入力すると自動的にハイフンが入り、その上でユーザがハイフンを打っても無視されるといったこれまたなかなか凝った作りになっていたりしますね。

そうした単一の項目における工夫は色々目にしてきましたが、「複数項目を一括で入力でき、更に見出しまで混ざってても気にしなくて平気」なんてのは初めて見ました。これって結構画期的なことなんじゃないですかね？もちろんこれは元のメール文面を作っているところ、その受け側のソフトでしっかり摺り合わせをしているからできることなんですが、いっそ業界標準作って、見出しと内容を対で下記のように記述することにして、それを丸ごとコピペしたらフォーム側もそれを受けたら自動的に必要な要素を取り出して並び替えて、各項目欄に分割ペースト、なんて仕組みにしたらいいんじゃないですかね？ユーザ側としては常に単一のテキスト文だけ用意しておけば、あらゆるタイプのフォームに一発ペーストできる、というワケです。

試しに簡単なデモを作って見ました。

1. 下記のデータをコピーします

自分の個人情報がこの形式でどこかにあらかじめ保存してあったり、住所録ソフトからこの形式でコピーできると思って下さい。

2.以下のフォームのどこでも空いている欄にペーストします

通販サイトなどの決済画面だと思って下さい。上記データからフォームが自動的に必要な情報を組み合わせ埋めてくれます（ドヤァ。

（即興で作ったデモなので、お使いのブラウザによっては正常に機能しないかも知れません）

ちなみに、Googleさんはフォーム側に、ここは名前欄、ここは住所欄という様に隠し属性を追加して、ブラウザ側でそれを読み取って適切な情報を自動入力させよう、というアプローチを提案しているみたいですね。