勝手にEFO比較分析【IKEA x 無印良品】(家具ブランド会員登録編)

新年を迎え、春に向けての新生活の準備を進めている方も多いのでは?

そこで今回は、家具・雑貨に目を向けてみました。

題材はスウェーデン発祥の世界最大家具販売店の「IKEA」を展開するIKEA International Group(www.ikea.com/jp/ja/)(以下、本記事ではイケア)と、「無印良品」を展開する専門小売会社、株式会社良品計画様(ryohin-keikaku.jp)(以下、本記事では無印良品)をセレクトさせていただきました。

※以下、サイト名の敬称は省略させていただきます。

いつもどおり「勝手に分析」していきましょう。今回も改善ポイントを「勝手に」指摘していきますので、どうぞお付き合い下さい。○△×と、ユーザー視点での評価を行っていきます。

※本記事の内容は2014年1月16日時点のIKEA International Group様、株式会社良品計画様、
両社のサイトのフォームを分析した内容を記載しています。
なお今回ご紹介したどのフォームにも当社エフトラ EFOの入力補助機能は導入されていません(2014年1月16日時点)。

今回は、両社の新規会員登録フォームで比較を行いました。

無印良品のほうは、住所氏名も入力が必要な「ネットストアでお買い物をする方はこちら」の入力ページで数値を出しています。

イケア 無印良品
ページ数 入力、確認、完了の3つ 入力1、入力2、確認、完了の4つ
入力項目の種類 30種類 32種類
必須項目入力欄の数 23個 21個
フロー なし なし
必須マーク あり「※」 あり「必須」
メルマガ購読 デフォルトチェックあり デフォルトチェックあり
利用規約、
プライバシーポリシー
リンクで別ウィンドウ表示 リンクで別ウィンドウ表示
送信ボタンのサイズ 幅162px x 高さ36px 幅160px x 高さ26px
入力画面のレイアウト 専用ページ。
シンプル
専用ページ。
ヘッダー、フッターあり
入力ページへの遷移 サイドバーの”新規入会”より ヘッダーの新規登録から

以下、個別に説明いたします。

入力ページに大きな差が!

項目数の多さは、離脱につながる要因になります。

イケア
イケアは、項目数も多めの通常の入力フォームですが、とてもシンプルなレイアウトで、
入力枠のサイズも大きく、とても見やすく登録がしやすかったです。

無印良品
メンバー登録のみの場合には、入力項目を減らしたフォーム作りがされていました。
こうすることで、不必要な入力をする手間が省け、離脱を減らすことができると思いました。
ネットでの買い物をする予定がない人には、登録のハードルが低く感じられるでしょう。

ともにあと一歩な必須マーク

イケアは赤い小さな※マーク、無印良品は黒字で(必須)と、どちらも「必須感」が伝わりづらい必須マークでした。
無印良品は、必須項目には、入力枠に色が付いているので、両方合わせて伝える、という方法でカバーしているように感じましたが、いずれにしても項目数が多いので、必須と任意の見分けをはっきりすることで入力のストレスを減らせるはずと思います。

イケア
マークのサイズを変えることで認識しやくすなるのでは?
無印良品
マークと色で二重のお知らせは良いと思います。

ともに、入力補助機能は、改善の余地あり!

どちらも入力エラー時のアラートはありました。

機能名 イケア 無印良品
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

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

イケアは、確認ボタンを押したときにのみ表示されるものでした。
無印良品は、リアルタイムアラートが導入されているので、必須項目を飛ばして次の項目に移ると、その都度、矢印でエラーが表示される点でリード。

イケア
未入力がわかりやすくなっています
無印良品
リアルタイムエラーでその都度知らせてくれる。入力エラー時は上部にまとめて表示された。

うっかり離脱防止の離脱ブロックは、ともになし

どちらも離脱ブロック機能がなかったので、うっかり前のページなどに戻ってしまったときなど始めから入力しなおさなければならず、手間がもったいないと感じました。特にイケアは、イケア独自の項目(子供の数や、車の有無など)が多く、結果として入力項目が多いので、離脱ブロックは導入すべきと思います。

また、ディスプレイのサイズによって印象も違うかもしれませんが、登録画面が縦に長く、何度もスクロールする必要があり、「これどこまでいくのだろう…」と不安になる部分もあったので、ガイド機能で、残り必須入力項目数がわかると親切だと思いました。

どちらも盛りだくさんな情報発信、サンプル開示の無印良品が一歩リード!

どちらも会社からの情報発信に力を入れており、様々なニュースをいろんな形で発信しようとしているのが感じられました。その中で、無印良品はサンプルを見せることで、より具体的な情報を伝えているのが好感が持てました。

イケア
「イケアからの取材を希望する」なんて項目もあり。
無印良品
ニュースも内容が4つに分かれていて、必要な情報を選択することができます。

ガイド表示は、ともになし

入力項目残数など表示するガイドですが、どちらのフォームも導入されていませんでした。

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

今回の比較分析は以上となりますが、最後に勝手に改善案を考えてみました。

イケア

1)入力補助機能、特にリアルタイムアラートの導入でより使いやすく

入力エラー時のメッセージの表示方法は◎、該当の項目に色が付き、赤字で説明もあるのでわかりやすいのですが、そもそも入力エラーを減らすためにも、リアルタイムアラートの導入は必要だと思います。

2)登録ページにもオファー画像を入れてみては?

フォームとしてはシンプルなのに選択項目に若干の遊びがあるこのギャップ。
オリジナリティあふれる項目に登録していると「そもそもこのメンバーの特典はなんだっけ?」と思うことが多々あったので、登録画面にもオファー画像が入っていると、楽しみながら登録できるのにな、と感じました。

無印良品

1)入力項目の絞り込み

郵便番号登録の枠が二つに分かれていることで、ひと手間多くなってしまうことと、「様方」入力項目まであるので、住所登録部分がかなり長くなっていることが気になりました。

全体的に必須項目数が多めなので、もう少し絞ることで、入力する人にやさしいサイトになるのでは?と思います。

まとめ

ニュースのサンプルや、「※PCメールの配信時刻は深夜になることもございますのでご了承ください」の一文など、利用者目線に立った、「おもてなし」感が強かった無印良品。
シンプルだけど、オリジナリティあふれるイケアに対し、

使いやすさという目線で、無印良品に軍配!

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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