在進(jìn)行交互設(shè)計(jì)時(shí)，如何合理縮短用戶操作路徑，提升用戶操作的效率呢？
首先我們說(shuō)一下什么是負(fù)荷？
在人機(jī)工程學(xué)里，用戶完成某項(xiàng)任務(wù)需要克服三類負(fù)荷：認(rèn)知負(fù)荷，視覺(jué)負(fù)荷，動(dòng)作負(fù)荷，認(rèn)知負(fù)荷指的是用戶思考和記憶的成本，視覺(jué)負(fù)荷是信息傳達(dá)效率，比如我們?yōu)g覽app或頁(yè)面時(shí)眼睛所看到的東西，動(dòng)作負(fù)荷是我們的手指點(diǎn)擊或觸發(fā)的一些行為。不同負(fù)荷所耗費(fèi)的腦力資源也不同，并且這三種負(fù)荷所花費(fèi)的資源從多到少排列為：認(rèn)知、視覺(jué)、動(dòng)作。所以有必要通過(guò)多幾次點(diǎn)擊（動(dòng)作負(fù)荷）來(lái)減少用戶的認(rèn)知負(fù)荷（包括記憶）那是值得的，因?yàn)橛脩舨槐貏?dòng)腦思考。在下文中視覺(jué)負(fù)荷和動(dòng)作負(fù)荷分別對(duì)應(yīng)用戶的視覺(jué)流和操作流。
我們結(jié)合實(shí)際的場(chǎng)景去分析一下負(fù)荷理論是如何影響用戶在操作中的體驗(yàn)的。首先我們看下移動(dòng)端注冊(cè)表單的設(shè)計(jì)，產(chǎn)品需要獲客，運(yùn)營(yíng)，留存用戶，如果一個(gè)產(chǎn)品在注冊(cè)階段體驗(yàn)不友好的話那將嚴(yán)重影響產(chǎn)品的獲客轉(zhuǎn)化率，我們針對(duì)不同的設(shè)計(jì)思路設(shè)計(jì)了三種注冊(cè)方案：如下圖
方案1：一個(gè)界面將全部的注冊(cè)相關(guān)聯(lián)的信息元素展示出來(lái)：返回按鈕/手機(jī)號(hào)/短信驗(yàn)證碼/圖形驗(yàn)證碼/密碼
方案2：分布進(jìn)行操作,點(diǎn)擊下一步進(jìn)入下一組表單
方案3：分布進(jìn)行操作,填寫(xiě)驗(yàn)證碼時(shí)無(wú)下一步操作，自動(dòng)完成校驗(yàn)，無(wú)密碼輸入
注冊(cè)-方案討論
注冊(cè)-方案1討論
優(yōu)點(diǎn)：一個(gè)頁(yè)面將所有的信息元素展示出來(lái)，用戶可以看到所有需要輸入填寫(xiě)的內(nèi)容，相對(duì)于2和3減少了用戶在頁(yè)面之間的跳轉(zhuǎn)操作也就是說(shuō)減輕了用戶的動(dòng)作負(fù)荷。
缺點(diǎn)：1.一次性將所有元素展示出來(lái)在心理上給用戶造成很大的心理壓力，使用戶覺(jué)得此項(xiàng)任務(wù)完成困難，相比方案2和3，從克服負(fù)荷的理論角度來(lái)說(shuō)增加了用戶的認(rèn)知負(fù)荷和視覺(jué)負(fù)荷，用戶需要通過(guò)眼球去識(shí)別這么多信息元素將這些元素傳遞給大腦進(jìn)行處理解析，耗費(fèi)用戶更多的腦力資源和心理成本，從而很容易導(dǎo)致用戶放棄注冊(cè)。2.注冊(cè)按鈕被鍵盤(pán)覆蓋導(dǎo)致用戶不方便進(jìn)行點(diǎn)擊。
注冊(cè)-方案2討論
優(yōu)點(diǎn)：與方案1相比操作流程分步驟進(jìn)行，每個(gè)頁(yè)面只完成一件事情，讓用戶認(rèn)知上覺(jué)得不需要花費(fèi)很長(zhǎng)時(shí)間，降低了用戶的認(rèn)知負(fù)荷，操作按鈕在輸入文本后高亮顯示避免用戶誤操作。
缺點(diǎn)：分步操作雖然降低了用戶的認(rèn)知負(fù)荷但卻增加了用戶的動(dòng)作負(fù)荷用戶需要多點(diǎn)擊兩次。
注冊(cè)-方案3討論
優(yōu)點(diǎn)：同方案2一樣操作流程分步驟進(jìn)行，但相對(duì)方案2減少了設(shè)置密碼的步驟和填寫(xiě)完驗(yàn)證碼后點(diǎn)擊下一步的流程，在降低用戶認(rèn)知負(fù)荷的情況下進(jìn)一步降低了用戶的操作符合，極大的提高了注冊(cè)效率。用戶在輸入完驗(yàn)證碼后程序自動(dòng)進(jìn)行校驗(yàn)，進(jìn)入到下一個(gè)流程，圖形驗(yàn)證碼可以在觸發(fā)安全策略的情況下出現(xiàn)，可以防止黑客的短信轟炸給用戶帶來(lái)的騷擾，具體的短信驗(yàn)證碼和圖形驗(yàn)證碼的發(fā)送頻率，反饋措施，驗(yàn)證形式在這里就不做過(guò)多的討論了，那么把密碼在注冊(cè)階段砍掉后用戶可以直接進(jìn)入app體驗(yàn)想要的功能，當(dāng)用戶在退出登錄時(shí)我們給用戶一個(gè)提示去引導(dǎo)修改密碼，而且我們可以有短信驗(yàn)證碼/密碼等多種登陸方式供用戶選擇，好的產(chǎn)品是懂得克制的，盡可能的去做減法來(lái)保證用戶體驗(yàn)。
缺點(diǎn)：相對(duì)于方案1來(lái)說(shuō)增加了一步操作，增加了用戶的動(dòng)作負(fù)荷。
我們?cè)谠O(shè)計(jì)交互流程的時(shí)候，縮短用戶路徑并不意味著要減少操作步驟，我們需要在認(rèn)知/視覺(jué)/動(dòng)作負(fù)荷中去平衡和取舍，有時(shí)候我們有必要通過(guò)多增加幾次點(diǎn)擊適當(dāng)拉長(zhǎng)用戶的動(dòng)作負(fù)荷來(lái)減輕人的認(rèn)知負(fù)荷，讓用戶不加思考的在不知不覺(jué)中達(dá)成某個(gè)目標(biāo)。
但是當(dāng)我們面對(duì)一些長(zhǎng)表單，填寫(xiě)提交內(nèi)容非常多的時(shí)候應(yīng)該如何處理呢？不能無(wú)限制的增加用戶的操作步驟，操作符合太多用戶也會(huì)感覺(jué)到厭煩。
下面我們舉2個(gè)長(zhǎng)表單應(yīng)該如何去設(shè)計(jì)的例子幫助大家進(jìn)行思考。第一個(gè)是一些企業(yè)需要用戶進(jìn)行實(shí)名認(rèn)證/添加銀行卡/的場(chǎng)景我們分為兩個(gè)方案
實(shí)名認(rèn)證-方案討論
方案1我們不用做過(guò)多的討論一個(gè)頁(yè)面將所有的信息元素展示出來(lái)，他的優(yōu)缺點(diǎn)我們已經(jīng)通過(guò)注冊(cè)流程進(jìn)行過(guò)分析了。
我們重點(diǎn)看一下方案2有何不同之處，其實(shí)是將方案1分為了兩個(gè)步驟，不一次性都展示出來(lái)，減輕用戶的認(rèn)知負(fù)荷，當(dāng)用戶在輸入姓名和卡號(hào)后進(jìn)入下一步操作，第二個(gè)頁(yè)面只展示卡類型表單，當(dāng)用戶輸入并選擇后在當(dāng)前頁(yè)面卡類型表單下方緊接著出現(xiàn)手機(jī)號(hào)等相關(guān)操作，進(jìn)行分布填寫(xiě)，這樣用戶不用跳轉(zhuǎn)到新的頁(yè)面在當(dāng)前頁(yè)面即可進(jìn)行分布操作，既可以查看之前填寫(xiě)的內(nèi)容又減輕了用戶的認(rèn)知負(fù)荷。在體驗(yàn)上讓用戶不知不覺(jué)完成綁定操作。
我們看到此表單的申請(qǐng)內(nèi)容非常長(zhǎng)，如果一下子給用戶全部展示出來(lái)會(huì)極大增加用戶的認(rèn)知負(fù)荷，從而導(dǎo)致用戶放棄申請(qǐng)，我們將操作過(guò)程進(jìn)行分步驟進(jìn)行，每個(gè)步驟的信息元素進(jìn)行分組，我們?cè)诘诙降臅r(shí)候，將個(gè)人信息分成五個(gè)小卡片讓用戶可以看到完成的情況，當(dāng)所有必填信息填寫(xiě)完成下一步按鈕高亮顯示，用戶點(diǎn)擊進(jìn)入到第二個(gè)卡片，以此類推進(jìn)行，用戶還可以上下滑動(dòng)查看之前填寫(xiě)的內(nèi)容。
分步進(jìn)行并不是我們?cè)黾舆^(guò)多的頁(yè)面進(jìn)行，有時(shí)候當(dāng)表單信息過(guò)多時(shí)我們可以在一個(gè)頁(yè)面中逐步將信息展示，在控制住操作負(fù)荷的同時(shí)，降低用戶的認(rèn)知負(fù)荷。每一個(gè)關(guān)鍵任務(wù)流程表單頁(yè)面制在3-5步為佳。
國(guó)外的一些公司曾經(jīng)做過(guò)一些A/B test，分步注冊(cè)的注冊(cè)成功率要比非分步注冊(cè)的高很多。當(dāng)然大家可以通過(guò)A/B test去驗(yàn)證我們的分析結(jié)果進(jìn)行一個(gè)數(shù)據(jù)上的參考依據(jù)。但大家不要被數(shù)據(jù)所迷惑影響了自己的判斷力。
針對(duì)此長(zhǎng)表單填寫(xiě)方案的下一步按鈕，主要有三種設(shè)計(jì)模式如下圖：
1.下一步按鈕跟隨表單移動(dòng)
2.下一步按鈕固定到頁(yè)面底部懸浮
3.下一步按鈕放在頁(yè)面的右上角位置。
方案1的下一步按鈕跟隨長(zhǎng)表單移動(dòng)，用戶的閱讀軌跡從上往下，按鈕放在跟隨表單的位置，視覺(jué)流和操作流是一致的，眼球運(yùn)動(dòng)軌跡和手指要到達(dá)目標(biāo)按鈕位置的運(yùn)動(dòng)軌跡路徑是最短的。
縮短用戶路徑，用戶大腦可以更快的接受信息，是符合用戶的操作體驗(yàn)的，順暢自然，但是會(huì)存在一個(gè)問(wèn)題當(dāng)用戶輸入表單調(diào)取鍵盤(pán)時(shí)操作按鈕會(huì)被鍵盤(pán)遮擋住，這樣用戶就需要將鍵盤(pán)推出才可進(jìn)行點(diǎn)擊，不論是android還是ios都給用戶增加了操作負(fù)荷，雖然鍵盤(pán)是支持修改的但是有很多用戶會(huì)忽略掉鍵盤(pán)上的提交按鈕并且不習(xí)慣。在認(rèn)知和視覺(jué)負(fù)荷上都沒(méi)有將按鈕放在表單下方的位置最直接，那么還有沒(méi)有更好的辦法呢？
如下圖，我們可以將按鈕和表單跟隨鍵盤(pán)移動(dòng)，在鍵盤(pán)彈出時(shí)將按鈕和表單向上推動(dòng)這樣就解決了按鈕被鍵盤(pán)遮擋的問(wèn)題，視覺(jué)流和操作流也做到了一致的體驗(yàn)。我們可以上下滾動(dòng)屏幕去查看表單信息，手指單擊鍵盤(pán)外區(qū)域可將鍵盤(pán)推出。這種解決方案在前端開(kāi)發(fā)技術(shù)上也是可以實(shí)現(xiàn)的，但是需要考慮多種機(jī)型適配的問(wèn)題。所以是目前體驗(yàn)最符合用戶操作體驗(yàn)的一個(gè)方案。
方案2的下一步按鈕固定于頁(yè)面底部懸浮用戶在填寫(xiě)完表單后再查看按鈕會(huì)拉長(zhǎng)用戶的視覺(jué)流和操作流，這樣用戶就會(huì)接受比較慢，操作路徑被拉長(zhǎng)，從而導(dǎo)致時(shí)間成本增加。而且再輸入表單時(shí)按鈕依舊會(huì)被鍵盤(pán)擋住相對(duì)于方案1也增加了用戶的操作負(fù)荷。
方案3我們將下一步按鈕至于右上角，雖然解決了按鈕被鍵盤(pán)遮擋的問(wèn)題，但用戶的視覺(jué)軌跡從上至下再向上走，在表單內(nèi)容過(guò)長(zhǎng)時(shí)用戶的視覺(jué)流和操作流是混亂不一致的，拉長(zhǎng)了用戶的行為路徑，在信息傳達(dá)接受的效率和操作行為效率上都降低了。
對(duì)于方案2操作按鈕固定懸浮在頁(yè)面底部的場(chǎng)景多見(jiàn)于操作按鈕非常重要且是一個(gè)功能入口，在視覺(jué)上也非常明顯的吸引用戶的注意力引導(dǎo)用戶進(jìn)行點(diǎn)擊，常見(jiàn)于非文本輸入信息的功能入口，和選擇信息的確認(rèn)，我們可以看下淘寶/考拉/京東這些加入購(gòu)物車和立即購(gòu)買按鈕固定到底部都很吸引用戶注意力并強(qiáng)烈吸引用戶進(jìn)行點(diǎn)擊的。
總結(jié)
用戶完成某項(xiàng)任務(wù)需要克服三類負(fù)荷：認(rèn)知負(fù)荷，視覺(jué)負(fù)荷，動(dòng)作負(fù)荷，并且這三種負(fù)荷所花費(fèi)的資源成本從多到少排列為：認(rèn)知>視覺(jué)>動(dòng)作。所以有必要通過(guò)多幾次點(diǎn)擊（動(dòng)作負(fù)荷）來(lái)減少用戶的認(rèn)知負(fù)荷（包括記憶）。提高用戶操作時(shí)的轉(zhuǎn)化率，從而實(shí)現(xiàn)產(chǎn)品的用戶增長(zhǎng)。
關(guān)于操作按鈕位置的問(wèn)題大概總結(jié)一下四種規(guī)律：
case1:跟隨表單移動(dòng)
適用于有文本輸入信息的各種長(zhǎng)短表單信息的提交或下一步操作
case2:跟隨鍵盤(pán)移動(dòng)
適合于用戶需要快速提交的一些短表單信息，如果表單太長(zhǎng)會(huì)遮擋底部的表單內(nèi)容不適用，有時(shí)需要case1/case2結(jié)合去使用
case3:固定到頁(yè)面底部
適合于非文本輸入信息的操作類按鈕或者選擇信息后的確認(rèn)提交按鈕，需要強(qiáng)烈吸引用戶注意力促進(jìn)用戶快速完成提交的場(chǎng)景。
case4:放在頁(yè)面右上角
適合于表單信息非常重要，不影響用戶對(duì)表單內(nèi)容的注意力，讓用戶專注于表單本身的場(chǎng)景，且必填項(xiàng)未超過(guò)一屏非必填項(xiàng)超過(guò)一屏的情況。
case5:特殊情況需靈活運(yùn)用
一個(gè)好的設(shè)計(jì)是要在美感，信息傳達(dá)效率，操作效率，情感關(guān)懷四個(gè)條件上都具備。
在設(shè)計(jì)時(shí)一個(gè)小小的按鈕我們要考慮很多因素，任何元素位置的的擺放都會(huì)影響到用戶在操作過(guò)程中的體驗(yàn)，我們應(yīng)該考慮更多視覺(jué)表現(xiàn)層背后的的東西，把握住用戶需求才有可能贏得用戶。今天先分享到這里文章中的觀點(diǎn)我所說(shuō)的不一定是對(duì)的。僅供大家學(xué)習(xí)交流。
這篇文章對(duì)你幫助大嗎？
