7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

來源:isux.tencent 作者:Jana 學(xué)習(xí):3700人次

我們幾乎每天都會(huì)接觸形形色色的表單,登錄賬號(hào)、填寫信息以獲取服務(wù)、發(fā)布內(nèi)容等。然而填寫表單的過程往往不是特別愉悅的,我們需要消耗時(shí)間輸入信息,點(diǎn)擊提交,可能還需要等待審核;尤其是碰到較為復(fù)雜、流程長(zhǎng)的表單,如果用戶體驗(yàn)較差,很容易讓人產(chǎn)生挫敗感,在中途選擇放棄。

那么,如何提高用戶填寫表單的效率,防止他們出錯(cuò)或中途流失,提升愉悅度及轉(zhuǎn)化率呢?本文就Web表單設(shè)計(jì),總結(jié)了以下的一些方法:

有效的說服用戶進(jìn)行填寫

首先,告知用戶為什么要填寫表單,他能獲得什么,讓用戶看到把信息給你的好處。舉個(gè)例子,GitHub在其注冊(cè)表單的右側(cè)清晰的告訴你注冊(cè)使用它會(huì)得到的幫助:

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

除了告訴用戶填完整個(gè)表單可以得到什么好處,你還可以更具體一點(diǎn),告訴用戶你讓他填寫某一項(xiàng)信息是出于怎樣的考慮。

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

有效的說服用戶填寫表單,還需要剔除負(fù)面干擾,獲取他們的信任。大多數(shù)情況下,用戶對(duì)于填寫表單的最大顧慮是信息被網(wǎng)站收集之后的用途。用戶不希望源源不斷的收到垃圾推銷郵件,更不希望自己的隱私信息被公之于眾。此時(shí),你可以通過引用一些具有影響力的權(quán)威人士的承諾,或者展示一些具有公共效應(yīng)的證據(jù),如相關(guān)媒體報(bào)道、來自現(xiàn)有用戶的贊許等任何能使人產(chǎn)生積極態(tài)度的元素。

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

你還可以做的更貼心一些,告訴用戶填寫表單預(yù)計(jì)需要花費(fèi)的時(shí)間。

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

合理組織信息

對(duì)于較為復(fù)雜、填寫項(xiàng)多的表單,如果不對(duì)信息進(jìn)行組織,很容易顯得繁雜混亂,讓用戶在一開始就產(chǎn)生抵觸的情緒,甚至選擇放棄。合理有層次的組織信息,可以利用框線、空間間隔、顏色的不同,按照不同信息的類別、屬性和相關(guān)性進(jìn)行區(qū)塊的劃分,用步驟條指示當(dāng)前的進(jìn)程。

想處理好層次?來看搜狐同學(xué)的專題你分析,絕對(duì)大有收獲!《拍案叫絕的設(shè)計(jì)!聊聊那些讓頁面更加出彩的小細(xì)節(jié)》

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

一般來說,通知為藍(lán)色,警告為黃色,錯(cuò)誤為紅色,成功確認(rèn)為綠色。

想深入了解色彩的含義,來這篇好文取經(jīng)!《設(shè)計(jì)師的配色理論:你真懂顏色了嗎?》

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

清晰的瀏覽線,合理的標(biāo)簽、提示文字及按鈕的排布,避免不必要的信息重復(fù)出現(xiàn),能夠降低用戶的視覺負(fù)擔(dān)和物理負(fù)擔(dān)。

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

恰當(dāng)?shù)碾[藏信息能夠使表單看起來更加清爽怡人,有些信息可以設(shè)置在需要進(jìn)行相關(guān)操作時(shí)才出現(xiàn)。

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

區(qū)分一級(jí)動(dòng)作和二級(jí)動(dòng)作。用按鈕定義一級(jí)動(dòng)作,用鏈接定義二級(jí)動(dòng)作,或者相對(duì)于二級(jí)動(dòng)作按鈕來說,賦予一級(jí)動(dòng)作按鈕更為明顯的風(fēng)格。

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

為用戶節(jié)省時(shí)間

需要花大量時(shí)間填寫的表單容易讓人失去耐心,用戶是懶惰而繁忙的,試著刪去所有不必要的填寫項(xiàng),考慮除了讓用戶機(jī)械的通過鍵盤在表單上輸入數(shù)據(jù)外,還有沒有別的更優(yōu)方式(如后續(xù)進(jìn)行用研調(diào)查)收集所需信息。

驗(yàn)證碼永遠(yuǎn)是表單上讓用戶頭疼的填寫項(xiàng)之一,他需要等待驗(yàn)證碼的生成、確認(rèn)驗(yàn)證碼的內(nèi)容、確保驗(yàn)證碼輸入正確,才能點(diǎn)擊提交,而這整個(gè)過程對(duì)他來說并無實(shí)際價(jià)值,用戶不會(huì)因?yàn)槎嗵顚懸淮悟?yàn)證碼而得到額外的獎(jiǎng)勵(lì)。我們可以通過改變輸入驗(yàn)證碼的體驗(yàn),使其變得更簡(jiǎn)單有趣,或者通過新的后臺(tái)邏輯限制用戶每日提交次數(shù)等行為來取締驗(yàn)證碼。

安全平臺(tái)部打擊惡意組的同事就發(fā)明了一種有趣的圖片驗(yàn)證碼的方式:

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

除了驗(yàn)證碼以外,注冊(cè)填寫表單中經(jīng)常存在的二次確認(rèn)密碼也同樣費(fèi)時(shí)。目前,很多國(guó)外的主流網(wǎng)站,如Facebook、Twitter、LinkedIn、Friendster等在填寫注冊(cè)表單時(shí)都不要求用戶確認(rèn)密碼。WordPress甚至連都不需要用戶填寫,而是將密碼直接發(fā)送至用戶的郵箱。

7個(gè)幫你全面提升Web表單填寫體驗(yàn)的方法

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!