勝手にEFO比較分析【任天堂 x SEGA】(家庭用ゲームソフト販売企業 お問い合わせフォーム編)

皆さん、ゲームと聞いて連想するモノは何でしょうか。
最近のゲームといえばスマートフォン用のネイティブアプリのタイトルをイメージする方も多いかもしれませんが、まだまだ家庭用ゲームやゲームセンターのアーケードゲームもまだまだ侮れません。

とくに家庭用ゲーム機は世代によってそれぞれ象徴的なハード機やソフトがあり、懐しい気分にさせてくれます。
1980年代前半からさまざまな国内企業がゲーム機を発売しており、どの機種にせよ、一度は遊んだことがある方が多いかと思います。

今回は「Wii」「3DS」などのハード機の販売や、ソフトでは最近発売された「スプラトゥーン」が何かと話題の任天堂株式会社様(http://www.nintendo.co.jp/、以下本記事では「任天堂」)と
「ぷよぷよ」「ソニックアドベンチャー」「龍が如く」などのシリーズでおなじみの株式会社セガホールディングス様(http://sega.jp/、以下本記事では「セガ」)のお問い合わせフォームを比較分析していきます。

子供から大人まで、幅広い年齢層が利用するであろうお問い合わせ部門。一体どのような工夫がなされているのでしょうか。

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

※本記事の内容は2015年06月22日時点の任天堂、セガ、両サイトのフォームを分析した内容を記載しています。なお今回ご紹介したどのフォームにも当社エフトラEFOの入力補助機能は導入されていません(2015年06月22日時点)。

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

いつも通り、基本項目の確認からはじめていきましょう。

任天堂 セガ
ページ数 問い合わせ情報の入力、入力内容の確認、問い合わせ完了の3ページ 質問内容の選択、情報の入力、入力内容確認、お申し込み完了の4ページ
入力項目 10種 9種
必須項目入力欄の数 8項目 8項目
フロー なし あり
オファー なし なし
必須マーク あり(「必須」マーク表示) あり(「必須」マーク表示)
送信ボタンのサイズ 幅206px × 高さ50px 幅214px × 高さ37px
入力画面のレイアウト フォーム専用 他ページと共通

入力種類、必須項目ではどちらもかなり厳選して数を絞っています。

また、双方配色はシンプルですが行間や入力欄の大きさ、マージンの取り方などに違いが出ていますね。

それでは以下個別に説明していきます。

ページレイアウト

任天堂は余計なリンクやナビゲーションのない、シンプルなフォーム専用レイアウトを採用。また全体的にパーツが大きく視認性が高い印象です。

一方、セガは他ページと共通のナビゲーション付きレイアウトを採用しているものの、表にスリムに収めた入力項目はひとめでフォームの全体像を確認できるほか、ラベルと入力欄との関連付けがはっきりと明快です。

双方で見せ方やアプローチの仕方が違いますが、使いやすさに考慮されていることが感じられます。

ok_blue 任天堂 ページレイアウト

フォントカラーの明度の高さと余白の取り方がとても良く、「目に優しい・見やすい」という印象です。
ベースになるフォントや枠の色はかなりグレーに近い配色であることに対し、注記の配色は鮮やかな赤が使用されているためコントラストがはっきり映り、とても効果的だと思います。

また入力項目に関しては、大きく余白をとり縦横で綺麗にラインをそろえることで、関連付けが分かりやすいですね。

配色の工夫で視認性の高いフォームになっています。

配色の工夫で視認性の高いフォームになっています。

ok_blue セガ ページレイアウト

表形式の入力項目で、余白を抑えコンパクトなフォームに設計しています。

入力項目をできるだけファーストビューに収めるのがフォームの基本です。
その点は良い作りだと感じる一方で、幅広い世代で使っていただくには、もう少しフォントサイズやマージンの取り方に余裕がほしかったかなとも思います。

コンパクトではあるが、フォントサイズが全体的に小さい。

コンパクトではあるが、フォントサイズが全体的に小さい。

フォームタイトルとパンくず表示で差を付けた任天堂

どちらも、何に対するお問い合わせかのジャンルをあらかじめ選択したうえでフォームの入力が始まります。

フォームタイトルを「お問い合わせ」の「カスタマーサポート」としているセガに対し、任天堂では何のジャンルを選択したかをフォームタイトルで表示しています。
また、パンクズ表示を表示しておくことでさりげなく「どういう階層でお問い合わせまで進んできたか」をはっきりとさせ、ユーザーが現在何に対して問合せているのかが明確です。
ここでは任天堂に軍配です。

ok_blue 任天堂 フォームタイトルとパンくず

任天堂はかなり大きめのフォームタイトル。パンクズによって現在地が分かりやすくて良いですね。

任天堂はかなり大きめのフォームタイトル。パンクズによって現在地が分かりやすくて良いですね。

soso_black セガ フォームタイトル

フォームタイトルでは、何に対する問い合わせ画面かが把握できない

フォームタイトルでは、何に対する問い合わせ画面かが把握できない

デザインの違いがでた必須マーク

どちらもお手本のような必須マークです。
しかし、セガは必須マークの色がグレー。少し目立たない印象です。

efo_double_ring 任天堂 必須マーク

必須と任意をの色分けが明快ですね。
すべての項目にどちらかのマークが付いているのでとても分かりやすいです。

お手本のような必須マーク。

お手本のような必須マーク。

soso_black セガ 必須マーク

一方こちらの必須マークはグレー。
恐らくは補足情報以外すべて必須項目だったからだと思いますが、必須マークの様に注意してほしい場所にはポイントカラーを使用するのが妥当です。

配色が惜しいです。

配色が惜しいです。

フローや補足文、バッジ表示で与えられる安心感

任天堂にはフローがありませんでした。
対してセガはきちんとフローを設置。シンプルですが目を引くデザインです。

入力、確認、完了のシンプルな作りになっている場合にフローを設置しない場合も少なくありませんが、やはりフローがあるだけで安心感は高まります。

efo_double_ring セガ フロー

シンプルでも目を引くデザイン。

シンプルでも目を引くデザイン。

次に注目したいのは任天堂の補足文。
入力項目に関する補足文でユーザーの不安を解消しています。
あらかじめ間違い易い項目に関して注記しておくことで、ユーザーの迷う時間を減らせますね。

efo_double_ring 任天堂 補足文

入力前にミスの多い部分をあらかじめ説明することでユーザーの迷いが少なくなります。

入力前にミスの多い部分をあらかじめ説明することでユーザーの迷いが少なくなります。

ユーザーの疑問や迷い、ミスを減らすため工夫といえますね。

ユーザーの疑問や迷い、ミスを減らすため工夫といえますね。

また、セガではセキュリティに関するバッジを表示しています。
フォームはどちらもSSL環境ですが、バッジ表示や個人情報に関する言及はユーザーの安心感に直接つながるものなので、あれば表記することをお奨めします。

efo_double_ring セガ バッジの表示

バッジの表示があると安心して入力できますね。

バッジの表示があると安心して入力できますね。

両社残念だったエラー画面

冒頭にメッセージがあり、エラー箇所にも分かりやすい配色で注記というのがお手本です。

ですが任天堂はエラー箇所に対し、一つ一つダイアログで指摘する方法をとっています。
ダイアログのOKを押すと直接エラー箇所にフォーカスされるシステムにはなっているものの、これでは複数同時にミスしているときに、何回も同じ動作を繰り返すことになってしまいます。

soso_black 任天堂 エラー画面

一つ一つダイアログで表示します。

一つ一つダイアログで表示します。

対してセガはエラー表示そのものがありません。
どんなにミスをしていても確認画面にそのまま遷移してしまいます。
これではユーザーがミスに気が付けないまま送信されてしまいそうですね。

ng_bw セガ エラー画面なし

エラー画面が無いのでミスしたものはそのまま確認画面へ反映されてしまう。

エラー画面が無いのでミスしたものはそのまま確認画面へ反映されてしまう。

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

機能名 任天堂 セガ
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

フォーカス時:なし

エラー時:なし

フォーカス時:なし

エラー時:なし

項目ごとに入力完了後の動作 なし なし

入力支援機能の有無

どちらも目立った入力支援機能はありませんでした。

入力支援機能はユーザーのモチベーションの向上につながる機能も多く、利便性も確実に上がります。ぜひ導入をご検討いただきたいですね。

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

今回は家庭用ゲーム機販売を行う企業2サイトの問い合わせフォームについて分析を行いました。
最後はいつも通り、勝手にアドバイスして終わりたいと思います。

任天堂

フローの設置やバッジ表示、入力支援機能の導入でより優しいフォームに

基本的な項目の中でもフローの設置とエラー画面の追加は安心感につながりやすい項目と言っても良いでしょう。

また、入力支援機能を導入することで「幅広い世代が使いやすいフォーム」により近づくと思います。とくに住所の自動入力機能は半ば常識になりつつある機能。ぜひ導入を検討されてはいかがでしょうか。

セガ

フォントとマージン、必須マークのデザインの再調整と入力支援機能の導入が必要

やはり気になったのはフォントサイズとマージンです。
※印の文が特に見え辛く、全体的に一回り大きくすることをお奨めします。
同時に、入力欄のサイズとフォーム各所のマージンも調整することで、視認性があがり、誰にでも見やすいフォームにしてゆけると思います。

また、必須マークに関しては配色の変更が必要です。
他サイトのフォームで使われている配色を考えると、グレーという色はどうしても「任意項目」という印象が強いため、鮮やかな色で表示したほうが分かりやすくなります。

また、入力支援機能を導入する事で利便性が上がり、入力完了率にも良い効果が期待できると思います。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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