版權(quán)聲明：轉(zhuǎn)載時請以超鏈接形式標(biāo)明文章原始出處和作者信息及本聲明

Form設(shè)計細(xì)節(jié)
這篇文章不是三本書的筆記匯總，不會把所有要點(diǎn)都列在這里，否則出版社要和我急了。下面就幾個重點(diǎn)方面做一些小結(jié)，一來敦促自己審視對內(nèi)容的理解，二來提供給讀者以思考與討論。

設(shè)計Form和設(shè)計任何交互產(chǎn)品一樣，需要數(shù)據(jù)的支持，Luke列出了典型的用戶數(shù)據(jù)來源渠道：產(chǎn)品可用性測試；現(xiàn)場調(diào)查；客服資源；網(wǎng)站跟蹤數(shù)據(jù)；Eye Tracking；Web慣例，如果你熟悉UCD，對此應(yīng)該是耳熟能詳了。

對于不同類型的測試用戶的可信度、測試時的提問等細(xì)節(jié)，Caroline給出了更詳細(xì)的闡述，內(nèi)容較多，而我對其中的一部分內(nèi)容有所質(zhì)疑，這里不列舉出來，如果你有興趣，可以參考原書。

Form問題的選擇、安排和用語
問題的選擇：Luke提出的一個四字原則是Keep（保），Cut（砍），Postpone（延），Explain（釋）。簡單的說，保留核心問題，砍掉現(xiàn)時非核心問題，延遲問題到合適情境，解釋隱私敏感問題。

以注冊Form為例，多數(shù)網(wǎng)站，特別是Web應(yīng)用會保留到最簡：用戶名、密碼、郵件，是為用戶提供服務(wù)的核心數(shù)據(jù)來源，有些應(yīng)用會選擇繼續(xù)詢問姓名、出生日期等作為可選，但更多的應(yīng)用會選擇延遲到用戶自己想要設(shè)置個人信息時給出選擇。如果你要說哪個更合適？這恐怕就取決于設(shè)計師對產(chǎn)品功能、性質(zhì)的判斷，對公司在公眾心中信任程度的信心，當(dāng)然也是和其它各部門交流后，得以決定問題的“合適情境”了。社交類網(wǎng)站從其功能性質(zhì)來說在注冊時詢問姓名、出生日期或許可以接受，但例如簡單的todo list、在線筆記這種個人應(yīng)用，可能就沒有必要在注冊時詢問姓名、出生日期之類信息了。

問題的安排：Form的交互過程如前面對其性質(zhì)的討論，如同一場對話，需要好的邏輯性，否則，有句成語大概可以形容：語無倫次，所以問題在安排上需要有邏輯性。對于篇幅長的Form，適當(dāng)?shù)姆纸M、分頁有助于邏輯連貫性的表達(dá)，就好像對話從一個話題轉(zhuǎn)移到相關(guān)聯(lián)的下一個話題。雖然做交互設(shè)計說明你很可能是一個邏輯思維很強(qiáng)的人，但利用用戶測試、以及與小組其它成員、同行的交流以理解各個問題之間的聯(lián)系來輔助自己的設(shè)計或許是更好的保證。

問題的用語（wording）：特別是如果設(shè)計網(wǎng)上問卷調(diào)查之類，問題的提問方式與用語很可能極大的影響數(shù)據(jù)收集的可信度。設(shè)計者與有心理學(xué)、社會學(xué)背景的小組成員交流合作會是一個好的選擇。

Caroline對問題的答案類型有一個分類，我認(rèn)為值得借鑒：

Slot-in：指的是例如姓名、性別、出生地等大腦里固有的信息；
Gathered：用戶需要自己搜集的信息，例如錢包里某張名片上的名字、電郵，電腦上某篇文章的段落等；
Third-party：第三方信息來源，是用戶需要從其他人那里得到的信息，例如給對方匯錢時先詢問對方的帳號；
Created：用戶在看到問題時才“創(chuàng)造”出的答案。
這里沒有嚴(yán)格的區(qū)分，問題是因人、因情況而異。例如密碼、昵稱，很可能用戶有自己固有的選擇，但如果因?yàn)榘踩?、重?fù)等原因被要求提供不一樣的選擇，那么用戶可能就只好走“創(chuàng)作型”道路了。（我再險惡一些，如果用戶不幸遭遇嚴(yán)重腦損傷，忘了自己姓甚名誰...）

