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