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

今回の記事は、昨日お届けした勝手にEFO徹底解剖:Adobe(1/2)の後編としてお送りします。
引き続き、Adobe(アドビ株式会社様、https://www.adobe.com/jp/#)をテーマに「勝手に」フォームの使い勝手やEFO状況について徹底解剖してまいりますので、どうぞお付き合い下さいませ。

前編では、フォーム全体の特徴からサインインの入力画面について見てきました。今回の後編では、申込フローを分析していきたいと思います。

メンバーシップの詳細確認

サインアップを終えるといよいよ申込フローに突入です。
まずはメンバーシップ(会員規約)の確認です。

アコーディオン風にフローを表示

このフォームでは、縦方向のフロー表示を行なっていました。
前回取り上げたApple Storeのフォームも、同様のインターフェースを採用していましたね。

既に完了したステップと未来のステップの文字色を薄くしているため、現在地が明確です。また、今後ステップが進んでいくと以前のステップに戻るリンクが表示されるようになり、そちらも直感的でわかりやすくなっています。

efo_double_ring アコーディオン風フロー表示。無駄のないレイアウトも手伝って、全体像が把握しやすい

メンバーシップ確認画面

メンバーシップ確認画面(全体図)

前のステップへ戻る導線もシンプルかつ明確

前のステップへ戻る導線もシンプルかつ明確

文言に少々違和感

この画面での「メンバーシップ」、ひとつ前の画面の「サインアップ」などのカタカナ用語は、ユーザーにとって一般的ではない可能性があります。

グローバル企業の(翻訳物の)サイトに多いのですが、ローカライズの際は、できるだけわかりやすい言葉をチョイスしたいものです。

最後に、支払情報を入力

最後に入力するのは支払情報です。支払い方法はクレジットカードのみのようです。

支払い画面全体像

支払い画面全体像

必須は※マークで表示

サインインのフィールドでは、特に必須表示がありませんでしたが、この入力画面では必須マーク表示が登場します。

マークは赤色の「*(アスタリスク)」で表現されていますが、少しわかりにくいためできれば文字で表現したり、背景色などで必須部分を強調するとよりわかりやすくなるのではと思いました。

注意必須項目のラベル横にアスタリスクを表示しているが、あまり目立たない

必須表示

必須表示

ラベルが登場、プレースホルダーはなし

また、必須の表示だけではく、入力項目に対するラベル表示もこの画面で新たに登場しています。
(サインアップではプレースホルダー内にラベルを表示していました)

また入力例はラベルの横に表示されており、プレースホルダーは使われていませんでした。

注意充分表示方法はわかりやすいが、表示方法は統一したほうが自然かもしれませんね

項目の上にラベルと、その横に入力例を表示

項目の上にラベルと、その横に入力例を表示

セキュリティに対する言及も

支払いカード情報を入力する箇所には、セキュリティに安全を期しているとの旨が表記されていました。

efo_double_ringひとことでもセキュリティに関して言及されているとユーザーとしては安心ですね

セキュリティを配慮する文言

セキュリティを配慮する文言

自動入力系の機能はなし

今回一連のフォームには、住所やフリガナなどの自動入力系機能は導入されていませんでした。

注意最近のフォームでは、住所を郵便番号から自動入力する機能はついていてあたりまえかもしれません

住所入力欄

住所入力欄

「続行」はカイゼンの余地あり?

これまでの画面では「ADOBE IDを取得」「契約条件に同意する」などと具体的な文言を表示していたのに対し、
この画面のアクションボタンは「続行」といささか抽象的。

注意ボタンの文言が明確でないと、ユーザーは押下するのを躊躇してしまいます

アクションボタン

アクションボタン

※今回、確認画面と完了画面の分析は省略しています

まとめ

いかがだったでしょうか。今回の分析は以上です。前編から振り返ってフォームの特徴をまとめると以下のうようになります。

優れている、取り入れたいポイント

  • 無駄を徹底的に排除したレイアウト
  • 文字サイズや余白などの工夫で入力しやすく洗練された入力コンポーネントのデザイン
  • フォーカス中の項目の枠線、初期入力フォーカスの導入で入力を促進
  • 流れと現在地を直感的に把握できる縦方向の(アコーディオン風)フロー表示。
  • 一部例外はありつつもアクションの文言は明確。またデザインも統一されている

課題と思われる点、その他論点など

  • リアルタイム表示のメッセージや、自動入力系の機能が搭載されていると吉
  • プレースホルダーにラベルを配置すると、ユーザービリティを落とす危険性
  • 必須項目はより明確に表示する方法があります
  • チェックボックスのラベル内にはリンクは配置しないほうが良いでしょう

Adobe系ソフトというと、種類やプラン、バージョンが多くて複雑な印象を勝手に抱いていたのですが、フォームは非常に洗練されてシンプルな作りとなっており、スムーズにサービスを利用開始できる印象を持ちました。
とくに無駄を排したページレイアウトは非常に参考になります。ぜひ、真似したいですね!

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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