空狀態——用戶體驗中最容易被忽視的方面

儘管對用戶體驗很重要，但空狀態經常被忽略。 了解它們是什麼以及如何使用它們，並應用 UX 最佳實踐，可以產生巨大的好處。

什麼是空狀態？

用戶體驗設計師有很多機會創造令人愉悅和有意義的體驗。 一種經常被忽視的機會是“空狀態”或空屏幕。 空狀態是用戶體驗產品的時刻，沒有可顯示的內容。

以下是一些常見的空狀態情況示例：

• 沒有創建文件或文件夾的新 Dropbox 屏幕。
• 完成待辦事項列表管理器中的所有任務後的結果屏幕。
• 當命令不受支持時，在 Slack 中出現錯誤屏幕。
• 開始一個新的社交網絡帳戶並且沒有連接。
• 在 Gmail 中搜索內容但沒有得到任何結果。

這些中間時刻提供了改善用戶體驗並因此擴大商機的機會。 對於用戶體驗設計師來說，抓住每一個機會來提升用戶體驗並為業務增加更多價值是一件好事。

一個有用的空狀態會讓用戶知道發生了什麼，為什麼會發生，以及如何處理它。 以下是兩個良好的空狀態 UX 設計示例：

以下是一些錯過機會的空狀態設計示例：

空狀態的類型

以下是四種常見的空狀態：

• 首次使用——在新產品或服務仍然沒有可顯示的情況下發生，例如新的 Evernote 或 Dropbox 帳戶。
• 用戶已清除- 當用戶完成清除收件箱或任務列表等操作時發生，結果是一個空白屏幕。
• 錯誤- 當出現問題或由於網絡問題導致手機離線等問題時，會發生錯誤。
• 無結果/無數據– 沒有可顯示的內容時發生。 如果有人執行搜索並且查詢為空或沒有可顯示的數據（例如，在過濾沒有數據的日期範圍時），就會發生這種情況。

隨著空狀態設計受到更多關注，用戶體驗設計師發現，無論從業務角度還是用戶體驗角度，使用它們都會產生有益的結果。

用戶嘗試了很多應用程序，但在最初的 3-7 天內決定他們想要“停止使用”哪些應用程序。 對於“體面”的應用程序，大多數用戶保留 7 天的時間要長得多。 成功的關鍵是在關鍵的前 3-7 天期間讓用戶著迷。 – Ankit Jain

使用精心設計的空狀態的好處

設計經過深思熟慮且有用的空白狀態屏幕有助於提高產品參與度、取悅用戶並減少客戶流失。 這減少了用戶流失到競爭對手產品的機會，從而使他們感到沮喪或迷失。

Scott McKain 在他的《客戶真正想要什麼》一書中列出了卓越客戶體驗的六項指導原則。

他寫道，客戶想要：

1. 引人入勝的體驗
2. 個人焦點
3. 互惠忠誠
4. 差異化
5. 協調
6. 革新

當應用於空狀態設計時，這些原則可以對企業大有裨益——例如，提高產品滿意度和降低放棄率。

以下三個領域也可以從良好的空狀態設計中受益：

• 用戶入職——除了提升用戶體驗外，還提供建立信任和持續使用產品的機會。
• 品牌建設- 提高知名度並促進公司發展，以增加品牌資產。
• 個性化——在各種使用狀態下可以是有趣的、有趣的、嚴肅的或動態的； 創造一種個人風格的感覺。

設計良好的空狀態的好處不可低估。 它們不僅有助於提供引人入勝的客戶體驗，而且隨著讓客戶滿意和參與的機會之窗變得越來越短，它們只是普通的好生意。

避開：用戶體驗設計中被遺忘的屏幕

既然設計良好的空狀態有明顯的積極結果，為什麼一開始就忽略它們呢？

首先，與應用程序或產品或網站中的屏幕總數相比，很少出現空狀態情況，因此它們經常被忽視，因為它們不被視為優先事項，設計師傾向於將精力集中在設計中更明顯的部分。

其次，估計只有 2-5% 的用戶看到空狀態，這並不總是對設計師時間的經濟或實際使用。

最後，空狀態並不總是能很好地理解它們出現在哪里以及如何處理它們，因此它們退居二線，轉而支持更流行的屏幕和頁面。

當空狀態被忽略時會發生什麼？

沒有指導的空白屏幕會導致混亂、不確定和失望。 這可能會導致更高的放棄率和對產品的整體滿意度降低。

幸運的是，隨著設計良好的空白狀態屏幕的好處和機會成為用戶體驗設計過程中更重要、更高優先級的部分，事情開始發生變化。

如何有目的地填充空白屏幕

以下是一些 UX 最佳實踐，可確保空屏幕被設計為有用、有用和信息豐富。

共情。 添加驚喜和喜悅、情感和個性都是 UX 設計師在產品最黑暗的角落創造更好體驗的所有方式。 對於空白屏幕，移情消息增加了多樣性並創造了更具吸引力的個性化體驗。

