Webサイトおよびモバイルアプリ用に空の状態ページを設計する方法
空の状態ページはあまり知られていないデザイン要素であり、ユーザーエクスペリエンスに大きな役割を果たします。最も単純な形式では、空の状態は 利用可能なコンテンツがないページにユーザーが最初にアクセスしたときに表示されるページレイアウト.
これには、モバイルアプリケーション、ソーシャルネットワーク、さらには空のブログカテゴリも含まれます。目的は、空のページを配信することです。 のように見えます 空でないページ訪問者は 差し迫ったコンテンツの手段としてコンテンツの欠如を認識する.
空の状態ページがどのように機能するのか、なぜそれらが非常に重要であるのかを説明します。インターフェイス設計者はこれらの点を考慮し、適切な場合はいつでも空の状態にそれらを適用するようにしてください。しかし、まず始めに、空の状態がどのように機能し、それがインタフェースにどのように価値を提供するのかを調べましょう。.
空の状態の価値
素晴らしい空の状態デザインの美しさは単純さにあります。空のページは説明する ページ上にあるべきもの コンテンツがあると。空の受信トレイのように受動的な場合もあれば、空のTwitterフィードのようにユーザーを積極的に待っている場合もあります。.
空白のページは退屈で退屈で、さらに混乱を招きます。空の状態 ガイダンスを提供 ユーザーが自分が何を見ているのかを理解しやすくするため。空白のページですが、追加のコンテキストが役立ちます.
空の状態はまたの意味を与える “鮮度” 既存のデータがない新しいアカウントで.
Redditor Bambo_Ochaによって行われたこのテストは、空の状態デザインについて20の異なるアプリをチェックしました。 CTAボタン、サンプルデータ、そして短いチュートリアルチュートリアルでさえ、さまざまなデザインスタイルが発生しました.
ユーザーベースで繁栄するアプリは、空の状態を設計する必要があります ユーザーの行動を促す. このアクティビティには、コンテンツの公開、友達の追加、写真のアップロード、またはアプリの用途などがあります。 Tookapicからの下記のスクリーンはすばらしい例です.
しかし、何もしなくても空の状態ページにはまだ価値があります。これらのデザインは主に情報を提供するために作られています.
静的情報も同様に価値があり、空の状態を持つことが本質的に悪いことではありません。たとえば、このページデザインにはトラッキングアプリダッシュボードの現在の統計情報は表示されません。ユーザーはいくつかのメトリクスを追加したい場合がありますが、ダッシュを空のままにしておくことは悪くありません。.
空のブログアーカイブや空のメッセージフォルダにも、同様の静的デザインが最適です。表示するメッセージがなくてもまったく問題ありません。しかし、ページはコンテキストなしで完全に空になってはいけません.
重要ページの要素
空の状態ページで最も重要な要素は コンテキスト. これは、グラフィック、テキスト、またはその両方の形式で発生する可能性があります。ページが空の理由とそこに存在する可能性のあるデータの種類（電子メール、ツイート、友達のプロフィールなど）をユーザーに通知します。.
テキストはWeb上の主要なコミュニケーション媒体ですが、グラフィックやアイコンの価値を見逃すことはできません。.
DigitalOceanには、その状態を明確に示す空の状態のグラフィックを備えた素晴らしいダッシュボードがあります。彼らの会社は創造的なブランディングときれいなタイポグラフィを使っているので、彼らの空の状態ページがそれほど説明的であることは当然のこと.
空の状態設計のもう一つの重要な側面は アクションボタンを呼び出す. ハイパーリンクもうまく機能しますが、これは通常ボタンのように設計されています.
目標は、ユーザーが行動を起こして空の状態を解消できるようにすることです。これがデータを追加することを必要とするかどうかにかかわらず、サイト上で行動をとること、CTAは空の状態を片付けるのに必要な次のステップにユーザーを導きます.
Dropboxは2つのCTAボタンで素晴らしいデザインをしています。 Dropboxユーザーがフォルダを持っていないときはいつでも、彼らは新しいフォルダを作成するか、ページにサンプルフォルダを追加することができます.
ユーザー活動の促進
アクションボタンへの呼び出しはアクティブな要素ですが、ページコピーが説明することを忘れないでください ユーザーがしていること. 理由を知らずにボタンをクリックするだけの人はいません。.
活動を促進するための最善の方法はあなたの空の状態ページに素晴らしいコピーを書くことです。アプリケーション全体にわたるユーザーアクティビティを促進するコンテンツフローを通じてユーザーをガイドします。.
ModSpotによるこの空の状態は、質の高いデザインと素晴らしいコンテンツの素晴らしい例です。.
アイコンは、ユーザーがサイトに追加する内容を示すために使用されます。矢印は、ユーザーがクリックする必要があるボタンを指し示しています。これはあなたが期待するすべての要素を備えた素晴らしい空のステートデザインです。.
同様に、Gumroadの空の状態には、さまざまな潜在的なアクションをターゲットとする2つのオプションがあります。ユーザーはデジタル製品または実際の製品を追加して販売を開始できます.
ページ上の他のリンクは、ヘルプガイドと連絡先の詳細につながっています。すべてが非常に合理化されていて、うまく結び付いています.
ウェブアプリとモバイルアプリ
すべてのメディアの空の状態ページは、同様のデザイントレンドに従うべきです。しかし、スマートフォンと比べてデスクトップ上のユーザーエクスペリエンスには若干の違いがあります。.
大画面のウェブサイト もっと部屋がある 追加ボタン用。 Webページも持つことができます 大きなナビゲーション要素 それは他の場所に人をサイト上に引き付けることができます.
これはNusiiが彼らの提案ページで行っているのと同じスタイルで解決できます。提案がない場合は、ユーザーはに提案されます。 “提案を追加” 上部ナビゲーションバーのボタン.
モバイルアプリも同様の問題を抱えているかもしれませんが、画面はずっと小さいです。これはそれを作る ユーザーを行動に引き込むことがはるかに簡単.
私は、モバイルアプリをより少ないオプションでよりシンプルに保つことが最善だと思います。行動を促し、非常に具体的なユーザーフローを示すために、視覚的なものを目の当たりにする.
空の状態の設計例
空の状態の設計について学ぶためのおそらく最良の方法はいくつかの例を研究することです。素晴らしいWebギャラリーemptystat.esは、さまざまなWebサイトからモバイルアプリケーションまで、空の状態ページを管理します。.
私は空の状態設計を最もよく説明するあなたの注意に値するいくつかの例を厳選しました。他の提案があれば私達に知らせて自由に感じます.
DigitalOceanフローティングIP
Webflowベータ版
内観
ビットバケット
固定グループなし
Facebookのメッセージ
LayerVault
ワークアウトの課題
バッファが空です
Wordアプリのドキュメント
Evernoteチャット
Android用Beamly
可聴オーディオブック
ポケットアプリ
BBCマイニュース
GitHub Wikiページ
Chrome Bookmarks Manager
Mac Infinitアプリ
空のFacebookフィード
