見出し画像

アプリの「エンプティステート」のUIまとめ

アプリのエンプティステートにおけるUIをまとめました。

1.状態や機能を説明するエンプティステート

Paper

スクリーンショット 2020-05-19 8.42.45

Paperでは、「見出し」として“現在の状態を伝えるテキスト”があり、「本文」には“本来はどのような情報が表示されるか”が書かれています。

上図の中央の「スター付き」の画面では、「スター」という独自の概念が登場するため、その説明も表示されています。

クラシル・Todoist・Trello・SUUMO

スクリーンショット 2020-05-17 19.06.57

クラシル・Todoist・Trelloでも、“現在の状態を伝えるテキスト”や、“本来はどのような情報が表示されるか”が表示されています。

SUUMOでは、「お気に入り」という独自の概念を紹介するために、どの画面でどういった操作をすれば「お気に入り」を使えるかという所まで説明をしています。

2.空の状態を脱する導線を提供するエンプティステート

クラシル

スクリーンショット 2020-05-17 19.09.32

クラシルの一部の画面では、状態や機能を説明する情報の他に、空の状態を脱するための導線を表示しています。

Paper・SUUMO・Todoist

スクリーンショット 2020-05-17 19.11.31

Paper・SUUMO・Todoistも同様です。

Vimeo

スクリーンショット 2020-05-17 19.10.30

vimeoでは、単一機能の画面の他、「ホーム」や「探検する」などの複数の異なるう情報を表示する画面でも積極的に「空の状態」であることをアピールして、各アクションに誘導しています。

3.その場で空の状態を脱するエンプティステート

Retty

スクリーンショット 2020-05-17 19.13.50

Rettyでは、エンプティステートの画面から別の画面へと誘導するのではなく、この画面から直接「空の状態」を解決できるようにしています。

4.投稿を手助けするエンプティステート

スクリーンショット 2020-05-17 19.13.33

Paperでは、「タスクのドキュメントを作成」を押下時にデフォルトで項目が挿入されていて、投稿の手助けをしています。

おわりに

「UIアーカイブ」というマガジンで、アプリのUIまとめ記事を書いています。良かったらフォローしてください。

先日、「オンボーディング」のまとめ記事も書きました。良かったら合わせてご覧ください。


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

サポートしてもらえると嬉しいです。もしくはフォローだけでもしてもらえると嬉しいです。

ありがとうございます!もし良かったらフォローもお願いします🙇‍♂️
72
献立アプリの会社のデザイナー。UIデザイン / UXデザイン / サービスデザイン / デザイン思考あたりに興味があります。twitterもやってます。よかったらフォローしてください。 @is178

この記事が入っているマガジン

UIアーカイブ
UIアーカイブ
  • 8本

アプリのUIをまとめています。UIデザインをするときに役立つマガジンを目指しています。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。