網(wǎng)站建設(shè)：基于用戶體驗(yàn)和客戶轉(zhuǎn)化的最佳表單設(shè)計

表單是網(wǎng)站中與用戶交互的常見形式，它往往是衡量客戶轉(zhuǎn)化的環(huán)節(jié)。比如訂閱免費(fèi)的郵件通訊（電子報）需要提交表單、注冊成為用戶需要提交表單、在網(wǎng)站上發(fā)出詢盤也需要填寫表單…..

為什么訪問者停留在網(wǎng)站上比較久而詢盤或者轉(zhuǎn)化指標(biāo)不高呢？也許網(wǎng)站上的表單阻礙了訪問者進(jìn)行下去。

事實(shí)上確實(shí)如此。填寫表單對于網(wǎng)頁訪問者來說是一道檻，我們在網(wǎng)站建設(shè)工作中不斷總結(jié)，尋找更好的設(shè)計方法來幫助這一過程順利。

影響人們完成網(wǎng)頁表單有兩個主要因素：

1、對復(fù)雜性感知：當(dāng)用戶看到一個新表單時，首先會估計完成它需要多少時間。用戶通過掃描表單來完成此操作。感知在估算過程中起著至關(guān)重要的作用。表單的外觀越復(fù)雜，用戶越有可能放棄操作；

2、交互成本：用戶為了達(dá)到他的目標(biāo)而投入到與界面交互付出的時間和精力。交互成本與表單可用性直接相關(guān)。用戶完成表單所做的努力越多，表單的可用性就越低。造成交互成本高的原因可能由于數(shù)據(jù)難以輸入、無法理解某些問題的含義或錯誤易混淆的信息等等細(xì)節(jié)造成。

網(wǎng)頁表單通常有以下構(gòu)成：

● 輸入字段：這些字段包括文本字段、密碼字段、復(fù)選框、單選按鈕、滑塊和其他需要用戶輸入的字段；

● 字段標(biāo)簽：說明用戶輸入字段的含義，例如文本框前面的“你的姓名”；

● 外觀和結(jié)構(gòu)：這包括字段的順序、表單在頁面上的樣式以及不同字段之間的邏輯關(guān)系；

● 動作按鈕：表單至少有一個操作按鈕（例如提交的按鈕）；

● 反饋信息：是將操作結(jié)果通知給用戶。例如：“謝謝，表單提交成功！”或 “你提供的數(shù)字不正確”等等。

注冊登錄表單最佳設(shè)計細(xì)節(jié)

說明注冊價值設(shè)置醒目登陸輸入框

注冊是用戶最不想做的事情。一般來說，用明確的價值說明能夠激發(fā)注冊行為。例如LinkedIn的做法：

表達(dá)的價值主張：在這里，連接世界。

表達(dá)的價值主張：Be great at what you do。

需要用戶登錄的部分直接顯示輸入框，而不是設(shè)置“登錄”鏈接給用戶增加一次點(diǎn)擊。這是值得提倡的做法。

允許使用社交賬號進(jìn)行注冊和登錄網(wǎng)站

允許用戶使用現(xiàn)有的社交帳戶（如Facebook/Twitter/Google等等）輕松登錄網(wǎng)站或應(yīng)用程序。這給用戶帶了極大便利，因?yàn)橛涀『芏嗝艽a是令人頭痛的問題。凡是遇到用社交賬戶登錄使用的網(wǎng)站都帶給我一陣竊喜，你一定也有此感受吧：

用戶名采用郵箱或手機(jī)號碼

使用電子郵件地址或手機(jī)號碼作為用戶名。起一個新的名字會令客戶困擾（輸入的名字往往已被占用），用郵件地址或手機(jī)號碼做用戶名更簡便。手機(jī)銀行就是這么做的：

登錄與注冊功能需區(qū)分明顯

過去我們常?？吹骄W(wǎng)站把登錄（Sign in/Login）和注冊（Register/Sign up）的鏈接放置在一起，這樣做很容易使用戶混淆，尤其是英文網(wǎng)站把Sign in和Sign up放在一起的時候。現(xiàn)在盡可能將兩者區(qū)別表達(dá)，如下圖知乎的登錄和注冊（加入知乎）樣式：

以下是一個英文購物網(wǎng)站的注冊和登錄設(shè)計，區(qū)分比較明顯：

依次高亮顯示輸入框，允許記住用戶登錄信息

當(dāng)用戶在輸入框輸入內(nèi)容的時候，文本框需要高亮顯示以提示正在該框內(nèi)工作。需要提供一個選項(xiàng)：Remember Me 允許該表單記住本人登錄信息。然后我就不用再次花費(fèi)時間登錄該網(wǎng)站，哈哈，自由進(jìn)出，感覺好極了。

允許用戶查看密碼

密碼總是以圓點(diǎn)顯示，用戶并不能確認(rèn)輸入的密碼是否一定正確，所以允許密碼明文顯示。請看看下圖表單上閉合開啟的一只小眼睛，充滿人性的設(shè)計。

移動端用戶需顯示ISD代碼

ISD是電話國家代碼簡稱，對于移動端注冊需考慮識別用戶所在位置自動顯示ISD并允許修改，如下圖：

如果大寫鍵被啟用需有提示

然而，大寫鍵被啟用的提示，有此功能的表單很少見，不過從一些老牌網(wǎng)站上還是可以看到：

需有必要的信息提示

包括輸入錯誤的信息提示，還包括一些重要的注意事項(xiàng)提示，例如以下三個表單：

需要顯示密碼強(qiáng)壯程度

盡可能少使用下拉選項(xiàng)

如果你的表單中某一個項(xiàng)目里只有3-4個參數(shù)需要選擇，就不要使用下拉框樣式，這樣更有利于用戶體驗(yàn)。

還有還有……

毋須要求注冊用戶重復(fù)填寫Email地址；如果你的表單有必須填寫項(xiàng)和可選填寫框，這時只要標(biāo)注出可選項(xiàng)即可：

（來源：newloong）

以上內(nèi)容屬作者個人觀點(diǎn)，不代表雨果網(wǎng)立場！本文經(jīng)原作者授權(quán)轉(zhuǎn)載，禁止二次轉(zhuǎn)載！