Web表單設(shè)計(jì)原則責(zé)任編輯 :李飛 文章來(lái)源 :星翼創(chuàng)想(cctvsc.cn) 發(fā)布時(shí)間 :2012-02-11 閱讀次數(shù):3960
你是否曾為表單設(shè)計(jì)感到過(guò)沮喪或不知所措呢？接下來(lái)三篇文章，希望能徹底改變你的看法，真正愛(ài)上Web表單設(shè)計(jì)。首先感謝Luke Wroblewski的幫助，讓我有機(jī)會(huì)細(xì)心品味設(shè)計(jì)表單的樂(lè)趣。總體來(lái)說(shuō)，Web表單主宰著結(jié)算、注冊(cè)和數(shù)據(jù)輸入。每天eBay、Taobao上的大量物品主要通過(guò)出售物品（Sell Your Item）表單售出；MySpace、Facebook等超過(guò)幾億的用戶都是通過(guò)Web表單加入網(wǎng)站社區(qū)的；YouTube、Youku通過(guò)上傳視頻（Upload Your Video）表單收集了大量視頻。這一切都給我們創(chuàng)造了很多接觸Web表單的機(jī)會(huì)，Web表單常常是漫長(zhǎng)旅途的最后一步，也是最重要的一步。
你會(huì)設(shè)計(jì)表單嗎？
以上為Yahoo的注冊(cè)表單,我們可以大體觀察出三個(gè)主體元素:標(biāo)題、數(shù)據(jù)、動(dòng)作。它們是組成表單的基本元素，過(guò)多的修飾表單或過(guò)多無(wú)用信息會(huì)給用戶帶來(lái)更多的思考與厭惡。有時(shí)用戶會(huì)覺(jué)得表單很討厭，想做的是投票、申請(qǐng)工作、在網(wǎng)上買書、加入小組或從近期購(gòu)物中拿到折扣等，但表單卻給用戶帶來(lái)了麻煩，妨礙了他們。
大多數(shù)表單是“由內(nèi)而外”（Inside Out）而不是“由外而內(nèi)”（Outside In）設(shè)計(jì)出來(lái)的。舉個(gè)例子：如果誰(shuí)想成為網(wǎng)站的會(huì)員，網(wǎng)站就會(huì)跳出表單要求用戶提供用戶名，密碼，電子郵箱等。這就是“由內(nèi)而外”的設(shè)計(jì)，多數(shù)用戶不會(huì)認(rèn)為享受網(wǎng)站服務(wù)與填寫討厭的表單有什么必然關(guān)系。同時(shí)，“由外而內(nèi)”的設(shè)計(jì)意味著以組織或者網(wǎng)站外部人的角度來(lái)看待事務(wù)。這時(shí)候項(xiàng)目成員需要以用戶的視角來(lái)討論表單的設(shè)計(jì)，目標(biāo)是讓用戶輕松地完成填寫。讓表單以某種隱形平衡方式存在，但又能保證系統(tǒng)和用戶都獲得想要的東西。
在電子商務(wù)、社交互動(dòng)、生產(chǎn)力網(wǎng)站里，我們發(fā)現(xiàn)表單阻礙著用戶需求和商業(yè)目標(biāo)，表現(xiàn)為：
■人們從電子商務(wù)網(wǎng)站購(gòu)買需要的商品，而結(jié)算表單阻礙著交易雙方。
■人們加入社交網(wǎng)站與朋友聊天或分享內(nèi)容，從增加用戶基數(shù)與活躍度方面說(shuō)，阻礙雙方的是注冊(cè)表單和聯(lián)系表單。
■人們希望基于互聯(lián)網(wǎng)的生產(chǎn)力工具，創(chuàng)造高效協(xié)同工作，當(dāng)公司要增加網(wǎng)站內(nèi)容，增加了用戶的時(shí)間，表單再次阻礙了兩者。
Web表單設(shè)計(jì)在支付和注冊(cè)環(huán)節(jié)，會(huì)起到至關(guān)重要的中介作用。2004年人機(jī)交互（Computer Human Interaction, CHI)大會(huì)有篇論文題目為“創(chuàng)造用戶體驗(yàn)商業(yè)案例的過(guò)程”，作者是eBay用戶體驗(yàn)和設(shè)計(jì)團(tuán)隊(duì)。他們搜集可用性數(shù)據(jù)、客戶支持紀(jì)錄、網(wǎng)站日志和網(wǎng)絡(luò)慣例，提出表單重新設(shè)計(jì)的建議。當(dāng)時(shí)這個(gè)項(xiàng)目對(duì)eBay注冊(cè)表單產(chǎn)品線產(chǎn)生了積極的影響，并成為評(píng)估和資助設(shè)計(jì)項(xiàng)目的范本。
通過(guò)逐頁(yè)畫出整個(gè)流程，同時(shí)配合說(shuō)明用戶離開(kāi)和最佳實(shí)踐分析的網(wǎng)站點(diǎn)擊數(shù)據(jù)，下面我們分別分析每種數(shù)據(jù)的意義：
可用性測(cè)試 目的在于可獲得寶貴的定性與定量數(shù)據(jù)。
■錯(cuò)誤或問(wèn)題的數(shù)量或位置；
■錯(cuò)誤或問(wèn)題的嚴(yán)重程度；
■完成率；
■完成整個(gè)表單或部分表單的時(shí)間；
■滿意度評(píng)分；
■任務(wù)主觀評(píng)論。
實(shí)地測(cè)試 從人種學(xué)角度觀察，人們?cè)诓煌h(huán)境中，與表單的互動(dòng)方式情況。
■訪問(wèn)表單要求填寫信息的來(lái)源：文檔、軟件和人等；
■表單填寫環(huán)境：吵鬧的辦公室和小監(jiān)視器等；
■任何說(shuō)明表單完成或錯(cuò)誤率的額外情境。
客戶支持 通過(guò)客服或訪談等，了解用戶使用表單時(shí)發(fā)現(xiàn)的問(wèn)題，有利于分離和解決問(wèn)題。
■報(bào)告最多的問(wèn)題；
■解決報(bào)告問(wèn)題的常見(jiàn)辦法；
■問(wèn)題報(bào)告人的統(tǒng)計(jì)信息；
■問(wèn)題報(bào)告人所使用的操作系統(tǒng)及其瀏覽器設(shè)置。
網(wǎng)站追蹤 表單可用追蹤任意數(shù)量的有用量化指標(biāo)。
■完成率；
■如果表單未完成，人們是在哪個(gè)位置放棄填寫表單的；
■人們?cè)L問(wèn)表單的方式；
■已使用哪些表單元素；
■已輸入哪些數(shù)據(jù)；
■瀏覽器和操作系統(tǒng)信息。
眼動(dòng)跟蹤 記錄用戶如何理解表單的表現(xiàn)形式，可用于解釋復(fù)雜的地方。
■人們?cè)诒韱紊峡吹搅耸裁矗?br />
■眼球固定次數(shù)：解析表單所花的努力；
■眼球固定時(shí)間長(zhǎng)度：看每個(gè)元素所花費(fèi)的時(shí)間。
Web慣例 調(diào)查表單設(shè)計(jì)問(wèn)題的共同解決方案可提供寶貴見(jiàn)解。
■設(shè)計(jì)問(wèn)題的獨(dú)特解決方案；
■網(wǎng)上通用的模式。
觀察用戶如何完成表單，或者利用現(xiàn)成的網(wǎng)站分析軟件監(jiān)測(cè)網(wǎng)站日志，也可以得到大量有用的觀測(cè)信息。
雖然很難設(shè)計(jì)出優(yōu)秀的表單，很多時(shí)候都是“視情況而定”，但是通過(guò)考慮表單的設(shè)計(jì)因素，也就是以下我們所說(shuō)的，找到適當(dāng)解決辦法的原則和模式，可以設(shè)計(jì)出不錯(cuò)的表單。閑話少敘，針對(duì)互聯(lián)網(wǎng)表單設(shè)計(jì)，原則如下：
■盡量減少痛苦－用戶不在意之前是什么，更在意之后能得到什么，讓過(guò)程盡量簡(jiǎn)潔快速。
■說(shuō)明填寫完成路徑－表單應(yīng)該有清晰的提示或幫助用戶，告訴他們?nèi)绾文芸焖偻瓿赡繕?biāo)。
■考慮情境－表單并非獨(dú)立存在，它們都是更廣泛情境（受眾群體、應(yīng)用、業(yè)務(wù)）的組成部分，這些情境決定如何使用表單。
■確保一致溝通－表單是用戶與公司溝通的中間人，多個(gè)團(tuán)隊(duì)參與對(duì)話，但最后表單只能傳達(dá)一種一致的聲音。
賈里德·斯普爾曾經(jīng)有一個(gè)經(jīng)典案例：修改按鈕為網(wǎng)站年收入增加3億美元。粗聽(tīng)起來(lái)好像是天方夜譚的事情，但是它確實(shí)是事實(shí)。良好的設(shè)計(jì)如何能為商業(yè)創(chuàng)造價(jià)值，這是設(shè)計(jì)團(tuán)隊(duì)一直在思考的問(wèn)題。有一點(diǎn)是可以肯定的，我們用客觀的數(shù)據(jù)與嚴(yán)謹(jǐn)?shù)膶?shí)驗(yàn)，去證明我們?cè)O(shè)計(jì)原則與設(shè)計(jì)模式，讓它們的設(shè)計(jì)價(jià)值最大化，達(dá)到為商業(yè)創(chuàng)造價(jià)值的目標(biāo)。
你會(huì)構(gòu)建表單組織嗎？
面對(duì)優(yōu)秀表單設(shè)計(jì)，人們能夠不費(fèi)吹灰之力就能填完表單，這里有視覺(jué)與交互設(shè)計(jì)考慮因素對(duì)表單的影響，但更重要的因素是表單的內(nèi)容及組織方式。以下是經(jīng)過(guò)多年的設(shè)計(jì)實(shí)踐我們能得到的一些原則：
■應(yīng)當(dāng)花時(shí)間評(píng)估表單中的問(wèn)題。應(yīng)當(dāng)提高警覺(jué)，去除一切不必要的問(wèn)題。
■表單所提問(wèn)題（標(biāo)簽）應(yīng)當(dāng)盡量簡(jiǎn)潔。
■如果人們會(huì)誤解簡(jiǎn)潔標(biāo)簽，應(yīng)當(dāng)尋找使用自然語(yǔ)言的機(jī)會(huì)，澄清表單要求人們回答的問(wèn)題。
■表單所提問(wèn)題來(lái)自多個(gè)不同人或部門，應(yīng)當(dāng)確保表單統(tǒng)一口徑。
■可以將表單內(nèi)容組織成邏輯組，有助于瀏覽和完成填寫。
■如果可能，應(yīng)當(dāng)以對(duì)話形式構(gòu)建表單。主題間的自然間斷有助于組織表單。
■如果表單可自然分成若干主題，一個(gè)網(wǎng)頁(yè)可能就足夠組織表單。
■如果表單包含大量問(wèn)題，同時(shí)有若干主題，可能需要多個(gè)網(wǎng)頁(yè)來(lái)組織表單。
■如果表單包含大量問(wèn)題，而只和一個(gè)主題相關(guān)，一般需要一個(gè)較長(zhǎng)網(wǎng)頁(yè)來(lái)組織表單。
■可以考慮在表單填完之后提出可選問(wèn)題。可能會(huì)比在初始表單中就提出這些問(wèn)題能獲得更多答案。
■可以考慮采用Web慣例調(diào)查發(fā)現(xiàn)特定類型網(wǎng)站如何組織表單。
■應(yīng)當(dāng)采用最少的必要視覺(jué)信息來(lái)區(qū)分內(nèi)容組。
■英文網(wǎng)站首字母應(yīng)當(dāng)大寫，使內(nèi)容組更容易瀏覽。
Effortmark公司可用性顧問(wèn)，卡羅琳·賈勒特說(shuō)：“先考慮人，在考慮像素。”開(kāi)始設(shè)計(jì)前要思考一個(gè)問(wèn)題：用戶真正關(guān)心什么？設(shè)計(jì)師在關(guān)注像素的同時(shí)可能忽視了人因因素-比如標(biāo)簽?zāi)┒耸欠裥枰胖妹疤?hào)等微妙細(xì)節(jié)。用戶真的不關(guān)心冒號(hào)。其實(shí)用戶真正關(guān)心的是問(wèn)題的內(nèi)容和為何要問(wèn)這些問(wèn)題。從了解用戶開(kāi)始，并了解你的公司搞清楚為什么表單要這么設(shè)計(jì)？是用戶關(guān)心的關(guān)系點(diǎn)問(wèn)題么？“保留，刪減，延遲，解釋”形成更好問(wèn)題的四大策略，同時(shí)，多種視角的平衡用戶需求與商業(yè)需求。
你還應(yīng)該注意哪些表單設(shè)計(jì)細(xì)節(jié)？
設(shè)計(jì)表單時(shí)要注意細(xì)節(jié)問(wèn)題的處理，比如：表單的命名、起始頁(yè)、清晰的瀏覽線、注意力分散最少、進(jìn)程指示、Tab鍵跳轉(zhuǎn)等。其實(shí)還有一點(diǎn)就是讓用戶知道完成表單的路徑。
■確保表單名稱符合人們的期望，并簡(jiǎn)潔解釋每個(gè)表單的用途。
■如果表單需要時(shí)間或者查詢信息才能填寫，可以采用起始頁(yè)來(lái)設(shè)定人們的期望。
■由始至終采用清晰瀏覽線和有效視覺(jué)步伐來(lái)引導(dǎo)人們，確保說(shuō)明清晰的填寫完成路徑。
■對(duì)于關(guān)鍵任務(wù)表單，比如結(jié)算表單或者注冊(cè)表單，應(yīng)當(dāng)去除會(huì)分散注意力的部分、任何導(dǎo)致人們放棄填寫的鏈接或內(nèi)容。
■如果表單分為多個(gè)已知的有序網(wǎng)頁(yè)，可以采用進(jìn)程指示來(lái)傳達(dá)范圍、狀態(tài)和位置等信息。
■如果表單沒(méi)有清晰的有序網(wǎng)頁(yè)，不要采用進(jìn)程指示，應(yīng)當(dāng)采用更籠統(tǒng)的進(jìn)程指示，而不要設(shè)置錯(cuò)誤期望。
■設(shè)計(jì)表單布局時(shí)，應(yīng)考慮使用Tab鍵的“跳轉(zhuǎn)”體驗(yàn)。
■采用“tabindex”HTML屬性來(lái)控制表單的跳轉(zhuǎn)順序。
Oracle可達(dá)性主管，彼得·沃勒克說(shuō)：“對(duì)許多殘障用戶而言，表單的設(shè)計(jì)可達(dá)性尤其重要。可達(dá)性的核心是可用性。例如，如果網(wǎng)頁(yè)不能使用或者無(wú)法開(kāi)始，可達(dá)性首先需要“超級(jí)設(shè)計(jì)”（Uber-design)。包括：超級(jí)減少痛苦、超級(jí)明示完成路徑、超級(jí)考慮情鏡、超級(jí)確保一致溝通。同時(shí)可以遵循W3C制定的互聯(lián)網(wǎng)內(nèi)容可達(dá)性指南（WCAG)和美國(guó)采購(gòu)法508章的最佳可達(dá)性指南。
[版權(quán)聲明]:版權(quán)歸作者Alite所有，轉(zhuǎn)載時(shí)請(qǐng)以超鏈接形式標(biāo)明文章原始出處和作者信息及本聲明:http://www.alitedesign.com
文章轉(zhuǎn)載請(qǐng)保留網(wǎng)址：http://cctvsc.cn/news/solutions/701.html
