1. 六大用戶體驗(yàn)要素:有用性化漆、可見(jiàn)性估脆、易感知、易用性座云、容錯(cuò)性疙赠、一致性
2. 有用性:產(chǎn)品是功能的集合付材,功能的存在意義在于解決用戶的痛點(diǎn),滿足用戶的需求圃阳。
當(dāng)用戶進(jìn)入一個(gè)產(chǎn)品頁(yè)面時(shí)厌衔,他會(huì)對(duì)這個(gè)頁(yè)面中的內(nèi)容有一個(gè)心理預(yù)期,這個(gè)心理預(yù)期就是他的需求捍岳,我們要盡量滿足富寿。
KANO模型:基本型需求、期望型需求和魅力型需求锣夹。
3. 可見(jiàn)性:建立有效的產(chǎn)品導(dǎo)航體系页徐,明確產(chǎn)品的功能路徑,讓用戶找到并使用功能银萍。
信息架構(gòu)的作用:幫助用戶找到期望的功能变勇。
搭建合理的信息架構(gòu)注意點(diǎn):平衡好信息架構(gòu)的廣度與深度、注重信息架構(gòu)的邏輯性贴唇。
廣度:指頁(yè)面的長(zhǎng)度搀绣,盡量保持在1.5屏以內(nèi),因?yàn)轫?yè)面超過(guò)一屏后滤蝠,頁(yè)面的曝光量會(huì)急劇下降豌熄。
深度:指頁(yè)面的層級(jí)。層級(jí)越深物咳,用戶的查找路徑越長(zhǎng)。
平衡好廣度和深度蹄皱,意味著避免出現(xiàn)“寬而淺”和“窄而深”的問(wèn)題览闰。
邏輯性:信息架構(gòu)的設(shè)計(jì)要符合用戶的邏輯認(rèn)知。例如巷折,大多電影院都在商場(chǎng)頂層压鉴,用戶的心理預(yù)期是電影院就應(yīng)該在頂層。如果你把電影院安排在二樓锻拘,這就是不符合邏輯油吭。不要挑戰(zhàn)用戶的固有認(rèn)知。
跳轉(zhuǎn)動(dòng)作署拟、快捷入口均可減少用戶的操作路徑婉宰,降低用戶記憶成本。
浮動(dòng)類入口的優(yōu)點(diǎn)是吸引用戶注意力推穷,缺點(diǎn)是會(huì)遮擋界面內(nèi)容心包,可能傷害用戶體驗(yàn),讓用戶隨意更改浮窗位置可以避免遮擋內(nèi)容馒铃。
4. 易感知:提升用戶對(duì)信息的感知效率蟹腾,讓用戶在短時(shí)間內(nèi)獲取到他們期望的信息或者我們希望他們感知到的信息痕惋。
如何實(shí)現(xiàn)易感知?信息優(yōu)先級(jí)娃殖、縮短路徑值戳、信息可視化、化繁為簡(jiǎn)炉爆、隱藏機(jī)制
信息優(yōu)先級(jí):梳理信息優(yōu)先級(jí)堕虹,通過(guò)合理運(yùn)用位置、間距叶洞、配色鲫凶、形狀和陰影等視覺(jué)要素,建立信息層級(jí)實(shí)現(xiàn)要素區(qū)分衩辟,讓用戶快速看到感興趣或我們希望他們關(guān)注的信息螟炫。
比如,近幾年B站從小眾向大眾化發(fā)展艺晴,用戶量增加昼钻,原先以二次元為主的內(nèi)容不能滿足新用戶的需求,需要不斷擴(kuò)展內(nèi)容類型封寞,這就需要更多不同賽道的創(chuàng)作者添磚加瓦然评。在改版后,B站在導(dǎo)航欄上添加并著重突出了發(fā)布視頻的按鈕狈究,本意上也是想要引導(dǎo)用戶發(fā)布視頻碗淌。
再比如,首頁(yè)是用戶進(jìn)入產(chǎn)品的必經(jīng)之路抖锥,具有非常大的流量?jī)r(jià)值亿眠,因此通常在首頁(yè)設(shè)置banner也是利用了位置、配色等來(lái)加強(qiáng)廣告或活動(dòng)的宣傳磅废,讓用戶看到我們想讓他看的纳像,比如支付寶的五福活動(dòng)占了接近三分之一屏幕的位置拯勉,用戶想不看到都難竟趾。
縮短路徑:讓用戶可以更好地獲取信息宫峦,我們要縮短信息的獲取路徑岔帽。
比如,在下面的頁(yè)面中斗遏,用戶想要查看賬戶的昨日收益山卦,只需要1個(gè)步驟即可完成(點(diǎn)擊“我的”),而不需要再點(diǎn)擊賬戶總覽,進(jìn)入下一個(gè)頁(yè)面才能查詢昨日收益账蓉,這樣就降低了用戶獲取信息的成本枚碗。
再比如,對(duì)比一下美圖秀秀和醒圖的選圖流程:
美圖秀秀的流程是用戶點(diǎn)擊“美化圖片”铸本,跳轉(zhuǎn)到”最近項(xiàng)目“這個(gè)相冊(cè)里肮雨,這里直接跳轉(zhuǎn)到“最近相冊(cè)”,而不是先讓用戶選擇相冊(cè),可以理解為用戶一般都是在有新照片時(shí)才會(huì)有修圖需求。
但有一些愛(ài)拍照的用戶开皿,一般都是一次性拍十幾張甚至上百?gòu)堈掌缓笤谶@些照片中選出自己滿意的照片波丰,并將其收藏。再打開(kāi)修圖軟件在“個(gè)人收藏”這個(gè)相冊(cè)中選擇已經(jīng)篩選過(guò)的照片進(jìn)行修圖舶得。
對(duì)于這類用戶掰烟,他們?cè)诖蜷_(kāi)美圖秀秀的“美化功能”后,還需要再退出當(dāng)前相冊(cè)沐批,重新進(jìn)入“個(gè)人收藏”相冊(cè)纫骑。這個(gè)過(guò)程能不能再優(yōu)化一下呢?
看看醒圖的做法九孩,醒圖將相冊(cè)和照片合并在同一個(gè)頁(yè)面先馆,用戶可通過(guò)左右滑動(dòng)頁(yè)面上方的相冊(cè)欄更改相冊(cè),然后上下滑動(dòng)選擇相冊(cè)里的照片躺彬,對(duì)比美圖秀秀和醒圖的選圖流程煤墙,醒圖不僅縮短了操作路徑,而且讓用戶的拇指始終保持在屏幕的容易區(qū)和伸展區(qū)宪拥。個(gè)人認(rèn)為醒圖的選圖流程更勝一籌番捂。
信息可視化:字不如表,表不如圖”江解。用戶對(duì)于具象元素(表格、插畫(huà)徙歼、icon和圖像等)的感知能力更強(qiáng)犁河,具象元素也更能傳遞情緒。
比較常見(jiàn)的是放大鏡表示搜索框魄梯,信封表示消息桨螺。
作者還舉了個(gè)例子:朋友圈曬圖獲得的點(diǎn)贊和評(píng)論量高于分享歌曲和文章,其中一個(gè)原因是信息的可讀性酿秸,點(diǎn)贊和評(píng)論的前提是能明白動(dòng)態(tài)的意思灭翔,對(duì)于照片,一秒鐘就能明白其含義辣苏,但對(duì)于歌曲和文章肝箱,需要花更長(zhǎng)的時(shí)間來(lái)理解哄褒,所以評(píng)論關(guān)于歌曲和文章的朋友圈所需的時(shí)間成本太高。
化繁為簡(jiǎn):“一個(gè)頁(yè)面煌张,一個(gè)任務(wù)”原則呐赡,更利于用戶消化信息。
比如骏融,新用戶注冊(cè)賬號(hào)時(shí)填寫(xiě)基本信息链嘀,一般都是一個(gè)頁(yè)面填寫(xiě)一個(gè)信息,而不是所有信息都在一個(gè)頁(yè)面內(nèi)完成档玻,否則用戶可能望而卻步怀泊,發(fā)現(xiàn)要填的東西很多而放棄注冊(cè)。另外误趴,即便是一個(gè)頁(yè)面一個(gè)任務(wù)霹琼,最好也要讓用戶知道他所處的任務(wù)步驟位置,不然用戶無(wú)法預(yù)知還要填多少信息才能完成冤留,也可能因此失去耐心放棄注冊(cè)碧囊。
隱藏機(jī)制:某個(gè)場(chǎng)景下用戶對(duì)于特定功能的訴求很低,可以考慮隱藏這個(gè)功能纤怒。
從用戶的行為去判斷用戶的心理狀態(tài)可能會(huì)帶來(lái)不一樣的收獲糯而。例子:在網(wǎng)易云音樂(lè)APP中,如果用戶點(diǎn)贊一首歌泊窘,就會(huì)出現(xiàn)一個(gè)小動(dòng)畫(huà)來(lái)引導(dǎo)用戶去分享熄驼。因?yàn)橐坏┯脩酎c(diǎn)贊了,就說(shuō)明用戶喜歡這首歌烘豹,系統(tǒng)就會(huì)抓住這個(gè)契機(jī)來(lái)引導(dǎo)用戶瓜贾,此時(shí)用戶的分享意愿會(huì)更高。類似的例子還有B站看視頻截圖提示分享携悯、小紅書(shū)點(diǎn)贊提示設(shè)置消息提醒祭芦。
5. 易用性
操作流程:用戶為了達(dá)到某個(gè)目標(biāo)所需要經(jīng)歷的操作和場(chǎng)景轉(zhuǎn)換。
優(yōu)化操作流程憔鬼、提升易用性兩種方式:優(yōu)化交互方式龟劲,減少不必要的場(chǎng)景轉(zhuǎn)換(頁(yè)面)
減少操作流程:讓用戶在更少的操作步驟下完成操作,其實(shí)就是提升信息的錄入和反饋效率轴或。
比如昌跌,拍照識(shí)別銀行卡號(hào),性別錄入采用單選框而不是下拉列表照雁。
此外蚕愤,評(píng)估每個(gè)操作的重要程度和風(fēng)險(xiǎn)性也可以減少操作步驟。有些操作步驟的冗余是故意防止用戶誤操作。比如對(duì)一些風(fēng)險(xiǎn)較大或不可逆的操作萍诱,系統(tǒng)都需要用戶二次確認(rèn)悬嗓。但是對(duì)于一些風(fēng)險(xiǎn)性不是很高的操作,大膽地減少操作步驟更加合適砂沛。
交互成本兩大類:移動(dòng)距離烫扼、落點(diǎn)范圍。包括拇指移動(dòng)范圍碍庵、眼球視覺(jué)信息處理映企、頁(yè)面設(shè)計(jì)一致性原則。
減少場(chǎng)景轉(zhuǎn)換:如果將頁(yè)面刪除后静浴,不影響當(dāng)前的操作流程堰氓,說(shuō)明是不必要的場(chǎng)景轉(zhuǎn)換。
合理的限制:不要讓用戶選擇苹享,不要讓用戶思考双絮。
選擇場(chǎng)景兩大類:殊途同歸和分道揚(yáng)鑣。
殊途同歸:從A出發(fā)得问,遇到一個(gè)岔路口囤攀,告訴你現(xiàn)在有3條路可以選,不管選擇哪條都會(huì)到達(dá)B宫纬。
分道揚(yáng)鑣:從A出發(fā)焚挠,遇到一個(gè)岔路口,告訴你現(xiàn)在有3條路可以選漓骚,選擇不同的路會(huì)到達(dá)不同的目的地B蝌衔、C、D
限制用戶的選擇場(chǎng)景蝌蹂,不是不讓用戶選擇噩斟,而是選擇后置,不讓用戶過(guò)早地做出選擇孤个。最常見(jiàn)的例子就是登錄賬號(hào)剃允,一般有手機(jī)號(hào)、郵箱齐鲤、微信硅急、QQ號(hào)登錄這幾種方式,但是一般是默認(rèn)為手機(jī)號(hào)登錄佳遂,用戶不想手機(jī)號(hào)登錄再另選其他方式登錄,這樣的設(shè)置對(duì)于沒(méi)有進(jìn)行二次選擇的用戶來(lái)說(shuō)等于減少了一個(gè)步驟撒顿。
定制化:給用戶權(quán)限丑罪,讓他們根據(jù)自己的實(shí)際需求調(diào)整產(chǎn)品的頁(yè)面布局、內(nèi)容模塊和視覺(jué)樣式等。這樣也可減少場(chǎng)景轉(zhuǎn)換吩屹。
例如跪另,支付寶用戶可以自行添加常用的功能,這樣就不需要每次都去相應(yīng)的模塊中找煤搜,這樣的定制化處理減少了用戶的操作步驟免绿。
6. 容錯(cuò)性
容錯(cuò)性三個(gè)階段:引導(dǎo)、報(bào)錯(cuò)和解決擦盾。首先通過(guò)簡(jiǎn)潔嘲驾、易懂的引導(dǎo)來(lái)幫助用戶規(guī)避那些錯(cuò)誤;當(dāng)用戶不得已犯錯(cuò)之后迹卢,會(huì)給予提示辽故,告知用戶犯錯(cuò)的原因及解決方案。
引導(dǎo):消減信息的不對(duì)稱性腐碱,讓用戶做出正確的決策誊垢。
常見(jiàn)例子:常見(jiàn)例子:新手引導(dǎo)、輸入框中的輸入提示症见。
另外喂走,會(huì)影響用戶做決策的因素必須要及時(shí)反饋給用戶。
如果對(duì)用戶足夠了解谋作,在用戶錄入信息時(shí)還可以設(shè)置合理的默認(rèn)值芋肠。因?yàn)閷?duì)用戶來(lái)說(shuō),填寫(xiě)信息永遠(yuǎn)都不是一件有趣的事情瓷们,設(shè)置合理的默認(rèn)值可以節(jié)省用戶的操作時(shí)間业栅,更能避免用戶犯錯(cuò)。
報(bào)錯(cuò):包括報(bào)錯(cuò)方式谬晕、報(bào)錯(cuò)時(shí)機(jī)
如何選擇合適的報(bào)錯(cuò)方式:重要性碘裕、字?jǐn)?shù)和指向性。
對(duì)于一些非常重要攒钳、必須保證用戶可以看到的報(bào)錯(cuò)信息帮孔,最好不要使用Toast。(Toast承載的信息量少不撑,且用戶可能禁用Toast)
文字文兢、顏色提示代替彈框提示可以減少用戶操作步驟。
解決:報(bào)錯(cuò)文案要簡(jiǎn)潔焕檬、干練姆坚、概括性強(qiáng)。
如果可以給出具體的解決方案实愚,報(bào)錯(cuò)原因其實(shí)并沒(méi)有那么重要兼呵。比如兔辅,由于系統(tǒng)維護(hù)導(dǎo)致從晚上22點(diǎn)到次日8點(diǎn)無(wú)法提供服務(wù),則可以直接簡(jiǎn)化成“系統(tǒng)維護(hù)中击喂,今晚22點(diǎn)至次日8點(diǎn)暫停服務(wù)”维苔。用戶不在乎具體是什么原因,他們?cè)诤醯氖鞘裁磿r(shí)候可以恢復(fù)服務(wù)懂昂。
7. 一致性
實(shí)現(xiàn)一致性原則兩階段:發(fā)現(xiàn)共有要素介时,將共有元素植入產(chǎn)品設(shè)計(jì)中。
追求一致性要適度凌彬,過(guò)度追求一致性就會(huì)損害易用性沸柔。