在進(jìn)行交互設(shè)計時，如何合理縮短用戶操作路徑，提升用戶操作的效率呢？

 

首先我們說一下什么是負(fù)荷？
 

 

在人機(jī)工程學(xué)里，用戶完成某項(xiàng)任務(wù)需要克服三類負(fù)荷：認(rèn)知負(fù)荷，視覺負(fù)荷，動作負(fù)荷，認(rèn)知負(fù)荷指的是用戶思考和記憶的成本，視覺負(fù)荷是信息傳達(dá)效率，比如我們?yōu)g覽app或頁面時眼睛所看到的東西，動作負(fù)荷是我們的手指點(diǎn)擊或觸發(fā)的一些行為。不同負(fù)荷所耗費(fèi)的腦力資源也不同，并且這三種負(fù)荷所花費(fèi)的資源從多到少排列為：認(rèn)知、視覺、動作。所以有必要通過多幾次點(diǎn)擊（動作負(fù)荷）來減少用戶的認(rèn)知負(fù)荷（包括記憶）那是值得的，因?yàn)橛脩舨槐貏幽X思考。在下文中視覺負(fù)荷和動作負(fù)荷分別對應(yīng)用戶的視覺流和操作流。

我們結(jié)合實(shí)際的場景去分析一下負(fù)荷理論是如何影響用戶在操作中的體驗(yàn)的。首先我們看下移動端注冊表單的設(shè)計，產(chǎn)品需要獲客，運(yùn)營，留存用戶，如果一個產(chǎn)品在注冊階段體驗(yàn)不友好的話那將嚴(yán)重影響產(chǎn)品的獲客轉(zhuǎn)化率，我們針對不同的設(shè)計思路設(shè)計了三種注冊方案：如下圖

 

方案1：一個界面將全部的注冊相關(guān)聯(lián)的信息元素展示出來：返回按鈕/手機(jī)號/短信驗(yàn)證碼/圖形驗(yàn)證碼/密碼

 

方案2：分布進(jìn)行操作,點(diǎn)擊下一步進(jìn)入下一組表單

 

方案3：分布進(jìn)行操作,填寫驗(yàn)證碼時無下一步操作，自動完成校驗(yàn)，無密碼輸入

注冊-方案討論

 

注冊-方案1討論

 

優(yōu)點(diǎn)：一個頁面將所有的信息元素展示出來，用戶可以看到所有需要輸入填寫的內(nèi)容，相對于2和3減少了用戶在頁面之間的跳轉(zhuǎn)操作也就是說減輕了用戶的動作負(fù)荷。

 

缺點(diǎn)：1.一次性將所有元素展示出來在心理上給用戶造成很大的心理壓力，使用戶覺得此項(xiàng)任務(wù)完成困難，相比方案2和3，從克服負(fù)荷的理論角度來說增加了用戶的認(rèn)知負(fù)荷和視覺負(fù)荷，用戶需要通過眼球去識別這么多信息元素將這些元素傳遞給大腦進(jìn)行處理解析，耗費(fèi)用戶更多的腦力資源和心理成本，從而很容易導(dǎo)致用戶放棄注冊。2.注冊按鈕被鍵盤覆蓋導(dǎo)致用戶不方便進(jìn)行點(diǎn)擊。

 

注冊-方案2討論

 

優(yōu)點(diǎn)：與方案1相比操作流程分步驟進(jìn)行，每個頁面只完成一件事情，讓用戶認(rèn)知上覺得不需要花費(fèi)很長時間，降低了用戶的認(rèn)知負(fù)荷，操作按鈕在輸入文本后高亮顯示避免用戶誤操作。

 

缺點(diǎn)：分步操作雖然降低了用戶的認(rèn)知負(fù)荷但卻增加了用戶的動作負(fù)荷用戶需要多點(diǎn)擊兩次。

 

注冊-方案3討論

 

優(yōu)點(diǎn)：同方案2一樣操作流程分步驟進(jìn)行，但相對方案2減少了設(shè)置密碼的步驟和填寫完驗(yàn)證碼后點(diǎn)擊下一步的流程，在降低用戶認(rèn)知負(fù)荷的情況下進(jìn)一步降低了用戶的操作符合，極大的提高了注冊效率。用戶在輸入完驗(yàn)證碼后程序自動進(jìn)行校驗(yàn)，進(jìn)入到下一個流程，圖形驗(yàn)證碼可以在觸發(fā)安全策略的情況下出現(xiàn)，可以防止黑客的短信轟炸給用戶帶來的騷擾，具體的短信驗(yàn)證碼和圖形驗(yàn)證碼的發(fā)送頻率，反饋措施，驗(yàn)證形式在這里就不做過多的討論了，那么把密碼在注冊階段砍掉后用戶可以直接進(jìn)入app體驗(yàn)想要的功能，當(dāng)用戶在退出登錄時我們給用戶一個提示去引導(dǎo)修改密碼，而且我們可以有短信驗(yàn)證碼/密碼等多種登陸方式供用戶選擇，好的產(chǎn)品是懂得克制的，盡可能的去做減法來保證用戶體驗(yàn)。

 

