2B產品設計套路一:表單設計

15天0基礎極速入門數據分析,掌握一套數據分析流程和方法,學完就能寫一份數據報告!了解一下>>

本系列文章主要是想跟大家講講關于2B設計的一些套路,本文主要說的是表單設計。

原型設計應該是入門產品的基本功了,通過原型設計把無形的各種idea變為有形的產品頁面是我覺得非常有成就感的一件事。但是相比于2C,2B頁面級的設計給pm發揮的余地真的不多,但換言之就是有很多套路可循。

根據我對2B產品(主要是辦公、后臺系統)的片面理解,2B產品的核心就是對各種各樣數據“管理”。啥是“管理”呢,用人話說就是數據的“增刪改查”。

從數據流的角度看,“增刪改”都是對系統的輸入,在“查”的基礎上“顯”,可以看作系統向用戶的輸出。對應到頁面上,很多時候我們會通過表單實現增、改的操作,另外可以通過數據統計、表格、詳情頁配合篩選、搜索來實現從不同維度來向用戶輸出,實現“查和顯”的操作。

這個系列的總結就想說說表單、表格、詳情頁這三個設計套路。

1. 為什么需要表單

軟件/系統/平臺本身是沒有信息的,像是一個空的架子,表單是用戶向系統輸入信息的一種非常重要的手段,只有用戶向系統添加了豐富的信息,系統才能實現其價值。

比如說下圖中的禪道軟件本身是沒有數據的,要實現其需求管理的價值,就需要用戶通過“提需求”的表單向系統輸入“需求”。只有有了需求的數據,后續的需求管理才能進行。所以說表單是2B產品“管理”的第一步。

當然還有更常見的用戶注冊,也是表單的一種。

更極端的一種表單是問卷調查,這種情況下表單有可能會非常非常非常長。

總的來說,表單對應的是“增刪改查”中的“增”(有的時候也可能是“改”),是對系統的輸入,是用戶向數據庫寫入所需的數據,有了這些數據才能邁出整個產品實現管理價值的第一步。

2. 輸入什么

既然表單的主要用途是信息輸入,那么輸入什么內容就值得仔細思考了。內容的過多很容易引起用戶的焦慮和厭煩(想想那種特別長的問卷調查),內容過少又不足以支撐后續操作。(比如資產管理系統中,后續的篩選功能需要“資產分類”,但是新增資產的表單中沒有這個字段就會引起錯誤)

為了平衡用戶體驗和支持后續操作,我自己總結表單的設計應該遵循“不影響后續操作的最小化”原則。

設計表單內容時,首先我會根據信息架構框定一個范圍,一般表單的內容應該是信息架構中相應對象元數據的子集。然后我們可以對元數據進行分類,分為必填項(不填寫后續操作無法進行),選填項(不填寫不會影響后續操作,或者填寫比較繁瑣可以放在編輯中補充的信息),不填項(由系統生成的數據)。

為了保證“不影響后續操作的最小化”原則,表單填寫的內容必須包括必填項,盡量包括少的選填項,不需要包括不填項。

還是舉一個“新增資產”的栗子:下圖右邊是資產對象的元數據,對每個元數據進行分類。

  • 比如【資產編碼】應該由系統生成,所以在表單中不應該填寫;
  • 比如【資產名稱】是后續查詢、篩選、資產調撥等各種操作都需要用到的元素,所以必須在新增資產時就填寫;
  • 比如【簡稱】是【資產名稱】的別名,可有可無,不會影響后續的操作,所以是選填項;
  • 再比如【原價】、【使用年限】、【折舊方式】、【購買日期】字段是計算資產折舊所需要的,但是要填寫的內容比較多,且折舊的計算相對獨立不影響主流程的操作,所以我把它們歸到了選填項,可以在必要的時候在“編輯”功能中再完善。

把所有元數據分類完后,可以得到下圖右邊的結果,我們的表單具體需要填什么,不需要填什么就比較清晰了。

3. 怎么輸入

在上一part中已經確定了表單需要填寫哪些內容,那么這一part就需要確定怎么填寫這些內容。

表單輸入的形態大概有下邊這些(來自elementUI),至于選擇哪種方式填寫,有一個原則就是“能選擇的不要輸入”,更優秀一點的,必須輸入時也盡量通過聯想給用戶一點提示,這個放在下一part“友好的表單”里講。

上圖中必填項的【資產名稱】、【SN碼】、【型號】是需要輸入框填寫的,而【資產分類】由于業務需要采用國標分類,所以可以做到通過選擇來填寫。

4. 友好的表單

作為用戶,很多人對填寫密密麻麻的表單感到頭大,雖然我們已經在內容上盡量精簡了,但還可以在表現形式上更加友好,讓我們的用戶不至于在填寫表單時候摔鍵盤。