問題是，這樣的區(qū)分意義何在？我的答案是，幫助我們在構(gòu)建Form時更有邏輯性、有根據(jù)的思考：

綜合起來：

不要把自己想出的問題當(dāng)作理所當(dāng)然，一股腦的全放到Form上拋給用戶；
無論是問題本身還是相互間的關(guān)系都需要有邏輯性；
什么樣的問題如何去問？需要為用戶提供怎樣的支持？我們需要認(rèn)真思考，也需要用戶的反饋。
Form Layout對用戶掃描的影響
Luke的書里有很多Eye Tracking實(shí)驗(yàn)的結(jié)果。關(guān)于Label的上對齊、左對齊、右對齊，提交按鈕的位置等都有相應(yīng)的“最佳實(shí)踐”（Best Practices），我不在這里一一列出，否則出版社又該和我急了。這里把Luke和Caroline的結(jié)論結(jié)合在一起，做一個簡單的小結(jié)，“劇透”無罪！

稍微偏題一點(diǎn)，對于Eye Tracking能在多大程度上幫助我們理解用戶，這個很難說，至少我還不敢下任何結(jié)論。一位HCI教授曾經(jīng)跟我說的是：what they look at, may not be what they think of。這是一位常年用Eye Tracking分析玩家玩視頻游戲的教授（對，沒錯，研究玩游戲的教授...好吧，我在誤導(dǎo)你，實(shí)際是通過游戲研究人對事物的“沉浸”現(xiàn)象），所以，在能有機(jī)會證實(shí)Eye Tracking的作用前，我的觀點(diǎn)依然還是Usability Testing,，field observation等來衡量用戶的使用，Eye Tracking作為輔助。

好了，拋開Eye Tracking，小結(jié)一下Form Layout的作用（下一篇文章或許能更好的闡釋這一部分的內(nèi)容）

上對齊：掃描軌跡標(biāo)準(zhǔn)的垂直向下，所以理論上最快，但垂直占用空間大，不適合問題較多的Form，但對問題長度變化的適應(yīng)性好。

右對齊：掃描軌跡也是基本垂直向下，所以理論上也很快，垂直占用空間小，對問題長度變化的適應(yīng)性較差。但如果出現(xiàn)用戶需要瀏覽所有問題時，速度下降。

左對齊：掃描軌跡水平上更多更長，所以較慢，垂直占用空間小，對問題長度變化的適應(yīng)性較差。但如果出現(xiàn)用戶瀏覽所有問題，速度不會受到影響。

何時用何種對齊方式？

上對齊：問題較少，問題長度可能發(fā)生較大變化（如多語言），希望用戶迅速完成。如果你的問題全部屬于slot-in類型，且數(shù)量少，我認(rèn)為這種方式基本是首選；
右對齊：類似上對齊，但適合問題較多的Form；
左對齊：出現(xiàn)大量用戶不熟悉的問題，希望用戶花時間思考這些問題；
其它：也有將問題內(nèi)置于輸入框內(nèi)，以節(jié)省水平空間需要，但隨著輸入框成為焦點(diǎn)，問題會消失。用戶可能出現(xiàn)走神或有認(rèn)知能力上的障礙而遺忘問題的情況，此時問題的消失對用戶來說就是災(zāi)難。我的建議還是盡量避免這種設(shè)計（好吧，CSSKarma給了一個非常奇怪的解決方法，有興趣的話，你可以看看這個Demo）。
幫助、錯誤提示和肯定信息
我想有了Caroline對問題類型的分類，應(yīng)該有很好的依據(jù)決定什么問題需要怎樣的幫助信息了，需要強(qiáng)調(diào)的是，幫助信息不僅要告訴用戶如何填寫，對于隱私數(shù)據(jù)也需要告知為何填寫，和相關(guān)的保護(hù)承諾（法律上的）。

大段幫助信息集中在一起不是個好主意，因?yàn)槲覀兒苋菀灼骋谎酆笱杆偬降谝粋€輸入框去，在網(wǎng)上，“耐心”是個稀罕物，無論是動態(tài)還是靜態(tài)，針對情境的幫助都比懶惰的將大段幫助丟在一堆好得多。