缺點(diǎn)：相對于方案1來說增加了一步操作，增加了用戶的動作負(fù)荷。

 

我們在設(shè)計交互流程的時候，縮短用戶路徑并不意味著要減少操作步驟，我們需要在認(rèn)知/視覺/動作負(fù)荷中去平衡和取舍，有時候我們有必要通過多增加幾次點(diǎn)擊適當(dāng)拉長用戶的動作負(fù)荷來減輕人的認(rèn)知負(fù)荷，讓用戶不加思考的在不知不覺中達(dá)成某個目標(biāo)。

 

 

但是當(dāng)我們面對一些長表單，填寫提交內(nèi)容非常多的時候應(yīng)該如何處理呢？不能無限制的增加用戶的操作步驟，操作符合太多用戶也會感覺到厭煩。

下面我們舉2個長表單應(yīng)該如何去設(shè)計的例子幫助大家進(jìn)行思考。第一個是一些企業(yè)需要用戶進(jìn)行實(shí)名認(rèn)證/添加銀行卡/的場景我們分為兩個方案

實(shí)名認(rèn)證-方案討論

 

方案1我們不用做過多的討論一個頁面將所有的信息元素展示出來，他的優(yōu)缺點(diǎn)我們已經(jīng)通過注冊流程進(jìn)行過分析了。

 

我們重點(diǎn)看一下方案2有何不同之處，其實(shí)是將方案1分為了兩個步驟，不一次性都展示出來，減輕用戶的認(rèn)知負(fù)荷，當(dāng)用戶在輸入姓名和卡號后進(jìn)入下一步操作，第二個頁面只展示卡類型表單，當(dāng)用戶輸入并選擇后在當(dāng)前頁面卡類型表單下方緊接著出現(xiàn)手機(jī)號等相關(guān)操作，進(jìn)行分布填寫，這樣用戶不用跳轉(zhuǎn)到新的頁面在當(dāng)前頁面即可進(jìn)行分布操作，既可以查看之前填寫的內(nèi)容又減輕了用戶的認(rèn)知負(fù)荷。在體驗(yàn)上讓用戶不知不覺完成綁定操作。

我們看到此表單的申請內(nèi)容非常長，如果一下子給用戶全部展示出來會極大增加用戶的認(rèn)知負(fù)荷，從而導(dǎo)致用戶放棄申請，我們將操作過程進(jìn)行分步驟進(jìn)行，每個步驟的信息元素進(jìn)行分組，我們在第二步的時候，將個人信息分成五個小卡片讓用戶可以看到完成的情況，當(dāng)所有必填信息填寫完成下一步按鈕高亮顯示，用戶點(diǎn)擊進(jìn)入到第二個卡片，以此類推進(jìn)行，用戶還可以上下滑動查看之前填寫的內(nèi)容。

分步進(jìn)行并不是我們增加過多的頁面進(jìn)行，有時候當(dāng)表單信息過多時我們可以在一個頁面中逐步將信息展示，在控制住操作負(fù)荷的同時，降低用戶的認(rèn)知負(fù)荷。每一個關(guān)鍵任務(wù)流程表單頁面制在3-5步為佳。

 

國外的一些公司曾經(jīng)做過一些A/B test，分步注冊的注冊成功率要比非分步注冊的高很多。當(dāng)然大家可以通過A/B test去驗(yàn)證我們的分析結(jié)果進(jìn)行一個數(shù)據(jù)上的參考依據(jù)。但大家不要被數(shù)據(jù)所迷惑影響了自己的判斷力。

 

 

針對此長表單填寫方案的下一步按鈕，主要有三種設(shè)計模式如下圖：

1.下一步按鈕跟隨表單移動

2.下一步按鈕固定到頁面底部懸浮

3.下一步按鈕放在頁面的右上角位置。

 

方案1的下一步按鈕跟隨長表單移動，用戶的閱讀軌跡從上往下，按鈕放在跟隨表單的位置，視覺流和操作流是一致的，眼球運(yùn)動軌跡和手指要到達(dá)目標(biāo)按鈕位置的運(yùn)動軌跡路徑是最短的。

 

