Web表單設(shè)計—點石成金的藝術(shù)(二)

接上文Web表單設(shè)計—點石成金的藝術(shù)(一)

人們填寫表單是為了獲取之后的服務(wù),如完成購物、獲取服務(wù)、管理信息等。所以向人們說明填完表單的路徑至關(guān)重要。

表單的命名要與要求人們采取的行動目標(biāo)一致。

表單起始頁,不是所有表單都需要。一般需要花費大量時間填寫或者需要查詢信息才能填寫的表單需要給一個起始頁來說明。如在線調(diào)查或者填寫到一半時發(fā)現(xiàn)有模糊的信息阻礙填寫時。

一、清晰的瀏覽線

表單清晰的瀏覽線即單一的眼動軌跡圖:(如下圖由www.etre.com提供)

圖一:眼動圖即填寫表單時看到的內(nèi)容

還有PayPal兩種結(jié)算表單之間的差別:


圖二:PayPal結(jié)算方式一


圖三:PayPal結(jié)算方式二

在第二張表單中,從第一個信息點開始一直到主要動作結(jié)束都有清晰的瀏覽線。而第一個表單卻變成了“之”字形眼球運動。顯然統(tǒng)一布局、路徑單一的表單能使人們更關(guān)注所要執(zhí)行的任務(wù),提高工作效率。

表單的空間間隔要合適,一般采用輸入框高度的50%~75%為合適

二、注意力分散最少

剔除與網(wǎng)站填寫沒有直接關(guān)系的界面元素,有助于保持人們完成任務(wù),并消除放棄路徑。尤其是對于關(guān)鍵任務(wù)表單,尤其是結(jié)算表單或者注冊表單。如電子商務(wù)網(wǎng)站的支付表單,旦進(jìn)入支付頁面,即使是返回網(wǎng)站主頁的鏈接都會弱化掉,以盡量減少用戶離開關(guān)鍵表單。

三、進(jìn)程指示

如果表單為多個清晰的有序網(wǎng)頁,可以采取進(jìn)程指示來傳達(dá)范圍、狀態(tài)和位置等信息。

如果沒有清晰的有序網(wǎng)頁,應(yīng)該采用更籠統(tǒng)的進(jìn)程指示,不要設(shè)置錯誤期望。因為這時候詳細(xì)的進(jìn)程指示很可能會錯誤的顯示完成表單所需的網(wǎng)頁頁數(shù)和步驟。如典型的電子商務(wù)網(wǎng)站結(jié)算過程,第一步是選擇送貨地址,首先是從現(xiàn)有送貨地址選擇,如果現(xiàn)有地址中沒有就需要手動添加新的送貨地址。這樣一步就變成了兩步。所以現(xiàn)在很多網(wǎng)站不會提供明確說明表單填完需要的步驟,而是在進(jìn)程指示中說明要提供的信息類型,即概要級別的任務(wù)。

四、Tab鍵跳轉(zhuǎn)

作者在一次調(diào)查中發(fā)現(xiàn),幾乎有一半的人在填寫表單的時候都習(xí)慣使用Tab鍵跳轉(zhuǎn),但是在有些情況下表單支持Tab鍵跳轉(zhuǎn)反而會帶來不好的體驗。例如兩列并排的表單,如果使用Tab鍵光標(biāo)突然從第一列的表單末尾跳轉(zhuǎn)至第二列的表單開頭,這種突然的跳轉(zhuǎn)會令用戶體驗很不好。所以支持Tab鍵跳轉(zhuǎn)也要區(qū)分合適的場景。

開發(fā)人員通常使用tabindex來明確指定表單的輸入順序。


Web表單設(shè)計—點石成金的藝術(shù)(一)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容