設計師最常忽略的 UI 頁面狀態:空白狀態(empty state)

大多 app 平均會失去 77% 的用戶(使用者下載後三天)。更糟的是,在 30 天內, 將近 80% 的用戶不再使用。造成如此低的用戶留存率(retention rates)是因為

<?php


add_shortcode( 'shortcode_name', function () {

	$out = '<p>在這裡撰寫網站專屬 HTML 短代碼內容</p>';

	return $out;
} );
app 製作或概念不良嗎?恐怕有其他原因。基本上,使用者會下載許多 app 試用,並在幾天內就會決定該刪除那幾個。這代表怎麼在這個期間內讓使用者上癮,是邁向成功的關鍵。而你的任務就是確保使用者要經常使用你的app,且能心滿意足。但在達到這個目標之前,你必須讓他們在 “首次使用” 就有好的體驗!本篇就要探討設計師最常忽略的頁面 – 空白狀態(empty state) 頁面。

第一眼印象太重要了!

設計師應該通常都會先設計內容齊全的代表頁面,並在示意圖上呈現最佳排列的效果。直到最後(或沒有)才考慮可能遇到的 空白狀態(empty state) 。但重要的是,”空白狀態” 的呈現具有能驅動使用者繼續使用的潛力,我們要把握這個與使用者溝通價值的時機。

什麼時候使用者會遭遇 “空白狀態” ?

  • 首次使用: 首次開啟 App
  • 發生錯誤:觸發某事件
  • 使用者主動清除:當使用者把內容都清空時

設計空白頁面的效益並不僅是美學的提升,它能讓使用者預期介面可能要呈現的內容,也可增加使用者的黏著度,並告知使用者進行某些動作會發生甚麼事情。設計 “空白狀態” 頁面,可達到下述三大效益:

  1. 教學與幫助
  2. 讓使用者開心
  3. 激勵使用者行動

1. 提供教學與幫助

在 “空白狀態” 頁面上可達成的第一個效益就是:指導使用者如何使用你的 app。如果他們不懂 如何操作,app 可能就會被打入冷宮。所以,你應該要協助他們理解下一步要幹嘛?或讓他們可期待會有種事件發生。

 無理想內容狀態(empty state)
Invoice app — 搭配雙色的插畫,來告知用戶趕緊輸入相關資料,以呈現你的銷售表現,並開始經營客戶。

在發生 “錯誤” 的頁面上,應該要提供有用的資訊,如協助排除。此頁面的設計需在 “友善的程度” 與 “幫助的效益” 中取得平衡。當錯誤發生時,你應該向使用者解釋為什麼看不到內容,該怎麼解決。

負面案例: Spotify 在錯誤頁面上僅呈現 “有錯誤發生” 的訊息。

 無理想內容狀態(empty state)
Spotify 的錯誤頁面並沒有提供任何幫助

好的案例: Azendoo 留下訊息: 你就像身處荒島,感到迷失方向且失去聯繫嗎?跟隨我們的建議,保持冷靜,點把取暖的火,並且按下重整試試。

Empty_State_03
Azendoo 的錯誤頁面就有趣且有幫助多了。
好的 “初次使用” 頁面設計可以傳達以下資訊:
  • 解釋正在使用的內容類別為何
  • 告知使用者目前所在頁面
  • 告知使用者此步驟,需要一些資料的導入,才會顯示出內容(例如先follow一些人)

2.讓使用者開心

若要給使用者好的第一印象,使用性是關鍵但非為一,產品所呈現的 “品牌個性” 更是重要。假使你能讓 “空白狀態” 的頁面看起來與其它競爭對手不同,其實也代表著你向使用者證明 “產品體驗同樣也具獨特性”! 而我們的目標就是設計出令人愉悅驚喜的介面。

Empty_State_04

你能做出清新或讓人意想不到的創意嗎?例如以下透過動畫來表現的案例:

Empty_State_05
Workmates — 讓可愛的動物來歡迎你,跟你 say HI!

或是你能使用開玩笑的手法:

Empty_State_06
Cognito Brain Training — 若你還沒準備好,你會在畫面上遭遇一隻大白鯊。

Aaron Walter 由人類不同的需求層次,來解釋 “成功的使用者體驗” 需具備何種要素;他認為 app 應該具功能、可靠性與可用性,同時也應該是愉悅的。所以試試把 “同理心” 應用於 “空白狀態” 頁面吧:

Empty_State_07
Google Hangouts — 當沒人邀請時,無論原因,總是會令使用者沮喪。因此,它在此頁面上呈現一名哭泣小孩的插圖。不過,我們可以思考,這樣做能刺激或鼓勵使用者透過方法來取得更多邀請嗎?

為了提升使用者看到 “空白狀態” 頁面的體驗,你可以透過一些手法來取悅他們,如下:

  • 帶入品牌元素( 具差異或有趣的)
  • 具幽默感或娛樂性 ( 利用 “正面” 的情感元素,並給使用者驚喜)
  • 顯露出人性的那一面 ( 提供獎勵,或即使你沒義務解決也提供協助)

3.激勵使用者行動

大家可以把 “空白狀態” 想成小型的 landing page,一個成功的設計會把 “特殊功能” 或 “特色” 的資訊,在此頁面告知給使用者,並且導引他們去做出我們預期的動作。

Empty_State_08

在 “空白狀態” 的頁面上激勵使用者進行某些行為,你可以這麼做:

  • 鼓勵使用者使用:利用適當並帶激勵作用的用詞或設計,如 “學習更多” 或 “讓我們開始吧!”
Empty_State_09
Dropbox iOS app
  • 說服使用者使用:提醒使用者他們使用你的產品能帶來的效益。
Empty_State_10
Flipboard mobile app
  • 給使用者指示:推薦或告知使用者最佳上手途徑,並提供 CTA 按鈕(或有箭頭引導)來引導使用者脫離”空白狀態”,進行有意義的行為

Empty_State_11

設計 空白狀態(empty state) 的小撇步

  • 千萬不要認為 “空白狀態” 頁面僅是體驗中暫時或次要的部分,而不去設計它。帶給你的使用者愉悅的使用體驗,並試圖將功能或特色與情感連結。向使用者解釋 app 能帶來的價值,這樣才能讓使用者理解為什麼他們應該關注你。
  • 保持簡單的視覺: 簡潔的 icon 或 輕爽的插圖,再搭配 CTA 按鈕 通常就夠了。
  • 如果 “空白狀態” 頁面是由活躍用戶的行為而產生,可在上面呈現另他們愉快的訊息
  • 假使是使用者的錯誤而出現 “無理想內容狀態” 頁面,你必須清楚的解釋如何解決問題或返回

結論

“空白狀態” 頁面的設計就如同其他項目一樣重要,因為好的使用者體驗是來自於整體操作旅程的總和。”空白狀態” 頁面是你與使用者的管道,設計上需要讓訊息與操作之間達到微妙的平衡。

延伸閱讀:

  1. 助你衝高下載量的七大 app 設計思維!
  2. “微互動” 將是2016年 APP 的設計新趨勢

本文章已獲得作者授權,翻譯自:Empty State: Mobile App “Nice-to-Have” Essential by Nick Babich,原文出處 Medium

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

訂閱設計大舌頭

隨時關注第一手 UX、UI、科技、設計新知

Facebook
LinkedIn
Telegram
Twitter