縮短用戶路徑，用戶大腦可以更快的接受信息，是符合用戶的操作體驗(yàn)的，順暢自然，但是會存在一個問題當(dāng)用戶輸入表單調(diào)取鍵盤時操作按鈕會被鍵盤遮擋住，這樣用戶就需要將鍵盤推出才可進(jìn)行點(diǎn)擊，不論是android還是ios都給用戶增加了操作負(fù)荷，雖然鍵盤是支持修改的但是有很多用戶會忽略掉鍵盤上的提交按鈕并且不習(xí)慣。在認(rèn)知和視覺負(fù)荷上都沒有將按鈕放在表單下方的位置最直接，那么還有沒有更好的辦法呢？

如下圖，我們可以將按鈕和表單跟隨鍵盤移動，在鍵盤彈出時將按鈕和表單向上推動這樣就解決了按鈕被鍵盤遮擋的問題，視覺流和操作流也做到了一致的體驗(yàn)。我們可以上下滾動屏幕去查看表單信息，手指單擊鍵盤外區(qū)域可將鍵盤推出。這種解決方案在前端開發(fā)技術(shù)上也是可以實(shí)現(xiàn)的，但是需要考慮多種機(jī)型適配的問題。所以是目前體驗(yàn)最符合用戶操作體驗(yàn)的一個方案。

 

方案2的下一步按鈕固定于頁面底部懸浮用戶在填寫完表單后再查看按鈕會拉長用戶的視覺流和操作流，這樣用戶就會接受比較慢，操作路徑被拉長，從而導(dǎo)致時間成本增加。而且再輸入表單時按鈕依舊會被鍵盤擋住相對于方案1也增加了用戶的操作負(fù)荷。

 

方案3我們將下一步按鈕至于右上角，雖然解決了按鈕被鍵盤遮擋的問題，但用戶的視覺軌跡從上至下再向上走，在表單內(nèi)容過長時用戶的視覺流和操作流是混亂不一致的，拉長了用戶的行為路徑，在信息傳達(dá)接受的效率和操作行為效率上都降低了。

對于方案2操作按鈕固定懸浮在頁面底部的場景多見于操作按鈕非常重要且是一個功能入口，在視覺上也非常明顯的吸引用戶的注意力引導(dǎo)用戶進(jìn)行點(diǎn)擊，常見于非文本輸入信息的功能入口，和選擇信息的確認(rèn)，我們可以看下淘寶/考拉/京東這些加入購物車和立即購買按鈕固定到底部都很吸引用戶注意力并強(qiáng)烈吸引用戶進(jìn)行點(diǎn)擊的。

 

總結(jié)

用戶完成某項(xiàng)任務(wù)需要克服三類負(fù)荷：認(rèn)知負(fù)荷，視覺負(fù)荷，動作負(fù)荷，并且這三種負(fù)荷所花費(fèi)的資源成本從多到少排列為：認(rèn)知>視覺>動作。所以有必要通過多幾次點(diǎn)擊（動作負(fù)荷）來減少用戶的認(rèn)知負(fù)荷（包括記憶）。提高用戶操作時的轉(zhuǎn)化率，從而實(shí)現(xiàn)產(chǎn)品的用戶增長。

 

關(guān)于操作按鈕位置的問題大概總結(jié)一下四種規(guī)律：

case1:跟隨表單移動

適用于有文本輸入信息的各種長短表單信息的提交或下一步操作

 

case2:跟隨鍵盤移動

適合于用戶需要快速提交的一些短表單信息，如果表單太長會遮擋底部的表單內(nèi)容不適用，有時需要case1/case2結(jié)合去使用

 

case3:固定到頁面底部

適合于非文本輸入信息的操作類按鈕或者選擇信息后的確認(rèn)提交按鈕，需要強(qiáng)烈吸引用戶注意力促進(jìn)用戶快速完成提交的場景。

 

case4:放在頁面右上角

適合于表單信息非常重要，不影響用戶對表單內(nèi)容的注意力，讓用戶專注于表單本身的場景，且必填項(xiàng)未超過一屏非必填項(xiàng)超過一屏的情況。

 

case5:特殊情況需靈活運(yùn)用

 

一個好的設(shè)計是要在美感，信息傳達(dá)效率，操作效率，情感關(guān)懷四個條件上都具備。

在設(shè)計時一個小小的按鈕我們要考慮很多因素，任何元素位置的的擺放都會影響到用戶在操作過程中的體驗(yàn)，我們應(yīng)該考慮更多視覺表現(xiàn)層背后的的東西，把握住用戶需求才有可能贏得用戶。今天先分享到這里文章中的觀點(diǎn)我所說的不一定是對的。僅供大家學(xué)習(xí)交流。

 

這篇文章對你幫助大嗎？