勝手にEFO徹底解剖 Last.fm 会員登録フォーム

本日はユーザーの音楽的指向を反映し、他のユーザーと音楽的なつながりを作り出すSNSサービスを提供するLast.fmの会員登録フォームを「徹底解剖」していきます。
Last.fmはロック大国であるイギリスで生まれ、12言語に対応しているサービスです。日本では2006年にサービス開始されました。

利用には会員登録が必要ですが、そのフォームにはどのようなユーザビリティ向上の工夫がされているのでしょうか。さっそく「徹底解剖」していきましょう。

※なお、Last.fmはウェブサイトとアプリの2種類のサービスを用意していますが、今回はWEBでの会員登録を想定して分析していきます。

※本記事の内容は2016年5月19日時点のLast.fmのフォームを分析した内容を記載しています。なお今回ご紹介したフォームには当社エフトラEFOの入力補助機能は導入されていません(2016年5月19日時点)。

フォーム全体の特徴

フォームの構成

Last.fmのユーザー登録は1ページで完結していて、確認画面の煩わしさが排除されています。

efo_double_ring確認画面なしでアカウントが作成される。

ユーザー登録の送信ボタン。

ユーザー登録の送信ボタン。

レイアウト

会員登録フォームのレイアウトはサイト共通のものでした。
ヘッダー等のデザインはどちらかといえば控えめですが、無駄なリンクのないフォーム専用レイアウトを用意するほうが望ましいです。
また、利用規約、プライバシーポリシーのリンクをクリックすると、別ウィンドウが開くような仕組みになっていないため、離脱の原因になると考えられます。

レスポンシブフォームとなっていて、スマートフォンではデザインは共通ですが、ヘッダーの装飾が一部非表示となりシンプルなレイアウトで表示されるようになっています。

soso_blackサイト共通のレイアウトを使用していて、離脱要因のリンクがある。

PCフォームのレイアウト。

PCフォームのレイアウト。

ok_blueレスポンシブ・ウェブデザインを採用。スマートフォンフォームはよりシンプルな表示。

SPフォームのレイアウト。

SPフォームのレイアウト。

必須マーク

soso_black必須マークは用意されていませんでした。
項目が少なく、全て必須項目となっていますが、必須マークは用意したほうが親切な設計です。

必須マークの記載は一切ない。

必須マークの記載は一切ない。

入力内容ごとの特徴

アカウント情報の入力

全体として入力項目に関する説明はありません。一部の例外を除きエラー画面で確認する以外の手段が無いようでした。具体的には次のとおりです。

ユーザー名
すでに使われているユーザ名は使用できませんが、入力中に重複チェックを行う仕組みはありませんでした。

メールアドレス
送信ボタンを押した時に、メールアドレスの形式チェックのみ行い、エラーの場合は送信ができない仕組みとなっています。
しかし、メールアドレスが空欄の場合はチェックの対象にならずにエラー画面に遷移します。

パスワード
パスワードに関しても、指定の特殊文字またはスペースを入れることが必須となっていますが、エラー画面でしか確認することができません。
パスワードにそれなりの強度が求められるフォームですので、強度が足りずエラー画面に遷移してしまうユーザーは多いのではないでしょうか。
パスワードの要件は補足として表示し、パスワード強度チェッカーを用意することでユーザビリティの向上が見込まれます。

エラーの項目と内容そのものはわかりやすい表示となっていると思います。

ng_red入力項目に関する補足説明が少なく、エラーとなりやすい。

ユーザ名とパスワードの制限はエラー画面でしか確認できない。

ユーザ名とパスワードの制限はエラー画面でしか確認できない。

メールアドレスの形式チェックのみ送信ボタンクリック時に行っている。

メールアドレスの形式チェックのみ送信ボタンクリック時に行っている。

Googleの提供するreCAPTCHAを導入

WEBサービスの不正利用を防ぐ目的でキャプチャ認証を導入しているサイトは多いですが、変形文字を読ませる仕組みはユーザーにとって負担がかかります。
Last.fmではreCAPTCHAを導入することで認証の負担を軽くする工夫が見られます。

efo_double_ringキャプチャ認証の手間を減らしている。

チェックを入れる、または指定された画像を選択することで認証が可能。

チェックを入れる、または指定された画像を選択することで認証が可能。

最後に

いかがだったでしょうか。今回の勝手にEFO徹底解剖はここまでです。

入力欄を最低限に留め、アカウント作成へのハードルを下げようとしている工夫が見られるフォームでした。
また、SNSというサービス上キャプチャ認証は必要ですが、画像認証はユーザーにかなりのストレスを与えてしまいます。
その点ユーザーの負担の軽減のためreCAPTCHAを導入している点も好感が持てます。
ただ、フォームがシンプル過ぎてユーザビリティが下がるという懸念があります。
特にユーザ名の重複の判定、パスワードの強度が要件を満たしているかは、エラー画面を表示する前にユーザーに通知したいところです。

最後にフォームの特徴をまとめて結びとさせていただきます。

優れている、取り入れたいポイント

  • 確認画面が省略されている
  • 入力項目が絞られていてシンプルなフォーム
  • レスポンシブ・ウェブデザインを導入。スマートフォン表示ならさらにシンプル
  • reCATPCHAを導入することでユーザーの画像認証の負担を軽減

課題と思われる点、その他論点など

  • サイト共通のレイアウトを使用。利用規約、プライバシーポリシーも直リンクのため離脱要因に
  • 必須マークの表示がない
  • ユーザ名の重複とパスワードの強度チェックがリアルタイムで確認できない

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です