星號（*）基本是默認(rèn)的“必填”代號，但放在什么位置卻有很多方式，Caroline的書中提到Eye Track顯示用戶很少會注意到輸入域右端，而集中在輸入域左端，所以，如果你需要標(biāo)注（*），label和Input之間或許是最好的選擇，其次是 Label的左端，最后是輸入域的右端：

（酷6注冊Form設(shè)計，注意星號的位置）

對于星號，我的疑問是Screen Reader無法告知用戶它的含義是”必填“，SitePoint的書中提供一種解決方案是：

   Username

       *

如何呈現(xiàn)相關(guān)信息？我的想法是盡量避免內(nèi)置于輸入框的幫助，讓相應(yīng)問題與幫助信息在視覺上有明確清晰而簡單的聯(lián)系就好，做設(shè)計要提醒自己多做減法。

之所以說錯誤提示信息，是因?yàn)橛行┚W(wǎng)站只告訴你出錯，不給你提示，當(dāng)然如果丟給你一句“系統(tǒng)錯誤”就找不到北了，下面是淘寶的注冊Form，絕大多數(shù)時候錯誤提示信息都與錯誤相關(guān)，但還是出現(xiàn)了下面這個情況：

(淘寶注冊Form設(shè)計)

有一種情況我很反感的是在你輸入過程中檢測錯誤，從你開始輸入時就看到一個紅紅的叉放在那里，告訴你：“你錯了！”，然后不停的說下去，直到你對了。就好像一個人不停的罵你：笨蛋，笨蛋，笨蛋...直到最后，它說：天哪，你這笨蛋終于碰對了。而實(shí)際上你非常清楚自己輸入的沒錯。

任何交互模式都要看具體的應(yīng)用場景，同樣的情況，例如下面這個短信輸入框的提示就是非常好的應(yīng)用（建議BlogBus采用，不要等到我寫完了提交時再告知文章“超長”）：

作為程序員，無論是后端的PHP，Python，RoR，Java，還是前端的HTML，CSS，JavaScript，都習(xí)慣“inside out”視角：我能做到這么酷的功能，用戶一邊輸入，我一邊檢查，不拿給用戶顯擺一下簡直浪費(fèi)；可作為設(shè)計者，需要“outside in”，再酷的東西，用在不合時宜的地方，那我也只能打110告你“擾民”了。交互的模式網(wǎng)上的收集、總結(jié)有很多，但只有真正理解用戶、功能和場景，才能把最合適的模式用在最恰當(dāng)?shù)牡胤健?/p>

除了錯誤提示，還有肯定信息，或者叫成功信息。作為程序員可能很少考慮“肯定”：你本來就該正確，我干嘛要肯定你？很多網(wǎng)站在注冊時都會在輸入域失去焦點(diǎn)后檢查你的輸入，如果符合網(wǎng)站對答案的要求，會在輸入域右側(cè)或下方顯示一個正確的符號。這實(shí)在是很貼心的功能，對用戶每一個問題所作出的努力都是一種肯定的鼓勵。我的思考是，即使是出錯提示信息，是否也能適當(dāng)?shù)膶τ脩舻呐M(jìn)行鼓勵，而不是單方面感受到的沮喪呢？舉個例子，唯一用戶名，如果用戶不幸選擇了重復(fù)的用戶名，錯誤提示是否能夠在提示時肯定用戶的選擇：雖然該用戶名被注冊，但確實(shí)很“獨(dú)特”，很“酷”，而我們建議一些同樣很“獨(dú)特”，很 “酷”的用戶名（當(dāng)然，這需要你確實(shí)能生成比較“獨(dú)特”的用戶名）。

提交按鈕
提交按鈕的放置，Luke給了唯一而明確的建議，和輸入框（左端）對齊（可參見上面的三幅Eye Tracking例圖）。

至于次級按鈕，例如重置，如果確實(shí)需要，如Luke所建議，最好有機(jī)制能夠讓用戶“撤銷（undo）”重置的操作。

分頁Form的流程設(shè)計和干擾因素：
前面提到分頁的邏輯性是好的交互設(shè)計的基礎(chǔ)，就好像從一個話題轉(zhuǎn)向另一個相關(guān)話題，不會讓人覺得唐突而產(chǎn)生疑惑。這個過程中將其它無關(guān)鏈接、視覺元素甚至整個網(wǎng)站導(dǎo)航從Form所在頁面去除是很多注冊、支付流程采取的策略，例如Amazon，對于這樣的網(wǎng)站，這些關(guān)鍵流程的完成程度最大化是網(wǎng)站成敗的關(guān)鍵，而只保留Form相關(guān)元素似乎是得到了Amazon實(shí)踐認(rèn)可的成功策略。

涉及到分頁，那么請從一開始就告訴用戶要經(jīng)歷哪些步驟，多長時間，并在每一步告知這一步的內(nèi)容和在總體進(jìn)展中的位置（一個反面的例子將在下面一篇文章提到），如果你不能肯定主要步驟中會有分支可選步驟出現(xiàn)，那么就不要一步步的數(shù)出來，告訴用戶他們在哪個階段就足夠了。

個人化：
個人化（Personalization）即根據(jù)用戶個人偏好和使用狀況，自動完成Form的部分內(nèi)容填寫（所謂Smart Default），比如Amazon會自動把你最常用的信用卡作為購物的支付方式，但同時也保留了讓你選擇其它信用卡的Form；很多網(wǎng)站根據(jù)用戶IP自動填寫地理信息等。

個人化確實(shí)在多數(shù)時候方便的了用戶，但依然需要考慮保留用戶選擇的權(quán)利。設(shè)置默認(rèn)選項時請多考慮一秒鐘，特別是select類型的輸入域，作為程序員為了避免用戶漏選，習(xí)慣設(shè)置一個默認(rèn)選項，可如果你沒有把握填寫Form的用戶絕大多數(shù)會選擇某一選項，那么最好還是留給用戶自己選擇（下一篇文章會有具體的討論）。

Accessibility
Accessibility是最被忽略的設(shè)計因素，不過很可惜，我的導(dǎo)師是這個領(lǐng)域的專家，不把這方面拉出來溜一圈總覺得不好意思，所以雖然知道很多設(shè)計者基本無視這一方面的存在，認(rèn)為他們的工作不涉及這一方面，我還是要多說一點(diǎn)。

英國和美國有專門法案（Disability Discrimination Act 1995 UK, Section 508 US），規(guī)定政府、社會組織等的網(wǎng)站必須提供Accessibility支持，這是社會無歧視的重要一方面。如果社會中的一群人無法像其他人一樣自由無限制的獲取公共信息、使用互聯(lián)網(wǎng)服務(wù)，那么就構(gòu)成歧視。特別是現(xiàn)在很多國家開始考慮，甚至已經(jīng)將互聯(lián)網(wǎng)、信息的自由獲取作為人權(quán)，那么或許有一天這不僅再是歧視，而是赤裸裸的侵犯人權(quán)的問題了（為了讓你印象深刻，首先要嚇到你不是）。

在讀HCI時，另一句對我影響很大的語句是：“為Accessibility設(shè)計就是為幾十年后的自己設(shè)計”?；蛟S我們都幸運(yùn)的沒有在任何方面出現(xiàn)生理機(jī)能上或認(rèn)知能力上的缺陷，你也壓根不想與殘疾人這個社會群體有聯(lián)系，但我們有一天都會變老，步入老年后，人的感官功能和認(rèn)知能力都會大幅下降，無論是聽覺、視覺、觸覺，還是行動能力、認(rèn)知能力上都會出現(xiàn)問題（更多請參考Web Accessibility for Older Users）：

色彩辨析和敏感度：難以辨析深藍(lán)與黑色，相對藍(lán)色與綠色，老年人對紅色和黃色更容易辨識；
瞳孔縮?。菏估夏耆诵枰蟮牧炼?，對亮度改變的適應(yīng)能力也隨之下降。60歲老人年的視網(wǎng)膜對光的接收只有20歲年輕人的40%，而到了80歲則迅速下降到15%；
對比敏感度：從40歲開始，在較高空間頻率上的對比敏感度開始下降，直到80歲時，只有原來的15%。
如果我們希望幾十年后的自己還能有質(zhì)量的享有各方面的信息和服務(wù)，那么我們最好能從現(xiàn)在開始讓更多的產(chǎn)品，更多的設(shè)計師意識到Accessibility的重要，并為此做出一些努力。

