交互設計裡的空狀態,創造良好用戶體驗

​空狀態頁面的體驗設計

Empty State - How Details Improve User Experience Design

在交互設計、用戶體驗設計中,每一個細小環節都至關重要。比如說,空狀態 ( The Empty State ) 是許多應用程序設計開發過程中忽略的一點,卻也有著優化用戶體驗、改善應用程序的潛力。

交互設計裡的空狀態,創造良好用戶體驗

空狀態是指在用戶體驗產品流程中出現的除主流程狀態反饋外沒有其他數據展示的情況,而缺少數據或內容的原因有很多種,例如搜索無結果、無網絡、默認初始無數據狀態等。


空狀態設計 ≠ 插畫+文案

對於空狀態設計,似乎並沒有什麼可施展的餘地,通常用一張插畫,一句文案就完成頁面設計。但實際上空狀態的體驗是可以有更多可能的,而對應不同原因分場景展示對應的內容將有助於提升用戶體驗。


01 行動指令引導用戶進入體驗流程

新手用戶在初上手一款新產品的時候,經常會遇見初始無數據的空狀態場景,比如空著的購物車,空著的關注列表,空著的動態欄等等。為了

引導用戶快速熟悉如何使用產品,減少新用戶流失,比較常見的做法是使用帶有“行動性指令”文案的操作按鈕。


行動性指令

行動性指令是指給用戶明確行為操作的指令,如“去使用”、“去逛逛”、“贊一個”、“試一試”等等,這些明確的行動指令會比其他文案更引導用戶點擊。


交互設計裡的空狀態,創造良好用戶體驗

除了常規的操作按鈕以外,還可以通過帶有“行動性指令“的輕交互動效來進行用戶引導。比如抖音,運用動態氣泡這一輕交互引導新用戶發佈第一個視頻。

交互設計裡的空狀態,創造良好用戶體驗

02 預顯示吸引用戶注意力

在很多特定產品中,有些功能

在初始進入的時候都是空數據狀態,例如社交產品的關注功能、社區論壇類產品的發帖功能等。如何在“空”的狀態下抓住用戶的注意力?體驗設計如何避免讓新用戶因為對功能不瞭解或者不敢興趣而產生不流暢或不理想的體驗感?

交互設計裡的空狀態,創造良好用戶體驗

預顯示

通過預顯示可以把有趣的內容或者功能部分直觀的外放在空狀態頁面

,避免新用戶一進入APP就看到略顯空白的頁面。在豆瓣APP中,用戶可滑動查看記錄功能與格式話題卡片,從而完成自己的動態信息發佈。這樣既可以幫助新用戶瞭解產品功能,也能增強對用戶的吸引度


03 “猜你喜歡”提升業務轉化

在生活中,設計師往往還需要考慮到商業價值。要讓設計真正賦能商業價值,其核心在於業務轉化,並對應到不同產品的業務指標,比如電商類產品有商品瀏覽率、下單率等指標。

交互設計裡的空狀態,創造良好用戶體驗

“猜你喜歡”

淘寶手機APP中,購物車在空狀態下會顯示“猜你喜歡”模塊,就是在空狀態的設計中加入對業務轉化有影響的體驗模塊。依靠算法的發展,對用戶精確匹配推薦模塊,可以有效激活用戶操作,提升業務轉化率。


04 獨特創意帶給用戶驚喜

用戶體驗設計中往往涉及用戶感受中的“愉悅度”與“滿意度”,因此交互體驗設計總是會談論如何給用戶帶來驚喜,因為驚喜是情緒中最極致的愉悅與滿足。

交互設計裡的空狀態,創造良好用戶體驗

驚喜與視覺衝擊

與普通的空狀態設計相比,把整個空狀態頁都當做一個場景畫布佈局內容,配備細節創新有趣的文案,可以為用戶帶來足量驚喜與視覺衝擊。例如阿里家的“躺平”,獨特的贊和收藏空狀態讓用戶更容易記住一款產品,並對之產生一定情緒記憶。


交互設計、用戶體驗設計中的每一個細節都不容忽視,哪怕是像空狀態這樣的沒有數據或信息顯示的頁面,也有為用戶創造良好體驗的設計價值。

本文由WELLDESIGN獨家原創,未經授權請勿轉載。


分享到:


相關文章: