設計的套路:10個小技巧讓長表單填寫更省事

3 評論 18298 瀏覽 162 收藏 11 分鐘

針對長表單設計,本文作者結合自己的項目經驗和使用其他APP時的一些好的體驗,總結了10個小tips。enjoy~

表單設計是我們做產品設計時經常會做的一件事,特別是長表單,在設計時尤其要注意。

沒有用戶愿意對著一串很長且無聊的字段機械式的填寫。

針對長表單設計,我結合自己的項目經驗和使用其他APP時的一些好的體驗,總結了下面10個小tips:

  • 提前告知所需材料,避免表單填寫過程被打斷 。
  • 用戶激勵,提前告知用戶完成表單的獎勵。
  • 清晰告知用戶完成整個表單的步驟 。
  • 先易后難,將容易完成的表單放在前面 。
  • 自動填寫。
  • 提供合適的輸入方式。
  • 數據自動保存。
  • 識別代替輸入。
  • 適時地鼓勵與反饋。
  • 及時的幫助。

1. 提前告知所需材料,避免表單填寫過程被打斷

在用戶正式開始填寫表單前,提前告知用戶完成表單所需的材料,比如身份證或工作證等,讓用戶可以提前準備好,避免途中因為準備材料被打斷。 也可以防止用戶在途中因為某些原因暫時不能提供相應的材料而中途放棄,這種情況對用戶體驗是一個很大的傷害。

△ 東興198

△ 漲樂財富通

2. 用戶激勵,提前告知用戶完成表單的獎勵

在用戶開始任務前,提前告知用戶完成任務后可以獲得哪些好處。比如可以獲得特權、實物獎勵等,增加用戶對完成表單的期待感,可以有效地提升用戶完成任務的動力。

△ 東方財富

△ 正和島

3. 清晰告知用戶完成整個表單的步驟

這個僅針對分步表單的設計。

在開始任務時,清晰的告知用戶整個表單的填寫有多少個步驟,每一步是什么,可以讓用戶形成一個清晰的預期,減少用戶在填寫表單過程中的不耐情緒。 未知的東西更容易讓用戶焦慮。

△ 51信用卡管家

△ 平安證券

或者可以用進度條告知用戶表單完成的進度,如下圖:

△ 漲樂財富通

4. 先易后難,將容易完成的表單放在前面

就像從小老師教導我們的一樣,答題的時候一定要先易后難。進行流程設計的時候也可以遵循這個道理,將容易完成的表單放在前面,這樣做有三個好處:

  • 簡單的表單更容易激起用戶的填寫欲望,用戶會迫不及待地去完成。相反,用戶一開始就看到過于復雜的表單,很容易被嚇到,從而放棄整個任務。
  • 用戶通過完成簡單的表單,可以增加自信心,即使后面的表單變復雜了,用戶也更有耐心去完成。
  • 當用戶將前面簡單的表單完成后,放棄整個表單的機會成本就變高了,即使后面碰到較難的任務,用戶放棄的幾率也會降低。

5. 自動填寫

和后臺數據庫進行匹配,自動填寫已知信息。

比如用戶在填寫長表單前已經在平臺填寫了聯系方式、名稱或其他信息,而填寫長表單時也需要這些信息要素,我們就可以將這些信息自動填入表單,減少用戶的輸入。 還比如,后面的表單需要的信息要素正好在前面的表單中有輸入,我們也可以自動幫用戶填入。

6. 提供合適的輸入方式

用戶填寫表單的時候,能提供選項的盡量提供選項。

選擇代替手動輸入有兩個好處:

  • 減少用戶的操作成本。
  • 選項對于平臺來說更可控,獲得的信息更加標準化。

常見的有性別、地區、年齡等。

△ 微信

舉一個例子,之前我們的產品需要用戶的工作經驗用于分類搜索,在用戶填寫信息時我們提供了統一的選項,這樣我們就能得到標準化和規范化的用戶數據。

但是在提供選項的時候要注意所提供選項的合理性,在上面用戶工作經驗的例子中,就要特別注意工作經驗的區間劃分。

如果表單不適合提供選項,必須由用戶手動填寫,則需要根據不同的場景提供正確的控件。

比如輸入賬號、密碼,填寫郵箱,輸入昵稱等,均需提供不同的鍵盤。

7. 數據自動保存

這點非常重要!特別是對于一些填寫內容多的表單,一定要自動保存。

試想一下,你正在完成一個長表單的填寫,前面已經填寫了很多內容,可是到了提交前可能因為系統崩潰,網絡狀況,或者因為其他原因不能完成提交,而你又不得不退出。當你重新開始填寫表單時,卻不得不重新填寫一遍所有的信息,這絕對是讓人崩潰的。

舉一個我近期經歷過的正面的例子。

最近我在辦理入深戶的手續,預約公安局辦理準遷證需要完成一個很復雜的表單填寫。第一步需要填寫大量的信息要素,第二步需要上傳很多照片。當我完成了百分之九十的時候,我發現有一張照片我沒有,需要家人拍給我,當時我又不得不退出整個預約流程,心里真的有十萬只草泥馬在奔騰。

后來照片齊全了,我重新開始預約,驚喜的發現所有的信息都已經自動保存了,并不需要重新輸入,我只需要將最后一張照片上傳就OK了。真是棒棒噠!沒想到公安系統的網上服務體驗也能做的這么棒。

8. 識別代替輸入

善于利用技術的力量,技術上能解決的就不要讓用戶輸入。

比如有時需要輸入身份證號或銀行卡號,現在有很多技術接口支持拍照掃描自動獲取號碼,不需要用戶費勁的手動輸入。 再比如輸入位置,通過系統自動定位,既準確又省事。

△ 微信

上圖是在微信中添加銀行卡時,可通過拍照自動識別卡號。

9. 適時地鼓勵與反饋

把用戶當成普通人,而大部分普通人都是需要鼓勵與肯定的。

適時地給予用戶反饋,「你很棒,快完成了哦!」「你已經完成了大半了,再加把勁就能完成全部了哦!」一句有溫度的文案,在關鍵節點上能有效安撫用戶的情緒。

10. 及時的幫助

不打擾用戶,但是在用戶需要的時候及時出現。

在設計表單時,對于一些專業詞匯或者較難理解的概念,要給予明確的解釋,避免用戶填寫表單時云里霧里、不知所措。對于一些有較高要求的表單信息也要給予明確的示例供用戶參考。而對于一些較復雜的流程,如果有必要的話,還可以提供在線咨詢幫助,協助用戶完成整個表單的填寫。

△ 東方財富

上圖是東方財富的開戶流程,上傳身份證。是一個很好的示例,大家可以體會一下。

 

作者:KKi,微信公眾號“kki的設計筆記”

本文由 @KKi 授權發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 講的不錯,挺實用。

    來自江蘇 回復
  2. 搶沙發

    回復