與用戶體驗死磕到底:不簡單的表單設計

與用戶體驗死磕到底:不簡單的表單設計

一、表單元素

1. 標籤

告訴用戶表單需要填什麼。

對齊方式是最重要的問題。選擇左對齊、右對齊還是頂對齊?這是表單設計中經常遇到的問題。前人的研究發現了這樣的規律:就觀看時間、填寫速度來說,頂對齊快於右對齊快於左對齊

頂對齊的好處是處理快速,缺點是增加了垂直空間的佔用。

右對齊的優點是垂直佔用空間減少,缺點是可讀性相較於頂對齊更差。

左對齊的好處是標籤容易瀏覽,缺點是標籤與輸入框間距增加,瀏覽變慢。

與用戶體驗死磕到底:不簡單的表單設計

標籤的文字風格也越來越被人們重視,標榜與用戶友好的企業在語氣口吻上會更加清楚明確、平易近人。例如「希望內容來自:」和「我更希望內容來自:」,似乎後者更站在用戶的立場上考慮;還有修改術語,用普通人理解的詞語把問題解釋清楚。這些小技巧對一些用戶來說非常受用。

2. 輸入框

(1)輸入框類型

輸入框一般包括文本框、單選鈕、複選框、下拉菜單、列表框等。綜合問題本身、界面設計、用戶填寫習慣等因素選擇合適的輸入類型。

(2)輸入框長度

一些人認為輸入框的長度提供了暗示,比如郵政編碼、電話號碼的輸入框採取固定的長度,可以幫助用戶了解是否填寫了正確的位數。這不失為一個好辦法,但是在美觀上需要做出平衡。

與用戶體驗死磕到底:不簡單的表單設計

上圖為一款語言學習網站,你需要對照給的中文含義在輸入框內填寫英文單詞,輸入框會根據單詞長度而變化,提供了正確與否的暗示。

(3)必填項與選填項的問題

很多表單上習慣在輸入框旁邊加上星號*來表示必須填寫,熟練的用戶一看便知。

與用戶體驗死磕到底:不簡單的表單設計

基於這並不是既定的規則,有的表單出於穩妥起見會在下面添加說明。在輸入框旁邊添加「(可選項)」的說明也是一個好辦法,看起來更加清晰,尤其當可選項較少時。

(4)關於彈性輸入框

希望用戶按照某種格式填寫時,如「請採用XXX-XXX-XXXX的格式」,記住一定不要麻煩用戶。為什麼不直接把輸入框設置成那種格式,用戶只要輸入其他都不用管?事實上,更好的方式是直接放寬對用戶輸入的要求,包括格式、大小寫等。讓你的系統更靈活,而非讓用戶為了你改變他們的輸入習慣。

與用戶體驗死磕到底:不簡單的表單設計

3. 動作

用戶提交表單,即點擊一個按鈕或鏈接,執行一個操作。

一般動作分為主動作和次動作,主動作是最重要的行為(提交表單),次動作則是返回、取消等。主動作和次動作需要有嚴格的視覺區分,防止發生用戶不小心點擊了取消按鈕,輸入的數據全部清空的狀況。

與用戶體驗死磕到底:不簡單的表單設計

上面這個登錄界面用截然不同的顏色突出了登錄按鈕,取消按鈕的存在感變得很小,誤按可能性極低。

4. 幫助文字

告訴人們如何回答問題。

自動即時幫助:在幫助信息最合適的時間和位置顯示幫助信息,如點擊激活輸入框時,幫助文字就出現在輸入框的旁邊。

用戶激活的幫助:在人們需要的時候提供幫助,這種方式強調用戶的主動性,通常採用圖標、按鈕、圖片或文本鏈接,便於人們知道有幫助可以使用。常見的是一個「?」的符號,如A站登錄頁,點擊問號即可跳轉到幫助手冊頁面。

與用戶體驗死磕到底:不簡單的表單設計

但是,不要依賴幫助文字。要盡量減少幫助文字,創造簡潔乾淨的設計。

5. 輸入反饋

輸入正確還是錯誤。

反饋是必要的,無論是填寫提交錯誤還是正確,反饋能讓用戶感到安心,而不是煩躁地重複點擊。

如果用戶填寫錯誤,應該明確說明是什麼問題。如下圖Facebook的用戶名輸入框,為空時會顯示用戶名無效,和應滿足的要求。

與用戶體驗死磕到底:不簡單的表單設計

但是下面Facebook註冊頁的反饋看起來就有點鬧心了,剛點擊「姓」輸入框準備填寫,後面其他還沒填寫的輸入框都默認為填錯了。設置錯誤反饋需要注意這樣的問題,反饋應當是在每一項填寫完畢時出現。

與用戶體驗死磕到底:不簡單的表單設計

如果表單填寫成功,也應該用成功消息清晰傳達,突出提交成功的結果。至少不能什麼都沒有吧,那樣看起來就會像一直沒刷新的網頁,只會引起用戶的反感。一句「您的表單已提交成功!」就會讓事情好得多,刷新到新的網頁也是常見的做法。

二、有效提高可用性的方法

1. 合理地組織信息

可利用框線、空間間隔、顏色差異,還可按不同信息的類別、屬性和相關性進行區塊劃分。

(1)分組

首先需要在邏輯上進行分組,如按重要程度劃分成基本信息(必填/重要)和附加在信息(選填);按主題歸類劃分,如面試題填寫表單分成填寫說明、個人信息、題目回答幾大板塊。

用分隔線來劃分是常見的分組方法。

與用戶體驗死磕到底:不簡單的表單設計

(2)色彩區分

根據人類色彩感知心理,一般通知用藍色,警告用黃色(如黃牌警告),錯誤為紅色,成功確認為綠色。

與用戶體驗死磕到底:不簡單的表單設計

(3)分步指示

分出步驟展現給用戶,提供清晰的路徑步驟,明確高效

與用戶體驗死磕到底:不簡單的表單設計

註:相關網站建設技巧閱讀請移步到建站教程頻道。

轉載文章請附上來源:與用戶體驗死磕到底:不簡單的表單設計Whoops SEO 搜尋引擎優化 – Search Engine Optimization

Source: https://seo.techroomage.com/%e8%88%87%e7%94%a8%e6%88%b6%e9%ab%94%e9%a9%97%e6%ad%bb%e7%a3%95%e5%88%b0%e5%ba%95%ef%bc%9a%e4%b8%8d%e7%b0%a1%e5%96%ae%e7%9a%84%e8%a1%a8%e5%96%ae%e8%a8%ad%e8%a8%88/

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s