デザイナーのためのエンプティステート作成ガイド - 本当に空っぽではいけない理由
Jul 21, 2021この記事はMediumのブログ: A designer’s guide to empty statesの翻訳転載です。著者のアマンダ・ブリッジさんの許可を得て公開しています。
Image from Procore
「エンプティステート」に遭遇したことはありますか？エンプティステートは、まだ何も作成されていないページに表示されます。プロダクトに最初にアクセスしたときに目にするのが一般的です。
エンプティステートのコンセプトは、ソフトウェアの設計に欠かせないものです。良いエンプティステートとは、例えるならホテルにチェックインしたときの受付係です。ホテルの受付係は、あなたに部屋の鍵を渡したり、無料の自動製氷機の場所を教えたり、あなたにぴったりな情報を提供するために、そこにいてくれます。
Photo by Christiann Koepke on Unsplash
「でも、ユーザーは似たようなソフトウェアを使っているので（わざわざ説明しなくたって）分かっているはずです。私は自分のデザインを入念にリサーチしてきました。余計なメッセージを表示すると、デザインが"直感的"でないことになってしまいます」
どこかで聞いたことのあるような主張ですが、私がホテルの受付係に例えるのが好きな理由はここにあります。
Photo by Helena Lopes on Unsplash
ホテルにチェックインするとき、あなたは自分がそこにいる理由をわかっています。部屋を予約した目的も、ホテルのシステムについても知っているでしょう。でも、自分が予約した部屋にたどり着くには、もう少し情報が必要です。以前ホテルに宿泊したことがあっても、それぞれのホテルは少しずつ違うので、助けが必要になるでしょう。
エンプティステートを通じて助け舟を出すことは、プロダクトやユーザーの知識を馬鹿にするものではなく、ユーザーが行きたい場所に早く到達するための方法なのです。
想像してみてください。ホテルのロビーには何もなく「この建物の中にあなたの部屋があります」という看板だけが置かれていたらどうでしょう。
「この建物の中に、あなたの部屋があります」
あなたは疲れたようなため息をつきながら、周囲を見渡します。「そうか、そうか。でも、この先どうすればいいの？」
Gif from Giphy
この言葉こそが、あなたのユーザーが、本当に空っぽ状態のページや、役に立たないエンプティステート画面に遭遇したときに考えていることです。
ビミョー：Android版TransferWiseの、取引完了前の画面です。このようなエンプティステートでは、ユーザーは「そうか！でもどうやって取引を記録するんだっけ？」と疑問に思うかもしれません。何より、このページが自動的に表示されている場合、銀行口座との紐付けはどうすればよいのでしょうか？
私たちは皆、ひどいエンプティステートを見たことがあるはずです。何の役にも立たず、行き止まりに導かれ、さらに悪いことに、実際に空っぽになっているのです。不気味ですね。
エンプティステートを本当に空っぽにしていると、素晴らしい第一印象を与えるチャンスを逃してしまいます。ユーザーが自信を持ち、リラックスし、次に何をすればそのページを使えるようになるかを正しく知るチャンスです。
下記では、効率的、親切で、個性的な、フレンドリーなホテルの受付係のような、完璧なエンプティステートを作るヒントを紹介します。
エンプティステート解剖学
完璧なエンプティステートには、ていねいに作られたコンテンツや画像が含まれています。ユーザーが使おうとしているページや機能を、自信を持ってすぐに使い始めることができるようになっています。
1. イラスト
イラストなしに十分に機能するエンプティステートもありますが、説明文に注目してもらうためにも、何もないページをより魅力的にするためにも、イラストを添えることをおすすめします。また、ユーザーとの関係を築くために、ブランドの個性をアピールするのにもぴったりな場所です。
エンプティステートは、ユーザーにとってアプリの第一印象であることが多いので、イラストでアプリの雰囲気をコントロールできることを覚えておいてください。
素晴らしい：FacebookアプリのMessengerページでは、CTA（行動喚起）と一緒にFacebookのブランドパーソナリティを強調したイラストでアプリのダウンロードを促します。
2. 見出し
コンポーネント内のほかの見出しと同様に、ユーザーが知っておくべきことを短く要約します。また、必要に応じて、エンプティステート内のボタンをクリックするようにユーザーに指示します。
ホテルのロビーにあるような「えっ」と思わせる看板にならないよう、「このページへようこそ！」のようなヘッダーは避けます。ユーザーは、ボタンやタブなどをクリックしたことで、自分がそのページにいることをすでに知っているでしょうから。
「このホテルへようこそ！この建物の中に、あなたの部屋があります」
...ありがとう、知ってるよ。
エンプティステートの見出しに限らず、すべての見出しから学べる教訓。それは、ユーザーは見出しを流し読みするだけで、それ以上何もしないということを念頭に入れておくことです。つまり、ほとんどのユーザーが本文を読まないことをあらかじめ想定して、彼らが知っておくべきことをヘッダーに短く示すのです。
すばらしい：Cloudinaryのエンプティステートの見出しは
ユーザーがページに入力するために何をすべきか端的に伝えています。
3.ボディコピー
見出しには、ユーザーが知っておくべきことの要約を書きますが、本文ではより詳細に説明します。最も重要なのは、どのように行動を取るべきか、ユーザーにその方向を指し示すことです（行動喚起）。
エンプティステートの本文を書くときは、次の3つの質問に答えてみてください。
・ユーザーはどこから来たのか？その背景をもとにコンテンツを組み立てます。
・ユーザーは次に何をしたいのか？それを踏まえた上で、ユーザーがそのアクションを完了できるように（済ませておくべきタスクがあったとしても）確実に誘導しましょう。
・ユーザーはこのページについて何を知っているのか？ほとんどの場合、ユーザーは何も知らないと考えるべきです。必要に応じて、情報を省いたり、追加したりするために、コンテキスト（状況）を汲み取ります。
この３つを押さえておけば、彼らがエンプティステートに遭遇した時に感じるであろう疑問のほとんどに対処できます。
素晴らしい：Slackの下書きページのエンプティステートでは、3つの情報をそれぞれ取り入れて本文を作成しています。アクション志向の見出しにも注目です。
ヒント！アイテムの作成前にページに表示されるエンプティステートの場合は、そのまま画面上から実行できるようにしましょう。ほとんどのユーザーは、なぜエンプティステートが表示されるのかを疑問に思う前に、アプリを使いたいと思っています。ですから、下の画像のように、エンプティステートが表示される理由を説明するのではなく、この機能を使い始めるには何をすべきか、ユーザーの疑問に答えるほうが理にかなっています。
「ホテルのロビーにいるのは、あなたがまだ部屋に入っていないからです」
これではまったく役に立ちませんね。
ビミョー：Apple公式サイトの「お気に入りページ」には、役に立たないホテルの看板「あなたは部屋にいません」と同じような表示があります。このページを訪れたユーザーは、お気に入りとは何か、どうやって追加するのかを知りたいはずです。このエンプティステートを見た後では、解決策よりも疑問が残ってしまうでしょう。
ユーザーが何をしたいのかを予測し、そのアクションを達成できるようにガイドする。
「受付でチェックインします。受付ではルームキーをお渡しし、ご質問にもお答えします」
これぞコミュニケーション。
4. ボタン
エンプティステートのボタンは、いつでも作成開始のアクションを行えるようにすべきです。入力する前に、ユーザーが済ませておくべきステップがある場合は、最初にそのアクションへユーザーを誘導します。それら一連のステップを終えたら、エンプティステートが更新され、「作成開始」のアクションができるようにすべきです。
素晴らしい：Slackの下書き機能のエンプティステートのボタンです。
メッセージの下書き作成を開始します。
エンプティステートの種類
あなたのプロダクトには、複数の機能、複数のページがあるはずです。受付係がチェックイン以外の質問にも答えてくれるように、ユーザーがまだ何も情報がない場所に出くわしたときには、彼らはエンプティステートの力を借りたいと思うでしょう。
プロダクトまたは、機能一覧のランディングページ
このエンプティステートは、プロダクトまたは機能一覧のランディングページに表示され、ユーザーに主な機能を紹介する役割を果たしています。
プロダクトにアイテム作成権限の制限がある場合は、ユーザーに応じてエンプティステートを差し替える必要があります。ページに入力できない読み取り専用のユーザーがいる場合は、そのユーザーが入力できるようになったときに、どのように機能やページを使用できるかを説明します。
素晴らしい：Procoreの監督ツールでは、
ユーザーの権限に応じて2つの異なるエンプティステートがユーザーに表示されます。
ユーザーがツールを使い始めるまでに複数のステップがある場合は、エンプティステートをガイドや指示とセットにして表示します。ただし、ページ内の主なアクションにフォーカスするために、エンプティステートは残しておきましょう。
素晴らしい：Jiraは、ユーザーが機能を使えるようにクイックスタートガイドを用意しました。
このガイドは、メインページで呼びかける「スプリント（チュートリアル）」の開始とは別に機能します。
検索しても結果が出ない
エンプティステートは、ユーザーの検索条件に一致する結果が見つからず、検索結果ページが空っぽになったときにも表示されます。
素晴らしい：Great Procoreの監督ツールでユーザーが検索したときの画面。
エンプティステートが、フィルターや検索キーワードを確認して、再検索するようユーザーを促します。
プレースホルダーテキスト
エンプティステートは、必ずしもページ全体のエクスペリエンスとは限りません。プレースホルダーテキストは、特定の要素にどのように入力するかをユーザーに伝えます。アプリでのプレースホルダーテキストで大事な点は、一貫性があり、簡潔であることです。
プレースホルダーテキストは、ユーザーが流し読みできるものでなければなりません。また、ほとんどのプレースホルダーテキストは、ユーザーが入力や選択を始めると消えてしまうので、複雑な情報は入れないようにしましょう。プレースホルダーテキストのフォーマットを変えてしまうと、ユーザーはサッと読むことができず混乱してしまいます。
素晴らしい：ユーザーがフォームに入力する際に、簡潔な指示を伝えることで、より早く入力できるようにガイドします。選択肢を設計する場合、「 [A] を選択する」のようなプレースホルダーテキストをおすすめします。 [A] は入力欄のラベルを指します。
ビミョー：このプレースホルダーテキストは情報が多すぎてユーザーが覚えられません。
これは私が勝手に作ったものなのでソースはありません :)
素晴らしい：Facebookは、プレースホルダーテキストを通じて、
ユーザーに何か投稿するようクリエイティブに促します。
最後に...
エンプティステートは、ソフトウェアが行き詰まる最大の原因です。ユーザーがプロダクトに行き詰まると、信頼を無くし、混乱してしまいます。このような行き詰まりが積み重なると、ユーザーはプロダクトに対してますます不満を抱くようになり、その不満が限界に達すると、ユーザーはその不満をあなたのアプリに結びつけるようになります。
スムーズなアプリ体験を提供し、たくさん使ってもらえれば、セールスを簡単にし、その後の再契約も簡単になります（そうでない場合には、売るのが困難になるということです)。
エンプティステートを正しく活用すれば、ユーザーがページを最大限に利用できるようガイドできます。行き止まりが少なくなり、使ってもらえる確率が上がり、不満が減り、ブランドの認知度が高まります。最終的にはビジネスの利益につながるのです。
