產品體驗細節推導(二):及時反饋如何設計
編輯導讀:用戶在操作產品時,產品會給出相對應的反饋,幫助用戶及時了解產品當前的的狀態,這就是產品的及時反饋。如何進行及時反饋設計?本文作者將對此進行了分析,與你分享。
由于產品及時反饋常常被設計師遺忘,在產品最后階段草草設計而沒有進行整體性的思考,因此本文分析幾個及時反饋的優秀案例,作為以后設計產品及時反饋的參考。
一、什么是及時反饋設計
用戶在平時操作產品時,產品給出相對應的反饋,比如:刷新、加載、無網絡等提示,幫助用戶及時了解產品當前的的狀態。
二、設計案例
1. 「餓了么」分布式加載讓你提前感知頁面內容
【使用場景】
用戶使用餓了么app進行欄目切換時,通過分布加載的方式先加載頁面框架后加載內容,及時反饋加載內容減少用戶心理等待時間。
【設計思考】
1)設計目標
針對用戶:解決用戶由于等待時間過長而造成不耐煩的問題;
針對產品:通過先加載頁面框架后加載內容的方式,減少用戶心理等待時間,提升用戶使用體驗。
2) 設計方案
在點擊切換頁面時先加載頁面框架再加載內容,在內容未出現前通過占位符的方式展示,優先加載占網絡資源較少的元素后加載占資源多的元素;用占位符的方式代替頁面框架,提前了解到頁面的整體展示方式,給用戶加載好的錯覺。
3)思考總結
分布加載方式可以通過先加載占網絡資源少的元素后加載占資源多的元素,在整個過程中內容一點點展示的過程給用戶及時反饋,讓用戶忽視加載過程,提升用戶使用體驗。
2. 「菜鳥」場景化的刷新+絲滑動效
【使用場景】
用戶在首頁停留時間過長,需要通過下拉刷新的方式更新包裹最新狀態。
【設計思考】
1)設計目標
針對用戶:解決用戶刷新過程中無趣等待的問題;
針對產品:通過品牌場景故事的方式進行下拉刷新,加深用戶的品牌形象。
2) 設計方案
在下拉刷新操作時,菜鳥IP形象出現又飛走后包裹的盒子出現再打開的場景動畫刷新完成,就像快遞小哥把包裹送到客戶手里打開包裹時快樂的心情,很符合菜鳥app作為快遞應用的特性,加深用戶心中的品牌形象。
3)思考總結
下拉刷新是目前使用最廣泛的刷新方式幾乎沒有學習成本,再把品牌logo、形象融合到下拉刷新中,可以很好的把品牌傳遞給用戶;把產品的特性通過場景化的方式運用到下拉刷新給用戶趣味性讓用戶對品牌產生更好的印象,提升使用率。
3. 「閑魚」無網絡下的人性化設計
【使用場景】
用戶在瀏覽商品時,由于網絡不穩定給出提示,方便用戶及時了解無法查看的原因。
【設計思考】
1)設計方案
- 在瀏覽的過程中突然斷網,會通過toast提示「當前無網絡」,讓用戶及時了解網絡情況;
- 點擊已緩存數據進入,以品牌形象+語言指引開啟網絡設置,點擊進入手機設置界面,幫助用戶定位問題解決網絡問題;
- 點擊未成功緩存數據進入,直接品牌形象+趣味語言提示,減輕用戶在無網絡下的挫敗感,同時加深用戶品牌形象。
2)思考總結
- 在無網絡的情況下,點擊已緩存數據進入指引用戶開啟網絡設置,考慮到進入詳情頁存在下單的概率,指引開啟網絡,提高商品的下單率,也讓用戶注意力轉移到如何解決問題忽略網絡原因造成的挫敗心理;
- 點擊未加載完成的數據進入下單的概率不大,通過帶著淚水抱著枕頭的品牌形象就像犯錯的小孩提示無網絡,通過這種情感化的設計讓用戶減少內心的挫敗感,同時加深產品的印象。
4. 「FIMO」模擬真實相機的換膠卷
【使用場景】
在使用FIMO拍照時,切換膠卷進行照片風格的變換,通過頁面轉場提示,方便用戶及時了解切換過程。
【設計思考】
1)設計方案
點擊相機右下角的膠卷縮略圖,緊接著機蓋打開可以看到膠卷,再點擊膠卷可以選擇接下來使用的膠卷機蓋蓋上,整個換膠卷的過程模擬實物相機換膠卷的操作,很符合產品的特性,真實的操作體驗讓用戶留下深刻的印象,提升產品使用率。
2)思考總結
目前大部分應用通過移入、淡化的方式作為頁面轉場,但是對于需要個性化的產品需要結合產品特性進行頁面轉場的設計,FIMO是一款真實還原膠卷相機的應用,整體風格都是擬物化的設計,在切換膠卷的頁面轉場設計成相機開蓋的形式,延續了膠卷相機的風格,給用戶心理留下深刻印象。
5. 「宜家家居」幽默極簡的空狀態
【使用場景】
首次使用宜家app時,購物車、收藏等頁面都沒有內容,通過幽默的文案和極簡的圖標進行提示,告知用戶接下來的操作。
【設計思考】
1)設計目標
針對用戶:讓用戶了解當前狀態以及接下來的操作;
針對產品:通過統一的風格和幽默的文案,加深產品在用戶心中的印象。
2) 設計方案
- 購物袋頁面空狀態下,通過購物袋的形象、幽默的文案和操作按鈕來提示,購物袋繩子和孔組合成一個笑臉,按鈕「探索家居靈感」給用戶靈活、自由感,指引用戶挑選滿意的家居。
- 消息為空的情況下,通過消息的圖標+「在信息爆炸的時代,這里格外寧靜」文藝的文案進行提示,拉近與用戶的距離。
本文由 @園園 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自 Unsplash,基于CC0協議
- 目前還沒評論,等你發揮!