(1)對齊

對齊主要是指表單標簽的對齊,包括左對齊,右對齊和頂對齊三種:

antDesgin:“冒號對齊(右對齊)能讓內容鎖定在一定范圍內,讓用戶眼球順著冒號的視覺流,就能找到所有填寫項,從而提高填寫效率”。

頂對齊比較節約橫向空間,但縱向會比較長,所以移動端用的多于web端。綜合來看,一般我會選擇右對齊。

(2)分塊分步

對于填寫項比較多的表單,最好對填寫項按照業務屬性進行一個分組,相同屬性的信息一起填寫會比較符合用戶習慣?;故潛熱緇故薔佟靶略鱟什北淼サ睦踝?,按業務屬性可以把填寫項分為基本信息、使用信息、采購信息和折舊信息。

由于我們每一類信息數量都不是特別多,可以采用同一頁面分塊填寫的形式,如下:

當每一類信息都比較多,加起來一個頁面需要滾動時,或者每一類信息的填寫具有比較強的步驟性時,可以采用分步填寫的形式,如下:

(3)錯誤反饋

數據校驗的重要性每一個pm都應該了解,通過數據校驗我們可以保證用戶填寫的內容符合我們的要求,不會使后續的操作發生異常。如果校驗出現錯誤,作為一個友好的系統,需要給用戶一個反饋告訴他們哪里出了問題。

在“增刪改查”四字口訣的擴展版“增刪改查顯存異”中對應“異”部分。

校驗方式可以分為前端校驗和后端校驗兩種,前端校驗可以實現有無輸入、輸入格式(要求輸入數字但輸入了文本、郵箱格式、手機號格式等)的校驗,后端校驗實現用戶名是否存在、密碼是否正確等需要比對數據庫的校驗。

觸發校驗的條件可以是每填寫完一項時校驗,也可以是點擊“提交”時統一校驗。由于有一些后端校驗(比如校驗用戶名、密碼是否正確)需要多項內容填寫完才能進行,為了統一我一般都會選擇點擊“提交”觸發校驗。

錯誤的顯示形式,為了讓用戶更直觀的找到錯誤項,一般是在輸入/選擇框的下方用紅色文字提示,如下:

(4)幫助

2B業務中有些字段信息比較專業,用戶可能一下理解不了,所以我們需要給用戶一些指引,教給用戶填寫什么。

幫助的顯示形式主要是【?】圖標+ 鼠標 hover 顯示幫助信息,或者是直接用灰色文字顯示在輸入框下方。第一種hover顯示的方式可以展示更多的內容,輸入框下方顯示的方式更加直觀。

我一般會選擇第一種形式,除了對輸入內容進行描述外,一般會給出一個栗子,這樣的幫助更加直觀一點。第二種形式的幫助在輸入框比較多的時候會讓整個頁面顯得比較亂,而且還要處理和錯誤校驗信息顯示的關系,所以我一般不會用這種方式展示幫助信息。

(5)搜索、聯想與推薦

如果以下拉框選擇形式填寫信息,但是選項非常多,用戶會很難找到想要的選項。所以一旦選項需要滾動查找,就最好加上搜索選項的功能。當然最好可以把用戶使用次數較多的選項放在最前面“常用選項/熱門選項”里,形成一個小的推薦功能。

前邊在“怎么輸入”中說到“能選擇的盡量不輸入”,必須輸入時最好也可以聯想之前填寫過的信息,減少用戶的輸入量。比如“資產名稱”有千千萬沒法用選擇輸入,但之前在系統中用戶可能輸入過一些飲水機、電腦、辦公桌等名稱,之后很有可能還會再輸入這些名稱。當然上邊說的推薦常用輸入的功能也同樣使用于輸入框。

(6)enter換行

enter換行是我覺得非常能提升用戶體驗的小功能。在填寫完一個輸入框后,鍵盤輸入enter,光標跳轉到下一個輸入框。在輸入內容較多時,每次填寫完一個空都要鼠標選中下一個輸入框親測很容易讓人失去耐心。

5. 參考

elementUI:https://element.eleme.cn/#/zh-CN/component/installation

antDesgin:https://ant.design/docs/spec/introduce-cn

 

本文由 @LCC 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

給作者打賞,鼓勵TA抓緊創作!
評論
歡迎留言討論~!
  1. 說得真棒??其實最主要的就是站在客戶角度思考問題,盡量符合大眾需求和偏好,才能更好的被客戶所接受。否則產品沒有人用,就只能是展覽品了

    回復
  2. 學習了??

    回復
  3. 學校??

    回復
  4. 可以很系統具體

    回復
  5. 學習了

    回復
    1. :lol: 相互學習

      回復