不論是 toB 還是 toC 的移動端設計中,都會遇到一些表單填寫和上傳證件信息的情況。面對移動端要手動填寫的表單,用戶通常期待有高效的解決辦法可以立即完成填寫任務。本文為你總結出了幾種移動端表單設計的實用原則,可以有效解決表單不夠友好、用戶填寫錯誤、費時費力的問題,希望對你有幫助。
一. 信息內容層級化——信息分層次、分步驟、分頁面呈現
1 . 表單結構分層
從表單結構層面來看,內容過長的表單,信息可以分步驟、分頁面處理。
使用條件
- 表單內容過長,用戶填寫有壓力
- 操作步驟較多,需要給用戶明確的步驟提示
- 中途需要多次跳轉,接入第三方服務的表單
案例分析
做企業認證時,由于需要填寫的項目較多,步驟繁雜,因此很多產品會采用分步驟的形式,提示用戶當前進度。
2 . 頁面內容分層
每個頁面的信息內容呈現,有層級,有重點
使用條件
- 表單填寫內容較多
- 頁面內文字內容較多
- 產品對于用戶填寫的內容有傾向(如對平臺來說更有意義、更希望用戶填寫的信息)
案例分析
大眾點評在設置用戶信息時,雖然要填寫的內容都是“設置”,但是重點需要設置的信息使用了鏈接顏色處理,做了強調。
二. 減少用戶輸入——用其他方式代替用戶手動輸入
1 . 以選擇代替輸入
如果用戶可以做選項時,就不要使用輸入,可以充分利用移動設備的性能,比如 GPRS 定位、通訊錄等,合理調用第三方或系統信息。
使用條件
- 填寫的內容邊界較為模糊,詞語不確定性較高
- 選項數量控制在 3-5 個之間
- 可以調用第三方或系統信息
案例分析
- 案例一:知乎 App 博主認證 和 愛康國賓 App 個人信息都使用了部分選項替代填寫:
- 案例二:淘寶 App 可以調動系統定位,并提供幾個最有可能的選項,讓用戶選擇最佳定位。
2 . 提供默認選項,替用戶做選擇
選取最大概率事件作為默認選項,減少用戶的手動調整
使用條件
- 系統能夠確定出符合用戶的較大概率選項
- 選項數量控制在 3-5 個之間
案例分析
螞蟻鏈實人認證在上傳證件時會根據用戶所在國家和地區,幫助用戶默認選擇概率最大的選項,不需要用戶自己操作。
三. 定義鍵盤類型
根據調用內容調動不同的鍵盤類型
根據表單輸入內容的不同,調用出系統不同的鍵盤類型。
使用條件
- 填寫的內容有明確的輸入語言要求
案例分析
航旅縱橫在航班查詢的時候,由于航班號都是大寫字母和數字的組合,所以鍵盤會默認調用出只有數字和字母的輸入法,同時默認開啟大寫形式。螞蟻鏈實人認證在用戶手動填寫身份證時也同理。
四. 避免重要信息被遮擋
重要的信息要始終可以被看到
需要避免輸入項被鍵盤遮擋,也要避免將重要的輸入提示作為占位符,不要在用戶填寫時被輸入的內容遮擋。
使用條件
- 表單的填寫位置剛好會被彈出的鍵盤擋住
- 輸入提示很重要,需要用戶在輸入時隨時注意
- 輸入提示很長,用戶短時間內記不住
案例分析
大眾點評在寫評論時,一些可以激勵用戶寫點評的提示性文字,會在用戶輸入時始終存在。
五. 實時校驗
重要的信息要始終可以被看到
當輸入需要被判斷和檢驗的信息時,系統最好可以針對信息做實時校驗,避免用戶一直到最后提交表單時才發現填寫問題。
使用條件
- 輸入的信息需要判斷,并會影響最終的表單填寫通過率
- 輸入內容的質量需要用戶知曉,如密碼的強度
案例分析
證件號碼輸入錯誤時會給予相應的提示。
原文鏈接:長弓小子(公眾號)
作者:元堯
文章來源:站酷 作者:陳皮Celia
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務