起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)用戶體驗(yàn)好不好？我用案例對(duì)比告訴你！
用戶體驗(yàn)從大框架到小細(xì)節(jié)都十分重要，往往有一些細(xì)節(jié)經(jīng)常被忽視，只有你想不到的，沒(méi)有做不好的。今天我舉幾個(gè)栗子來(lái)對(duì)比一下這些細(xì)節(jié)的用戶體驗(yàn)。
共享單車摩拜VS共享單車ofo［軟鍵盤］
操作場(chǎng)景
雖然用戶常用的是掃二維碼開鎖，但是輸入號(hào)牌開鎖也是不少用戶在用的。共享單車的車牌號(hào)解鎖場(chǎng)景要比一般輸入苛刻，因?yàn)橛脩舸藭r(shí)目光需要聚焦到三處：車牌、鍵盤、和輸入框。
問(wèn)題
- ofo 這樣的鍵盤設(shè)計(jì)，浪費(fèi)了7和9下面的空間，這樣鍵盤被劃分成了四列，每個(gè)數(shù)字鍵都小于食指的寬度。而摩拜單車采用三列，這樣更便于用戶輸入。其實(shí)讓用戶不輸錯(cuò)最好的辦法不是提醒，而是舒適的輸入。
- ofo?的立即用車和確定鍵是同樣的操作，這是最基本的交互設(shè)計(jì)常識(shí)了，同一個(gè)頁(yè)面同一個(gè)操作按鈕不要重復(fù)出現(xiàn)。
建議
可以參考摩拜的軟鍵盤設(shè)計(jì)，把鍵盤分為3列，便于用戶點(diǎn)擊。只保留一個(gè)立即用車按鈕。
QQ VS 陌陌［聊天界面返回］
操作場(chǎng)景
我們打開QQ，進(jìn)入的默認(rèn)頁(yè)面是消息，點(diǎn)擊聯(lián)系人找到一個(gè)好友，點(diǎn)擊一個(gè)好友到好友資料頁(yè)面，然后點(diǎn)擊發(fā)消息進(jìn)入聊天頁(yè)面。此時(shí)點(diǎn)擊返回我們會(huì)驚奇的發(fā)現(xiàn)返回的是消息頁(yè)面，而并非按照流程一步一步返回。但是當(dāng)我們正常使用的時(shí)候卻沒(méi)有發(fā)現(xiàn)這一類問(wèn)題的存在。而陌陌卻是按照正常流程一步一步返回。
使用場(chǎng)景
首先我們要知道QQ屬于熟人社交軟件。我們來(lái)設(shè)想一個(gè)qq的使用場(chǎng)景，小高想找小段敘敘舊，已經(jīng)有好久都沒(méi)有聯(lián)系了，于是小高打開QQ－通訊錄－找到小段，聊完天之后，此時(shí)的小高下一步可能會(huì)做什么？看看消息列表有沒(méi)有人跟她說(shuō)話？看看群里都討論了些什么？看看空間都有哪些新動(dòng)態(tài)？這三點(diǎn)的可能性最大，然后1和2都是在消息列表頁(yè)。就算通過(guò)消息列表頁(yè)去看空間操作也很簡(jiǎn)單。
所以，使用場(chǎng)景比頁(yè)面流程更能提升用戶體驗(yàn)。返回到消息列表頁(yè)更能貼近于用戶下一步想要做的事情。
問(wèn)題
雖然陌陌是陌生人社交軟件，但是在陌陌里通過(guò)通訊錄找好友聊天后，下一個(gè)目的可能是看看附近的人，看看有沒(méi)有新消息。我們仔細(xì)觀察陌陌聊天界面的返回旁邊的紅色圓點(diǎn)數(shù)字，是未讀消息的數(shù)量，這說(shuō)明產(chǎn)品設(shè)計(jì)人員已經(jīng)考慮到用戶所重視的是未讀消息了，但是返回還是一步一步的進(jìn)行？
建議
既然陌陌的返回旁邊已經(jīng)設(shè)計(jì)了紅色圓點(diǎn)數(shù)字，是未讀消息的數(shù)量。那么完全可以讓此返回鍵返回到消息頁(yè)面。減少用戶一步一步返回的流程。
微軟word?VS?蘋果page［儲(chǔ)存彈出框］
操作場(chǎng)景
當(dāng)我們儲(chǔ)存一個(gè)文檔時(shí)，我們首先要知道或操作儲(chǔ)存的位置，然后再點(diǎn)擊儲(chǔ)存按鈕。如果都不知道儲(chǔ)存到哪里這樣會(huì)個(gè)很多用戶帶來(lái)困擾。
問(wèn)題
蘋果page對(duì)話框則問(wèn)存在哪里，同時(shí)提供不儲(chǔ)存的按鈕。而微軟word對(duì)話框會(huì)問(wèn)是否儲(chǔ)存，同時(shí)提供不儲(chǔ)存按鈕。那么用戶想修改儲(chǔ)存的位置還需要多操作一步？
建議
相比之下page的設(shè)計(jì)者就聰明多了，將是否儲(chǔ)存帶入到儲(chǔ)存到哪的問(wèn)題中。word完全可以把儲(chǔ)存和儲(chǔ)存位置放在同一步進(jìn)行操作。交互設(shè)計(jì)應(yīng)從人的行為模式出發(fā)，脫離程序思維，這樣用戶就不會(huì)覺(jué)得產(chǎn)品表現(xiàn)的刻板、愚蠢和失禮 。
蘇寧易購(gòu) VS 支付寶［手機(jī)充值］
操作場(chǎng)景
手機(jī)充值時(shí)，蘇寧易購(gòu)的操作要用戶選擇價(jià)格后再按充值按鈕喚起支付，此時(shí)是兩步操作。而支付寶點(diǎn)擊價(jià)格后直接喚起支付，是一步操作。
問(wèn)題
支付寶實(shí)現(xiàn)了一鍵購(gòu)買。那么蘇寧易購(gòu)多話費(fèi)充值是不是也可以一步完成操作呢？
建議
由于充話費(fèi)是單選，蘇寧易購(gòu)的點(diǎn)擊確認(rèn)操作毫無(wú)必要，因此增加了用戶負(fù)擔(dān)。蘇寧易購(gòu)?fù)耆梢宰層脩酎c(diǎn)擊完一個(gè)金額后就直接喚起支付。好的用戶體驗(yàn)就是要減少用戶的操作流程，能讓用戶一步完成的操作絕不設(shè)計(jì)成兩步。
自助飲料購(gòu)買機(jī)VS麥當(dāng)勞自助點(diǎn)餐機(jī)［支付流程］
操作場(chǎng)景
在自助機(jī)買飲料。在選擇商品后，屏幕顯示二維碼，用戶掃碼支付，取走飲料。很多人沒(méi)有注意到，這中間其實(shí)節(jié)省了一步選擇支付方式的操作。
麥當(dāng)勞設(shè)計(jì)了超級(jí)棒的自助點(diǎn)餐系統(tǒng)，但在選擇支付方式這里確搞得復(fù)雜了。當(dāng)用戶生成訂單后必須在支付寶微信和銀聯(lián)支付間做選擇。
問(wèn)題
麥當(dāng)勞的自助點(diǎn)餐系統(tǒng)是不是可以減少用戶選擇支付方式的一步操作呢？
建議
由于國(guó)內(nèi)已經(jīng)習(xí)慣了微信和支付寶付款，自助機(jī)將支付方式默認(rèn)為支付寶付款（這個(gè)二維碼微信支付也有效）。當(dāng)需要更改時(shí)，才需要點(diǎn)擊切換其他方式。所以麥當(dāng)勞也可以通過(guò)默認(rèn)最多人選項(xiàng)，減少多數(shù)人的額外負(fù)擔(dān)，而對(duì)少數(shù)人來(lái)說(shuō)也并未增加負(fù)擔(dān)。
百度VS拉勾［郵箱登錄］
操作場(chǎng)景
百度和拉鉤都是采用郵箱登錄單獨(dú)一個(gè)頁(yè)面，并沒(méi)有跟其他登錄方式放在一個(gè)頁(yè)面。當(dāng)用戶輸入郵箱的前半部分的時(shí)候，更希望可以減少后半部分的輸入。
問(wèn)題
百度登錄在輸入@之后系統(tǒng)會(huì)自動(dòng)列出所有郵箱后綴，減少用戶的輸入時(shí)間，而拉勾在登錄時(shí)卻沒(méi)有做到這一點(diǎn)，需要用戶自己輸入完整的郵箱。拉鉤明顯增加了用戶的輸入內(nèi)容，是否可以讓拉勾也減少用戶輸入的內(nèi)容？
建議
拉鉤可以參考百度登錄，在輸入@之后系統(tǒng)會(huì)自動(dòng)列出所有郵箱后綴。在做交互設(shè)計(jì)過(guò)程中要遵循一個(gè)原則：能讓用戶選擇的不要讓用戶輸入。能系統(tǒng)自動(dòng)生成的，盡量不要讓用戶選擇。
總結(jié)
要想做到好的用戶體驗(yàn)，一定不要忽視細(xì)節(jié)層面，下面5點(diǎn)是根據(jù)上面的案例總結(jié)出的交互設(shè)計(jì)中基本的常識(shí)：
- 同一個(gè)頁(yè)面同一個(gè)操作按鈕不要重復(fù)出現(xiàn)。任何一個(gè)操作區(qū)域都要考慮是否方便用戶點(diǎn)擊。
- 交互設(shè)計(jì)時(shí)，按照使用場(chǎng)景設(shè)計(jì)比按照頁(yè)面流程設(shè)計(jì)更能提升用戶體驗(yàn)。
- 交互設(shè)計(jì)應(yīng)從人的行為模式出發(fā)，脫離程序思維。
- 有些選擇可以設(shè)計(jì)出一種常用的為默認(rèn)選項(xiàng)，減少大多數(shù)用戶的選擇步驟。
- 能讓用戶選擇的不要讓用戶輸入，能程序判斷的不要讓用戶選擇。
大家好！我是一名UX設(shè)計(jì)師，希望可以與共同喜歡探索用戶體驗(yàn)的朋友們一起成長(zhǎng)！我會(huì)不定期地更新一些有關(guān)用戶體驗(yàn)方面的文章。
作者：高杰，微信號(hào)公眾號(hào)：UX設(shè)計(jì)師高杰，華點(diǎn)云UX設(shè)計(jì)師，5年產(chǎn)品交互設(shè)計(jì)經(jīng)驗(yàn)，主導(dǎo)交互設(shè)計(jì)和用戶體驗(yàn)工作。
本文由 @高杰 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Pexels，基于 CC0 協(xié)議
word那個(gè)案例不是很認(rèn)同。word文檔的打開在大多數(shù)情況下是用戶點(diǎn)擊應(yīng)用打開的，那么在保存的時(shí)候，用戶是知道在哪的。少部分例外情況是，其他用戶發(fā)來(lái)的文檔，保存的時(shí)候可能忘了保存到哪了，然后在對(duì)話框里點(diǎn)擊打開，直接保存下次可能就會(huì)找不到地方。
麥當(dāng)勞那個(gè)，其實(shí)和外賣一樣，付款時(shí)選擇方式，我覺(jué)得這是一個(gè)可取的方式，因?yàn)辂湲?dāng)勞本身并沒(méi)有支付功能，一定要喚起其他應(yīng)用的支付功能才行，雖然說(shuō)現(xiàn)在大部分人微信支付寶都在用，但是這個(gè)默認(rèn)怎么選擇？如果默認(rèn)了支付寶但是支付寶沒(méi)錢，還要退回重新選擇，反而更麻煩了。而且界面也會(huì)有一個(gè)問(wèn)題，就是點(diǎn)好了直接默認(rèn)支付寶支付，但是如果支付寶沒(méi)錢，支付失敗返回的時(shí)候還是要跳到支付方式的選擇界面。自動(dòng)販賣機(jī)掃碼的時(shí)候用支付寶掃就是支付寶支付，用微信掃就是微信支付，用戶在選擇APP的時(shí)候就已經(jīng)做了決定，這個(gè)決定包含了哪個(gè)里面有錢，哪個(gè)優(yōu)惠更多等。
還有充值話費(fèi)的問(wèn)題，雖然蘇寧的那種方式不是確實(shí)麻煩了一點(diǎn)，但是兩次點(diǎn)擊能方便用戶確認(rèn)和修正。支付寶的話如果點(diǎn)錯(cuò)了還要返回，所以很難說(shuō)哪個(gè)更好。
僅作為自己的看法，同時(shí)希望以后能多交流!
現(xiàn)在已經(jīng)有一個(gè)二維碼同時(shí)支持微信、支付寶支付了
自動(dòng)售賣機(jī)并沒(méi)有省去付款方式的選擇，這個(gè)選擇發(fā)生在你拿出手機(jī)的時(shí)候打開的是哪個(gè)APP。麥當(dāng)勞的那個(gè)機(jī)器是最后一步選擇付款方式，有三種。如果要設(shè)置一種默認(rèn)的話，需要根據(jù)使用率來(lái)進(jìn)行決策，至少有一個(gè)付款選項(xiàng)有60%的使用率才可以把它設(shè)置為默認(rèn)。
word 和pages那個(gè)案例有問(wèn)題啊。。。。pages都沒(méi)有“保存覆蓋”這個(gè)概念，直接關(guān)閉就自動(dòng)存了，word不做自動(dòng)保存估計(jì)考慮到性能問(wèn)題吧。。。
在生活中體驗(yàn)
棒棒噠
除了充話費(fèi)那個(gè)，其他的都贊同?。?/p>
1、單手操作這個(gè)觀點(diǎn)我贊同，研究發(fā)現(xiàn)，大多數(shù)用戶都用一只手來(lái)使用手機(jī)。當(dāng)他們拿著手機(jī)的時(shí)候，他們會(huì)用右或左拇指與屏幕交互。就像你說(shuō)的手機(jī)越做越大，也就是說(shuō)拇指很難點(diǎn)擊到最左側(cè)一列的鍵盤，也就是1、4、7；你覺(jué)得放四列更容易點(diǎn)擊到還是放3列更容易點(diǎn)擊到呢？肯定是3列啊，3列就加寬了左側(cè)一列的點(diǎn)擊范圍，因?yàn)槟粗负茈y觸碰到手機(jī)最左側(cè)。還有拇指其實(shí)并不容易觸碰到最右下角的位置。其實(shí)最容易的位置應(yīng)該是摩拜鍵盤的數(shù)字2和確定鍵的位置。你試一下就知道了，因?yàn)槟粗赣|碰右下角的位置是需要非常彎曲的。彎曲的操作手勢(shì)遠(yuǎn)遠(yuǎn)沒(méi)有點(diǎn)擊2和確定鍵直著的手勢(shì)舒服。而且人的視覺(jué)焦點(diǎn)也不會(huì)在右下角。
3、這個(gè)沒(méi)有絕對(duì)的好壞，而是習(xí)慣問(wèn)題，就像你用慣了windows和mac一樣，用慣了mac的人再用windows就會(huì)很不習(xí)慣，甚至?xí)X(jué)得這個(gè)怎么這么難用。其實(shí)做產(chǎn)品并不一定要順從用戶的想法，有些時(shí)候可以讓用戶適應(yīng)我們。
4、那個(gè)不是流量券，而且充話費(fèi)跟流量沒(méi)有任何關(guān)系，就像支付寶一樣下面也會(huì)顯示充流量的功能，只不過(guò)蘇寧使用tab的形式做的。你說(shuō)的流量券是上面banner的活動(dòng)而已，而且活動(dòng)有單獨(dú)的活動(dòng)頁(yè)面。用戶如果需求是充流量，也不會(huì)在充話費(fèi)的頁(yè)面停留過(guò)長(zhǎng)的時(shí)間。如果不顯示下面確定按鈕不僅不會(huì)影響到充流量的功能，而且會(huì)減少充話費(fèi)的操作步驟。
6、并不只是輸入@之后就顯示后面的后綴，比如你輸入123@1，下面就會(huì)顯示123@163.com／123@126.com。而且每個(gè)用戶的習(xí)慣是不一樣的，有一些用戶就是喜歡直接全部輸入，但是有一些用戶就是懶得輸入。如果加了這個(gè)模糊查找的功能，對(duì)于懶得用戶而言提升了用戶體驗(yàn)，而且對(duì)于喜歡全部輸入的用戶也并沒(méi)有什么不好的影響。用戶體驗(yàn)絕大多數(shù)都沒(méi)有做到細(xì)節(jié)，并不是沒(méi)有強(qiáng)烈的需求就不需要優(yōu)化這些細(xì)節(jié)的體驗(yàn)，對(duì)于非ux設(shè)計(jì)崗位的人員來(lái)講，這些細(xì)節(jié)都是可有可無(wú)的。但是對(duì)于ux設(shè)計(jì)師來(lái)講，就是要貫穿到每一個(gè)細(xì)節(jié)。
1、那你的意思是膜拜沒(méi)有ofo考慮的周到？（http://uxmovement.com/mobile/why-mobile-menus-belong-at-the-bottom-of-the-screen/）看一下大屏幕手機(jī)和小屏幕手機(jī)拇指可觸碰的區(qū)域和不可觸碰的區(qū)域那張圖吧。你就知道我為什么說(shuō)1、4不好觸碰到了。ofo的鍵盤，對(duì)于小屏幕的手機(jī)而言，每個(gè)數(shù)字鍵都小于食指的寬度。大屏幕的手機(jī)而言，很難點(diǎn)擊到1、4點(diǎn)位置。而摩拜單車采用三列，這樣無(wú)論是大屏還是小屏更便于用戶點(diǎn)擊。
3、你可以看看我的原文，關(guān)注公眾號(hào)UX設(shè)計(jì)師高杰，我原文并沒(méi)有寫建議，因?yàn)槲也粫?huì)建議誰(shuí)的產(chǎn)品怎么改，只是對(duì)比同樣產(chǎn)品的體驗(yàn)。因?yàn)檫@個(gè)人人社區(qū)平臺(tái)的要求，必須說(shuō)出問(wèn)題解決方案，細(xì)化問(wèn)題。要不然這個(gè)稿子不給審核通過(guò)。所以才加上建議的，你投稿就知道了，人人的審核現(xiàn)在很嚴(yán)格。小編的回復(fù)也是非常精細(xì)的，明確指示出需要深入問(wèn)題并給出解決方案，而我并沒(méi)有直接寫解決方案，我還是寫了“建議”。就怕有爭(zhēng)執(zhí)。
4、不選擇金額怎么選流量券？流量券都是滿多少才抵扣多少的。而不是流量券和金額在一起選擇的，應(yīng)該先選金額后選流量券，我建議你用一下蘇寧的話費(fèi)充值吧，你都沒(méi)試過(guò)就來(lái)強(qiáng)調(diào)這些，蘇寧的是點(diǎn)擊完流量金額后再點(diǎn)擊確認(rèn)－然后支付的頁(yè)面才有選擇優(yōu)惠券的入口，而并不是在選擇流量金額時(shí)就可以選擇流量券，你試試就知道了，如果選擇一個(gè)流量金額，沒(méi)有確認(rèn)鍵，直接喚起支付，其實(shí)真的少了一步流程。也并沒(méi)有影響功能和需求。（請(qǐng)?jiān)诨貜?fù)我之前用一下蘇寧的流量充值吧，可別光看我的截圖就自己各種瞎猜，我是真的使用過(guò)才發(fā)現(xiàn)問(wèn)題的）
6、是習(xí)慣問(wèn)題，但是確實(shí)是有用戶習(xí)慣輸入，也有用戶習(xí)慣輸入前綴后選擇。其實(shí)對(duì)于習(xí)慣輸入的用戶來(lái)講，他的焦點(diǎn)是在鍵盤上或者文本框上，當(dāng)用戶輸入完了下面哪些其他選擇也就消失了，所以我才說(shuō)如果加了這個(gè)模糊查找的功能，對(duì)于懶得用戶而言提升了用戶體驗(yàn)，而且對(duì)于喜歡全部輸入的用戶也并沒(méi)有什么不好的影響。
你看看原文去吧 人人這個(gè)平臺(tái)確實(shí)對(duì)文章要求很細(xì) 都是按照小編給回復(fù)的標(biāo)準(zhǔn)寫的 原文并沒(méi)有寫建議 因?yàn)槲易铋_始寫這個(gè)文章的初衷就只是對(duì)比 并沒(méi)有要建議 都只是在概述對(duì)比 原文地址：https://mp.weixin.qq.com/s?__biz=MzA5MTg4MTk5Ng==&mid=100000012&idx=1&sn=9bfe87bc988a904aa05dcb227ffae8b0&chksm=1074d66f27035f79177521c9efdea21eac757cd8f861fc2d5c120e52584521b723dabf7f81dd&mpshare=1&scene=1&srcid=0829a78lzQK8bEZvgyjpf7Vv&key=1be27594fc89b2790cb02dfab1568064c6d066f0a0edbf575a6a7c4745a3b74f394256aa7612b87a2a1ca051ac29100fdae6fee0e9fb4336959cf56830184c6276e3bc7d5f257b0a2cd701f63200e424&ascene=0&uin=MjQ4MDc3NTMyMw%3D%3D&devicetype=iMac+MacBookAir7%2C2+OSX+OSX+10.11.3+build(15D21)&version=12020110&nettype=WIFI&fontScale=100&pass_ticket=obnbPTIUfFmhC287l8H2I3%2Fbyu8SmSdMOoE9OHDlDWdX1Sny%2ByYISPmeLz9rmrEI
還有摩拜確認(rèn)按鈕的位置 無(wú)論是大屏手機(jī)還是小屏手機(jī)，都是可以用拇指觸碰到的！
心真細(xì)??！受教了真是，但是有一點(diǎn)，麥當(dāng)勞之所以不采取支付寶或微信支付的默認(rèn)選擇，是不是跟Apple pay和麥當(dāng)勞有合作關(guān)系呢？對(duì)麥當(dāng)勞來(lái)說(shuō)最好的應(yīng)該是順應(yīng)跟蘋果的合作，默認(rèn)顯示Apple pay，而且還有優(yōu)惠來(lái)鼓勵(lì)用戶使用。但是為了用戶體驗(yàn)，或順應(yīng)市場(chǎng)趨勢(shì)，所以才也支持微信和支付寶，而不是默認(rèn)支付方式的吧？