如何提高B端表單操作效率,這里有7個技巧!
編輯導語:B端表單若設計不好,則容易導致不佳的用戶體驗,無法給用戶有效的信息反饋。那么,應該如何優(yōu)化B端表單設計、提高B端表單的操作效率呢?也許你需要在交互形式、表單頁面、輸入框等方面做好優(yōu)化。本文作者總結了提高B端表單操作效率的7個技巧,不妨來看一下。
一些同學在設計B端表單時,不知道需要考慮哪些問題,直接使用Ant Design提供的表單模版,或者參考競品,上線后用戶反饋難用,產(chǎn)品反饋拓展性低。
那么該如何提高B端表單操作效率呢?這里有7個技巧分享給大家。
目錄
- 不濫用表單的交互形式;
- 將復雜表單進行合理的歸納簡化;
- 復雜表單布局要考慮關聯(lián)性;
- 表單視覺可以不平衡;
- 標簽對齊方式要選對;
- 表單頁面要考慮適配方式;
- 輸入框不用整齊劃一,可以錯落有致。
一、不濫用表單的交互形式
表單的交互設計,有時候往往會被設計所忽略,或者所有交互都采用彈窗,本可以氣泡卡片一步解決,使用彈窗卻要兩步完成,本需要界面跳轉承載復雜表單,卻使用彈窗不停滾動。
在表單設計時,該如何選擇合適的交互形式呢?首先我們需要了解常用的交互形式有哪些。
常用的交互形式主要有:原位編輯、氣泡卡片、彈窗、抽屜、全屏彈窗、頁面跳轉等。
表單交互方式的選擇,我們可以參考 Ant Design 表單設計規(guī)范,從關聯(lián)性和復雜度進行判斷,在選擇時,我們優(yōu)先考慮信息的復雜度,其次在考慮相關性。
1)當信息復雜度低,同時相關性高時,我們可以選擇原位編輯/氣泡卡片、彈窗的交互方式。
比如釘釘任務詳情頁面的數(shù)據(jù)編輯,相關度極高,同時信息不復雜,那么就可選擇原位編輯,在使用原位編輯時,需要根據(jù)業(yè)務進行判斷,是否有必要進行原位編輯。
而Ones的篩選,其數(shù)據(jù)量相對較多,但是相關性極高,那么就可以選擇氣泡的形式;有贊教育綁定銷售員,采用了彈窗的形式,這里也可采取氣泡的形式。
2)當信息復雜度高,但關聯(lián)性也較高時,我們可以使用抽屜、全屏彈窗的交互方式。
比如神策數(shù)據(jù),信息量較為復雜,同時有一定相關性,數(shù)據(jù)創(chuàng)建后即可在列表中查看;但是當數(shù)據(jù)特別復雜,同時新增入口位置較多時,可采用全屏彈窗的方式,在CRM行業(yè)較常見,比如銷幫幫。
其優(yōu)勢是,當從詳情頁進行新增或編輯時,編輯完成后,詳情頁數(shù)據(jù)即可展示當前新增的信息,如果是頁面表單,需要刷新數(shù)據(jù)才可以查看到,體驗感較低。
3)當信息復雜度高或信息獨立時,我們可以使用頁面的交互方式。
比如有贊的新增報名,其關聯(lián)性就不像CRM那么強,因此直接采用頁面的交互方式就可以;而阿里巴巴的創(chuàng)建網(wǎng)絡信息復雜度較高,同時相對獨立,因此也適合采用頁面進行交互。
二、將復雜表單進行合理的歸納簡化
對于復雜表單,在設計時需要對其進行合理的歸納簡化,降低表單填寫負荷。
一般來說,表單可分為基礎表單、分步表單、錨點定位、標簽頁這幾類。
1)當表單條目數(shù)在7個內(nèi),表單較為簡單,這時候我們一般直接采用基礎表單,比如有贊更換負責人頁面:
2)當表單條目數(shù)在7個以上,可歸類到復雜表單,這時候就需要根據(jù)表單的復雜度、邏輯性、關聯(lián)性進行判斷,選擇合適的分組方式,進行歸納簡化,降低表單填寫負荷。具體該如何選擇呢?
① 如果每個組之間有邏輯先后順序,那么推薦使用分步表單,比如阿里云的購買。
② 如果每個組之間關聯(lián)性較強,就不適合分開,推薦使用錨點定位,比如銷幫幫的編輯銷售機會、新建客戶等表單都是采用錨點定位。
③ 如果每個組既沒有邏輯先后順序,也沒有關聯(lián)性時,推薦使用標簽分組,比如飛書的發(fā)票管理,都是相對獨立的表單。
三、復雜表單布局要考慮關聯(lián)性
上面提到了為復雜表單進行合理的歸納簡化,但是歸納簡化后采用什么布局方式更合適呢?
表單頁面的布局方式,綜合起來可分為普通布局、弱分組、區(qū)域內(nèi)分組、卡片分組這四種。
在選擇時,和表單的交互方式選擇一樣,可參考 Ant Design 表單設計規(guī)范,從關聯(lián)性和復雜度進行判斷,在選擇時,我們優(yōu)先考慮信息的復雜度,其次再考慮相關性。
1)當條目數(shù)在7個內(nèi)時,仍然使用基礎布局,比如網(wǎng)易互客的企業(yè)信息資料新增:
2)當表單條目數(shù)在7個以上,可歸類到復雜表單,這時候仍然根據(jù)表單的復雜度、邏輯性、關聯(lián)性進行判斷,選擇合適的布局方式,提高表單的瀏覽效率和屏效需求。
① 當表單空間有限,且相關性較強時,推薦使用弱分組,將多個組合在一行中,形成分組的暗示。
PS:弱分組也可和區(qū)域內(nèi)分組和卡片分組組合使用,從而提高屏效。
② 當條目數(shù)在7-15個內(nèi)時,相關性較強時,使用區(qū)域內(nèi)分組較為適合,比如網(wǎng)易七魚的新建在線質(zhì)檢模版:
③ 當條目數(shù)在15個以上,推薦使用卡片布局較為合適,比如阿里云服務購買表單:
四、表單視覺可以不平衡
在設計表單時,我們總覺得視覺重心偏左,因此在設計時我們總想讓視覺變得更平衡。
比如京東云,使用大屏電腦看,信息全集中在左邊,感覺視覺有點失衡。而類似飛書的居中設計,視覺會更平衡。
于是我在設計時也在考慮要不要用居中設計的方式呢?但是當我繼續(xù)查找資料時發(fā)現(xiàn),其實在表單的設計中我們不用過度的追求視覺平衡,首先人的視覺動線遵循F模型,同時根據(jù)行業(yè)相關信息可讀性研究,眼動舒適角度為30度。
因此當表單信息較少,不考慮屏效時,采用從上往下的方式,據(jù)研究這是能夠最高效完成任務的布局方式。
為了印證這個結論,我收集了近50個B端后臺,共507個表單,竟然發(fā)現(xiàn)只有2個產(chǎn)品用了視覺重心居中的設計。
這個結果讓我挺詫異的,但又在情理之中。一個是飛書設置類表單、一個是百度云購買表單。
設置類表單,數(shù)據(jù)項較少,相對比較簡單,使用居中設計可以讓用戶更聚焦。
而百度云的表單,雖然也是視覺居中,但是將側邊欄進行收起,在設計上和我們普通網(wǎng)頁設計方式類似,從而承載更多的信息。
而其他的CRM、ERP、云產(chǎn)品、OA、項目研發(fā)、文檔產(chǎn)品、在線教育、HR、BI等系統(tǒng)產(chǎn)品的錄入類表單均采用的視覺偏左的設計方式,不管表單拓展多復雜的信息,都不會影響整體的一致性。
所以,在設計表單時不用過度追求視覺平衡,而是需要優(yōu)先考慮信息操作效率,信息閱讀效率。
五、標簽對齊方式要選對
標簽分為左標簽、右標簽、頂標簽三種,不同的對齊方式,使用場景不同。
具體該如何選擇呢?我們需要從3個方面進行考慮:操作效率、標簽長度、屏效、視覺對齊。
1. 操作效率
根據(jù)Matteo Penzo的研究總結得到的瀏覽時間表發(fā)現(xiàn),標簽移動到輸入框的時間,頂部對齊最快只要50ms,其次是右對齊240ms,左對齊耗費時間最長500ms。
因此當以操作效率為主時,推薦使用頂對齊的方式。
2.?標簽長度
當標簽長度超過8個字,或者需要考慮中英文雙版本時,推薦使用頂對齊的方式,其容納的標簽文字更多,拓展性更好,比如Ones的建任務的標簽,就采用標簽頂對齊的方式:
3. 屏效
如果只考慮屏效,那么標簽左對齊右對齊均可,但是如果還考慮表單錄入效率,那么推薦使用標簽右對齊的方式,比如蜂鳥匯報:
4. 視覺對齊
一般情況我們在設計表單,優(yōu)先考慮效率和屏效,但在競品分析中發(fā)現(xiàn),竟然有50%的表單采用了標簽左對齊的方式,因為這樣可以讓標簽和其他內(nèi)容保持對齊,比如神策網(wǎng):
因此,在進行標簽對齊方式的選擇時,我們首先要清楚以什么為主,什么是可以犧牲的,比如神策網(wǎng)選擇了視覺對齊,而犧牲的是操作效率。
六、表單頁面要考慮適配方式
設計時如果不考慮適配方式,那么前端可能不考慮,可能用他覺得合理的方式,在實際使用時就會導致體驗不好,后面想在調(diào)整就得重新等排期了,因此在設計時就需要把適配方式定好。
表單在設計時一般有2種適配方式,一種是固定適配,一種是間距適配。
1. 固定適配,設計需要注意
設計時,需要保證最小分辨率能夠正常顯示,表單中信息寬度固定,不隨分辨率變化而變化。該方式適合用于表單頁面的適配中。
當采用弱分組布局時,隨分辨率變小,數(shù)據(jù)項自動掉下來,其他保持不變。
這里最小分辨率大家根據(jù)自己公司情況而定,我在設計時設定1366X768為最小分辨率。
下圖是百度統(tǒng)計流量研究所,大家可以看看數(shù)據(jù),具體以自身公司而定,因為一些單位可能還在使用1280X720的分辨率,那么就設定1280為最小兼容的分辨率。
2. 間距適配,和移動端類似,間距固定,組件自適應
該適應方式在彈窗、抽屜中較為使用,表單頁中不太推薦使用該方式,因為當分辨率變大,眼動的視覺變大,不利于信息瀏覽。
七、輸入框不用整齊劃一,可以錯落有致
表單頁在設計時,我們總是糾結到底整齊排列好,還是錯落排列好,錯落排列又該遵循什么規(guī)則呢,這里推薦大家閱讀Ant_Design的文章《整齊劃一?不如錯落有致》。
文章提到,如果表單跟隨空間自適應會造成不穩(wěn)定的情況,線上效果會呈現(xiàn)以下效果。
同時輸入框的寬度不應該自適應,而需要根據(jù)填寫內(nèi)容的長度來定,減輕判斷負擔。
最后,錯落有致更舒適,整齊劃一在視線上有隱性的截斷,會感覺缺了一塊內(nèi)容。
如何錯落有致呢?有什么規(guī)則嗎?
Ant_Design設定104px 為原子級寬度尺碼 XS,通過倍數(shù)+間距疊加的方式(此處計算間距的原因是為了兼顧組合 input 和單個 input 對齊問題)從小到大去依次推導出更大的四種寬度來擬合前面劃分的尺碼。最終得到如下5種寬度尺碼和對齊關系。
通過對比,我們可以明顯地看到,錯落有致的排列方式更加舒適。
當然,你在設計時,最小原子的寬度不一定設置為104,也可根據(jù)業(yè)務情況將最小原子XS設置為可容納6個中文漢字,然后在通過如下規(guī)則進行換算。
八、畫重點
本文針對如何提高B端表單操作效率,整理了7個技巧:
- 不濫用表單的交互形式;
- 將復雜表單進行合理的歸納簡化;
- 復雜表單布局要考慮關聯(lián)性;
- 表單視覺可以不平衡;
- 標簽對齊方式要選對;
- 表單頁面要考慮適配方式;
- 輸入框不用整齊劃一,可以錯落有致。
希望通過本文的分享,讓大家有一個更清晰的認知,從而提高表單操作效率。
參考引文:
《且曼B端產(chǎn)品設計之表單設計》
人眼的視角
http://t.hk.uy/Chp
Label Placement in Forms
http://t.hk.uy/Chr
淺談B端表單設計
https://mp.weixin.qq.com/s/L1bB3qlzstK6T4LkLEPtKQ
Ant Design 表單設計規(guī)范
https://ant.design/docs/spec/research-form-cn
Ant Design ProForm 高級表單
https://procomponents.ant.design/components/form
QueryFilter / LightFilter 篩選表單
https://procomponents.ant.design/components/query-filter
整齊劃一,不如錯落有致
https://www.zcool.com.cn/article/ZMTIxMzA2OA==.html
作者:風箏KK,公眾號:海鹽社
本文由 @風箏KK 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉載
題圖來自Unsplash,基于CC0協(xié)議
可太棒了!
收集的B端頁面,很贊啊,可以考慮下付費分享。
受教了
我對你收集的50個B段后臺表單很感興趣,怎么收集的呢
+1
B端后臺大多需要注冊體驗,一部分是自己注冊體驗,一部分是朋友注冊體驗的~
1
+1 內(nèi)容很不錯