談到我們生活中的那些產(chǎn)品和服務(wù),它們常伴于我們左右,影響著我們的生活,與我們處處相關(guān)聯(lián),同樣的這些產(chǎn)品也會(huì)影響我們的感受,我們常常在使用時(shí)會(huì)感到喜悅,也偶爾會(huì)在使用另一些產(chǎn)品時(shí)會(huì)感到不舒服,這些感受都是由產(chǎn)品和服務(wù)的體驗(yàn)直接決定的。一個(gè)好的產(chǎn)品體驗(yàn)使我們的生活變得簡(jiǎn)單而又美好,而那些糟糕的產(chǎn)品體驗(yàn)又讓我們的生活變得復(fù)雜而又煩惱。
如果一個(gè)產(chǎn)品和服務(wù)是絕對(duì)的技術(shù)壟斷,只有你有,其他人沒有,并且人們需要它,即使產(chǎn)品交互設(shè)計(jì)和用戶體驗(yàn)做得再差,只要功能達(dá)到了,也會(huì)有人使用,原因是非你不可,沒有選擇。而技術(shù)實(shí)現(xiàn)相同、產(chǎn)品滿足需求相同的前提下,產(chǎn)品的用戶體驗(yàn)決定了它是否能脫穎而出,被人們選擇并長(zhǎng)期使用。
而當(dāng)我們談?wù)撘粋€(gè) APP 產(chǎn)品時(shí),暫且不談極端的偏好情況,比如「就好看,不管它好不好用,我非它不用」這樣的情況…..
我們作為用戶關(guān)心的往往是這個(gè)產(chǎn)品好用嗎?功能復(fù)雜嗎?而不是這個(gè)產(chǎn)品用戶界面顏色好看嗎?交互的動(dòng)效酷炫嗎?
決定一個(gè)產(chǎn)品好不好用,能不能長(zhǎng)期使用都是用戶體驗(yàn)直接決定的。
用戶體驗(yàn)關(guān)注的是在滿足用戶需求的同時(shí)帶給用戶美好的感受。
在接下來(lái)的探討中,我們會(huì)談到「尼爾森十大原則」,這十大原則是具體而又全面的用戶體驗(yàn)可行性檢驗(yàn)方法。
接下來(lái)要談到的用戶體驗(yàn)?zāi)繕?biāo),不會(huì)原封不動(dòng)的照搬「尼爾森十大原則」,因?yàn)槟崂蠋熓菑?web 設(shè)計(jì)提出的十大可用性原則,我們要結(jié)合的是目前移動(dòng)互聯(lián)網(wǎng)的特點(diǎn),然后在「尼爾森十大原則」的結(jié)構(gòu)下探討在用戶體驗(yàn)上達(dá)到的目標(biāo)。
一、可見原則
保持界面的狀態(tài)可見,變化可見,內(nèi)容可見。
當(dāng)我們使用功能時(shí),產(chǎn)品會(huì)對(duì)我們的功能做出即時(shí)反饋,狀態(tài),變化,內(nèi)容這些都會(huì)隨著我們操作而改變。
不要讓用戶出現(xiàn)這樣的疑惑,「我切換了功能頁(yè)面,誒,現(xiàn)在我在‘我的’還是在‘主頁(yè)’?」 「怎么搞的?點(diǎn)了沒有反應(yīng),我不知道我到底點(diǎn)了還是沒點(diǎn)……」
下面的例子,很好的符合了可見原則。
例一:
我在使用微信時(shí),切換了下方的頁(yè)面功能,當(dāng)前所在的頁(yè)面圖標(biāo)亮起,其它小圖標(biāo)也隨即熄滅,狀態(tài)給出了反饋,內(nèi)容也變化了。如下圖:
例二:
在微博里,我給「索尼中國(guó)」點(diǎn)了贊,左下角的小拇指立刻亮起,給出了反饋,然后給出了一個(gè)大拇指動(dòng)效,我看見了我點(diǎn)的贊。這樣的設(shè)計(jì)用反饋告訴我,我做了什么動(dòng)作,然后出現(xiàn)了什么結(jié)果。如下圖:
例三:
在筆記應(yīng)用里,我們?cè)谑褂猛较吕墓δ軙r(shí)界面也給出了即時(shí)的反饋,這樣的設(shè)計(jì)告訴我們,界面現(xiàn)在是什么狀態(tài),現(xiàn)在在干嘛,在整個(gè)功能的變化過(guò)程中我們都能看到對(duì)應(yīng)的文字描述。如下圖:
二、貼近場(chǎng)景原則
功能和服務(wù)貼近用戶使用的場(chǎng)景,符合當(dāng)前場(chǎng)景用戶的體驗(yàn)。
產(chǎn)品的功能和服務(wù)應(yīng)該貼近真實(shí)世界,讓信息更自然,邏輯上也更容易被用戶理解。
我們?cè)谥暗奈淖种刑岬竭^(guò)看待需求的關(guān)聯(lián)性思維,指的就是功能要考慮用戶的使用場(chǎng)景。
例一:
這樣的界面和我們?nèi)粘K玫?app 不同,很多的文字信息,都是關(guān)于地點(diǎn)和距離信息的,整個(gè)頁(yè)面只有兩個(gè)功能「搶單」和「刷新」。如下圖:
但是功能一旦考慮到場(chǎng)景,這樣的頁(yè)面設(shè)計(jì)對(duì)用戶「騎手小哥」可以說(shuō)是非常友好了。騎手小哥大部分時(shí)間都是騎著摩托到處送外賣,看手機(jī)的同時(shí)就需要看到最重要的信息,例如時(shí)間、地點(diǎn)、距離、商家和目的地的名稱,只有這樣的頁(yè)面設(shè)計(jì)才能讓騎手小哥對(duì)重要的信息一目了然。
例二:
我們?cè)谏钪校紩?huì)聽到這樣的聲音:「收到對(duì)方5元轉(zhuǎn)賬」這也是考慮到場(chǎng)景的設(shè)計(jì)。商家經(jīng)常忙于手頭的事情,通常需要通過(guò)你手機(jī)上的交易記錄來(lái)確認(rèn)你是否付了錢,而這樣功能的設(shè)計(jì),商家即使在忙著手頭的事情依然能通過(guò)產(chǎn)品功能發(fā)出「收到5元轉(zhuǎn)賬」的聲音來(lái)確認(rèn)已經(jīng)收到你的錢了,這樣的設(shè)計(jì)對(duì)于商家和消費(fèi)者都非常友好,方便的不止一點(diǎn)點(diǎn),體現(xiàn)了「貼近場(chǎng)景原則」。
如下圖:(左)微信和(右)支付寶的「收款聲音提醒功能」設(shè)置頁(yè)面。
三、可控性原則
在使用產(chǎn)品時(shí)了解和掌控當(dāng)前頁(yè)面。如果用戶誤操作,可以隨時(shí)撤銷,用戶在使用產(chǎn)品時(shí)足夠自由。
例一:
我們用微信和對(duì)方聊天時(shí),當(dāng)我們寫了很多字,發(fā)出去時(shí)卻發(fā)現(xiàn)其中有錯(cuò)誤,這時(shí)我們可以使用微信的撤回功能,體驗(yàn)更好的是,撤回消息旁邊有「重新編輯」功能,可以讓之前編輯的文本回到對(duì)話框重新編輯再發(fā)送。如下圖:
「重新編輯」的功能設(shè)計(jì)同樣也符合「靈活高效原則」后面我們會(huì)講到。
例二:
用戶經(jīng)常會(huì)在手機(jī)上使用某個(gè) app
的時(shí)候卡了,我們經(jīng)常說(shuō):「卡死了」,這時(shí)我們需要有方便的退出操作,而蘋果手機(jī)的 home
鍵,安卓手機(jī)經(jīng)典小三樣「返回,主頁(yè),多任務(wù)」很好的符合可控性原則。無(wú)論用戶當(dāng)前在哪個(gè)頁(yè)面,遇到什么問(wèn)題,不知該怎么辦時(shí),只需點(diǎn)按這些功能,即可退出或回到桌面,心里會(huì)感到很舒服,體驗(yàn)很好。
下圖為:(右)蘋果的 home 鍵特寫,(左)安卓「返回、主頁(yè)、多任務(wù)」特寫。
而隨著「全面屏」移動(dòng)端的到來(lái),它們也將從手機(jī)里消失,取而代之的人機(jī)交互方式是手勢(shì)操作,比如上滑、下拉、長(zhǎng)按等等。這些手勢(shì)操作將繼續(xù)實(shí)現(xiàn)用戶對(duì)于產(chǎn)品「可控原則」的目標(biāo)。
如下圖:安卓的堅(jiān)果 pro2 和 iOS 的 iPhone x 意味著未來(lái)手機(jī)朝著全面屏的趨勢(shì)發(fā)展。
四、統(tǒng)一性原則
產(chǎn)品要在視覺保持統(tǒng)一,交互保持統(tǒng)一。
不讓用戶在使用產(chǎn)品過(guò)程中因?yàn)榍袚Q了一個(gè)頁(yè)面而感到陌生,要始終在熟悉的環(huán)境下使用功能,減少用戶的識(shí)別成本,用戶才能感到舒適。
在這里先舉一個(gè)反例:
不敢相信這三張用戶界面居然來(lái)自同一個(gè) app。用戶界面里的結(jié)構(gòu)和元素不一樣,沒有統(tǒng)一的視覺風(fēng)格和交互邏輯,每個(gè)頁(yè)面的整體包括圖標(biāo)都不一樣。每切換一個(gè)頁(yè)面,就感覺來(lái)到了一個(gè)新的 app,這樣的做法用戶識(shí)別成本增加,從而感到不舒服,體驗(yàn)自然很糟糕。
如下圖:為某運(yùn)營(yíng)商的 app。
如果在設(shè)計(jì)產(chǎn)品的時(shí)候,只考慮著一味的花里胡哨,讓那些元素和圖標(biāo)以及文本信息風(fēng)格迥異,這樣的做法只會(huì)影響到用戶的視覺和感覺的體驗(yàn)。
談到「統(tǒng)一性原則」,還是得拿微信作為標(biāo)桿,微信的每個(gè)模塊信息的布局都是統(tǒng)一的「圖標(biāo)」加「文本」的設(shè)計(jì)樣式,產(chǎn)品整體色彩也以灰黑色為主調(diào)相對(duì)統(tǒng)一,用戶識(shí)別成本低,一目了然,使用起來(lái)體驗(yàn)很好。如下圖:
在產(chǎn)品設(shè)計(jì)中符合統(tǒng)一性原則,讓用戶在始終熟悉的感覺下體驗(yàn)著不斷變強(qiáng)的產(chǎn)品。
五、防錯(cuò)原則
用貼心的提醒和設(shè)計(jì),防止用戶遇到會(huì)犯錯(cuò)的情況。
好的產(chǎn)品經(jīng)理要隨時(shí)切換傻瓜用戶看待問(wèn)題,產(chǎn)品能不能讓用戶輕松的使用,就像喬布斯老師說(shuō)的:「瞬間成為傻瓜用戶。」假設(shè)新用戶對(duì)你的產(chǎn)品不了解,很多功能和事情不清楚,如果不做好「防錯(cuò)原則」,那么用戶會(huì)經(jīng)常在使用中卡住,最后不耐煩的離產(chǎn)品而去。
例一:
一個(gè)好的符合「防錯(cuò)原則」的設(shè)計(jì)應(yīng)該是怎么樣的呢?比如在使用一個(gè)產(chǎn)品的注冊(cè)頁(yè)面里,只有當(dāng)我們填寫的手機(jī)號(hào)碼格式正確時(shí),功能才可以點(diǎn)擊,相比填寫了信息格式錯(cuò)誤,然后彈出對(duì)話框告訴你「格式錯(cuò)誤請(qǐng)重新填寫」,這樣的設(shè)計(jì)讓用戶提前防止出錯(cuò),相對(duì)更友好。如下圖:
例二:
在微信和微博里編輯內(nèi)容時(shí),如果不小心誤操作按了返回,這時(shí)軟件內(nèi)會(huì)彈出對(duì)話框,微信會(huì)提示你「是否退出此次編輯?」、微博會(huì)提示你「是否將內(nèi)容保存為草稿」,這些設(shè)計(jì)都是為了防止用戶使用產(chǎn)品編輯內(nèi)容時(shí)出錯(cuò),丟失編輯的內(nèi)容造成不愉快的體驗(yàn)。如下圖:
有些產(chǎn)品在用戶使用關(guān)鍵功能時(shí),用戶誤操作退出并沒有防錯(cuò)提示,用戶往往在退出后才意識(shí)到功能沒有完成或內(nèi)容沒有保存成功……用戶都會(huì)莫名其妙 「什么意思,又要重新來(lái)?」 而微信和微博在退出功能時(shí),都會(huì)提示的足夠清楚,并且提供了「取消」這個(gè)解決方案。
六、協(xié)助記憶原則
在需要記憶信息時(shí),產(chǎn)品功能要幫助用戶記憶,信息應(yīng)該是可見可查看的。
例一:
我們?cè)谫?gòu)買東西結(jié)賬時(shí),肯定不希望把之前買的每樣?xùn)|西又在腦海里回憶一遍,這時(shí)我們就需要產(chǎn)品幫助我們記憶這些信息,并且隨時(shí)可見。
比如我們?cè)谔詫氋I東西,在結(jié)賬時(shí)方便我們?cè)俅未_認(rèn)物品的信息,像尺碼、顏色、款式、價(jià)格等等。如下圖:
比如我們訂外賣也是一樣的,不可能一下子記住之前選好的菜品,所以產(chǎn)品也可以隨時(shí)查看你選好的東西,方便用戶再次確認(rèn)。如下圖:
七、簡(jiǎn)約容易原則
這個(gè)原則的要點(diǎn):
第一,產(chǎn)品的界面和功能足夠清晰,簡(jiǎn)單明了,用戶一眼就能發(fā)現(xiàn)自己需要的功能和信息。
第二,功能不復(fù)雜,簡(jiǎn)單易用,而不是那些復(fù)雜又非??犰诺墓δ?。這樣的結(jié)果是用戶不僅不會(huì)用,還會(huì)果斷拋棄產(chǎn)品。
第三,產(chǎn)品的內(nèi)容和文字信息都應(yīng)該簡(jiǎn)易,可讀性強(qiáng),讓用戶一目了然。比如排版不混亂,順著用戶的視覺軌跡。
用戶的視覺習(xí)慣,如圖:
八、幫助和提示原則
在任何時(shí)候,考慮到用戶需要幫助并給予提示。
用戶不是產(chǎn)品設(shè)計(jì)者,在用戶第一次使用產(chǎn)品的時(shí)候,用戶都會(huì)在任何時(shí)候,任何場(chǎng)景下產(chǎn)生疑問(wèn),這時(shí)用戶需要得到幫助,對(duì)用戶最好最方便的方法就是在當(dāng)下給用戶提醒。
例一:
我之前使用的任務(wù)清單 app,在第一次登錄以后,在頁(yè)面中看到各個(gè)功能的提示。
如下圖:
例二:
而像電商產(chǎn)品這樣信息文字和功能服務(wù)繁多,用戶一時(shí)半會(huì)很難全部弄懂,難免會(huì)產(chǎn)生疑問(wèn),而「很好的幫助用戶」對(duì)于這類產(chǎn)品就是一個(gè)至關(guān)重要的事情。
下圖為(左)淘寶和(右)京東的幫助入口,由機(jī)器人和人工客服向用戶提供幫助。
九、容錯(cuò)原則
向用戶提醒犯錯(cuò)的可能,并提供用戶挽回錯(cuò)誤的方法。
當(dāng)你試圖造成錯(cuò)誤的時(shí)候,「容錯(cuò)原則」就會(huì)跳出來(lái)提醒你。
例一:
比如當(dāng)我們要試圖還原手機(jī)的內(nèi)容和設(shè)置,恢復(fù)到出廠設(shè)置時(shí),就先要輸入密碼,然后再次有紅色提醒,iphone 和 android 在這個(gè)設(shè)計(jì)做法是一樣的。如下圖:
例二:
挽回錯(cuò)誤最具代表性的方法就是「撤銷錯(cuò)誤」,很多產(chǎn)品都會(huì)用到這個(gè)方法。
下圖是 wps 產(chǎn)品符合「容錯(cuò)原則」的「撤銷錯(cuò)誤」功能:
而我們之前在「可控性原則」舉例的微信撤回功能不屬于「容錯(cuò)原則」的方法,如果設(shè)計(jì)微信撤回功能的初衷是「容錯(cuò)」的話,那么不會(huì)給對(duì)方知道「我撤回了一條消息」,而是直接無(wú)聲無(wú)息的撤回,這樣的做法微信的產(chǎn)品經(jīng)理不會(huì)做的,他們?cè)诠δ茉O(shè)計(jì)上很克制也很優(yōu)秀。
十、靈活高效原則
讓用戶更高效,更方便的完成任務(wù)。
例一:
在使用微信時(shí),如果不久前拍過(guò)一張照片,那么當(dāng)我們?cè)诹奶祉?yè)面點(diǎn)擊 「+ 」 功能時(shí),照片會(huì)自動(dòng)浮現(xiàn)在「 + 」 按鈕上方,方便我們使用,這個(gè)功能設(shè)計(jì)的很好,有時(shí)候我們就需要這張剛剛拍的照片,不需要點(diǎn)擊相冊(cè)功能就可以直接發(fā)送過(guò)去,真的很「靈活高效」。如下圖:
例二:
在使用 QQ聊天發(fā)送表情的時(shí)候,可以看到表情都是按照最近使用的順序來(lái)排序的,我們可以很方便的找到經(jīng)常使用的表情,它就排在最前面。如下圖:
例三:
比如網(wǎng)易的 web 端的郵箱,在郵箱后綴設(shè)計(jì)為可選擇的后綴,這樣用戶在登錄郵箱的時(shí)候只用輸入前綴,后綴就不用管了,對(duì)用戶來(lái)說(shuō)很方便,這也是「靈活高效原則」的一種體現(xiàn)。如下圖:
例四:
現(xiàn)在很多輸入法也會(huì)將你經(jīng)常使用的詞語(yǔ)放到前面,比如你經(jīng)常關(guān)心你身邊的人,經(jīng)常問(wèn)「cfm?」是「吃飯沒?」,那么每次打 「cfm」 輸入法都會(huì)把 「吃飯沒」顯示到最前面,方便你使用。這樣的設(shè)計(jì)很好的符合了「靈活高效」。如下圖:
探討完我們要在用戶體驗(yàn)達(dá)到的目標(biāo),我還想談?wù)劦氖牵?/p>
用戶體驗(yàn)讓我們更關(guān)注那些人性化的細(xì)節(jié),那些經(jīng)常被設(shè)計(jì)者忽略的情感設(shè)計(jì),好的產(chǎn)品不是靠著某個(gè)神奇的功能,而是力所能及的關(guān)注用戶體驗(yàn)。
對(duì)于用戶體驗(yàn),我的感觸良多,那些關(guān)注人性化細(xì)節(jié)和功能的產(chǎn)品一直常伴在我們的左右,令人欣慰的是這些好的產(chǎn)品讓我們的生活越來(lái)越美好。而我們對(duì)于這些產(chǎn)品和服務(wù)總是寄托著純粹而又美好的情愫。
一想到人們使用美好的產(chǎn)品而充滿喜悅時(shí),我們?cè)谔接懞驮O(shè)計(jì)用戶體驗(yàn)的路上永無(wú)止境,這些人性對(duì)于美好感受的向往驅(qū)動(dòng)著我們,堅(jiān)信帶著人性化不斷探究和思考,我們能創(chuàng)造出更好的產(chǎn)品和服務(wù)。