勝手にEFO比較分析【紀伊國屋×honto】(電子書籍ストア 会員登録フォーム編)

日ごとに秋も深まっていく今日この頃。
体育祭に文化祭と、スポーツと芸術の秋を存分に楽しんでいた学生時代から一転、社会人となってからは食欲の秋中心、という方も多いのではないでしょうか。

でもそれだけでは秋がもったいない…食欲、芸術、スポーツときたらあとは…
ということで、今回は読書の秋に目を向けてみます。

多くの端末で読める点や取り扱っている書籍の数から、ここ数年で注目を集めている電子書籍サービス。
本屋に行かずとも読みたい本をスマホですぐに購入できる、様々なデバイスから読める、スペースを取らない、などの理由から既に利用している方も多くいらっしゃるのではないでしょうか。

今回はその電子書籍の販売サービスを行っている「紀伊國屋書店ウェブストア」(http://www.kinokuniya.co.jp/)(以下本記事では「紀伊國屋」)と「honto」(http://honto.jp/)(以下本記事では「honto」)を比較分析していきます。
どちらもポイントサービスが充実しており、「紀伊國屋」は紀伊國屋書店系列の店舗、「honto」は丸善書店・ジュンク堂書店・文教堂書店の店舗で作ったカードをウェブ会員サービスに紐付け、ポイントを利用することが出来ます。

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

※本記事の内容は2014年10月8日時点の紀伊國屋、honto、両サイトのフォームを分析した内容を記載しています。なお今回ご紹介したどのフォームにも当社エフトラEFOの入力補助機能は導入されていません(2014年10月8日時点)。

最初に、基本的な項目を確認していきます。

いつも通り、まずは基本項目の確認からです。

紀伊國屋 honto
ページ数 利用規約、メール送信、メール内URLから入力ページに遷移、確認、完了の5ページ 利用規約とメール送信、メール内URLから入力ページに遷移、確認、完了の4ページ
入力項目 9項目(住所とクレジットカードを登録する場合19項目) 14項目
必須項目入力欄の数 8項目(住所とクレジットカードを登録する場合10項目) 6項目
フロー なし あり
オファー あり あり
必須マーク あり(「※」で控えめ) あり(「必須」文字でわかりやすい)
送信ボタンのサイズ 幅160px × 高さ38px 幅108px × 高さ33px
入力画面のレイアウト 他ページと共通 フォーム専用

入力項目の内容の違いはほぼ見られず、ともに住所入力の優先度を下げた作りとなっているようです。
以下個別に説明していきます。

両者ともストレスの少ない項目数

両社とも必要以上の入力を要求しておらず、ストレスを感じさせない項目数に収めています。

ok_blue 紀伊國屋 ページレイアウト

必須では無い項目をチェックボックスで出しわけすることで、表示される項目数を抑える工夫がされています。
名前項目の姓と名を統一できれば、さらにシンプルにまとまることでしょう。

配色をヘッダーに合わせた統一感のあるフォーム。

配色をヘッダーに合わせた統一感のあるフォーム。

efo_double_ring honto ページレイアウト

必須ではない郵便番号、電話番号などの項目を別区域に分けることで、極力必須項目のみの入力で確認ページへ遷移できる工夫がされています。
必須項目の背景色などもわかりやすいです。

専用フォームを使った縦に短く、まとまりのあるフォーム。

専用フォームを使った縦に短く、まとまりのあるフォーム。

必須マークはともにあり

必須マークは紀伊國屋が「*」、hontoが「必須」。
お手本はhontoが使用している「必須」文字を使い、色背景を敷くなどして四角のマークにした状態。「*」のみ、さらに項目名の後方に持ってきている紀伊國屋のほうは気がつきにくい印象をうけます。

soso_black 紀伊國屋 必須マーク

冒頭で説明がなされているものの、控えめな印象ですね。

冒頭で説明がなされているものの、控えめな印象ですね。

ok_blue honto 必須マーク

目立つ色の「必須」のマーキングと、入力項目の背景色を変えることでわかりやすくなっています。

目立つ色の「必須」のマーキングと、入力項目の背景色を変えることでわかりやすくなっています。

フローの有無

両者のフォームでも入力ページに遷移する前に「規約に同意」ページを用意し、同意した上でメールアドレスを入力して送信、メールアドレスによる本人確認を行っています。

どのページでもフローを置いていない紀伊國屋に対し、hontoではフロー全体を俯瞰し、「仮メールアドレス登録 > 仮メールアドレス登録完了 > 会員情報の登録 > 会員情報の登録完了」と図示しています。

ページ遷移の少ないフォームにフローが無いのはありがちなことですが、比べてみるとフローがあったほうが、ユーザーの安心感につながりますね。

ok_blue honto フロー

最初の「規約に同意」ページからフローがあり、安心できる設計になっています。

最初の「規約に同意」ページからフローがあり、安心できる設計になっています。

オファー文の表示の工夫

どちらのフォームもメールマガジンの配信に関するオファー文を表示させています。

項目内に2行程度で簡潔に収めた紀伊國屋に対し、hontoはLightboxを使って別ウィンドウで内容を表示させています。

Lightboxなどといった別ウィンドウを用いた場合、見た目はすっきりしますがユーザーの動作を増やしてしまうので、注意が必要かもしれません。

ok_blue 紀伊國屋 オファー

短い文章で簡潔に収まっています。

短い文章で簡潔に収まっています。

ok_blue honto オファー

別ウィンドウで表示するためのリンク

別ウィンドウで表示するためのリンク

メールの種類が多い場合などは、別ウィンドウでの説明も良い手段といえますね。

メールの種類が多い場合などは、別ウィンドウでの説明も良い手段といえますね。

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

紀伊國屋 honto
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

フォーカス時:なし
エラー時:なし
フォーカス時:なし
エラー時:あり
項目ごとに入力完了後の動作 なし 必須項目背景が薄橙から白に

入力支援機能はともにほぼ無し

ユーザーの操作にあわせてリアルタイムで動作する機能はhontoのリアルタイムアラートのみという結果になりました。

hontoのリアルタイムアラートは「!」アイコンとともに、注意文言を項目の下に表示、さらに吹き出しでの説明も行う親切な設計です。

efo_double_ring honto リアルタイムアラート

アイコンとともに注意文言の表示、さらに吹き出しを表示しわかりやすくなっています。

リアルタイムアラート。必須や入力形式をその場でチェックしてくれる

リアルタイムアラート。必須や入力形式をその場でチェックしてくれる

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

今回は電子書籍サービスの会員登録フォームについて分析を行いましたが、いつも通り、最後に勝手なアドバイスで締めくくりたいと思います。

紀伊國屋

必須マークの工夫やフロー設置、入力支援機能の追加でよりよいフォームへ。

入力項目については厳選されていますし、チェックボックスによる通常項目の出し分けでコンパクトな見た目に納まっています。必須項目に関しては目立つ色を用いて文字で表示すると認識しやすくなるのではないでしょうか。

フロー設置もご検討ください。ユーザーにより安心感を与えることが出来ると思います。

また、入力支援機能を導入することで、ユーザーにより優しい設計になるのではと思います。

honto

入力支援機能の拡充でより親切に。

フロー設置や入力項目数、必須マークなどといった基本的な入力項目への配慮、必須項目と通常項目との区域分け、オファー内容の別ウィンドウ掲載などといった工夫はどれをとってもお手本といえます。

しかしながら、入力支援機能はリアルタイムアラートのみ。今後ぜひともガイドや離脱ブロックといった支援機能を充実させていくと、さらに親切なフォームになると思います。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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