起點(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í)從防錯(cuò)到容錯(cuò)，設(shè)計(jì)思維升級(jí)
作者從實(shí)際工作出發(fā)，討論了表單設(shè)計(jì)中誤操作的背后思維。
這段時(shí)間，在準(zhǔn)備CRM升級(jí)改版工作，其中有一個(gè)可用性問題。
有部分用戶反饋添加工單功能的體驗(yàn)不好，經(jīng)了解后，這些用戶需要經(jīng)常添加工單，而工單填寫的內(nèi)容較多，她們有時(shí)會(huì)不小心點(diǎn)到模態(tài)背景，把添加工單彈窗關(guān)閉了，而一關(guān)閉，原先填寫的內(nèi)容也會(huì)隨著刪除，浪費(fèi)時(shí)間和精力。
在CRM中，內(nèi)容較多的表單都是采用側(cè)滑彈窗控件，彈窗的關(guān)閉方式共有4種，“點(diǎn)擊關(guān)閉圖標(biāo)”、“點(diǎn)擊模態(tài)背景”、“點(diǎn)擊收起圖標(biāo)”、“點(diǎn)擊底欄取消按鈕”，其中“點(diǎn)擊收起圖標(biāo)”方式所起作用不大，在實(shí)際場(chǎng)景中，也比較少人操作，所以這種方式在新版本中將被去掉，這里不做討論。
添加工單彈窗原設(shè)計(jì)
為什么容易誤操作？
從界面來看，“點(diǎn)擊關(guān)閉圖標(biāo)”“點(diǎn)擊底欄取消按鈕”的方式都沒有這個(gè)問題，因?yàn)椴僮骶_度要求高，存在誤點(diǎn)擊可能性小，但是“點(diǎn)擊模態(tài)背景”的方式就不一樣了，在這個(gè)頁面中，模態(tài)背景和內(nèi)容區(qū)所占面積差不多，容易被誤點(diǎn)到。
所以第一個(gè)原因是模態(tài)背景較大，而第二個(gè)原因則是，在這么長(zhǎng)的表單中，用戶有間隔保存的需求，但是保存按鈕卻沒有時(shí)刻被看到。
所以針對(duì)以上的原因，有了以下方案：
- 加大內(nèi)容區(qū)面積，減少模態(tài)面積，同時(shí)把保存按鈕一欄固定懸浮于底部；
- 點(diǎn)擊模態(tài)背景時(shí)，給二次確認(rèn)提示，同時(shí)把保存按鈕一欄固定懸浮于底部；
- 去掉“點(diǎn)擊模態(tài)背景”關(guān)閉彈窗的方式，同時(shí)把保存按鈕一欄固定懸浮于底部。
但是這三個(gè)方案都存在或多或少的缺點(diǎn)：
第一個(gè)方案，只能從一定程度上減少誤點(diǎn)擊概率，不能完全解決問題；
第二個(gè)方案，如果只運(yùn)用在工單模態(tài)或有操作復(fù)雜頁面，會(huì)影響用戶習(xí)慣，如果全部運(yùn)用，那有的場(chǎng)景又不需要二次確認(rèn)，操作麻煩；
第三個(gè)方案，不管是運(yùn)用在工單模態(tài)或有操作復(fù)雜頁面，還是運(yùn)用全部頁面，都會(huì)影響用戶習(xí)慣，因?yàn)橐呀?jīng)有大部分用戶適應(yīng)了通過點(diǎn)擊模態(tài)背景來關(guān)閉彈窗的方式，而且反饋也是比較快捷方便的。
當(dāng)面對(duì)著這三個(gè)方案一籌莫展的時(shí)候，我開始想，是不是哪里弄錯(cuò)了，或者思路是不是狹窄了被捆住了，是不是還有其他更好的方案。
后來，我發(fā)現(xiàn)這三種方案其實(shí)都是屬于防錯(cuò)的措施，就是減少或防止用戶犯錯(cuò)發(fā)生的機(jī)會(huì)。那如果允許用戶犯錯(cuò)呢，犯錯(cuò)之后再給補(bǔ)救措施呢，這樣一想，頓時(shí)有種豁然開朗的感覺。
再次分析需求，用戶在填寫表單過程中，誤點(diǎn)擊模態(tài)背景，把彈窗關(guān)閉了，重新進(jìn)來之后內(nèi)容被清除了，需要全部重填。
這個(gè)需求中，有兩個(gè)點(diǎn)可以抓住，一個(gè)是誤點(diǎn)擊，另一個(gè)重新進(jìn)來之后內(nèi)容被清除掉，之前的全部思考都集中在第一個(gè)點(diǎn)上，而忽略了第二個(gè)點(diǎn)。所以有了另一個(gè)方案，把重心放在容錯(cuò)上，適當(dāng)防錯(cuò)。
添加工單彈窗新方案
這個(gè)方案，判斷通過點(diǎn)擊模態(tài)彈窗方式關(guān)閉彈窗時(shí)是否處于編輯狀態(tài)，若處于編輯狀態(tài)，則在關(guān)閉彈窗的同時(shí)緩存已編輯數(shù)據(jù)，在用戶下次進(jìn)到彈窗時(shí)顯示恢復(fù)提醒，同時(shí)也加大內(nèi)容區(qū)面積，把保存按鈕固定懸浮于底部，真正地解決問題。
最后，這個(gè)方案也得到了反饋用戶和產(chǎn)品同事的認(rèn)可和支持。
分享這篇文章是因?yàn)楦杏|較深，“防錯(cuò)”和“容錯(cuò)”都是常見的可用性原則，但在日常工作中，“容錯(cuò)”卻很少用到，甚至有時(shí)想不起來！
原本在運(yùn)用上，就應(yīng)該是“防錯(cuò)”在先，“容錯(cuò)”在后，盡量先讓用戶不要出錯(cuò)，出錯(cuò)了也有補(bǔ)救措施。
但是現(xiàn)在很多時(shí)候只停留在防錯(cuò)層面，一到“刪除”操作就給“二次確認(rèn)提示”，再不思考其他，好像是萬能的，但其實(shí)不然，有的場(chǎng)景并不適合，例如上述例子。所以不要成為遇到“刪除”只會(huì)“二次確認(rèn)”的交互，這著實(shí)不妙啊。
本文由 @奶茶喝光了 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議。
交互設(shè)計(jì)師
文中提到[判斷通過點(diǎn)擊模態(tài)彈窗方式關(guān)閉彈窗時(shí)是否處于編輯狀態(tài)]，請(qǐng)問，填寫表格時(shí)何種情況才是編輯狀態(tài)？
也想到這個(gè)問題，也許是判斷輸入框和選擇框的狀態(tài)是否改變？非默認(rèn)狀態(tài)=編輯狀態(tài)？
這里只需要判斷有沒有輸入字符即可，有輸入字符就緩存下來，沒輸入字符就不需要緩存