Form的Accessibility是個很有爭議的話題，很多建議也是自相矛盾，例如Luke建議在Web Form中為鍵盤用戶使用tabindex屬性，而sitepoint的書中認(rèn)為這沒有必要，合理安排元素在HTML中的位置就能保證Tab的順序。就這一點(diǎn)我的想法與SitePoint類似，良好的HTML結(jié)構(gòu)和語義構(gòu)造是Accessibility的根本（說到語義，HTML5在我看來最大的貢獻(xiàn)就是對這方面的強(qiáng)化）。accessKey屬性也有類似的境遇，總的來說，除非你的Form足夠復(fù)雜且被用戶反復(fù)使用，否則，我不會考慮遵循Luke的建議，去為Form添加快捷鍵。

Ajax技術(shù)的大規(guī)模應(yīng)用是讓Accessibility非常頭疼的事情，舉個簡單的例子，如果一個頁面的內(nèi)容動態(tài)更新了，我們?nèi)庋劭梢钥吹剑玈creen Reader要如何知道更新發(fā)生了，而重新閱讀頁面的相關(guān)部分？W3C專門提出了標(biāo)準(zhǔn)試圖緩解類似這樣的問題：WAI-ARIA，如果你對這方面有興趣，可以參考Opera開發(fā)社區(qū)的文章：Introduction to WAI ARIA，讀起來自然比W3C的標(biāo)準(zhǔn)有樂趣點(diǎn)。

說到這里，舉個我在學(xué)習(xí)HCI時反復(fù)聽到的例子，一個典型的在HTML文檔里加強(qiáng)Accessibility的舉措是為每個 加入alt屬性，這個屬性的值一般會簡單的描述圖片的性質(zhì)或內(nèi)容，很多Screen Reader也會將其讀出，所以不要把文件名等無意義的內(nèi)容留在里面，對于依靠Screen Reader得到信息的用戶來說，這些內(nèi)容的存在還不如你將alt的值留空，如果圖片只是裝飾性而并不對整體內(nèi)容有什么影響，同樣考慮將alt留空，因?yàn)檫@些可能反而會影響視力有障礙者理解內(nèi)容。另外，有一個longdesc屬性，指向一個專門描述圖片的文檔。比如一張大型的圖表，你可以專門用一個文檔說明這張圖表所要顯示的數(shù)據(jù)、關(guān)系與重要結(jié)論。

當(dāng)然，要保證Accessibility，最重要的依然是用戶測試。你可能拿著一本關(guān)于Accessibility的書把網(wǎng)站全部改造一遍，給每個加上一個詳細(xì)的alt，但這能保證使用Screen Reader的用戶順利的使用你的網(wǎng)站嗎？想想上一段談到的問題。最后只有真正的用戶才能評價你的網(wǎng)站是否滿足他們的需求，所以，還是別忘了用戶測試！

你自己可以做一些類似的測試，對，我沒開玩笑，這是我自己嘗試過的方法。如果你使用Ubuntu，那么Orca Screen Reader很有可能已經(jīng)在你的機(jī)器上。打開它，然后打開你要測試的頁面，閉上眼，或者找你老婆或女友要條絲襪蒙上眼，看看你能否通過Screen Reader順利的理解頁面，找到目標(biāo)鏈接？還是像沒頭蒼蠅般在Screen Reader的指導(dǎo)下亂飛（如果你不知道Screen Reader的某些工作機(jī)制有多奇怪，可以參考SitePoint那本書中關(guān)于legend和fieldset這兩個元素的討論）？這時或許你就會稍許理解生理機(jī)能上有障礙的用戶在生活上有多不便了，我們應(yīng)該在尊重他們堅毅和努力的前提下，幫助他們做得更多。

最后，作為文章的結(jié)束，提供一點(diǎn)擴(kuò)展資源供參考：

• Luke自己關(guān)于Form Design的一篇文章：Web Application Form Design

• noupe依然非常耐心翔實(shí)的匯總了各種資源告訴你如何設(shè)計絕色Form：Beautiful Forms - Design, Style & make it work with PHP & Ajax

• Dey Alexander Consulting公司提供的關(guān)于Form Design的匯總：Form Design

• W3C關(guān)于HTML 5中Form元素的標(biāo)準(zhǔn)：4.10 Forms - HTML 5

• 在線電子書Dive into HTML 5（推薦此書）關(guān)于Form的一章：A Form of Madness - Dive into HTML5