本日は、人気のウェブサービスやSNSから、シンプルで入力しやすい会員登録フォームを持つサイトをピックアップし、フォームの特徴とともにまとめてみたいと思います。
Naver
まず取り上げるのはWEBキュレーションサービス「NAVERまとめ(http://matome.naver.jp/)」を利用する際に必要な「NAVERアカウント」の会員登録フォームです。
非常にシンプルな登録フォームで、ユーザ名、メールアドレス、パスワードの項目3つを水平方向に並べているのが特徴です。
入力支援機能
入力項目にフォーカスしている間、項目の背景色が黄色に変化します。
また、必須の項目を入力し終えるまで送信ボタンを押下できなくするサブミットブロック機能を導入しています。
パスワードの強度やユーザー名の重複は、その場でチェックするようになっています。
登録後の流れ
送信すると、メールアドレス宛に確認用の案内が届きます。確認作業をしないと一部のサービスが利用できないとの但し書きがあります。
メール内のリンクに遷移することで、正式に登録が完了します。
Tumblr
次は画像、動画、音楽、引用、リンクなどさまざまなものを投稿できるマイクログログサービス「Tumblr(タンブラー、https://www.tumblr.com/)」のフォームを見て行きましょう。
トップページは会員登録フォームを中心に更新されています。シンプルな3つの項目入力です。
入力支援機能
アカウント名の入力では、Tumblr側が利用可能なアカウント名の候補を表示してくれる機能があります。
また、パスワードの強度が弱い場合は、送信ボタン押下時のエラーとして表示されるようになっています。
登録後の流れ
3つの情報を入力・送信を終えると、追加の設問が現れます。画面の再読み込みはなく、スムーズなUXで表示されていました。
最後にCAPTCHAのチェックボックスに記入すると、正式に登録が完了するようです。
お次はおなじみTwitter(https://twitter.com/)です。
トップページにはログインと新規登録のフォームが並んでいます。
入力支援機能
入力を始めると入力欄右側に「☓」ボタンが出現。クリックすると入力内容がクリアされるようですが、何のための機能かはわかりませんでした。
パスワードの入力中は、目のマークのアイコンが出現。押下することでマスキングを一時的に解除することが可能です。
入力内容にブランクがある場合やエラーがある場合には、トップページでエラーを表示するのではなく、アカウント登録の専用ページに遷移したうえで、エラーなどを表示する形となっていました。
パスワードが簡単すぎる場合にはリアルタイムに判定してエラー表示。強度チェッカーも表示していました。
問題ない入力内容については入力成功サイン(チェックマーク)が表示される。またユーザ名の重複判定や候補表示もリアルタイムに実施します。
登録後の流れ
登録後はセキュリティ強化のための電話番号の登録が案内されます。ただしこの登録はスキップすることも可能です。
このページでは、エラーは画面上部に表示されました。
Github
お次はソフトウェア開発プロジェクトのための共有ウェブサービス「GitHub(ギットハブ)https://github.com/」の登録フォームを見ていきます。
トップページのアイキャッチ内に登録フォームがあります。
入力支援機能
ページ訪問時、あらかじめフォームの最初の項目にフォーカスがあたっています。また、フォーカス中の項目の周りがうっすら光り、選択中であることを示しています。
問題なく入力すると、チェックマークを表示します。
入力形式やパスワードの強度不足の場合などおいには、リアルタイムにエラー判定しその旨を表示します。
登録後の流れ
情報登録後は、プランの選択画面に遷移します。無料アカウントにあらかじめチェックが入っているので、無料ユーザーはボタンを押下するだけで完了です。
続いては、気に入ったWEB上の画像をスクラップできるサービスPintarest(http://jp.pinterest.com/)の例です。
トップページは、登録フォームを中心としたデザインになっています。
入力支援機能
リアルタイム判定機能はなく、ボタンを押下した場合にエラーを表示する一般的な形。
Twitterのようにパスワードを入力中に、目の形のアイコンが登場。このアイコンをクリックしている間は、パスワードのマスキングを解除できるようになっている
登録後の流れ
フォームは続いてユーザー名と年齢、性別の選択となる。年齢は入力しなくても次に進むことができた。
Dropbox
次はオンラインストレージサービスのDropbox(https://www.dropbox.com/)のフォームを見てみましょう。
サイトトップページの「登録する」を押下すると、隠れていたフォームが現れる。
名前(姓名)とメールアドレス、パスワード、チェックボックスの計5項目。
入力支援機能
エラーはボタン押下時に表示される形式です。該当箇所の枠線と、エラー内容を赤色で表示して強調しています。
パスワードの入力欄には強度チェッカーを搭載。
登録後の流れ
情報登録後は、プランの選択画面へ遷移します。
Slack
次は最近注目を集めているチームコミュニケーションツール、「Slack」(https://slack.com/)のフォームをご紹介です。
サイトのトップページに登録フォームが配置されています。
入力支援機能
入力欄は2つのみ。水平方向にシンプルに配置されています。
フォーカス中の項目には青色の枠線がつきます。
登録後の流れ
フォーム送信後、メールアドレスに認証メールが送られます。
メールはHTMLメールになっており、押下するべきリンクはボタン「Get started」の形で示されています。
完了ページでは、メールアドレスの再確認があり、問題なければ初期設定を進めることができます。
Prott
国内発のプロトタイピングサービスであるPrott(https://prottapp.com/)の例を見てみます。
「アカウント作成」を選択するとシンプルなフォームが登場します。入力項目は4つです。
入力支援機能
右横の?マークにマウスをあてると、入力形式についての説明が現れます。
フォーカス中の入力欄には青色の下線がつき強調されるようになっています。
入力を始めると、入力欄上部にラベルがなめらかに出現。入力中でのラベルを確認できる。
エラーはボタン押下時。背景色をつけて強調されたエラー文を該当箇所に表示する形です。
inVision
最後は海外発のプロトタイピングツールinvision(http://www.invisionapp.com/)を見ていきます。
トップから「SIGN UP FREE」を押下するとフォーム画面に遷移します。
オファー文、ボタン文言ともにFREE(無料)である旨がアピールされているのが印象的です。
クレジットカードは不要ですとの但し書きも。
入力支援機能
プレースホルダーがラベルとなっているが、入力を開始すると、入力欄右側にラベルがなめらかな動きで登場。入力中もラベルを確認することができる。
エラーはフォーム上部に表示され、該当箇所への強調はなかった
登録後の流れ
登録後、メールの確認などのフローはなく、すぐにプロジェクト画面に遷移しました。
最後に
いかがだたでしょうか。本日は人気ウェブサービスのシンプルな会員登録フォームをあつめ、特徴をご紹介しました。
いずれも入力項目数を最低限におさえているだけではなく、大きな入力欄や明確なボタン、ラベル表示の工夫やパスワードマスキングの解除機能、リアルタイムのエラーチェックやアカウント名の重複チェック、候補表示、パスワード強度チェッカーなど、入力支援機能やがふんだんに利用されており、ぜひともお手本にしたいフォームばかりでしたね。
ぜひ、参考に改善を進めてみてはいかがでしょうか!