免費(fèi)參與·100+跨境活動(dòng) 
免費(fèi)下載·4000+跨境資料 
免費(fèi)學(xué)習(xí)·2000+直播課程 
免費(fèi)加入·15萬(wàn)+賣(mài)家交流群 
2019-02-26 16:55
表單是網(wǎng)站中與用戶交互的常見(jiàn)形式，它往往是衡量客戶轉(zhuǎn)化的環(huán)節(jié)。比如訂閱免費(fèi)的郵件通訊（電子報(bào)）需要提交表單、注冊(cè)成為用戶需要提交表單、在網(wǎng)站上發(fā)出詢(xún)盤(pán)也需要填寫(xiě)表單…..
為什么訪問(wèn)者停留在網(wǎng)站上比較久而詢(xún)盤(pán)或者轉(zhuǎn)化指標(biāo)不高呢？也許網(wǎng)站上的表單阻礙了訪問(wèn)者進(jìn)行下去。
事實(shí)上確實(shí)如此。填寫(xiě)表單對(duì)于網(wǎng)頁(yè)訪問(wèn)者來(lái)說(shuō)是一道檻，我們?cè)诰W(wǎng)站建設(shè)工作中不斷總結(jié)，尋找更好的設(shè)計(jì)方法來(lái)幫助這一過(guò)程順利。
影響人們完成網(wǎng)頁(yè)表單有兩個(gè)主要因素：
1、對(duì)復(fù)雜性感知：當(dāng)用戶看到一個(gè)新表單時(shí)，首先會(huì)估計(jì)完成它需要多少時(shí)間。用戶通過(guò)掃描表單來(lái)完成此操作。感知在估算過(guò)程中起著至關(guān)重要的作用。表單的外觀越復(fù)雜，用戶越有可能放棄操作；
2、交互成本：用戶為了達(dá)到他的目標(biāo)而投入到與界面交互付出的時(shí)間和精力。交互成本與表單可用性直接相關(guān)。用戶完成表單所做的努力越多，表單的可用性就越低。造成交互成本高的原因可能由于數(shù)據(jù)難以輸入、無(wú)法理解某些問(wèn)題的含義或錯(cuò)誤易混淆的信息等等細(xì)節(jié)造成。
網(wǎng)頁(yè)表單通常有以下構(gòu)成：
● 輸入字段：這些字段包括文本字段、密碼字段、復(fù)選框、單選按鈕、滑塊和其他需要用戶輸入的字段；
● 字段標(biāo)簽：說(shuō)明用戶輸入字段的含義，例如文本框前面的“你的姓名”；
● 外觀和結(jié)構(gòu)：這包括字段的順序、表單在頁(yè)面上的樣式以及不同字段之間的邏輯關(guān)系；
● 動(dòng)作按鈕：表單至少有一個(gè)操作按鈕（例如提交的按鈕）；
● 反饋信息：是將操作結(jié)果通知給用戶。例如：“謝謝，表單提交成功！”或 “你提供的數(shù)字不正確”等等。
注冊(cè)登錄表單最佳設(shè)計(jì)細(xì)節(jié)
說(shuō)明注冊(cè)價(jià)值設(shè)置醒目登陸輸入框
注冊(cè)是用戶最不想做的事情。一般來(lái)說(shuō)，用明確的價(jià)值說(shuō)明能夠激發(fā)注冊(cè)行為。例如LinkedIn的做法：
表達(dá)的價(jià)值主張：在這里，連接世界。
表達(dá)的價(jià)值主張：Be great at what you do。
需要用戶登錄的部分直接顯示輸入框，而不是設(shè)置“登錄”鏈接給用戶增加一次點(diǎn)擊。這是值得提倡的做法。
允許使用社交賬號(hào)進(jìn)行注冊(cè)和登錄網(wǎng)站
允許用戶使用現(xiàn)有的社交帳戶（如Facebook/Twitter/Google等等）輕松登錄網(wǎng)站或應(yīng)用程序。這給用戶帶了極大便利，因?yàn)橛涀『芏嗝艽a是令人頭痛的問(wèn)題。凡是遇到用社交賬戶登錄使用的網(wǎng)站都帶給我一陣竊喜，你一定也有此感受吧：
用戶名采用郵箱或手機(jī)號(hào)碼
使用電子郵件地址或手機(jī)號(hào)碼作為用戶名。起一個(gè)新的名字會(huì)令客戶困擾（輸入的名字往往已被占用），用郵件地址或手機(jī)號(hào)碼做用戶名更簡(jiǎn)便。手機(jī)銀行就是這么做的：
登錄與注冊(cè)功能需區(qū)分明顯
過(guò)去我們常常看到網(wǎng)站把登錄（Sign in/Login）和注冊(cè)（Register/Sign up）的鏈接放置在一起，這樣做很容易使用戶混淆，尤其是英文網(wǎng)站把Sign in和Sign up放在一起的時(shí)候?，F(xiàn)在盡可能將兩者區(qū)別表達(dá)，如下圖知乎的登錄和注冊(cè)（加入知乎）樣式：
以下是一個(gè)英文購(gòu)物網(wǎng)站的注冊(cè)和登錄設(shè)計(jì)，區(qū)分比較明顯：
依次高亮顯示輸入框，允許記住用戶登錄信息
當(dāng)用戶在輸入框輸入內(nèi)容的時(shí)候，文本框需要高亮顯示以提示正在該框內(nèi)工作。需要提供一個(gè)選項(xiàng)：Remember Me 允許該表單記住本人登錄信息。然后我就不用再次花費(fèi)時(shí)間登錄該網(wǎng)站，哈哈，自由進(jìn)出，感覺(jué)好極了。
允許用戶查看密碼
密碼總是以圓點(diǎn)顯示，用戶并不能確認(rèn)輸入的密碼是否一定正確，所以允許密碼明文顯示。請(qǐng)看看下圖表單上閉合開(kāi)啟的一只小眼睛，充滿人性的設(shè)計(jì)。
移動(dòng)端用戶需顯示ISD代碼
ISD是電話國(guó)家代碼簡(jiǎn)稱(chēng)，對(duì)于移動(dòng)端注冊(cè)需考慮識(shí)別用戶所在位置自動(dòng)顯示ISD并允許修改，如下圖：
如果大寫(xiě)鍵被啟用需有提示
然而，大寫(xiě)鍵被啟用的提示，有此功能的表單很少見(jiàn)，不過(guò)從一些老牌網(wǎng)站上還是可以看到：
需有必要的信息提示
包括輸入錯(cuò)誤的信息提示，還包括一些重要的注意事項(xiàng)提示，例如以下三個(gè)表單：
需要顯示密碼強(qiáng)壯程度
盡可能少使用下拉選項(xiàng)
如果你的表單中某一個(gè)項(xiàng)目里只有3-4個(gè)參數(shù)需要選擇，就不要使用下拉框樣式，這樣更有利于用戶體驗(yàn)。
還有還有……
毋須要求注冊(cè)用戶重復(fù)填寫(xiě)Email地址；如果你的表單有必須填寫(xiě)項(xiàng)和可選填寫(xiě)框，這時(shí)只要標(biāo)注出可選項(xiàng)即可：
（來(lái)源：newloong）
以上內(nèi)容屬作者個(gè)人觀點(diǎn)，不代表雨果網(wǎng)立場(chǎng)！本文經(jīng)原作者授權(quán)轉(zhuǎn)載，禁止二次轉(zhuǎn)載！
