最重要的用戶體驗設計細節恰恰是被忽視的地方
英文原文：The Most Overlooked Aspect Of UX Design Could Be The Most Important
編者按：本杰明·布蘭德爾（Benjamin Brandall）是 Process Street 的內容設計師。
我算不上是一個優秀的設計師，事實上我的設計水平還比較糟糕。不過我對設計的理念很感興趣。我讀過和寫過很多關于 客戶成功 的內容，在這個過程當中，我無意發現了塞繆爾·赫利克（Samuel Hulick）的網站 UserOnboard。
他在這個網站上詳細解釋了多款熱門應用的用戶引導（user onboarding）流程，設計師們可以從中了解到世界上最成功的一部分應用是如何留存用戶，提升用戶好感和為用戶帶來價值的。而這個網站本身就能做到以上幾點。
在看完塞繆爾的內容以后，我發現他在一條推文中給出了 emptystat.es 的網站鏈接，這是一個成立于 2013 年的網站，它專門展示一些由用戶投稿的空白狀態（empty state）截屏。
由于我的腦海還充斥著大量關于用戶上手的內容，所以我決定使用 Evernote 收集一些相關素材，寫出一篇曾以“最容易被忽視的設計細節 ”為題的文章。
什么是空白狀態？
空白狀態指的是屏幕在沒有可顯示數據時所呈現的狀態。這種情況出現的原因可能是：
- 用戶剛剛完成應用注冊。
- 用戶自己清空了數據。
- 應用出現了錯誤。
我們會快速了解幾個關于這三種空白狀態的例子，然后深入探討空白狀態將如何幫助提升用戶留存率，以及確保用戶能夠最大化利用你的應用。
Gmail 的新注冊空白狀態
Gmail 采用了非常好的 新用戶引導方式 ，但是當用戶真正進入了這個應用之后會看到什么呢？Gmail 會以用戶未來會用到的格式（電子郵件）來呈現更多的引導信息。它還會指導用戶如何從應用中獲取更多的價值，這些設計都是為了提升用戶成功（從而提升留存率）而設的。
Process Street 的無數據狀態
跟許多依賴用戶創建內容的應用一樣，Process Street 的無數據狀態也會告訴用戶應該如何充實應用的內容。模板是 Process Street 的核心功能，如果沒有模板的話，用戶就無法建立清單，也不需要添加文件夾或者標簽等內容。這就是這個頁面的意義所在。
Eventbrite 的錯誤頁面
雖然這個顯示錯誤信息的空白狀態頁面采用了荒涼的沙漠主題，但是它顯得充滿趣味和生活氣息，而且能夠為用戶帶來幫助。跟 某些錯誤頁面 不一樣的是，它會明確告訴用戶下一步應該怎么做。你的應用中不應該出現任何的 死胡同 。
空白狀態應該回答的三個問題
一個有用的空白狀態應該可以告訴你它 是什么 ，你 為什么 會看到它，以及你 怎么做 才能填充這個空白狀態。我們接下來將會探討更多的要點，但是一個好的空白狀態首先應該是有用的，其次才需要考慮是否精彩的問題。
在設計的時候，你應該將上面的三個問題（是什么，為什么，怎么做）看成是重復吸引用戶的原則，不過你也需要記住它們是空白狀態的最基本要求。
通過空白狀態吸引用戶的注意力
這是一個非常重要的問題。這是延續用戶引導流程和留存用戶的最有效方式。正如我在文章開頭所說的，空白狀態可以且應該用于（重復）吸引用戶，并幫助他們獲得成功。
空白狀態可以如何用于吸引注意力和提升留存呢？我們需要考慮用戶在看到空白狀態時首先會想到什么。
大家可以看到這是一個空空如也的頁面，沒有任何旅程。它可以告訴我這個屏幕的用途是什么，但是除此之外就沒有任何東西。
好吧，這里的確有告訴我頁面出現空白的原因，但是我之所以看到這個頁面，可能是因為我不知道 怎么添加旅程 。
這就對了。這個顯眼的按鈕和恰當的開始行動文字能夠告訴我應該如何解決問題。如果我只是看到自己沒有旅程的話，這會讓人覺得這個應用是故意做得難以使用的。
我們再用同樣的方式來分析另外一款應用。
在完全沒有數據的同時也沒有提供任何的幫助。它有告訴我這個頁面是用來做什么的——顯示選中的檔案，但是我沒有看到其他東西了。
現在我知道自己為什么會看到這些，但是不知道如何解決我的問題。
我不知道是我自己的問題，還是這個應用本身的語氣無禮。無論如何，我們都喜歡看到幫助信息。現在我們知道如何解決自己的問題，并用寶貴的數據來填充這個空白狀態。上面的例子都遵循了 是什么 ， 為什么 ， 怎么做 這三個原則。
個性和指示是空白狀態的點睛之筆
空白狀態還有兩個可以提升的方面——個性和指示。個性可以讓你的應用留下更深刻的印象和更愉悅的使用體驗。指示可以向用戶傳達應用的價值，這點可以提升留存率和解決用戶在引導過程的問題。
Khaylo Workout
這個頁面回答了是什么（一個空白的挑戰頁面），為什么（因為你還沒有向任何好友發起挑戰），以及如何解決這個問題（點擊“+”圖標）。但是它沒有止步于此。這個空白狀態通過美觀的圖像和親切的語言表現了應用的個性，同時讓用戶認識到向其他人發起挑戰的益處。
下面是另外一個符合各方面要求的優秀空白狀態例子。
Beamly
我從來沒有用過 Beamly，不過這個空白狀態的信息可以讓我清楚了解到應用的用途。除了三個基本內容之外（是什么，為什么，怎么做），它還加入了一段有趣的話，并向新用戶或回歸用戶解釋了應用的核心價值。
在空白狀態中體現品牌個性
空白狀態是向用戶建立聯系和傳達應用個性的重要橋梁。正如網頁設計師 在 404 頁面盡顯創意一樣，空白狀態也能發揮出無限創意。情感設計大師亞倫·沃爾特（Aaron Walter）采用了人類需求層次來 解釋 優秀用戶體驗的要素——你的應用不僅要體現功能性、可靠性和實用性，它還應該是令人愉悅的。
Smashing Magazine 的西蒙·施密德（SimonSchmid）提出了多種實現愉悅用戶體驗的方法。我對他給出的列表進行了總結，找出了你可以通過空白狀態提供的愉悅感：
- 積極性。請參考文章“10 大積極情感”（What Are The Top 10 Positive Emotions）
- 意外性。做一些出乎意料的事情。
- 獨特性。以 有趣的方式 差異化自己的產品。
- 關注性。雖然你沒有這個義務，但你仍然可以向用戶提供激勵或者幫助。
在空白狀態中運用情感
現在回到收件箱的話題，我從不同空白狀態的語氣發現了一些有趣的要點。也就是說，有些應用會鼓勵用戶清空收件箱，其他應用則會鼓勵用戶填充空白狀態。
空白狀態所傳達的情感取決于應用的用途。Hangouts 希望用戶添加內容，而 Outlook（它的“重點”收件箱是為了幫助用戶閱讀所有重要郵件）則希望用戶清空內容。
Hangouts
無論畫面中的是什么，它所表達的都是一種傷心的情感。對用戶來說，這可以算是一種獲得 Hangouts 邀請的激勵嗎？設計真的可以起到一種神奇的效果……
Outlook
你已經通過這項功能獲得了成功。這就是所謂的積極性。
從空白狀態中帶來驚喜
其實大部分錯誤頁面的出現都會讓用戶感到意外。與其告訴用戶他們沒有正確使用這個應用，為什么不將這種意外轉化為驚喜呢？畢竟，你不會想用戶經常看到錯誤頁面，所以在錯誤頁面中傳達一種輕松的心態可以幫助緩和用戶的情緒。
Cognito Brain Training
無論在什么情境下，看到鯊魚總會讓我感到意外。
Timehop
如果你想用一種驚喜的方式告知我互聯網連接已經斷開，至少要像這個例子中的時間旅行比喻一樣。
在空白狀態中傳達益處
最后，我們先跳出設計的領域，然后進入一個我更熟悉的專業：文案寫作。
你的初始空白狀態的核心目標應該是向用戶（重復）推銷應用的益處。你的用戶引導流程不是總能達到預期的效果，所以在用戶完成注冊以后，你的應用 可能就會被遺忘在手機的主屏幕上，經過數天、數周甚至是數月才會被再次打開。如果一個用戶在引導過程期間或之后離開了你的應用，那么他很有可能會永遠放棄 這款應用，所以你應該盡力做到以下兩點：
- 提醒用戶你的應用有什么功能。
- 告訴他們為什么要在意這些功能。
換句話說，你的空白狀態需要體現文案寫作的準則：以益處為賣點，以功能作支撐。
注意：如果你想快速了解如何寫出簡潔有力的文案，歡迎閱讀我的另外一篇關于 商務寫作訣竅的文章。
下面我們來分析一些優秀的例子。
Basecamp 的項目無數據狀態
我喜歡應用明確告訴我要做什么，怎么做還有為什么我要在意這些。
Dropbox 團隊版的無數據狀態
Dropbox 的文案人員做得非常好。我自己其實用不上這項功能，但是我打開這個頁面的原因是為自己的文案模板獲取更多的素材。
空白狀態設計的要點總結
為了感謝你能一直堅持看到結尾，接下來我要給你一個特別的獎勵——我將收起自己的長篇大論，并為大家清晰地總結空白狀態設計的要點。總的來說，一個空白狀態頁面需要回答的基本問題是：
- 這個屏幕是什么？
- 為什么我會看到它？
- 我要怎么解決這個問題？
除此之外，你還需要做到：
- 傳達個性。讓用戶愉悅地使用你的應用，并將用戶的情感與應用的功能聯系起來。
- 說明益處。對于你的初始空白狀態來說，這是至關重要的一點，否則用戶不會知道自己為什么應該在意你的應用。
本文出現的空白狀態來自：emptystat.es、UX: Empty States、UI Empty States。
我目前還在研究空白狀態設計的話題，所以我很樂意看到大家收藏的優秀空白狀態。如果你有這樣的收藏，請在下方的評論欄向我分享。最后感謝大家能夠忍受我的廢話連篇。
題圖來自：FreshPaint/Shutterstock
翻譯：關嘉偉（@consideRay）