基于用戶體驗的WEB表單設計研究

陳振華 張宇紅 (江南大學設計學院 江蘇無錫 214122)

一、Web表單的相關概述

對于互聯網而言，表單是電子商務、社交活動和大多數基于生產力應用類型網站的關鍵，相比較于現實世界中的多感官交流，表單是商家與用戶交流的唯一平臺，也是用戶需求和商業目標之間的一道障礙，所以表單的完成率往往直接影響著商業目標的成功率。

對于任何表單，從非常簡單直接的表單到花哨多彩的表單，每個網站可能都會呈現不同的風格。當考慮站網站的界面設計時，這些風格必定是你應該關注的元素。但是不論是登錄/注冊表單，還是聯系表單，或者其他類型表單，我們只需要牢記一點：幫助用戶完成信息輸入。

二、Web表單制作的設計原則

第一，在合適的情境下保證和用戶的流暢交流，減少用戶的挫折感。設想當你在瀏覽網頁時，如果在瀏覽網站前就必須填寫相應的個人信息，這勢必會引起你的反感，即使你愿意填寫相關信息，很大可能上，你也會填寫一套虛假的個人信息。反之，如果你完成了網購商品的付款流程，可是網站卻不問你街道地址，你又會覺得很奇怪。

第二，選擇合適的問題，并以最合理的方式組織起來，再輔以最人性化的語言表達，以表單為媒介構建用戶和商家之間的互信。在選擇表單問題的過程中，最核心的關注點應該是人，這個“人”既包括客戶，也包括企業和組織。關注用戶和企業的需求，平衡二者之間的關系，才能選擇最有效率的問題。對于企業或者組織而言，之所以讓用戶填寫表單就是為了獲得用戶的相關資料，從而更加有利于公司的發展，但是公司或者企業的各個部門對于信息的要求又有各自特點，這就導致表單會非常復雜，也是很多網站注冊非常復雜的原因所在；從用戶的角度看，最不希望填寫表單——除非有利于幫助他們完成任務，因為沒有人會愿意泄漏個人隱私而不能完成任何事情。

如何選擇合適的問題？一般在選擇問題的過程中遵從“保留、刪減、延遲、解釋”四大策略：對用戶渴望給出答案的問題予以保留；對實際上不是真的需要的問題予以刪除；對不急著馬上知道答案的問題延遲發問；對公司的確需要但是用戶不理解的問題予以解釋。

第三，對表單的問題進行系統的歸納和區別。之所以對表單的相關信息問題進行分組，是為了保障對話的流暢。這樣做不僅可以將較長而復雜的表單分割成幾塊，降低用戶的恐懼感，同時系統的提問方式，符合用戶的生活習慣，能夠提高表單信息輸入的完成率和準確率。

三、Web表單元素的設計方法

當你完成的表單基本問題的組織和框架設計，你就應該開始關注于問題之外的東西了，比如表單名稱、表單的起始頁、用戶瀏覽效率以及最重要的進程指示等，而所有這些都是以表單組成要素為基礎的。

1.表單名稱

表單名稱和表單起始頁的優秀設計，能夠拉近用戶和企業或者組織之間的距離，消除隔閡，讓用戶能夠清楚的知道為什么要填這個表單，如何才能完成這個表單以及需要花多長時間。對于提高用戶的瀏覽效率，主要有提供合適的功能分塊(比如淺色的線條和冷色系背景色塊)、色彩的使用和按鈕數量和擺放位置。

2.標簽

對于標簽除了合適命名，更多的應該關注于對齊方式。是左對齊還是右對齊又或者頂對齊，需要根據實際情況而定。這個實際情況主要包括展示屏數，信息類型和表單在整個界面中可使用的空間。但是一般來說，左對齊比較適合同類型信息的列表展示，比如電話本和郵箱信息，又或者為了減緩用戶閱讀速度(有的信息填寫需要用戶非常謹慎，從而避免出現錯誤)；右對齊比較方便于標簽與信息文字相對性展示，以一問一答的形式來提高效率，也是用的最多的一種方式；頂對齊是瀏覽速度最快的一種對齊方式，同時也可以橫向減少占用的空間(這個在手機界面設計里面用的非常頻繁)。

3.輸入框

對于輸入框，需要關注的是輸入框的類型，輸入框的長度、輸入框的展現形式和輸入框的交互情境。輸入框目前普遍使用的是單選框、復選框、下拉菜單、下單列表等等，它們各有利弊，如何在合適的環境中使用合適的類型，能夠讓整個交互體驗完全不一樣。而且對于很多輸入框的使用，其實沒有標準的方式，這就需要設計師的創造性思維了。同時既然輸入框是用戶信息的輸入口，那么輸入框本身的功能就更加應該注意了。比如，如何合適的規范輸入框的長度，如何合理的鑒別必選項和可選項，如何提供更好的人性化的輸入選擇。

4.動作

對于動作主要是指動作的放置位置和主次關系的體現。對于動作的放置位置你要考慮以下幾點：第一，是否符合邏輯關系，盡量避免下控制上；第二，動作的隱蔽性考慮的同時又不影響用戶專注于完成表單；第三，是否符合人們現有的使用習慣，如果你不確定能夠提供更加合理的交互方式，那就盡量保持一致性，不要為了裝飾而裝飾。對于動作的主次關系，你需要考慮的是盡可能的減少誤操作的可能性，盡可能的讓用戶完成表單而不是退出。

5.幫助文字

對于幫助文字，在設計的過程要注意提供幫助的時機，是決定放在輸入框里面還是輸入框后面，或者是當前話題的下面等等，這都需要根據實際情況而選擇。總而言之，是為了幫助用戶，而不是趕走用戶。

6.信息提示

信息提示主要指錯誤信息和成功信息的提示，對于錯誤信息的提示，如果可以的話，應該盡可能的避免，因為這是造成用戶挫折感的最直接因素，但是無論表單設計的多么完美，總是有用戶因為這樣或者那樣的原因填寫錯誤。既然無法避免，那么怎么樣告訴用戶錯誤的地方以及解決的方法就尤其重要。為了讓用戶明確的知道錯誤操作的位置，最常用的方法是使用雙重強調，比如特定的圖標，紅色的字體，或者高亮等等。如何組合這種顯示區別無所謂，最重要的讓用戶能夠非常清楚的看到錯誤信息又不讓用戶反感。此外提供解決錯誤的方法也非常重要，這點在實際設計中卻經常被忽視；對于成功消息的提示，應該盡可能的避免直接彈出模態窗口，畢竟成功的操作不應該被打斷而是被鼓勵，所以在成功提醒頁面可以附加考慮用戶在成功填寫表單后，下一步所需要完成的任務。這樣既能達到提醒用戶的目的，又能將干擾因素影響降到最低。

[1]羅博烏斯基.盧頤.高韻蓓譯.Web表單設計—點石成金的藝術[M].清華大學出版社，2010.6.

[2]Jesse James Garrett.范曉艷譯.用戶體驗要素—以用戶為中心的產品設計[M].機械工業出版社，2007.10.