如何提高長表單操作效率?

3 評論 10184 瀏覽 65 收藏 11 分鐘

當表單信息較長時,用戶在使用時往往都會感覺很吃力,提高長表單的操作效率顯得格外重要。筆者最近剛好項目中在做表單界面,于是把項目中遇到的問題總結出來分享給大家。

目錄

  • 一、什么是表單
  • 二、長表單設計常見問題
  • 三、如何提高長表單操作效率

一、什么是表單?

表單可以收集用戶的信息和反饋意見,是用戶和產品管理者之間溝通的橋梁。表單從結構上可以分為:表現層、交互層、反饋層。

如何提高長表單操作效率?

  • 表現層主要由文本域、選擇框、標簽、地址、按鈕等表單對象組成。
  • 交互層主要由鍵盤、日期控件、選擇控件、調節滑塊等對象組成。
  • 反饋層主要由實時反饋、結果反饋等對象組成。

在我們日常生活中越來越離不開表單,比如訂外賣、發布個人簡歷、打車、登陸注冊等都需要用表單來完成。

二、長表單設計常見問題

表單不管是對用戶還是產品方都很重要,但是當表單信息較長時就會出現問題:

如何提高長表單操作效率?

當你的表單出現這些問題,你的用戶心情肯定不太美好,如果產品不是唯一的,那么他們就會棄你而去了,就算是唯一的,但是也免不了吐槽你幾句。但不管怎樣像QQ這樣的產品都在不停優化用戶體驗,我們的產品要留住用戶也是需要不停優化。

三、如何提高長表單操作效率?

當表單過長往往會給用戶造成壓力,從而放棄操作。而我們常說的用戶體驗主要指以用戶為中心進行產品設計,其目的是滿足產品需求、符合用戶習慣和認知、能高效愉悅地完成操作。達到這些目的我們才可能提高整體的操作效率。
具體表現在框架層展示清晰、表現層展示合理、交互層操作高效、反饋層實時提醒。根據這些特點我整理了8條優化建議,如下所示:

  1. 將長表單分步設計
  2. 將相關的信息進行分組
  3. 突出核心信息
  4. 信息排序遵循用戶習慣
  5. 優化設計細節,提升好感度
  6. 采用合理的輸入方式
  7. 尋找更高效的輸入方式
  8. 及時反饋

1. 將長表單分步設計

當表單較長時,將表單信息進行拆分,并分步設計,可以有效降低用戶輸入壓力。就好像同樣的人數排隊,一個隊排成長長的1排,一個隊分成了2排,你是不是更想排第二隊的呢?

同樣地,有效拆分長表單會讓用戶覺得這個操作并不太多,還可嘗試著去完成,如下圖所示:

如何提高長表單操作效率?

如何提高長表單操作效率?

Keep采用標簽導航進行分布設計、58同城采用下一步的方式進行設計,都很好地將界面起到了簡化作用。

2. 將相關的信息進行分組

信息較多時,將相關信息進行分組可以減輕用戶輸入壓力。比如你要去超市購買雞蛋、牛奶、蘋果、香蕉、西紅柿、酸奶、黃瓜這7樣東西,如果直接記你可能很快就忘記了,如果我們將其分為蛋類、奶類、水果、蔬菜這樣是不是就輕松很多。

同理,在設計時我們可以將屬性相同的歸為一組、類似功能的歸為一組,這樣從視覺上好像信息變少了,用戶才有完成的動力。如下圖所示:

如何提高長表單操作效率?

58同城將信息分為基本信息、租金詳情,同時信息內容將相關聯的廳室、朝向、樓層分為一組。雖然信息差不多,但是58看上去簡潔很多。

3. 突出核心信息

在界面中將核心信息進行差異化設計,可以很好引導用戶視線,這里的差異化設計可以是字體加大加粗、添加背景色、色彩對比、留白等。

如何提高長表單操作效率?