意象。 有一種設計原則稱為親生物效應。 這是一種減輕壓力和提高注意力的狀態，源於自然觀。 添加一些風景圖像（例如，空白狀態錯誤屏幕的背景）可以帶來更愉快的用戶體驗。

有用的指導。 根據產品的類型，可以使用空狀態來引導用戶。 一個很好的例子是項目管理應用程序。 有了新帳戶，還沒有任何項目在進行中，這為幫助用戶快速入門提供了一個潛在的絕佳機會，從而減少了放棄的機會。 這是一個例子：

入門內容。 有很多屏幕空白的時間足以讓用戶感到沮喪並離開。 對於某些產品，提供良好的入門內容有助於他們直觀地了解正在發生的事情以及他們接下來可以做什麼。

下面是一個帶有入門內容的空狀態屏幕示例：

提供行動步驟。 對於某些產品，我們不需要提供指導或在屏幕上填滿任何內容，因為這沒有任何意義。 在這些情況下，設計人員可以簡單地提供一個操作步驟。

但是，最好將操作保持在最低限度。 希克定律指出，“做出決定所需的時間隨著選擇的數量和復雜性而增加。” 因此，當號召性用語最多保持一到兩個時，用戶可能會更快地採取行動。 這是一個很好的例子：

另一個很好的例子是 Instagram。 當人們剛接觸該平台時，他們還沒有關注任何人（也沒有人關注他們）。 專注於 Instagram 的所有強大功能很容易，但是例如，一個好的空白狀態屏幕可以讓他們選擇“添加要關注的人”。

空狀態用戶體驗最佳實踐——來自現場

Toptal 在所有設計領域都擁有頂級的全球自由職業人才。 以下是幾位 Toptal UX 設計師關於他們設計空狀態屏幕的經歷所不得不說的。

頂級設計師：塔瑪拉奧爾森

設計學科：用戶體驗設計

你做過或見過哪些好的空狀態設計？

我觀察到的良好的現代空狀態設計通常是兩部分說明，一部分是喜悅。 如果 UI 是空的，那麼 UX 設計師的工作就是幫助用戶了解填充空間時會發生什麼。 如果填充它是用戶的工作，則消息應該包含有關如何填充的說明。 （例如，教育科技產品中的空白“班級”表可能包含通知教師如何創建第一堂課的副本。）

我還看到許多應用程序利用空置州的慷慨房地產作為註入一些愉悅和俏皮的品牌個性的機會。 您可能會說它是網站 404 頁面的網絡應用程序版本。

你有沒有忽略過空狀態，如果有，為什麼？

當然，這是一個簡單的陷阱。 當我們有遠見時，我們會在應用程序和產品全速運行時描繪它們，其中充滿了內容和用戶。 當我在谷歌工作時，一位產品副總裁評論說產品就像飛機航班； 大多數問題發生在起飛和降落期間。

當用戶第一次進入您的產品時，空狀態是不可避免的，我們不希望他們在開始之前就陷入死胡同。 我鼓勵初級設計師設計一組單獨的線性設計來展示用戶的入職流程。

你見過使用空狀態的客戶成功嗎？ 如果有，以什麼方式？

我最近與全國小說寫作月合作，重新設計了他們的平台，允許用戶圍繞他們的寫作進度設定和跟踪目標。 我們的產品團隊在空狀態下擁有絕對的優勢； 這是介紹和調侃平台功能和個性的絕妙方式，並鼓勵用戶開始記錄他們的進度。

你經歷過的最成功的空狀態使用是什麼？

作為一個“零收件箱”，我一直對 Gmail 應用程序的空收件箱插圖感到高興：一個人在雨傘下，在陽光下看書，標題是“你已經完成了！” 從技術上講，它打破了我提到的關於需要行動號召的空狀態的規則，然而，它沒有，因為潛意識 CTA 是“放下你的電子郵件，去享受你的生活”。 我喜歡那個。

頂級設計師： Michael Clingerman

設計學科： SaaS產品設計

如果您為空狀態設計，您最常看到的類型是什麼？

我最熟悉的空狀態是 404/錯誤狀態和用戶清除狀態。

你見過使用空狀態的客戶成功嗎？ 如果有，以什麼方式？

是的。 我見過一些案例，其中空狀態屏幕成為引人入勝且令人愉悅的內容和通信策略的一部分。 在其他情況下，客戶使用它們來建立自己的品牌個性。

你經歷過的最成功的空狀態使用是什麼？

我一直很喜歡 Dropbox 使用簡單和單色的插圖風格來建立企業品牌的個性、基調和特徵。

結論

在 UX 設計中很容易忽略空狀態（或空屏幕），因為它們很少發生並且並不總是很好理解。 然而，將它們包含在內的好處被低估了，因為它們增強了用戶體驗並有助於創建更具凝聚力的產品。

• • •

進一步閱讀 Toptal 設計博客

• UI 設計最佳實踐和常見錯誤
• 移動用戶體驗設計——最佳實踐、約束和與開發人員合作
• 移動界面的啟發式原則
• 設計的影響——色彩和情感指南
• 設計原則及其重要性