サイト内検索:

サインナップやログインページにおけるフォームのデザインに関するテクニックあれこれ。

There are many ways to design sign-up and log-in forms. Most designers are familiar with the conventional ways. But understanding and applying a few innovative techniques could make your forms simpler and more efficient to fill out.

Webのサービスでサインナップとかログインのためのフォームをデザインする方法はたくさんあるし、多くのデザイナーさんはそれらに詳しいのですが、ちょっとしたテクニックを使うことでそれらのフォームをもっとシンプルにそしてより効果的にする方法があるんですよ、だそうです。

Innovative Techniques To Simplify Sign-Ups and Log-Ins - Smashing Magazine

実際、ユーザである私たちも新しいWebサービスが登場すると新しくサインナップしてログインして、ということでその作業を毎回経験するわけですが、リンク先ページで紹介されている方法を改めて見ると、なるほどそういう意図があるのか、なんてことが理解できて結構楽しいです。

まずはサインナップの段階でのお話です。

・ユーザのサインナップが完了してからユーザ名を決定させる。

最初のサインナップの段階でユーザ名を決定しなきゃいけないような作りにしていると、希望するユーザ名が既に取得されているとあれこれ試行錯誤しなきゃいけなくなり、その結果サインナップを断念、なんてことが起こるわけですね。

・パスワードは2度入力させない

これはパスワードを間違って入力・登録させないようにするための措置なのですが、確かに2度入力させられるのはうざいので、リンク先ページであるようなパスワードを「●●●●●●●」形式で表示させないで平文で画面に表示させたものを「これで正しい」というチェックボックスにチェックさせる、なんて方法の方がいいのかもしれません。

・郵便番号から住所を自動で入力

これをやっているところは多いですよね。

・メールマガジンとかニュースレターの配信許可のボタンをデフォルトでオンにしておかない。

A more effective approach would be to make users want to subscribe by showing them a preview or excerpt of the newsletter. This way, they'll know what they're missing if they don't subscribe. You'll also sleep well knowing that users who subscribe have done so because they're genuinely interested in your content.

メールマガジン等の購読ボタンにチェックを入れておくかわりに、それらのプレビューとかコンテンツの一部を見せる、というアイディアです。

確かに、どんな内容のものが送られてくるのかわからないのに「購読する」なんて許可できませんものね。

・スパム対策としてCAPCHAを使わずにJavaScriptで生成してテキストフィールを使う

これはなかなかおもしろいテクニックです。

JavaScriptで生成されたテキストフィールドに対してはスパムボットは対応できませんからね。

また逆にテキストフィールドを事前に用意しておき、CSSでそれらをWebページには表示させないでおく、というテクニックも紹介されています。これを使うと、画面にテキストは表示されていないので人間のユーザは未入力になり、スパムボットは逆にそこを埋めてくる、というわけです。あとは受信プログラム側でその非表示フィールドが空かそうじゃないかを見て、空じゃなかったら登録を破棄する、なんてことをすればよいわけです。

そして次は「ログイン」の作業でのテクニックのあれこれがリンク先ページで説明されています。

いろいろありますが、個人的に面白かったのは「Make the "Submit" Button as Wide as the Text Fields」というやつです。サブミットボタンはテキストフィールドを同じぐらいの幅にしろ、ってことです。

The log-in button isn't just for taking action: it also lets users know what action they're about to take. A small log-in button has weak affordance and can make users feel uncertain about logging in.

ログインのボタンは単にログインするためのものじゃなくて、ユーザに「次のアクションは何であるか」を知らせるためのものでもあるから、という理由からのようです。なるほどなあ。

ということで、いろいろ作り手側のあれこれを垣間見れてなかなか面白い記事でした。

Innovative Techniques To Simplify Sign-Ups and Log-Ins - Smashing Magazine

blog comments powered by Disqus

2011年アルファブロガー受賞

新着DVD

モバイル

Powered by Movable Type 6.1.2

ブログ内検索

BlogPeople ReviewMe!

このサイトのレビューとか応援コメントを書いてもらえると励みになります。

Affi☆List for Amazon

バナー広告

このブログ記事について

このページは、nagasawaが2011年5月 6日 17:28に書いたブログ記事です。

ひとつ前のブログ記事は「5月6日のラッキーさん」です。

次のブログ記事は「PSNが侵害される数ヶ月前からソニーはそこで使われているソフトウェアが古いものであることを知っていた、という記事。」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。