勝手にEFO比較分析 【Evernote × Dropbox】(オンラインストレージサービス 会員登録フォーム)

本日はオンラインストレージサービスの会員登録フォームに注目し、「勝手に比較分析」していきます。
取り上げるのは、2010年に日本語版のサービスを開始し、累計利用者数が1億人を突破しているテキストに特化したオンラインストレージであるEvernote Corporation様が提供している「Evernote」(https://evernote.com/intl/jp/、以下本記事では「Evernote」)と、
どんなファイルも保存でき、ビジネス用としても広く使われているオンラインストレージのスタンダードとも言えるDropbox, Inc.様が提供している「Dropbox」(https://www.dropbox.com/、以下本記事では「Dropbox」)の2サービスです。

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

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

基本的項目の確認

それでは今回も基本項目の確認から行っていきましょう。

Evernote Dropbox
ページ数 1ページ 1ページ
入力項目 2種 4種
必須項目入力欄の数 2種 4種
フロー なし なし
オファー あり あり
必須マーク なし なし
入力画面のレイアウト 他ページと共通 他ページと共通

ソーシャルログイン機能

DropboxではGoogleアカウントでのログイン機能を搭載しています。
Googleアカウントを利用すればより簡単に登録を開始でき手間が省ける、ユーザーに優しい設計です。

ok_blue Dropboxソーシャルログイン機能

DropboxではGoogleアカウントでログインすることが可能。

DropboxではGoogleアカウントでログインすることが可能。

レイアウト

どちらのフォームもシンプルでデザイン性が高い点が似ています。しかし、入力フォームに共通のヘッダー、フッターがついたままでした。
フォームからの離脱を防ぐという観点では、余計なリンクやコンテンツはなるべく配置しないことが望ましいです。
Evernoteは入力項目の文字色が白となっていて、入力した文字の視認性が多少悪いかと思います。

soso_black Evernoteレイアウト

evernote_layout01

Evernoteのページレイアウト。文字色が白となっている。

Evernoteのページレイアウト。文字色が白となっている。

soso_black Dropboxレイアウト

dropbox_layout01

Dropboxのページレイアウト。サイト共通のヘッダーとフッターがついている。

Dropboxのページレイアウト。サイト共通のヘッダーとフッターがついている。

入力項目、必須マーク

入力項目の数は差があります。Dropboxは氏名、メールアドレス、パスワード、規約の同意チェックボックスの4項目、
対してEvernoteはメールアドレスとパスワードのみの非常に簡潔な2項目で構成されています。
いずれも必須項目のみで構成されており、特にEvernoteは必要最低限に項目を絞っています。

また、どちらにも必須マークの表示はありませんでした。すべて入力必須であったとしても、なにか表示をしておいたほうが親切です。

soso_black Evernote入力項目、必須マーク

evernote_input01

入力項目は2項目のみで、非常にシンプル。必須マークはなし。

入力項目は2項目のみで、非常にシンプル。必須マークはなし。

soso_black Dropbox入力項目、必須マーク

dropbox_input01

入力項目は4項目。こちらも必須マークはなし。

入力項目は4項目。こちらも必須マークはなし。

オファー表示

オファーの表示方法はほぼ同一で、ファーストビューのフォームの下に要点をいくつか表示する形式でした。
どちらも要点がまとまっている印象を受けましたが、Dropboxは見出し部分で何ができるサービスか簡潔に伝えていて分かりやすく感じました。

ok_blue Evernoteオファー表示

デザインが洗練されていて要点もまとまっている。

デザインが洗練されていて要点もまとまっている。

ok_blue Dropboxオファー表示

見出しを読むだけでどんなサービスか掴むことができる。

見出しを読むだけでどんなサービスか掴むことができる。

ラベルと補足

両社とも表組みでデザインしているのではなく、プレースホルダーをラベルとして使用しています。
プレースホルダーをラベルとして使用すると、入力中にユーザーがラベルを参照できず不便と感じることがあるため、注意が必要です。

また、Dropboxはパスワードに関する補足説明が表示されていますが、項目の右端の薄い青のアイコンをクリックしなければ表示されません。
初期状態ではアイコンの色が薄く補足に気づきにくいと推察されます。

soso_black Evernoteラベル

evernote_label01

プレースホルダーをラベルとして使用している。

プレースホルダーをラベルとして使用している。

soso_black Dropboxラベル

補足を表示するアイコンの色が薄い。

補足を表示するアイコンの色が薄い。

エラー

冒頭にメッセージがあり、エラー箇所にも分かりやすい配色で注記する形式が理想です。

どちらのフォームも冒頭にメッセージはありませんが、項目数が少なくエラーに気付きやすいためかと思います。
Evernoteはエラー項目の下部にエラー内容のラベルを表示し、どこでエラーが起こったかわかりやすくなっています。
対してDropboxは、エラー項目の枠、プレースホルダーの色を変更し、入力項目の左端にアイコンを表示します。エラー内容はまとめて送信ボタンの下に表示しています。
エラーの量によっては、送信ボタン下のリンクとエラー内容が重なってしまうことがあるようです。
Dropboxの場合、エラー内容が読みにくくなることがあるため、エラー内容を表示する箇所を項目のそばに変更するべきでしょう。

ok_blue Evernoteエラー

項目のそばにエラー内容を表示していてわかりやすい。

項目のそばにエラー内容を表示していてわかりやすい。

ng_red Dropboxエラー

エラー内容とコンテンツが重なってしまっている。

エラー内容とコンテンツが重なってしまっている。

モバイルでの比較

どちらもモバイル向けに表示最適化が行われていましたので、モバイル向けページについても簡単に触れておきます。

EvernoteはPC版と同様の構成で、スマートフォン用に画面が見やすく最適化されています。スマートフォンではプレースホルダがなくなり、ラベルを入力項目の上に表示しています。
Dropboxもモバイル向けに最適化されたデザインを用意しています。ただしモバイルでは氏名入力欄が分割され、項目がひとつ増えています。

Evernoteモバイル表示

PC同様にシンプルなフォーム。

PC同様にシンプルなフォーム。

Dropboxモバイル表示

入力項目が1つ増えている。

入力項目が1つ増えている。

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

機能名 Evernote Dropbox
ガイド

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

なし なし
離脱ブロック

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

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

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

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

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

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

リアルタイムアラート

Evernoteにはエラーをその場で判定するリアルタイムアラート機能がすべての項目に実装されていました。
エラーのある状態で入力項目からフォーカスを外すと、入力項目の下に赤いラベルが表示され、エラー内容を表示しています。

ok_blue Evernoteリアルタイムアラート

evernote_alert01

エラー箇所からフォーカスを外すとエラー内容が表示される。

エラー箇所からフォーカスを外すとエラー内容が表示される。

Dropboxにはパスワードの強度判定あり

どちらのフォームもパスワードを入力する欄がありますが、Dropboxには入力したパスワードの強度を判定する機能がありました。
パスワードの強度は4段階で示され、アイコンから強度を視覚的に判定することができるようになっています。

ok_blue Dropboxパスワード強度判定

dropbox_password01

パスワードの強度がリアルタイムで確認できる。

パスワードの強度がリアルタイムで確認できる。

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

今回はオンラインストレージサービス2社の会員登録フォームについて分析を行いました。
最後はいつも通り、勝手にアドバイスして終わりたいと思います。

Evernote

入力項目がメールアドレスとパスワードのみという、かなりシンプルな構成のフォームでした。ただシンプルすぎてユーザビリティが落ちる心配がありますので、補足やラベルの表示を工夫するとさらに良いでしょう。
また、パスワードの誤入力を防ぐため、伏せ字を解除する仕組みを用意するなど配慮すると良いのではないでしょうか。

Dropbox

まずエラー内容の表示方法は、項目のそばに表示するとコンテンツと重なることもなくなるのでおすすめします。
こちらも同様にシンプルな構成のフォームなので、補足やラベルの表示は改善の余地がありそうです。
ソーシャルログインを用意している点は良いと思います。
パスワードの強度判定以外にも、入力支援機能を導入することでより使いやすいフォームになっていくと思います。

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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