7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法(3)
當(dāng)用戶選擇了所在地區(qū)后,自動(dòng)填充郵政編碼。
當(dāng)用戶輸入銀行賬號時(shí),自動(dòng)空格間斷。
當(dāng)用戶輸入金額時(shí),自動(dòng)補(bǔ)充小數(shù)。
幫助用戶進(jìn)行決策。當(dāng)面臨的選擇越多時(shí),用戶就越難做出決定。這個(gè)時(shí)候可以適當(dāng)?shù)膭澐置總(gè)選項(xiàng)的優(yōu)先級,高亮其中的一個(gè),告訴用戶你的推薦理由,讓用戶更容易比較并做出選擇。
支持常用的快捷操作,如Tab切換等,讓用戶在不使用鼠標(biāo)的情況下也能完成整個(gè)表格的填寫。
提供友好的引導(dǎo)
清理晦澀的專業(yè)術(shù)語(如數(shù)據(jù)庫錯(cuò)誤),試著使用更加親切的語言來引導(dǎo)用戶填寫、告訴用戶錯(cuò)誤的原因。當(dāng)問題出現(xiàn)時(shí),清楚的說明問題出現(xiàn)的原因并提供有效的解決方案。必要時(shí),除了指導(dǎo)文案以外,還可以添加更加生動(dòng)的照片或可視化圖形作為引導(dǎo)。
一條龍服務(wù)
表單的終點(diǎn)并不是提交,我們需要為用戶提供一條龍服務(wù),形成流程閉環(huán),避免用戶在中途跳出。
舉個(gè)例子,用戶在某網(wǎng)站選好商品點(diǎn)擊付款時(shí)發(fā)現(xiàn)賬戶余額不足,此時(shí)用戶只能先進(jìn)行充值才能進(jìn)行后續(xù)操作,但當(dāng)用戶充值完畢后,發(fā)現(xiàn)已經(jīng)找不回原來選擇的商品和付款頁面了。這就是典型的流程不閉環(huán)的情況。類似的還有當(dāng)用戶需要在論壇下載資源時(shí),系統(tǒng)提示回復(fù)才能下載,而用戶沒有注冊,需要在此之前先提交注冊表單,當(dāng)用戶填寫完畢后,卻直接跳轉(zhuǎn)到了論壇首頁。
一個(gè)好的表單設(shè)計(jì),不僅需要考慮用戶填寫前的引導(dǎo)、填寫時(shí)的及時(shí)校驗(yàn)與幫助、還需要考慮填寫后的整個(gè)流程體驗(yàn)。思考用戶填寫表單的初衷是什么,讓他在填寫完表單后能夠最快得到他最想要的東西。即便是他暫時(shí)無法得到的,也需要告訴他相應(yīng)的原因和能夠進(jìn)行的替代操作。
提供設(shè)計(jì)關(guān)懷
據(jù)統(tǒng)計(jì),大約有12%的人口具有或輕或重的色覺障礙。如果將色彩作為區(qū)分不可點(diǎn)擊文本和可點(diǎn)擊鏈接的唯一元素,可能會(huì)讓這部分的人使用時(shí)出現(xiàn)困難。我們可以通過給鏈接文字加下劃虛線、使用按鈕或其他形狀做區(qū)分,讓這類用戶能更加清楚的知道哪些是可點(diǎn)擊的區(qū)域。
最后,再增加一點(diǎn)愉悅度吧
研究表明,更大的文字輸入框、適度的留白空間會(huì)讓人更有填寫的欲望,優(yōu)雅的動(dòng)畫效果也能增加填寫的趣味。以下的案例可供參考:
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- 調(diào)色知識,簡單實(shí)用的調(diào)色原理
- 色彩知識,講解顏色基礎(chǔ)知識和配色理論
- Photoshop初級教程-命令的技巧
- UI知識,尺寸對UI設(shè)計(jì)的影響
- 用戶體驗(yàn),如何讓用戶心動(dòng)?
- 顏色管理,讓自己的照片在網(wǎng)上正確地顯示
- 移動(dòng)設(shè)計(jì),移動(dòng)應(yīng)用導(dǎo)航模式設(shè)計(jì)方法
- 用戶體驗(yàn),分享20個(gè)有影響力的包裝設(shè)計(jì)
- 圖片畫冊平面設(shè)計(jì)排版ps理論教程
- 設(shè)計(jì)界面最常用最舒服的12種顏色(含色