干貨|寫給產(chǎn)品經(jīng)理和設(shè)計(jì)師的用戶體驗(yàn)知識(shí)(二)
在《寫給產(chǎn)品經(jīng)理和設(shè)計(jì)師的用戶體驗(yàn)知識(shí)1》中,我與大家分享了我個(gè)人對(duì)「用戶體驗(yàn)」和「設(shè)計(jì)」的理解,以及2個(gè)設(shè)計(jì)原則。在這篇文章中,我們會(huì)再討論2個(gè)設(shè)計(jì)原則,它們是“一致性”原則和“及時(shí)有效的反饋和解釋”原則。
原則3:一致性
一致性是產(chǎn)品設(shè)計(jì)過程中的一個(gè)基礎(chǔ)原則,它要求在一個(gè)(或一類)產(chǎn)品內(nèi)部,在相同或相似的功能、場(chǎng)景上,應(yīng)盡量使用表現(xiàn)、操作、感受等相一致的設(shè)計(jì)。一致性的目的是降低用戶的學(xué)習(xí)成本,降低認(rèn)知的門檻,降低誤操作的概率。聽起來有些云里霧里,我們還是來看看案例吧。
請(qǐng)看這幅圖:
如果我告訴你,這張是某公司宣傳海報(bào)的一部分,你猜,可能是哪家公司?好吧,如果猜不到,我再提示一下,是做飲料的公司… 估計(jì)你猜到了,沒錯(cuò),是可口可樂。完整版本是這樣的:
為什么最上面這張圖并沒有出現(xiàn)可口可樂的標(biāo)志、產(chǎn)品圖片、產(chǎn)品介紹等任何信息,你卻能猜到它是可口可樂呢?是因?yàn)樵诳煽诳蓸繁澈?,有一套叫做VI(視覺識(shí)別系統(tǒng))的體系在指導(dǎo)它全部對(duì)外的形象設(shè)計(jì)。
VI的本質(zhì)就是通過視覺上高度的一致性,來引導(dǎo)用戶將某種視覺信息與某企業(yè)、產(chǎn)品強(qiáng)行關(guān)聯(lián)。圖上的白色飄帶部分其實(shí)是可口可樂VI系統(tǒng)中常用的輔助圖形,這個(gè)圖形在幾乎所有的可口可樂宣傳資料上出現(xiàn),其顏色(包括背景的紅色)、形狀、扭曲的角度等完全一致,所以當(dāng)我們?cè)俅我姷筋愃频膱D形和配色時(shí),我們的大腦會(huì)立即產(chǎn)生“這應(yīng)該是可口可樂”這樣的反應(yīng),認(rèn)知成本被大幅度降低,這就是一致性的最簡單應(yīng)用。
與此相反,我們看另一個(gè)例子,想象一下電梯上的各種按鈕。每一部電梯上的按鈕其承載的功能幾乎完全相同,無疑就是選擇樓層、開關(guān)門,最多再加一個(gè)呼叫功能。但是當(dāng)你走進(jìn)一棟陌生的寫字樓,你要上7層,你肯定會(huì)在一堆按鈕面前遲疑一下;終于找到7了,按下,然后發(fā)現(xiàn)門還沒關(guān),你繼續(xù)找關(guān)門鍵,十有八九還會(huì)遲疑一下,然后才能正確操作。
為什么我們每天都要乘電梯,但是進(jìn)入一個(gè)功能完全一樣,但是之前沒來過的電梯時(shí)依然無法熟練操作呢?理由很簡單,因?yàn)椴煌放?、不同型?hào)的電梯的操作界面(按鈕)缺乏一致性。按鈕的排布順序、大小、樣式完全不同,所以每次遇到新的,我們都要學(xué)習(xí)后才能使用,雖然這種學(xué)習(xí)很快就能完成,但如果一定要從“用戶體驗(yàn)”的角度去糾它的問題,這其實(shí)是一種因?yàn)椤耙恢滦浴弊龅貌缓枚a(chǎn)生的不太好的體驗(yàn)。
上圖:不同電梯中的操作按鈕樣式、排布可能完全不同
一致性繼續(xù)延伸,可以突破單個(gè)的產(chǎn)品,在某一類產(chǎn)品、某行業(yè)中形成更大范圍內(nèi)的“一致”,并得到大家的承認(rèn)。這時(shí),一致性就會(huì)變成“標(biāo)準(zhǔn)”。
想象這樣一個(gè)場(chǎng)景,我從錢包里掏出一張招商銀行的儲(chǔ)蓄卡,想取一些現(xiàn)金。但是我找來找去,發(fā)現(xiàn)附近只有建設(shè)銀行,于是我將招商銀行卡插入建設(shè)銀行的提款機(jī),順利的提取了現(xiàn)金。這樣的場(chǎng)景很常見,但是這些司空見慣的場(chǎng)景背后,是諸多的“一致性”和“標(biāo)準(zhǔn)”組合的結(jié)果。最簡單的,銀行卡的尺寸一定是高度一致,從而形成標(biāo)準(zhǔn)的,否則我的A銀行卡不可能塞到B銀行的提款機(jī)里面去;同樣,銀行卡磁條上攜帶的信息格式、讀取磁條的設(shè)備等等,都要遵循相同的標(biāo)準(zhǔn),才可能實(shí)現(xiàn)通信。
上圖:要想在ATM上實(shí)現(xiàn)跨行交易,銀行卡的尺寸首先要一致
當(dāng)一致性形成標(biāo)準(zhǔn)后,它可以起到更大的作用,為用戶帶來更大的便利。例如,幾乎全世界在市場(chǎng)上銷售的手動(dòng)擋汽車,都是離合器在左腳邊,剎車和油門在右腳邊。我想一般不會(huì)有廠商為了“創(chuàng)新”調(diào)換這三者的位置,理由很簡單,有了這個(gè)標(biāo)準(zhǔn),你只要會(huì)駕駛汽車,理論上你就可以駕駛?cè)澜缛魏我惠v汽車,而不需要重新學(xué)習(xí)適應(yīng),比不遵循一致性用戶體驗(yàn)會(huì)好很多吧。所以哪家廠商如果輕易把這個(gè)規(guī)則打破,估計(jì)它生產(chǎn)的汽車很難賣得出去了。
上圖:左腳踩離合器,右腳踩油門或剎車,是手動(dòng)擋汽車的操作標(biāo)準(zhǔn)
在互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)中,一致性也很重要。
例如,目前手機(jī)上最流行的兩種操作系統(tǒng)——Android和iOS,它們?cè)赨I層面都有各自的設(shè)計(jì)標(biāo)準(zhǔn)文檔,這些文檔規(guī)定了在相應(yīng)的系統(tǒng)下標(biāo)準(zhǔn)的控件、布局、動(dòng)效,甚至顏色的使用方式。它們的存在使得同一個(gè)操作系統(tǒng)中,完成相似的功能的操作基本一致,(特別是)在智能手機(jī)問世的最初幾年,較好的降低了用戶的學(xué)習(xí)和使用門檻。
上圖:iOS的設(shè)計(jì)Guideline文檔
例如,在iOS系統(tǒng)中,對(duì)于一個(gè)對(duì)話框來說,其操作按鈕的排布順序在業(yè)界有一些爭(zhēng)議。但是大部分情況下,大家傾向于將代表“肯定性操作”、“有利于流程繼續(xù)的操作”的按鈕放在右側(cè)。
上圖:在iOS平臺(tái),在不同的應(yīng)用中,彈出的對(duì)話框均采用了將“主操作按鈕”放右側(cè)的設(shè)計(jì)
但是這是在iOS平臺(tái),或者說是手機(jī)平臺(tái)上。如果在Windows平臺(tái),那我們就要遵循Windows上的一致性,將主操作按鈕放左側(cè)了。
上圖:在Windows平臺(tái)上,同樣是對(duì)話框,要遵循另外一套一致性原則
這種一致性其實(shí)在潛移默化的影響著用戶的行為,當(dāng)你在手機(jī)上遇到對(duì)話框時(shí),你會(huì)傾向于不自覺的去點(diǎn)按右側(cè)的按鈕;而你在Windows中遇到對(duì)話框時(shí),則會(huì)傾向于不自覺的去點(diǎn)擊左側(cè)按鈕。這樣的好處很明顯,效率提升,減少用戶的思考。但是,還記得我們?cè)诘谝黄恼轮校谟懻撛O(shè)計(jì)原則之前提到的「設(shè)計(jì)原教旨主義」嗎?當(dāng)你使用一致性標(biāo)準(zhǔn)時(shí),或許它就隱藏在你周圍試圖迷惑你。想象一下,如果是一個(gè)非常重要并且危險(xiǎn)的刪除操作,在彈出對(duì)話框?qū)τ脩暨M(jìn)行二次確認(rèn)時(shí),是否應(yīng)該將“有利于流程繼續(xù)”的刪除按鈕放在主操作位置(iOS右側(cè),Windows左側(cè))呢?
用戶體驗(yàn)這東西的精妙之處就在于,很多時(shí)候沒有固定的答案。這個(gè)問題我并不能給出一個(gè)確定的觀點(diǎn),只是想提示各位,在使用一致性(以及其他)原則時(shí),永遠(yuǎn)不要忘記該原則最初的目的,永遠(yuǎn)不要忘記用戶的具體使用場(chǎng)景、產(chǎn)品的目標(biāo)等因素,不要成為一個(gè)「設(shè)計(jì)原教旨主義者」。好吧如果一定要出方案,最簡單的,可以按照這么3種方向去嘗試(請(qǐng)不要陷入到具體方案里面去,我們只為了說明原則,討論一下方向而已):
- 將“刪除”按鈕放在主操作位置,然后同步提供“回收站”功能。(這就是Windows的方案,好處是避免誤操作帶來的損失,壞處是把整個(gè)流程搞復(fù)雜了,真想刪除的時(shí)候還要去清空回收站)
- 將“刪除”按鈕放在輔助操作位置。(好處還是避免誤操作帶來的損失,壞處是,用戶真想刪除的時(shí)候,又習(xí)慣性的點(diǎn)按了主操作位置的按鈕,結(jié)論是流程斷了,用戶也可能會(huì)覺得無奈和氣憤)
- 將“刪除”按鈕放在主操作位置,同時(shí)標(biāo)紅表示警示。然后一旦執(zhí)行了刪除操作,提供一次“恢復(fù)”功能。(這個(gè)看起來好一些。第一,它用警示色提示了用戶;第二,它符合相應(yīng)系統(tǒng)的一致性原則,照顧到了那些真想刪除的用戶;第三,它提供了一個(gè)一次性的補(bǔ)救措施,萬一刪錯(cuò)了,馬上能恢復(fù);另一方面,如果用戶沒恢復(fù),那估計(jì)是真想刪。那這個(gè)方案有壞處嗎?當(dāng)然有,邏輯復(fù)雜了啊,開發(fā)成本增加了啊。所以作為一個(gè)產(chǎn)品經(jīng)理,你要思考的角度是多方面的。)
另一方面,如果你真的有各方面都更優(yōu)的方案,則應(yīng)該拋棄一致性,勇敢的創(chuàng)新。但是請(qǐng)注意,在創(chuàng)新的時(shí)候,最好不要跟已有的各種一致性相沖突。
比如說,現(xiàn)在已經(jīng)廣泛應(yīng)用的“下拉刷新”功能,最初出現(xiàn)在一款叫做Tweetie的Twitter客戶端上。
這是一個(gè)很棒的創(chuàng)新,首先,刷新其實(shí)是一個(gè)使用頻次不會(huì)很高,但是在某些場(chǎng)景下(例如微博類應(yīng)用,從后臺(tái)喚起,想獲取最新信息的時(shí)候)可能高頻使用的功能。這意味著如果在類似標(biāo)題欄之類的地方放一個(gè)刷新按鈕會(huì)比較冗余,如果不放又滿足不了用戶需求。
其次,在一個(gè)列表的頂端下拉這個(gè)動(dòng)作,除了在iOS的一些場(chǎng)景中可以劃出搜索框外,還沒有其他的定義,不會(huì)與用戶的固有習(xí)慣相沖突,而下拉刷新與搜索框本身也并不沖突。所以當(dāng)大家發(fā)現(xiàn)了這個(gè)功能后,逐一效仿,用戶在用了類似功能后,在其他的應(yīng)用中想實(shí)現(xiàn)刷新功能,也會(huì)下意識(shí)的下拉一下試試,儼然,這個(gè)操作已經(jīng)在類似應(yīng)用中形成了一定程度的一致性。并且有一些應(yīng)用還再次基礎(chǔ)上做了個(gè)改進(jìn),將其變成了廣告位。
上圖:從左到右,知乎使用了很簡潔的“下拉刷新”4個(gè)字,京東有趣一些,你能看到一個(gè)快遞員在跑,而網(wǎng)易新聞則是把這里開辟成了一個(gè)廣告位
原則4:及時(shí)有效的反饋和解釋
你是否遇到過這樣的場(chǎng)景:
在餐館吃飯,叫服務(wù)員,叫了5聲,依然沒人搭理你。好不容易揪到一個(gè),跟她說:“麻煩加一套餐具?!比思依矶紱]理你,就走了,你都不知道丫聽沒聽清,更加不知道這一套餐具究竟什么時(shí)候能拿來。
打客服電話,轉(zhuǎn)人工,好不容易打通了,敘述清楚了自己遇到的問題。但是你發(fā)現(xiàn)客服除了說很多非常禮貌的廢話之外,基本上沒辦法幫你解決任何問題。
我就遇到過第二種,不信,有截圖為證:
如果你看不清圖的話,我簡單敘述一下這個(gè)故事。
大概意思是說,有一段時(shí)間我手機(jī)收不到一些驗(yàn)證碼短信,但是別人的手機(jī)能收到,并且我把手機(jī)卡換到別人手機(jī)上,依然收不到,甚至去營業(yè)廳換了sim卡也無法解決(這證明短信網(wǎng)關(guān)、手機(jī)和sim卡都沒問題,只能是運(yùn)營商服務(wù)的問題),接連幾個(gè)月都是如此。于是我找到運(yùn)營商的客服,反饋了這個(gè)問題。說了半天,對(duì)方居然讓我提供“下發(fā)內(nèi)容的具體代碼、對(duì)方下發(fā)的時(shí)間以及對(duì)方系統(tǒng)是否已提示發(fā)送成功”,話說,我都沒收到短信,如何提供這些內(nèi)容呢?
以上這些場(chǎng)景中,服務(wù)員或者客服都存在著同一類問題,就是給予用戶的反饋和幫助不夠及時(shí),或者雖然及時(shí)給了反饋,但是邏輯上說不通,也即不夠有效,從而嚴(yán)重影響了用戶體驗(yàn)。
不論是人類之間面對(duì)面的交流,遠(yuǎn)程的打電話、寫信,還是人與機(jī)器之間的“交流”,本質(zhì)上都是信息的傳遞過程。信息有去有回,才能連貫,才會(huì)形成有效的交互與彼此的理解。所以及時(shí)有效的反饋和解釋尤為重要。
在幾乎所有需要人機(jī)交互的界面上,當(dāng)用戶進(jìn)行了某些操作,系統(tǒng)都需要使用變色、形狀改變、振動(dòng)、發(fā)光等方式來給用戶即時(shí)的反饋,目的是告知用戶,你剛才的操作我已經(jīng)知道了。
上圖:在iPhone的撥號(hào)界面,當(dāng)按下一個(gè)號(hào)碼按鍵尚未松開時(shí),這個(gè)區(qū)域的背景顏色會(huì)發(fā)生改變,同時(shí)這個(gè)按鍵代表的數(shù)字會(huì)在屏幕上方顯示,用以提示用戶“你已經(jīng)按到了”
不僅僅是針對(duì)于用戶的操作,有時(shí)候在產(chǎn)品中出現(xiàn)的一些概念、名詞等,也需要適當(dāng)?shù)南蛴脩糇鲆越忉?,才能夠確保用戶順利的使用。
每一個(gè)稍微復(fù)雜點(diǎn)兒的互聯(lián)網(wǎng)產(chǎn)品,都會(huì)有諸多的設(shè)置選項(xiàng)。但是有一些設(shè)置項(xiàng)卻需要用戶理解一定的背景知識(shí)才能正確的操作。這時(shí)就有必要向用戶解釋一下,例如在iPhone的設(shè)置選項(xiàng)中,有一個(gè)界面是這樣的:
在這個(gè)界面中,有一個(gè)選項(xiàng)叫做“數(shù)據(jù)漫游”。對(duì)于普通用戶來說,單看這個(gè)選項(xiàng)的字面意思,貌似無法清楚的意識(shí)到,將它打開或者關(guān)閉將會(huì)發(fā)生什么。所以在它的下方,緊接著放置了一段文字說明,用以提示用戶,這個(gè)選項(xiàng)是用來防止在異地旅行時(shí)產(chǎn)生高額漫游費(fèi)用的。并且,還列舉了最常用的幾個(gè)可能產(chǎn)生數(shù)據(jù)流量的行為,如“Web瀏覽”“電子郵件”等。這樣,即便用戶完全運(yùn)營商的“數(shù)據(jù)業(yè)務(wù)”沒概念,他也能意識(shí)到,在漫游時(shí)使用這些功能,就可能會(huì)被“大量扣費(fèi)”,從而做出適合他的設(shè)置。
除了互聯(lián)網(wǎng)和軟件產(chǎn)品之外,很多體驗(yàn)原則其實(shí)在更大范圍內(nèi)是通用的。我們來看一個(gè)日常生活中的案例吧。
有沒有這樣的經(jīng)驗(yàn):
你來到一個(gè)陌生的公交站牌前,尋找某條到達(dá)A站的線路,找到后開始等車。過一會(huì)車來了,你上車。但是走了一段,你覺得好像不對(duì),于是仔細(xì)查看公交車上面的站名表,發(fā)現(xiàn)坐反了…
這個(gè)場(chǎng)景中的問題在于,公交站牌只提供了站名列表,但是并沒有有效的提醒你行車的方向。有的城市有箭頭指示,但是一般那個(gè)箭頭都不太明顯,并且在這個(gè)方案中,需要將站名列表與箭頭相結(jié)合才能表意全面。比如這樣:
在深圳,你會(huì)發(fā)現(xiàn)這個(gè)問題被很容易的解決了,因?yàn)槟銜?huì)發(fā)現(xiàn)深圳的公交站牌上站名列表是這樣的:
每一條線路,除了列出了所有站名,還同步將這個(gè)方向已經(jīng)通過的站名標(biāo)記了灰色。在大多數(shù)人的認(rèn)知中,灰色與黑色配合,則代表著“失效”。所以這個(gè)方案雖然并沒有直接表述行車方向,但是可以較好的提醒用戶他有沒有站錯(cuò)位置,理解成本也低,用戶體驗(yàn)不錯(cuò)。
這個(gè)案例也引出了另外一個(gè)問題,就是,我們應(yīng)該如何向用戶解釋和反饋?答案很簡單,但是比較虛,就是“要弄清楚用戶的需求和使用場(chǎng)景”,這個(gè)答案幾乎是所有互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)問題的終極答案。
在上面這個(gè)案例中,很多城市都是提醒用戶行車的方向。但是了解方向其實(shí)并不是用戶的最底層需求,弄清楚方向的目的是為了讓用戶站對(duì)站臺(tái),上對(duì)車。當(dāng)我們理解到了這一層,我們就應(yīng)該能夠想到,為什么要造出一個(gè)“方向”的概念讓用戶去思考呢?你只要告訴用戶,如果你要去的是黑色部分,就站這兒就對(duì)了;如果你要去灰色部分,那你要去路對(duì)面看看。簡潔、明確,這才是用戶真正想要的。
再看一個(gè)同樣是跟公交車有關(guān)的案例。在一個(gè)和城市的繁忙路段,經(jīng)常會(huì)有大量的公交車經(jīng)過。在某一站停車時(shí),如果恰好趕上了多輛車同時(shí)停靠(這種概率是很大的),就會(huì)使車站附近的道路擁擠不堪。這種情況下,一般的方法是將同一個(gè)站名的車站分開設(shè)置2個(gè)或更多的站臺(tái)。這樣雖然緩解了擁堵的問題,卻產(chǎn)生了另外一個(gè)問題,如圖:
騰訊公司附近的公交車站叫做“深大北門”。這是一個(gè)繁忙的路段,最多時(shí)會(huì)有近50條線路的公交車經(jīng)過。于是該站的站臺(tái)被一分為二建設(shè)。同樣叫做“深大北門”的2個(gè)站臺(tái),相距300米左右。
設(shè)想一下這樣的用戶場(chǎng)景:
我要去拜訪一個(gè)朋友,他打電話告訴我說:“你從公司出發(fā)是吧?那你到深大北門坐B線路公交車,到xx站下車就行?!焙玫模鞖夂軣?,我從騰訊大廈出發(fā),向東走,找到了公交站。我極力尋找打算搭乘的B線路公交車,找了很久,發(fā)現(xiàn),沒找到… 我已經(jīng)汗流浹背。這時(shí),我并不知道其實(shí)附近還有另外一個(gè)站臺(tái)。或者即便我知道,我也搞不清楚另一個(gè)站臺(tái)在哪個(gè)方向,我該往東走,還是往西走。
很差的用戶體驗(yàn),不是嗎?但是解決的方案其實(shí)很簡單,看圖:
首先,我們發(fā)現(xiàn)站名后面跟著一個(gè)編號(hào)。例如,圖上所示,是“深大北門②”。這時(shí),我就會(huì)意識(shí)到,附近應(yīng)該還存在著一個(gè)“深大北門①”的站臺(tái)。緊接著,下方放置了“溫馨提示”。告訴我另一個(gè)站臺(tái)的具體方位,以及列出了在另一個(gè)站臺(tái)停靠的線路列表。至此,問題解決了。
在這個(gè)原則的最后,給大家講個(gè)段子吧,這段子有點(diǎn)兒冷,同樣是跟公交車有關(guān)的,各位也可以順便想想,這種問題該如何解決。段子如下:
在北京,繁華的東三環(huán)上,國貿(mào)地鐵站C出口,一個(gè)年輕人向一個(gè)當(dāng)?shù)厝藛柭贰?/p>
年輕人:“您好,請(qǐng)問我想去燕郊潮白人家小區(qū),該坐哪個(gè)公交車???”
當(dāng)?shù)厝撕軣崆?,用手機(jī)查了半天,告知:“您往南走,用不上幾分鐘,找到大北窯南站,坐814,一站就到”
年輕人謝過,繞了半天,終于找到了大北窯南公交站,誰知?jiǎng)偪吹杰囌?,就發(fā)現(xiàn)一輛814路公交車起步離開了。年輕人只好在車站繼續(xù)等,但是等了好久,也不見下一趟車過來。于是年輕人想,只有一站地,要不我順著剛才車離開的方向往前走走看吧,估計(jì)用不了幾分鐘就到了。
結(jié)果…(對(duì)北京地理位置有概念的同學(xué),此處應(yīng)有笑聲)
對(duì)北京沒概念的同學(xué),請(qǐng)看圖:
(待續(xù))
第一部分:先糾結(jié)兩個(gè)概念「用戶體驗(yàn)」和「設(shè)計(jì)」
第二部分:設(shè)計(jì)原則概覽
- 原則1:符合用戶使用需求
- 原則2:基于用戶的心理模型設(shè)計(jì)
- 原則3:一致性
- 原則4:及時(shí)有效的反饋和解釋
- 原則5:形式追隨功能
- 原則6:單一任務(wù)、漸次呈現(xiàn)
- 可能還有原則7到n
第三部分:設(shè)計(jì)工具和方法
- 用戶場(chǎng)景
- 產(chǎn)品經(jīng)理的溝通技巧
第四部分:用戶體驗(yàn)之外
- 用戶體驗(yàn)的局限性
- 用戶體驗(yàn)與其他因素的權(quán)衡
作者:xidea(微信公眾號(hào):uxcafe)
來源:xidea的咖啡館
贊贊
azn贊 贊
11111111111111111111111