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