[點晴永久免費OA]B端產品的核心頁面：表單交互設計
表單頁設計 表單（Form）是軟件產品錄入數據的經典頁面。一個典型的表單頁面中，要包括數據錄入控件，以及提交、取消按鈕。表單一般設計成獨立實體的信息錄入界面，例如客戶信息錄入與商品信息錄入，也可以設計成幾個實體的總和錄入界面，例如一張表單中同時錄入客戶、聯(lián)系人、公司幾個數據實體的信息。 表單在B端產品中使用頻繁，對于很多企業(yè)用戶，每天都要通過表單錄入大量數據，執(zhí)行業(yè)務邏輯。例如銷售要錄入客戶線索，采購要錄入采購清單，運營人員要錄入商品信息。表單設計不合理，會嚴重降低用戶的工作效率和使用體驗。 土豆：“說真的，我曾經有很多次被一個表單搞崩潰的經歷！在咱們公司就經歷過！” 大可：“是么，說來聽聽！” 土豆：“入職以后，HR讓我在線上再次把個人信息填一遍，也不知道這是誰做的系統(tǒng)，填這個表單都快把我搞崩潰了！足足折騰了兩個小時，我當時還專門把錄入界面截圖了，就是圖7-x！”
圖7 x 一個冗長的信息采集表單頁面 大可（臉上火辣辣，印象中當年好像是自己團隊的成員設計的這個信息收集頁面）：“呃，你還挺有心。。?！?/span> 土豆：“必須的，當時被這個頁面搞崩潰了！簡直就是人機交互反面教材的合集！心想著將來如果寫書，一定要拿這個當案例！” 土豆（喝了口水，義憤填膺的回憶道）：“ 第一個問題，內容太多。幾十個字段，讓人在一個頁面操作完成，一看到就讓人頭大！ 第二個問題，沒有暫存機制。這么多字段，如果錄入一半，不小心關掉頁面，再進來就全沒了！ 第三個問題：重復錄入。很多個人信息入職時已經錄入過了，又讓人填一遍，真的很煩！ 第四個問題：不懂字段含義。例如公積金繳費年限這個字段，我就不太理解這是指連續(xù)繳費年限，還是累計繳費年限。 第四個問題：校驗延遲。錄入不合規(guī)的數據，只有在點擊提交時才會提示錯在哪里，非常被動！ 第五個問題：提示文案太技術化，比如說，校驗后提示說‘當前住址子節(jié)點非法’，這誰能知道是啥意思，后來我琢磨很久，才知道說的是地址選擇沒有到區(qū)縣一級。 第六個問題：Session設置不合理，這個才是最讓人崩潰的，這么多字段，這么多不清晰的校驗，我認認真真仔仔細細經過多次嘗試終于填完了，結果點擊提交按鈕，系統(tǒng)提示說‘會話超時，請重新登陸！’，然后頁面就刷新了，再回來，所有東西都沒了！我真是欲哭無淚！” 大可（尷尬的笑了笑）：“確實很讓人惱火！”（心想著，當時我就應該多看一眼設計，沒想到之前那個產品經理設計的這么個玩意兒） 土豆：“說實話，這都什么年代了，移動互聯(lián)網APP的體驗已經如此絲滑了，但現(xiàn)實中依然有很多toB/toG的軟件，把表單設計成這個德行！每次看到這樣的設計，我真想把產品經理綁起來！” 相信大家都有和土豆類似的經歷。作為B端產品最常見的界面，如何將表單設計的好用、易用呢？這里總結幾條建議： 自動化數據錄入：產品經理設計表單時，首先要思考，哪些字段數據可以通過自動化的手段獲取，避免用戶手工錄入。例如，從其他系統(tǒng)通過接口拿到字段，通過手機攝像頭讓用戶掃描卡片證件經過OCR識別字段，根據前邊的字段聯(lián)動填充字段（常見的做法，先讓用戶提交身份證信息，接下來生日、性別都能自動帶出來）?？傊?，盡量減少表單的錄入工作，才是提效的根本。 拆分長頁面：做過C端產品設計的人都知道，頁面錄入項不能太多，用戶根本沒有耐心全部填寫完，將內容分解成幾個頁面，可以減輕用戶的負擔，也能實現(xiàn)內容的暫存。同理，對于內容比較多的B端表單，也可以按照數據的分類，將錄入步驟拆成幾個，通過清晰的導航，一步一步引導用戶填寫完成，并且要呈現(xiàn)出完成的百分比和進度，減少用戶的填寫壓力！ 信息分組：在拆分頁面時，或者對頁面內的字段進行重組時，要按照一定的邏輯做信息分組，有幾種分組辦法，按必填項、非必填項分組；按內容的相關性分組（例如基礎信息一組、家庭信息一組）、按內容錄入成本分組（例如拆分頁面后，每個步驟的錄入復雜性應該接近，不應該某一步錄入簡單，某一步錄入復雜）。 視覺優(yōu)化：基于CRAP原則，對頁面元素進行合理的視覺處理，方便用戶閱讀、理解頁面內容。 提供暫存機制：要么系統(tǒng)自動暫存填寫的內容（保存時要能夠通過toast等組件輕度提醒用戶），要么提供一個暫存按鈕，讓用戶自己點擊暫存。誰都受不了填寫好的內容莫名其妙丟失了。 字段解釋：對字段的名詞、規(guī)則進行解釋。有歧義的字段，或者含義復雜的字段，或者對填寫有特殊要求的字段，應該有提示說明，幫助用戶理解。 錯誤預防：字段數據的校驗，必須及時反饋，常見的做法，是控件失去焦點后觸發(fā)校驗邏輯，關于錯誤預防、文案優(yōu)化這類反饋機制的設計，在下一章我們會深入探討。 通過這幾個思路，我們嘗試對土豆入職時遇到的表單頁面進行優(yōu)化。先將頁面拆解成三個步驟，分別錄入基本信息、社保檔案信息、教育工作經歷，如圖7-x。
圖7 x 拆分后的頁面1：基本信息錄入 在基本信息錄入界面，我們還將聯(lián)系方式拆分出來，和基本信息一起，各自使用虛線矩形框分組，降低用戶的認知、理解難度，讓頁面看起來更有邏輯性、簡潔。 對于必填字段，加了星號提示；對于需要解釋的字段，加了小問號，用戶指向問號后會對字段做出解釋說明。 對于地址信息，可以讓用戶輸入完整地址，自動識別省、市、區(qū)，避免用戶手工選擇。 用戶點擊下一步以后，來到了步驟二的頁面，如圖7-x。 參保類型、保險繳費年限這些用戶有疑問的字段，都增加了小提示做解釋。同時界面中采用了大量CRAP原則的對齊思路，大家可以仔細檢查，看看哪些控件做了對齊處理。是不是看起來更清爽一些？
圖7 x 拆分后的頁面2：社保檔案信息錄入 最后來到了步驟三，如圖7-x。 在教育經歷、工作經歷的文本框中，用淡灰色文字做了格式要求的示意，這并非強制要求，但通過提示，希望用戶盡量能按照清晰地邏輯結構描述相關信息，否則用戶填寫的方式，絕對五花八門。
圖7 x 拆分后的頁面3：教育工作經歷錄入 經過重新設計，新的表單錄入界面是不是清晰了很多？當然，這也需要更多精力的投入，包括設計的精力，研發(fā)實現(xiàn)的精力。 用戶體驗優(yōu)化，本來就是需要付出額外成本的工作。 閱讀原文：https://mp.weixin.qq.com/s/2C6gFO17A5vxAGaExVtqPg 該文章在 2025/9/12 12:34:45 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
?
