勝手にEFO徹底解剖:Adobe(1/2)

「勝手にEFO徹底解剖」シリーズ、第3回目は、Adobe(Adobe株式会社様、https://www.adobe.com/jp/#)をテーマにお届けします。
※以下、敬称は省略させていただきます。

Adobeといえば、 ビジネス文書には欠かせないPDFの無償ビューア「Adobe Reader」をはじめ、クリエイター達にとって手放せない「Photoshop」「Illustrator」などのソフトウェアを提供しているグローバル企業ですね。一体Adobeのフォームにはどのような工夫や秘密が隠されているのでしょうか。
さっそくEFOについて「徹底解剖」していきます。

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

今回も初回購入の流れを徹底解剖していきます

今回はAdobeの提供するサービスのひとつ「Adobe Creative Cloud」の申込みフォームを分析していきます。会員登録などがない初回利用を前提で検証していきたいと思います。

フォーム全体の特徴

まずはフォーム全体の特徴をチェックしていきましょう。

無駄なリンクが一切ないフォーム用レイアウト

Adobeの申込みフォームでは、専用のページテンプレートが用意されていました。

無駄なリンクは一切なく、グローバルナビやサイドバーなどのサブコンテンツも排除。
テンプレートの構成要素はヘッダーのロゴ等最低限に絞りこまれており、フォーム入力に非常に集中しやすいページ構成となっていました。

efo_double_ring ページレイアウトには一切の無駄がなく、究極のシンプル!ロゴ部分にもリンクはついていません。徹底した離脱対策です。

サインアップ画面の全体図

サインアップ画面の全体図

項目のフォントサイズ、余白は大きめ

共通して、入力項目のテキストのフォントサイズが気持大きめに設定されていました。
また、文字のまわりの余白も充分にとられているため、現在入力中の文字が非常に認識しやすいデザインとなっていました。

efo_double_ring 文字サイズにも余白にもゆとりがあって非常に入力しやすい

文字は大きめ

文字は大きめ

入力(フォーカス)中の項目の枠線が変化

さらに入力中の項目の枠線のみ青色に変化するようになっており、今どこを入力しているかが非常にわかりやすいようになっていました。

efo_double_ring 今どこにフォーカスしているかが一目瞭然に!

フォーカス中の項目の枠線が青色に

フォーカス中の項目の枠線が青色に

エラーの表示

エラーが出た場合、該当項目の枠線が赤色に変化し、その下にエラーの内容が表示されるようになっていました。親切な作りですね。

エラーの表示。

エラーの表示。

リアルタイムエラーはなし

注意エラーを入力中にリアルタイムに判別する機能は、とくに搭載されていないようでした。

ただし、エラーが出た項目を修正すると、赤色の枠線やエラー表示が消えるようになっているようでした。

エラーを修正中

エラーを修正中


エラーを修正後、枠線の赤色とエラー文言が消える

エラーを修正後、枠線の赤色とエラー文言が消える

まずはサインアップ

それでは画面を順番に分析していきます。商品選択後、まずはサインアップ(会員登録)の画面に遷移します。

サインアップ画面の全体図

サインアップ画面の全体図

初期項目フォーカス!

ページを開くと、フォーム項目の一番最初にあらかじめフォーカスがあたっていました。我が社では初期項目フォーカスと読んでいる機能です。

efo_double_ring 画面に遷移してから、カーソルをフォームの最初の項目にあわせるという手間がはぶけ、すぐに入力を開始することができます。

最初の項目にあらかじめフォーカスされている

最初の項目にあらかじめフォーカスされている

ラベルはプレースホルダーで表示

項目のラベルは、プレースホルダー内に記載されていました。

プレースホルダーにラベルを入れるとスッキリ無駄なくレイアウトできる反面、途中で何を入力しているかわからなくなってしまう危険性が。
やはりプレースホルダーはラベルとしてではなく、あくまで入力例を表示しておくにとどめておきたいところ。

注意入力を始めるとラベルが消えてしまうため、何を入力しているかわからなくなる

項目に入力中

項目に入力中

チェックボックスのラベルにリンクが

チェックボックスにはしっかりとlabelでマークアップされていましたが、リンク部分を押下してしまうと、別窓でリンクを表示してしまうことに…。
ユーザーにストレスを与えてしまいますので、できればラベルの外にリンクを配置するといいのではないでしょうか。

注意チェックするつもりが別窓でリンクを開いてしまう可能性が

チェックボックスのラベル内にリンクが

チェックボックスのラベル内にリンクが

次回へ続きます

次回の後編では、申込フローについて「徹底解剖」していきますので、お楽しみに。

後編は、こちら:勝手にEFO徹底解剖:Adobe(2/2)

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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