餓了么訂單列表的收貨地址、送達時間、支付方式就采用了差異化設計,選擇收貨地址將字號增大、并放置在列表外的藍色背景上,送達時間和支付方式的從參數采用藍色文字。這樣不僅將模塊之間有了區分,同時在表現形式和用戶接受信息上都有加強。

4. 信息排序遵循用戶習慣

信息排序指每個模塊的內部信息最好能按照用戶習慣進行排序。比如填寫個人信息時,一般順序為姓名→當前公司→職位,如果你把這個位置顛倒了就打破了用戶的邏輯,會增加用戶思考的時間,如下圖所示。

如何提高長表單操作效率?

智聯招聘的個人信息界面排列順序為姓名、公司、職位、所在地均是圍繞個人信息逐步填寫。

5. 優化細節提升好感度

表單細節的設計主要需要注意列表對齊方式、文字層次等。

1)標題和暗示選用適合對齊方式

標題和暗示對齊方式一般有三種:左對齊、左右對齊、上下對齊。

從下圖可以看出:左對齊/左右對齊,不如上下對齊視覺流暢。但是其占地小,因此這兩種用得比較常見。一般輸入信息較多時可采用左對齊、選擇信息較多時采用左右對齊、信息較少時采用上下對齊。

如何提高長表單操作效率?

2)文字要有層次

設計時文字大小、默認顏色、輸入顏色、強調顏色都需要設定好,這樣可以提升表單細節的層次。

如何提高長表單操作效率?

6. 采用合理的輸入方式

輸入方式也可交交互方式主要有:鍵盤、快捷標簽、滑塊、下拉控件、輸入框等。采用合適的形式可以節省用戶輸入時間,如下圖所示。

如何提高長表單操作效率?

轉轉輸入賣多少錢時直接采用聯動的數字鍵盤,讓輸入一次完成,不用來回切換。當需要輸入詳情時直接調用文字鍵盤,同時還設置了快捷標簽,讓編輯更順暢。

7. 尋找更高效的輸入方式

當輸入樣式設計后,我們在追問下這種輸入方式真的是最優的嗎。還有其他形式可以取代嗎?比如加入語音輸入、攝像頭掃描、聯動彈窗等。

如何提高長表單操作效率?

8. 及時反饋

及時反饋可以避免所有信息都填完之后,再彈出toast提示不通過的情況,它同樣能提供操作效率,如下圖所示。

如何提高長表單操作效率?

58同城中,當我輸入的數字為一位數時,他會提示租金最少輸入兩位,這樣可以有效防止用戶錯填,給用戶更清晰的指示。

四、總結

本文主要和大家分享了,提高長表單操作效率的幾個優化方面。

  1. 通過將長表單分布設計、將相關的信息進行分組讓框架層展示更清晰。
  2. 通過突出核心信息、信息排序遵循用戶習慣、優化細節提升好感度讓表現層展示更有層次。
  3. 通過采用合理的輸入方式、尋找更高效的輸入方式讓交互層操作更高效。
  4. 通過及時反饋讓反饋層實時提醒,避免錯誤操作。

參考引文

經驗分享:簡化輸入,讓網頁表單更親切?http://t.cn/RgJPuuK

以用戶視角出發的表單之旅?http://t.cn/EKTmQOC

如何通過設計的手段來提高表單的錄入體驗?http://t.cn/EKTmuN8

表單設計需要注意?http://t.cn/EhMmZPf

如何高效完成表單輸入?來看這個實戰案例!http://t.cn/Rgx3Pr4

 

作者:風箏KK,公眾號:海鹽社

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

題圖來自Unsplash, 基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 項目工期和成本有限,長表單就隨便做了,我還能說啥 ??

    來自新疆 回復
  2. 剛剛做完一個教育局的項目,全都是表單輸入,絕大部分的數據都需要手填~~

    來自安徽 回復
    1. 手動填真的要命啊

      來自四川 回復