勝手にEFO比較分析【スターバックス×タリーズ】(会員サイト登録編)

今回は、みなさんご存じのコーヒーショップの2大巨頭「スターバックス コーヒー」(スターバックス コーヒー ジャパン 株式会社、以下スターバックス)と、「タリーズ コーヒー」(タリーズコーヒージャパン株式会社、以下タリーズ)の2サイトです。
ともに「シアトル系コーヒーショップ」として既に定番のコーヒーショップ。どちらもウェブサイトは充実していて、スターバックスは「My Starbacks」、タリーズは「CLUB TULLY’S」という会員サイトを運営、会員が受けられるサービスは、スターバックスは主にメールニュースの受信で、タリーズは、タリーズカードの番号を登録することでカード残高がオンラインで確認できたりするなどです。

厳密には会員登録して受けられるサービス内容に違いはありますが、ウェブサイトから登録できる会員登録フォームという位置づけは同じなので、今回は、この両会員サイトの会員登録フォームを比較してみます。

それでは「勝手にEFO分析」していきます。
今回も、○△×で、ユーザー視点の評価を行い、最後に改善ポイントを「勝手に」指摘いたします。

※本記事の内容は2014年9月3日時点のスターバックス、タリーズ、両社のサイトのフォームを分析した内容を記載しています。なお今回ご紹介したどのフォームにも当社エフトラ EFOの入力補助機能は導入されていません(2014年9月30日時点)。

まずは基本項目の確認です。

いつも通り、EFOの基本項目からチェックしていきます。

スターバックス タリーズ
ページ数(非ログイン時の場合、プラン選択後より) メールアドレス送信→メール内URLから入力ページに遷移 会員情報入力、確認、完了の3ページ
入力項目 14 16
必須項目入力欄の数 8 11
フロー あり なし
オファー なし なし
必須マーク あり(「※」で控えめ) あり(「※」で控えめ)
送信ボタンのサイズ 幅132px × 高さ18px 幅95px × 高さ19px
入力画面のレイアウト フォーム専用 フォーム専用

今回、ともに会員登録フォームですが、目的にはやや違いがあります。スターバックスのほうは、いわばメール会員。タリーズのほうはタリーズカード会員。タリーズは、タリーズカードの番号の登録が必要ということもあり、入力項目の内容にも違いがありました。

レイアウトはともにフォーム専用、ただしレイアウトには大きな違いあり

項目数はそれほど変わらない一方で、高さ約2000pxとふんだんに余白を使ったレイアウトのスターバックスと、高さ約800pxとコンパクトにまとめているタリーズとで、フォームの印象はだいぶ違います。表現はスターバックスのほうが「今風」です。

ok_blue スターバックス レイアウト

スターバックス会員登録-入力ページ
ゆったりとしたレイアウト

ok_blue タリーズ レイアウト

efo_trs_flow3
こちらはコンパクト

必須項目はともにあり

ともに「※」マークで必須項目を示していましたが、特にスターバックスのほうは、※の色も淡く、ぱっと見、気づきにくい印象です。いつも言いますが、必須マークは、「※」ではなく、「必須」など文字を使って、さらに色背景を敷くなどして四角のマークにすべきです。一方、タリーズはスターバックス同様に「※」マークでしたが、項目名の左に飛び出るように配置するレイアウトの工夫と配色の結果、マーク自体は目立っていますね。

soso_black スターバックス 必須表示
淡い「※」マークは、目立たない
efo_stb_mark

ok_blue タリーズ 必須表示
同じく「※」だが配置で結果オーライ
efo_trs_mark

フローの有無に違いあり

どちらのフォームも、入力ページにいたる前に「規約に同意」ページにて「同意する」チェックを入れつつ、メールアドレスを入力して送信、メールアドレスによる本人確認を必要としています。

スターバックスは、このフロー全体を俯瞰し「メールアドレス入力 > 確認メール送信完了 > 会員情報入力 > 確認 > 完了」と図示。これによりユーザーは迷うことが少なくなるでしょう。

一方のタリーズは、フローは一貫してどのページでも用意されていませんでした。比べてみると、やはりフローがあるほうが、とくに最初の「規約に同意」する時点で、先が見通せて安心ですし、その先の入力ページに進んだ際にも、過去の道のりが見えることで、ここまで来たんだから完了まで頑張ろうという気になります。

efo_double_ring スターバックス フロー表示
規約に同意から一貫してのフローは安心。
efo_stb_flowtop

次は、入力支援機能の比較です

機能名 スターバックス タリーズ
ガイド

未入力の残り必須項目数などをリアルタイムで表示する機能

なし なし
離脱ブロック

ページを閉じようとするとアラートを出してOKしないと閉じることができない機能

なし なし
サブミットブロック

送信のための入力条件を満たさないと送信ボタンを表示しないor押せなくする機能

なし なし
項目ごとのアラート表示

入力についての説明をリアルタイム表示する機能

フォーカス時:なし
エラー時:あり
フォーカス時:なし
エラー時:なし
項目ごとに入力完了後の動作 なし なし

入力支援機能は、ほぼ無し。

ユーザーの操作にあわせてリアルタイムで動作する機能は、スターバックスのリアルタイムアラートのみでした。そのスターバックスのアラートメッセージは、「!」アイコンとともに、テキストが項目の下に表示され、わかりやすい印象です。

ok_blue スターバックス 入力支援機能
efo_stb_alert
アイコンとともに項目下にメッセージ表示

どちらも少し残念だったエラー画面

スターバックスは、「次へ」をクリックすると送信前に入力内容のチェックを行っていて、入力内容に問題がある場合は、ページの再描画なしで、項目毎にアラートが表示されます。スマートな処理ですが、ボタンクリック後に項目ごとの注記以外は、目立った動作がないため、一瞬、何も起きなかったのではないか?ボタンをクリックし損ねたのではないか?と感じてしまいました。できれば、エラーがある旨をページ中央にオーバーレイで表示する等、何かしら分かりやすい反応があったほうが良いと思います。
一方、タリーズは、分かりやすく注記が並びますが、レイアウトが少し残念な感じでした。できれば冒頭には、「入力エラーがあります」のメッセージを配置し、項目毎の注記は項目そばに追加できると良いと思います。

soso_black スターバックス エラー画面

efo_stb_error
おとなしい印象

soso_black タリーズ エラー画面

efo_trs_error
レイアウトを調整・工夫したい

最後に、勝手にフォーム改善アドバイス

いつもの勝手なアドバイスで今日も終わりたいと思います。

スターバックス

上品すぎる?もう少しメリハリがあればなお良くなる
必須項目も少なめであり、サイトの雰囲気をうまく生かした、ゆったりとしたレイアウトのフォームでした。またリアルタイムアラートも導入されており表現や動作も問題ないと思います。必須項目マークの表現をより強調し分かりやすくしたり、送信ボタンを押して入力内容に問題があって入力画面に戻すときの何らかのメッセージがあると、より使いやすいフォームになると思います。

タリーズ

フロー追加や、エラー表示、項目配置順に気をつけたい
コンパクトにまとまった入力ページでした。ただし、フローは是非導入いただきたいし、エラー画面のレイアウトも要調整だと思います。また、このようにコンパクトに入力項目が集まったフォームだと、項目の順番が大事です。1つ目の入力項目は、入力自由度の高いパスワードよりは迷いの少ない氏名にしたほうがよりスムーズに入力開始できるでしょう。最後にポツンとある「メールマガジンの受信」チェックボックスは、都道府県の下に配置するか任意でどれかにチェックを入れるかして、必須と任意のグループを分けるとより良いでしょう。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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