網頁表單設計:表單的布局、填寫的互動反饋和創意表單的獨特性

來源:互聯網
上載者:User

文章描述:淺析表單設計:以表單布局與填寫互動反饋為例.

表單,主要是負責資料擷取的功能,需要訪問者自己去填寫,如訪問者的姓名、郵箱、性別、地址、留言建議、設定密碼、管理個人賬戶等等。時下表單無處不在,成功的表單設計不僅能提高使用者的滿意度,更能收集更加精確的資料,相反失敗的表單設計只會收集到錯誤雜亂的資訊,可能會最終導致潛在使用者的流失。

一、組織表單的內容,給使用者一個友好的引導

首先要明確的告之使用者填的是一個什麼性質的表單以及填完後能做些什嗎?哪些問題是一定要問的?有沒有別的途徑可以擷取使用者的資料?大致表單的布局分為三種類型:縱向排列、逐步填寫(多頁顯示)和左右布局。這三種表單的組織形式功能特點,通過不同的使用環境決定它們具體的樣式。下面通過一些對應的執行個體我們來做些具體的分析:

圖1

根據Web慣例調查,卸載軟體的介面常見組織圖,為縱向排列樣式。一般頂部為明確填寫表單的目的,再呈現表單的具體問題。在卸載類型的表單中,內容一定要精簡,減少使用者輸入,盡量提供選擇題,少問答題,沒有必填項。要知道使用者是不喜歡填寫表單的,尤其是當使用者卸載軟體後也是沒有太多的耐心來填寫表單的。如圖1的卸載表單縱向內容組織形式,頂部是致辭,明確的說出問這些問題的目的,下面是分組表單內容。這種縱向排版簡潔填寫的表單組織形式,更利於擷取使用者的反饋。

圖2

圖3

圖4

圖5

在一定情況下,很多問題需要按順序回答,理解並組織好每個表單的情境能得到最佳答案,如果把表單用對話的形式展現,主題之間自然會出現間斷,所以就會需要多個網頁把對話變成若干有意義並容易理解的主題。如圖2 ——圖5 的填寫表單多頁的展現形式。把表單當成是與特定的人在對話,而不是與一堆資料輸入框在對話,每個表單都用不同的情境問題與使用者進行交流,這樣的實際回答率會更高。

圖6

當表單想要搜集更多答案時,可以考慮在表單填完之後提出一些可選的問題,輔助獲得更多的答案。表單的標籤使用術語需要統一,簡潔、單個詞,這樣的標籤要更容易解釋清楚。如圖6的表單設計,使用左右布局的排版方式,左側放上必填和重要的表單項,右側輔助放上可供選擇的表單,減少頁面表單內容視覺的龐大性,整體介面內容置中排列這種方式也比較美觀易讀。

二、填寫表單的反饋,給使用者貼心的引導

為了提高表單的完成率和準確率,設計師會試圖避免各種各樣的分散因素,並且提供一個清晰明確、簡單的web表單。這就是為什麼任何視覺效果都需要非常適當地使用的原因。運用視覺手段去解決會出現這樣的錯誤,減少使用者的誤解。當遇到使用者提交資料有錯誤資訊時腫麼辦?首先要讓使用者知道發生了錯誤,錯在哪,以及如何糾正。

圖7

圖8

圖7郵箱註冊表單頁,當使用者提交錯誤資訊或發生錯誤操作時,在其錯誤旁都會有醒目的紅色視覺元素作為指導,很好的解決使用者找不到錯誤在哪的窘態(關於提示錯誤的元素符號,在處理這塊時可能還要考慮到色盲色弱使用者群的一個需求,他們是看不出這種強烈的顏色提示的,但是有驚嘆號這樣的提醒元素存在我想也能解決這種雙向需求) 。當出現註冊使用者名稱相同時,這裡用下拉框的樣式提示,該地址都是以什麼樣的結構形式被人註冊過,給使用者提供想命名同樣前置的使用者名稱時尾碼如何添加的一些建議性協助,以及圖8填寫正確後給予的文字表徵圖反饋。

圖9

圖10

圖9和10的註冊表單的兩個錯誤提示樣式,當輸入成功提示會消失,輸入錯誤或者輸入不符合標準都會有相應的不同文字反饋,告知使用者發生錯誤的原因,及時斷行符號修改,避免使用者在填完所有的資訊後再反饋給使用者。

[1] [2]  下一頁



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。