基于用戶體驗的WEB表單設(shè)計研究

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

一、Web表單的相關(guān)概述

對于互聯(lián)網(wǎng)而言，表單是電子商務(wù)、社交活動和大多數(shù)基于生產(chǎn)力應(yīng)用類型網(wǎng)站的關(guān)鍵，相比較于現(xiàn)實世界中的多感官交流，表單是商家與用戶交流的唯一平臺，也是用戶需求和商業(yè)目標(biāo)之間的一道障礙，所以表單的完成率往往直接影響著商業(yè)目標(biāo)的成功率。

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

二、Web表單制作的設(shè)計原則

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

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

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

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

三、Web表單元素的設(shè)計方法

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

1.表單名稱

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

2.標(biāo)簽

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

3.輸入框

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

4.動作

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

5.幫助文字

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

6.信息提示

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

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

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