先日、TSUTAYA onlineに会員登録をしました。

登録に必要な情報すべてを入力できたと思い、次ページへ進もうとすると入力ミスがあったようで、元のページに戻されてしまいました。戻されたページの上部に項目名を表示することで入力ミスを伝えていますが、ページが長かったこともあり、どこに入力すればよいのか分からなくなってしまいました。

写真1:ページ上部でエラー箇所を知らせる画面

一般的に入力ミスを伝える方法としては、アラートダイアログで入力ミスの項目名を知らせてくれるものや、入力すべき欄の近くに赤文字で知らせてくれるものなど、いろいろありますが、ちょっと見ただけでは該当箇所を見落としてしまうものが多く、不便だなぁと思っていたところ、Yahoo!JAPANの登録画面にはとても感心する工夫がありました。

それは、うっかり入力ミスしても、ページの上部に入力ミスがあることを知らせる表示があるだけではなく、入力すべき欄の上に文字でも知らせてくれるうえ、該当箇所の背景が黄色くハイライトしているのです。 

写真2:入力中とエラーを知らせる画面

元の入力画面はほとんどモノトーンで素っ気無いくらいだったので、入力ミスを知らせる黄色い背景と赤い文字が目立つようになっています。また、既に入力済みの項目は平文で表示し、該当箇所だけフォームを残すことで、入力すべき箇所としなくても良い箇所を分かりやすくするなど、この入力画面には、ユーザの入力を補助するための工夫が随所に見られ、非常に気が利いているデザインだと思いました。

普段、面倒に感じることが多いユーザ登録作業を気持ちよく完了させる。これも、よいユーザ体験のひとつかもしれませんね。