面對復雜表單,用這3個方法提高用戶體驗
發(fā)布時間:2022-01-06 09:35 [ 我要自學網(wǎng)原創(chuàng) ] 發(fā)布人: hh71427-2

業(yè)務場景拓展,字段增加又增加,原本眉清目秀的表單變得面目全非。

想要將這些復雜信息、組件組裝成用戶易填的表單,常常會讓設計師陷入無限的糾結(jié)。聊聊用戶體驗視角設計表單的思路,希望對大家有幫助,歡迎一起討論交流。

結(jié)構(gòu)如下:

  • 表單是什么
  • 表單的內(nèi)容
  • 設計思路
  • 設計技巧


表單是什么



表單是數(shù)據(jù)錄入、數(shù)據(jù)展示的重要工具。

生活中隨處可見,比如面試要填表單、辦銀行卡要填表單、入庫要填表單…

互聯(lián)網(wǎng)產(chǎn)品設計中也離不開表單,如注冊、登錄、商品錄入、功能設置…


表單的內(nèi)容



表單主要由這四類元素組成:標簽、輸入域、操作按鈕、提示信息。

遇到復雜表單,用這3個核心方法提高用戶體驗

1. 標簽

標簽文本主要是解釋輸入項的含義,一般不宜太長,需要簡潔明了,快速讓用戶理解。

標簽對齊方式有左對齊、右對齊、頂對齊、內(nèi)對齊,都有各自優(yōu)缺點,不同場景酌情使用。

遇到復雜表單,用這3個核心方法提高用戶體驗

2. 輸入域

輸入域是表單的核心,是錄入信息的核心交互部分,為了不同信息更易錄入會采用不同交互組件。比如:單行文本框、多行文本框、單選框、多選框、數(shù)字輸入框、金額輸入框、日期、日期區(qū)間、人員選擇、部門選擇、圖片、文件等,具體組件可以去查看 Ant design、ElementUI 官網(wǎng)。

遇到復雜表單,用這3個核心方法提高用戶體驗

3. 操作按鈕

操作按鈕是表單信息錄入完成后,繼續(xù)或取消任務的觸發(fā)器。

為了讓用戶視覺聚焦和更快完成任務,操作按鈕分為主次按鈕,通常主任務操作為主要按鈕,次任務操作為次要按鈕,并且一個場景中通常只有一個主按鈕。比如,提交和取消,保存和取消等。

遇到復雜表單,用這3個核心方法提高用戶體驗

4. 提示信息

錄入提示:幫助用戶更具象的理解錄什么怎么錄。

幫助提示:表單中如果標簽信息無法讓用戶理解,可以提供幫助信息讓用戶更準確的理解,通常在標簽的前/后有一個幫助按鈕,點擊/鼠標懸浮按鈕出現(xiàn)有幫助信息的彈窗。其他還有頁面幫助信息,新手引導幫助信息等。

錯誤提示:幫助用戶理解哪里錯了和怎么做正確。

遇到復雜表單,用這3個核心方法提高用戶體驗


設計思路


表單設計目標:讓用戶更輕松獲取表單信息,更容易懂,更快速完成表單信息錄入任務,如果還能讓用戶過程很愉悅就更妙了。(用戶體驗視角)

設計方法:通過降低用戶行為負荷,提高表單設計的用戶體驗。

行為發(fā)生的常規(guī)路徑:通過視覺輸入信息到大腦 (視覺)— 大腦消化信息(認知) — 采取動作(動作)。

遇到復雜表單,用這3個核心方法提高用戶體驗

視覺負荷:用戶在屏幕上識別和尋找信息,都屬于視覺負荷,信息獲取越輕松視覺負荷越低。

認知負荷:大腦處理信息時理解、思考、記憶都屬于認知負荷,復雜陌生信息的認知負荷需要消耗大量腦力;所以減少認知負荷的核心是減少用戶思考,甚至是不要讓用戶思考,成為大腦潛意識認知的決策。

動作負荷:用戶在使用產(chǎn)品時如果操作太繁瑣步驟太多,有可能會中途放棄,這就是動作負荷帶來的影響。所以在不大量增加視覺負荷和認知負荷的前提下,減少交互步驟可以降低動作負荷。

通過降低視覺、認知、動作負荷的“三招”,提升行為產(chǎn)生節(jié)點間轉(zhuǎn)化率,讓任務行為發(fā)生更容易。

誤區(qū):有些人陷入了設計極端,認為操作越少交互設計就越好,實際上用戶能更好閱讀并理解比少一步簡單操作更重要。

補充:心理負荷在特定場景也是影響用戶行為發(fā)生的重要因素,如隱私、健康、安全、財物等。


設計技巧



1. 降低視覺、認知負荷

表單的信息是視覺負荷和認知負荷的源頭,所以如何設計信息易讀易理解就尤為重要。

我的方法就是先盤信息,再梳理(該拆的拆,該合的合,該減的減),然后有節(jié)奏編排信息。

就像搬家后收拾房間,有一大堆東西需要整理,我們通常會先盤下有哪些東西,然后就是該丟的丟,該放在一起的放一起,最后分門別類放在房間的合適位置。

拿到表單信息后不著急動手,先了解此表單背后的業(yè)務場景,理解每一條信息字段背后的業(yè)務價值。這是有說服力設計的核心支撐。

通過拆、合、減的方法,歸類組合信息。字段信息非必要就減掉,相關(guān)性高的信息放一起,梳理的目的是讓信息歸類更符合用戶認知,讓信息更易被用戶理解。

遇到復雜表單,用這3個核心方法提高用戶體驗

技巧點:

  • 文案盡量簡潔并貼合用戶認知,垂直業(yè)務的文案最好是業(yè)務語境的表述。
  • 按業(yè)務場景合并包裝信息,比如把復雜表單字段包裝成A、B、C三個選項供用戶選擇,用戶更容易理解和易用。

有節(jié)奏展示

信息有節(jié)奏展示有利于用戶更高效獲取、理解信息。畢竟如果信息像機關(guān)槍子彈一樣連續(xù)涌入大腦,誰都沒耐心看,并且大腦消化也跟不上。

技巧點:

  • 信息錄入先簡單后復雜,先熟悉后陌生
  • 先放必填基礎(chǔ)信息,后放選填自定義信息
  • 有前后邏輯關(guān)系視情況分步展示
  • 信息能單列展示就不用多列(從上至下或從左往右,按一個規(guī)律的視覺流信息獲取更輕松)

2. 降低動作負荷

通過減少用戶行為成本,達到降低動作負荷的目的。畢竟錄入信息方式越容易,就更容易完成表單錄入。

技巧點:

  • 能給默認值就不讓用戶選
  • 能讓用戶選就不讓用戶輸
  • 平鋪單選優(yōu)于下拉單選(有限選項時)
  • 輸入時能智能聯(lián)想就聯(lián)想
  • 能即時校驗的早校驗糾錯
UI交互app及axure設計教程
我要自學網(wǎng)商城 ¥50 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔因您的行為而導致的法律責任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設計 室內(nèi)設計 室外設計 機械設計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設計 會計課程 興趣成長 AIGC