身為產(chǎn)品經(jīng)理,實(shí)在很佩服這9個(gè)“進(jìn)度條”設(shè)計(jì)!值得收藏
相信大家都在APP中遇到過“進(jìn)度條”,清晰可見的進(jìn)度能夠讓用戶感知等待的時(shí)間,降低用戶體驗(yàn)不適感?!斑M(jìn)度”對(duì)于APP而言,不僅僅承載了用戶信息,也是引導(dǎo)用戶執(zhí)行的導(dǎo)向。本文總結(jié)了一些關(guān)于進(jìn)度條的案例,分享給你。
“進(jìn)度”是APP里最常見又挺重要的模塊,因?yàn)樗粌H承載著了用戶在時(shí)間和行為上的操作記錄,更是引導(dǎo)用戶完成各種目標(biāo)的條件之一。
因此帶大家看下有哪些“進(jìn)度”上的小案例,給你的工作需求、作品集提供靈感來源~
01 等待過程換成領(lǐng)取紅包
案例簡介:在花小豬里等待司機(jī)接單時(shí),下方會(huì)展示【領(lǐng)取紅包】的進(jìn)度條,等待時(shí)間越久,得到的紅包越多越大。
解決問題:用紅包來緩解用戶的等待情緒,降低因等待時(shí)間過長 而「取消打車」的意愿與漏斗,促使用戶繼續(xù)等車
創(chuàng)造價(jià)值:促進(jìn) 訂單成交率和用戶好感度的提升。
案例精髓總結(jié):學(xué)會(huì)思考通過「停留時(shí)間」判斷用戶訴求/引導(dǎo)用戶行為。
其他思考:如果在等待過程中凌冷一倆個(gè)紅包,后面師傅又臨時(shí)取消訂單了。此時(shí)得到的紅包是否會(huì)收回?或者有使用條件。
02 用進(jìn)度條鼓勵(lì)用戶輸入
案例簡介:在美團(tuán)上評(píng)價(jià)某服務(wù)時(shí),會(huì)以進(jìn)度條的方式鼓勵(lì)用戶更多評(píng)價(jià):根據(jù)【輸入文字?jǐn)?shù)量】而動(dòng)態(tài)展示距離【獲38積分進(jìn)度】。當(dāng)達(dá)到38積分后,再輸入文字而無配圖時(shí),進(jìn)度條的加載速度會(huì)變慢,直到用戶配上圖片時(shí)才能獲取138積分。
解決問題:通過進(jìn)度條的變化與積分獎(jiǎng)勵(lì)提示,引導(dǎo)用戶輸入更多評(píng)價(jià),為后續(xù)其他用戶看到更多真實(shí)、可參考的評(píng)價(jià)內(nèi)容。
創(chuàng)造價(jià)值:促進(jìn) 優(yōu)質(zhì)/有效評(píng)價(jià)的增長。
案例精髓總結(jié):意外的贈(zèng)品/福利 可提升用戶積極性 or 促進(jìn)產(chǎn)品目標(biāo)的實(shí)現(xiàn)。
其他思考:運(yùn)用了「系統(tǒng)狀態(tài)可見性原則」:讓用戶知道【自己在做什么、系統(tǒng)在做什么、處在系統(tǒng)的什么位置等】,并在適當(dāng)?shù)臅r(shí)間內(nèi)做出適當(dāng)?shù)姆答佭\(yùn)用了。
03 用殘缺圖形引導(dǎo)流程
案例簡介:在谷歌日歷創(chuàng)建某個(gè)目標(biāo)時(shí),每到一個(gè)步驟時(shí)下方的圖形都只會(huì)顯示一部分。只有完成全部步驟,該圖形才會(huì)完整地顯示出來,引導(dǎo)用戶創(chuàng)建完整內(nèi)容以看到完整圖形,特別地“雞賊”。
解決問題:通過殘缺的圖形勾起用戶好奇心,引導(dǎo)用戶創(chuàng)建完整內(nèi)容以看到完整圖形,減少流失,增強(qiáng)產(chǎn)品趣味性。
創(chuàng)造價(jià)值:提升用戶對(duì)產(chǎn)品理解和APP易用性的提升。
案例精髓總結(jié):視覺元素也能跟隨進(jìn)度逐步顯示,慢慢勾起用戶好奇心。
其他思考:運(yùn)用了「系統(tǒng)狀態(tài)可見性原則」:讓用戶知道【自己在做什么、系統(tǒng)在做什么、處在系統(tǒng)的什么位置等】,并在適當(dāng)?shù)臅r(shí)間內(nèi)做出適當(dāng)?shù)姆答佭\(yùn)用了。
04 可視化的等級(jí)進(jìn)度
案例簡介:在騰訊視頻上喜歡、守護(hù)某個(gè)愛豆,可以看到會(huì)以【女生奔跑】的動(dòng)畫形象來表示當(dāng)前的粉絲值,將對(duì)愛豆的守護(hù)進(jìn)度可視化出來,特別好玩。
解決問題:有效地傳達(dá)出粉絲對(duì)愛豆的守護(hù)心理,讓用戶感知當(dāng)前守護(hù)進(jìn)度,給用戶帶來驚喜并拉進(jìn)之間的距離。
創(chuàng)造價(jià)值:促進(jìn) 產(chǎn)品趣味性與用戶好感度的提升。
案例精髓總結(jié):?UI與動(dòng)效的設(shè)計(jì)需要符合目標(biāo)用戶的群體特征。
其他思考:
- 粉絲不知女生才有,人物形象的設(shè)計(jì)可允許男粉用戶切換性別
- 人物形象的設(shè)計(jì)與“粉絲”沒啥關(guān)系,體現(xiàn)不出粉絲應(yīng)有“開心、瘋狂、應(yīng)援”等元素,更像一個(gè)健康跑步達(dá)人。
05 文章進(jìn)度「可視化」
案例簡介:在電腦上打開boss直聘的文章鏈接,滑動(dòng)屏幕時(shí)就會(huì)出現(xiàn)一個(gè)【文章進(jìn)度條】,跟隨用戶的閱讀位置而變化長度。
解決問題:用戶一眼就能知道當(dāng)前的閱讀進(jìn)度、知道還有多久就能讀完該文章,減少操作與認(rèn)知負(fù)荷。
創(chuàng)造價(jià)值:促進(jìn)用戶的閱讀效率與觀看體驗(yàn)的提升。
案例精髓總結(jié):當(dāng)信息復(fù)雜+數(shù)量巨大時(shí),必須給予用戶清晰的分類與狀態(tài)、位置指引。
其他思考:這個(gè)雖然是用微信的瀏覽器加載的,但是里面的內(nèi)容確是boss直聘自定義開發(fā)的。而且聽說原本的設(shè)計(jì)花花綠綠的,是boss直聘的老板說改的。
06 自動(dòng)恢復(fù)上次閱讀進(jìn)度
案例簡介:在微信上查看某篇公眾號(hào)文章,當(dāng)你有事要返回上一頁,然后又重新點(diǎn)擊閱讀文章時(shí):會(huì)自動(dòng)加載至上次退出前的頁面位置,幫助用戶恢復(fù)上次的閱讀進(jìn)度,便于繼續(xù)閱讀下去,徹底解放雙手。
解決問題:免去用戶重新or手動(dòng)查找上次的閱讀進(jìn)度,減少操作與認(rèn)知負(fù)荷,突顯產(chǎn)品的個(gè)性化服務(wù)。
創(chuàng)造價(jià)值:促進(jìn) 文章閱讀效率與產(chǎn)品體驗(yàn)的提升。
案例精髓總結(jié):盡量減少需要用戶記憶的事情/行動(dòng),提供「再認(rèn)」上的解決方案。
其他思考:如何判斷是重新加載or恢復(fù)閱讀進(jìn)度,是時(shí)間為分界點(diǎn)? 當(dāng)離開文章小于5分鐘則恢復(fù)閱讀進(jìn)度,大于或扥等于5分鐘則重新加載。
07 有吉祥物的banner進(jìn)度
案例簡介:騰訊動(dòng)漫的banner進(jìn)度條設(shè)計(jì)與品牌的吉祥物結(jié)合在一起,banner切換的時(shí)候底部的小烏鴉會(huì)跟著一起移動(dòng),特別有意思。
解決問題:降低banner給用戶的抵抗情緒,通過這種小細(xì)節(jié)提升品牌形象(特別是對(duì)于新用戶來說),突顯產(chǎn)品的個(gè)性化服務(wù)與對(duì)用戶的重視程度。
創(chuàng)造價(jià)值:促進(jìn) 產(chǎn)品趣味性與用戶好感度的提升。
案例精髓總結(jié):任何頁面組件/樣式都可融入品牌設(shè)計(jì)。
其他思考:運(yùn)用了「趣味原則」:系統(tǒng)不應(yīng)該是冷冰冰的,應(yīng)該給用戶帶來樂趣和溫度。
08 分散注意力的loading
案例簡介:王者榮耀在即將對(duì)戰(zhàn)的loading里,左邊會(huì)顯示所選英雄的使用技巧,右邊會(huì)顯示各個(gè)隊(duì)友的頭像與小拳頭動(dòng)效。為一觸即發(fā)的比賽打氣加油,特別有意思。
解決問題:分散用戶注意力,減少因加載過久的焦慮和抵觸情緒,同時(shí)做好雨后的「戰(zhàn)前動(dòng)員」工作,增加團(tuán)隊(duì)配合默契。
創(chuàng)造價(jià)值:提升產(chǎn)品的趣味性和用戶好感度。
案例精髓總結(jié):UI與動(dòng)效的設(shè)計(jì)需要符合產(chǎn)品調(diào)性、用戶特征/訴求。
其他思考:分析/檢測(cè)用戶當(dāng)下的情緒/心理,并做出相對(duì)應(yīng)的設(shè)計(jì)。
09 越來越快的進(jìn)度動(dòng)畫
案例簡介:去哪兒旅行之前的loading動(dòng)畫是一只行走的小駱駝,隨著加載時(shí)間越長,駱駝的行走速度會(huì)越來越快,最后飛奔起來。避免過長的加載時(shí)間給用戶帶來焦慮情緒,緩解用戶情緒。
解決問題:避免過長的加載時(shí)間給用戶帶來焦慮情緒,緩解用戶情緒。同時(shí)通過這種小細(xì)節(jié)提升用戶對(duì)產(chǎn)品的印象(特別是對(duì)于新用戶來說)。
創(chuàng)造價(jià)值:減少頁面/訂單流失和用戶焦慮感。
案例精髓總結(jié):用戶等待時(shí)間越長,越需要合理的設(shè)計(jì)or福利 減少焦慮。
其他思考:這是「時(shí)間」維度下的跟隨變化而變化,可以思考自家產(chǎn)品是否有特定維度下的跟隨變化。
專欄作家
和出此嚴(yán),微信公眾號(hào):和出此嚴(yán),人人都是產(chǎn)品經(jīng)理專欄作家。一枚在鵝廠成長中的“90后老干部”,主產(chǎn)各種接地氣的交互/產(chǎn)品干貨。以做產(chǎn)品的方式,寫好每一篇文章。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
美團(tuán)的評(píng)論獎(jiǎng)勵(lì)倒感覺不大好,1. 為獎(jiǎng)勵(lì)水評(píng)論,可能導(dǎo)致無效評(píng)論占比增加,為屏蔽無效評(píng)論又會(huì)花費(fèi)成本;2. 約束感,15字限制雖少但相對(duì)沒有應(yīng)該也會(huì)無形給到用戶評(píng)價(jià)壓力,圖片亦然。
推薦一個(gè)我做的學(xué)習(xí)網(wǎng)站:
有蛋案例 youdananli.com
有多個(gè)大廠、各個(gè)行業(yè)里有意思的設(shè)計(jì)案例,還有近百條產(chǎn)品/設(shè)計(jì)知識(shí)方法、理論模型
感興趣的可以看看
花小豬的那個(gè)在等待過程中獲得紅包,確實(shí)有創(chuàng)意