好體驗藏在設計細節裡：空白狀態篇

5 min readJan 5, 2016

最近因工作review某個網站，該網站存在很多不流暢的微互動而相當粗糙，其中一個例子是畫面的空白狀態（Empty States）。

The UI Stack

Scott Hurff在他的文章How to fix a bad user interface裡提到，一個數位產品的畫面通常會有5種狀態：空白、載入中、不完全、錯誤和完美，稱之為The UI Stack。5種狀態的設計關乎好的使用者體驗，在設計產品時必須列入考慮。

為何會有空白狀態？

其中空白狀態是容易被忽略或低估、但可對使用者體驗產生畫龍點睛效果的一種。顧名思義，空白狀態就是畫面上無資料，產生原因不外乎3種：

使用者第一次使用，需要先建立內容、執行任務等。

2. 使用者主動清空資料，例如看完所有文章、刪除所有垃圾信。

3. 沒有資料可顯示，例如無搜尋結果。

空白狀態的設計考量

The Most Overlooked Aspect Of UX Design Could Be The Most Important一文的作者Benjamin Brandall建議，一個好的空白狀態應告訴使用者它的用途、為什麼產生和下一步該怎麼做（What, Why, How）。設計師應善用空白狀態引起使用者對產品的注意和興趣；為產品注入個性和情感，讓它們不只好用，也讓人用起來愉悅；以及透過空白狀態向使用者溝通產品的好處，讓使用者順利onboard和增加retention。Dina Chaiffetz在Why empty states deserve more design time也提出相同的論點，認為空白狀態要達成3個目標：教育使用者、讓使用者愉悅和觸發行動。

微互動v.s.空白狀態

這讓我想起Microinteractions一書提到，微互動是造就使用者體驗好或壞的重要細節，適時適度的細節能讓使用者跟產品產生無縫的互動。空白狀態很適合用來處理微互動，串聯產品的功能和使用流程。

先來看看使用者第一次使用Invision和Webflow的體驗。一進入Invision，畫面上預設有3個範例，使用者可以瀏覽範例，也可以點擊右上方的+按鈕，自行建立新的prototype（下圖1）。而一進入Webflow，會看到空白的Dashboard上，有逗趣的圖像吸引使用者去注意右上角的New Website CTA按鈕（下圖2）。前者的好處是能讓使用者先把玩Invision的功能，不過除了用不同顏色凸顯外，召喚使用者採取行動的按鈕稍嫌隱晦。後者則直接運用詼諧的圖像來引導使用者的視線，暗示他們去建立一個網站（該服務最主要的功能），同時為產品注入點個性。

接著以行動拍賣服務KKTOWN和飯店比價平台HotelsCombined為例。兩者都有Wishlist功能，使用者還沒將商品加入前，裡面沒有任何資料。KKTOWN的Wishlist畫面很空，僅顯示zero data（下圖1）。HotelsCombined不單單告訴使用者zero data，而是說明Wishlist的用途（儲存喜愛的旅館）和規則（儲存→資料出現在這裡），以及引導使用者開始搜尋旅館（SEARCH FOR HOTELS CTA按鈕）（下圖2）。相較於前者，後者既促進使用者的參與，並讓使用者和產品的互動更順暢。

最後看看電商網站Amazon和博客來在沒有資料可顯示時的作法。博客來僅在畫面上顯示zero data，請使用者自行重新查詢（下圖1）。Amazon除了告知查無結果外，會利用模糊搜尋，判斷使用者實際想查詢的關鍵字，直接提供結果（下圖2）。後者不但節省使用者重新輸入關鍵字的時間，也避免錯誤可能不斷發生，造成使用者中斷流程。