這篇文章不是三本書的筆記匯總，不會(huì)把所有要點(diǎn)都列在這里，否則出版社要和我急了。下面就幾個(gè)重點(diǎn)方面做一些小結(jié)，一來敦促自己審視對(duì)內(nèi)容的理解，二來提供給讀者以思考與討論。
在青島網(wǎng)站設(shè)計(jì)中，F(xiàn)orm和設(shè)計(jì)任何交互產(chǎn)品一樣，需要數(shù)據(jù)的支持，Luke列出了典型的用戶數(shù)據(jù)來源渠道：產(chǎn)品可用性測(cè)試；現(xiàn)場(chǎng)調(diào)查；客服資源；網(wǎng)站跟蹤數(shù)據(jù)；EyeTracking；Web慣例，如果你熟悉UCD，對(duì)此應(yīng)該是耳熟能詳了。
對(duì)于不同類型的測(cè)試用戶的可信度、測(cè)試時(shí)的提問等細(xì)節(jié)，Caroline給出了更詳細(xì)的闡述，內(nèi)容較多，而我對(duì)其中的一部分內(nèi)容有所質(zhì)疑，這里不列舉出來，如果你有興趣，可以參考原書。
Form問題的選擇、安排和用語
問題的選擇：Luke提出的一個(gè)四字原則是Keep（保），Cut（砍），Postpone（延），Explain（釋）。簡(jiǎn)單的說，保留核心問題，砍掉現(xiàn)時(shí)非核心問題，延遲問題到合適情境，解釋隱私敏感問題。
以注冊(cè)Form為例，多數(shù)網(wǎng)站，特別是Web應(yīng)用會(huì)保留到最簡(jiǎn)：用戶名、密碼、郵件，是為用戶提供服務(wù)的核心數(shù)據(jù)來源，有些應(yīng)用會(huì)選擇繼續(xù)詢問姓名、出生日期等作為可選，但更多的應(yīng)用會(huì)選擇延遲到用戶自己想要設(shè)置個(gè)人信息時(shí)給出選擇。如果你要說哪個(gè)更合適？這恐怕就取決于設(shè)計(jì)師對(duì)產(chǎn)品功能、性質(zhì)的判斷，對(duì)公司在公眾心中信任程度的信心，當(dāng)然也是和其它各部門交流后，得以決定問題的“合適情境”了。社交類網(wǎng)站從其功能性質(zhì)來說在注冊(cè)時(shí)詢問姓名、出生日期或許可以接受，但例如簡(jiǎn)單的todolist、在線筆記這種個(gè)人應(yīng)用，可能就沒有必要在注冊(cè)時(shí)詢問姓名、出生日期之類信息了。
問題的安排：Form的交互過程如前面對(duì)其性質(zhì)的討論，如同一場(chǎng)對(duì)話，需要好的邏輯性，否則，有句成語大概可以形容：語無倫次，所以問題在安排上需要有邏輯性。對(duì)于篇幅長(zhǎng)的Form，適當(dāng)?shù)姆纸M、分頁有助于邏輯連貫性的表達(dá)，就好像對(duì)話從一個(gè)話題轉(zhuǎn)移到相關(guān)聯(lián)的下一個(gè)話題。雖然做交互設(shè)計(jì)說明你很可能是一個(gè)邏輯思維很強(qiáng)的人，但利用用戶測(cè)試、以及與小組其它成員、同行的交流以理解各個(gè)問題之間的聯(lián)系來輔助自己的設(shè)計(jì)或許是更好的保證。
問題的用語（wording）：特別是如果設(shè)計(jì)網(wǎng)上問卷調(diào)查之類，問題的提問方式與用語很可能極大的影響數(shù)據(jù)收集的可信度。設(shè)計(jì)者與有心理學(xué)、社會(huì)學(xué)背景的小組成員交流合作會(huì)是一個(gè)好的選擇。
Caroline對(duì)問題的答案類型有一個(gè)分類，我認(rèn)為值得借鑒：
Slot-in：指的是例如姓名、性別、出生地等大腦里固有的信息；
Gathered：用戶需要自己搜集的信息，例如錢包里某張名片上的名字、電郵，電腦上某篇文章的段落等；
Third-party：第三方信息來源，是用戶需要從其他人那里得到的信息，例如給對(duì)方匯錢時(shí)先詢問對(duì)方的帳號(hào)；
Created：用戶在看到問題時(shí)才“創(chuàng)造”出的答案。
這里沒有嚴(yán)格的區(qū)分，問題是因人、因情況而異。例如密碼、昵稱，很可能用戶有自己固有的選擇，但如果因?yàn)榘踩?、重?fù)等原因被要求提供不一樣的選擇，那么用戶可能就只好走“創(chuàng)作型”道路了。（我再險(xiǎn)惡一些，如果用戶不幸遭遇嚴(yán)重腦損傷，忘了自己姓甚名誰...）
問題是，這樣的區(qū)分意義何在？我的答案是，幫助我們?cè)跇?gòu)建Form時(shí)更有邏輯性、有根據(jù)的思考：
問題類型
對(duì)應(yīng)策略
Slot-in
將問題以最簡(jiǎn)短形式呈現(xiàn)，例如常見的用戶名、密碼等，因?yàn)檫@些屬于“常駐”大腦信息，過多的解釋等反而顯得冗余；
Gathered
一些關(guān)于信息來源的提示或許能幫助用戶，例如信用卡，因?yàn)檫@些一般也屬于生活中比較經(jīng)常接觸的信息，通常也無需繁瑣的解釋或者定義；
Third-party
可能需要以正式的問題形式來解釋需要的信息，同樣，一些信息來源的幫助或許能幫助用戶，另外也需要考慮將相關(guān)信息發(fā)送到第三方；
Created
可能需要以正式的問題形式呈現(xiàn)，考慮提供幫助信息以協(xié)助用戶構(gòu)造答案。
綜合起來：
不要把自己想出的問題當(dāng)作理所當(dāng)然，一股腦的全放到Form上拋給用戶；
無論是問題本身還是相互間的關(guān)系都需要有邏輯性；
什么樣的問題如何去問？需要為用戶提供怎樣的支持？我們需要認(rèn)真思考，也需要用戶的反饋。
FormLayout對(duì)用戶掃描的影響
Luke的書里有很多EyeTracking實(shí)驗(yàn)的結(jié)果。關(guān)于Label的上對(duì)齊、左對(duì)齊、右對(duì)齊，提交按鈕的位置等都有相應(yīng)的“最佳實(shí)踐”（BestPractices），我不在這里一一列出，否則出版社又該和我急了。這里把Luke和Caroline的結(jié)論結(jié)合在一起，做一個(gè)簡(jiǎn)單的小結(jié)，“劇透”無罪！
稍微偏題一點(diǎn)，對(duì)于EyeTracking能在多大程度上幫助我們理解用戶，這個(gè)很難說，至少我還不敢下任何結(jié)論。一位HCI教授曾經(jīng)跟我說的是：whattheylookat,maynotbewhattheythinkof。這是一位常年用EyeTracking分析玩家玩視頻游戲的教授（對(duì)，沒錯(cuò)，研究玩游戲的教授...好吧，我在誤導(dǎo)你，實(shí)際是通過游戲研究人對(duì)事物的“沉浸”現(xiàn)象），所以，在能有機(jī)會(huì)證實(shí)EyeTracking的作用前，我的觀點(diǎn)依然還是UsabilityTesting,，fieldobservation等來衡量用戶的使用，EyeTracking作為輔助。
好了，拋開EyeTracking，小結(jié)一下FormLayout的作用（下一篇文章或許能更好的闡釋這一部分的內(nèi)容）
上對(duì)齊：掃描軌跡標(biāo)準(zhǔn)的垂直向下，所以理論上最快，但垂直占用空間大，不適合問題較多的Form，但對(duì)問題長(zhǎng)度變化的適應(yīng)性好。
?。▓D片來源：www.yuhou.cn）
右對(duì)齊：掃描軌跡也是基本垂直向下，所以理論上也很快，垂直占用空間小，對(duì)問題長(zhǎng)度變化的適應(yīng)性較差。但如果出現(xiàn)用戶需要瀏覽所有問題時(shí)，速度下降。
?。▓D片來源：www.yuhou.cn）
左對(duì)齊：掃描軌跡水平上更多更長(zhǎng)，所以較慢，垂直占用空間小，對(duì)問題長(zhǎng)度變化的適應(yīng)性較差。但如果出現(xiàn)用戶瀏覽所有問題，速度不會(huì)受到影響。
?。▓D片來源：www.yuhou.cn）
何時(shí)用何種對(duì)齊方式？
上對(duì)齊：?jiǎn)栴}較少，問題長(zhǎng)度可能發(fā)生較大變化（如多語言），希望用戶迅速完成。如果你的問題全部屬于slot-in類型，且數(shù)量少，我認(rèn)為這種方式基本是首選；
右對(duì)齊：類似上對(duì)齊，但適合問題較多的Form；
左對(duì)齊：出現(xiàn)大量用戶不熟悉的問題，希望用戶花時(shí)間思考這些問題；
其它：也有將問題內(nèi)置于輸入框內(nèi)，以節(jié)省水平空間需要，但隨著輸入框成為焦點(diǎn)，問題會(huì)消失。用戶可能出現(xiàn)走神或有認(rèn)知能力上的障礙而遺忘問題的情況，此時(shí)問題的消失對(duì)用戶來說就是災(zāi)難。我的建議還是盡量避免這種設(shè)計(jì)（好吧，CSSKarma給了一個(gè)非常奇怪的解決方法，有興趣的話，你可以看看這個(gè)Demo）。
幫助、錯(cuò)誤提示和肯定信息
我想有了Caroline對(duì)問題類型的分類，應(yīng)該有很好的依據(jù)決定什么問題需要怎樣的幫助信息了，需要強(qiáng)調(diào)的是，幫助信息不僅要告訴用戶如何填寫，對(duì)于隱私數(shù)據(jù)也需要告知為何填寫，和相關(guān)的保護(hù)承諾（法律上的）。
大段幫助信息集中在一起不是個(gè)好主意，因?yàn)槲覀兒苋菀灼骋谎酆笱杆偬降谝粋€(gè)輸入框去，在網(wǎng)上，“耐心”是個(gè)稀罕物，無論是動(dòng)態(tài)還是靜態(tài)，針對(duì)情境的幫助都比懶惰的將大段幫助丟在一堆好得多。
星號(hào)（*）基本是默認(rèn)的“必填”代號(hào)，但放在什么位置卻有很多方式，Caroline的書中提到EyeTrack顯示用戶很少會(huì)注意到輸入域右端，而集中在輸入域左端，所以，如果你需要標(biāo)注（*），label和Input之間或許是最好的選擇，其次是Label的左端，最后是輸入域的右端：
（酷6注冊(cè)Form設(shè)計(jì)，注意星號(hào)的位置）
對(duì)于星號(hào)，我的疑問是ScreenReader無法告知用戶它的含義是”必填“，SitePoint的書中提供一種解決方案是：
<labelfor="username">Username
<abbrtitle="RequiredField">*</abbr>
</label>
<inputid="uname"type="text"name="uname"value=""/>
如何呈現(xiàn)相關(guān)信息？我的想法是盡量避免內(nèi)置于輸入框的幫助，讓相應(yīng)問題與幫助信息在視覺上有明確清晰而簡(jiǎn)單的聯(lián)系就好，做設(shè)計(jì)要提醒自己多做減法。
之所以說錯(cuò)誤提示信息，是因?yàn)橛行┚W(wǎng)站只告訴你出錯(cuò)，不給你提示，當(dāng)然如果丟給你一句“系統(tǒng)錯(cuò)誤”就找不到北了，下面是淘寶的注冊(cè)Form，絕大多數(shù)時(shí)候錯(cuò)誤提示信息都與錯(cuò)誤相關(guān)，但還是出現(xiàn)了下面這個(gè)情況：
(淘寶注冊(cè)Form設(shè)計(jì))
有一種情況我很反感的是在你輸入過程中檢測(cè)錯(cuò)誤，從你開始輸入時(shí)就看到一個(gè)紅紅的叉放在那里，告訴你：“你錯(cuò)了！”，然后不停的說下去，直到你對(duì)了。就好像一個(gè)人不停的罵你：笨蛋，笨蛋，笨蛋...直到最后，它說：天哪，你這笨蛋終于碰對(duì)了。而實(shí)際上你非常清楚自己輸入的沒錯(cuò)。
任何交互模式都要看具體的應(yīng)用場(chǎng)景，同樣的情況，例如下面這個(gè)短信輸入框的提示就是非常好的應(yīng)用（建議BlogBus采用，不要等到我寫完了提交時(shí)再告知文章“超長(zhǎng)”）：
?。▓D片來源：www.yuhou.cn）
作為程序員，無論是后端的PHP，Python，RoR，Java，還是前端的HTML，CSS，JavaScript，都習(xí)慣“insideout”視角：我能做到這么酷的功能，用戶一邊輸入，我一邊檢查，不拿給用戶顯擺一下簡(jiǎn)直浪費(fèi)；可作為設(shè)計(jì)者，需要“outsidein”，再酷的東西，用在不合時(shí)宜的地方，那我也只能打110告你“擾民”了。交互的模式網(wǎng)上的收集、總結(jié)有很多，但只有真正理解用戶、功能和場(chǎng)景，才能把最合適的模式用在最恰當(dāng)?shù)牡胤健?br />
除了錯(cuò)誤提示，還有肯定信息，或者叫成功信息。作為程序員可能很少考慮“肯定”：你本來就該正確，我干嘛要肯定你？很多網(wǎng)站在注冊(cè)時(shí)都會(huì)在輸入域失去焦點(diǎn)后檢查你的輸入，如果符合網(wǎng)站對(duì)答案的要求，會(huì)在輸入域右側(cè)或下方顯示一個(gè)正確的符號(hào)。這實(shí)在是很貼心的功能，對(duì)用戶每一個(gè)問題所作出的努力都是一種肯定的鼓勵(lì)。我的思考是，即使是出錯(cuò)提示信息，是否也能適當(dāng)?shù)膶?duì)用戶的努力進(jìn)行鼓勵(lì)，而不是單方面感受到的沮喪呢？舉個(gè)例子，唯一用戶名，如果用戶不幸選擇了重復(fù)的用戶名，錯(cuò)誤提示是否能夠在提示時(shí)肯定用戶的選擇：雖然該用戶名被注冊(cè)，但確實(shí)很“獨(dú)特”，很“酷”，而我們建議一些同樣很“獨(dú)特”，很“酷”的用戶名（當(dāng)然，這需要你確實(shí)能生成比較“獨(dú)特”的用戶名）。
提交按鈕
提交按鈕的放置，Luke給了唯一而明確的建議，和輸入框（左端）對(duì)齊（可參見上面的三幅EyeTracking例圖）。
至于次級(jí)按鈕，例如重置，如果確實(shí)需要，如Luke所建議，最好有機(jī)制能夠讓用戶“撤銷（undo）”重置的操作。
分頁Form的流程設(shè)計(jì)和干擾因素：
前面提到分頁的邏輯性是好的交互設(shè)計(jì)的基礎(chǔ)，就好像從一個(gè)話題轉(zhuǎn)向另一個(gè)相關(guān)話題，不會(huì)讓人覺得唐突而產(chǎn)生疑惑。這個(gè)過程中將其它無關(guān)鏈接、視覺元素甚至整個(gè)網(wǎng)站導(dǎo)航從Form所在頁面去除是很多注冊(cè)、支付流程采取的策略，例如Amazon，對(duì)于這樣的網(wǎng)站，這些關(guān)鍵流程的完成程度最大化是網(wǎng)站成敗的關(guān)鍵，而只保留Form相關(guān)元素似乎是得到了Amazon實(shí)踐認(rèn)可的成功策略。
涉及到分頁，那么請(qǐng)從一開始就告訴用戶要經(jīng)歷哪些步驟，多長(zhǎng)時(shí)間，并在每一步告知這一步的內(nèi)容和在總體進(jìn)展中的位置（一個(gè)反面的例子將在下面一篇文章提到），如果你不能肯定主要步驟中會(huì)有分支可選步驟出現(xiàn)，那么就不要一步步的數(shù)出來，告訴用戶他們?cè)谀膫€(gè)階段就足夠了。
個(gè)人化：
個(gè)人化（Personalization）即根據(jù)用戶個(gè)人偏好和使用狀況，自動(dòng)完成Form的部分內(nèi)容填寫（所謂SmartDefault），比如Amazon會(huì)自動(dòng)把你最常用的信用卡作為購物的支付方式，但同時(shí)也保留了讓你選擇其它信用卡的Form；很多網(wǎng)站根據(jù)用戶IP自動(dòng)填寫地理信息等。
個(gè)人化確實(shí)在多數(shù)時(shí)候方便的了用戶，但依然需要考慮保留用戶選擇的權(quán)利。設(shè)置默認(rèn)選項(xiàng)時(shí)請(qǐng)多考慮一秒鐘，特別是select類型的輸入域，作為程序員為了避免用戶漏選，習(xí)慣設(shè)置一個(gè)默認(rèn)選項(xiàng)，可如果你沒有把握填寫Form的用戶絕大多數(shù)會(huì)選擇某一選項(xiàng)，那么最好還是留給用戶自己選擇（下一篇文章會(huì)有具體的討論）。
Accessibility
Accessibility是最被忽略的設(shè)計(jì)因素，不過很可惜，我的導(dǎo)師是這個(gè)領(lǐng)域的專家，不把這方面拉出來溜一圈總覺得不好意思，所以雖然知道很多設(shè)計(jì)者基本無視這一方面的存在，認(rèn)為他們的工作不涉及這一方面，我還是要多說一點(diǎn)。
英國(guó)和美國(guó)有專門法案（DisabilityDiscriminationAct1995UK,Section508US），規(guī)定政府、社會(huì)組織等的網(wǎng)站必須提供Accessibility支持，這是社會(huì)無歧視的重要一方面。如果社會(huì)中的一群人無法像其他人一樣自由無限制的獲取公共信息、使用互聯(lián)網(wǎng)服務(wù)，那么就構(gòu)成歧視。特別是現(xiàn)在很多國(guó)家開始考慮，甚至已經(jīng)將互聯(lián)網(wǎng)、信息的自由獲取作為人權(quán)，那么或許有一天這不僅再是歧視，而是赤裸裸的侵犯人權(quán)的問題了（為了讓你印象深刻，首先要嚇到你不是）。
在讀HCI時(shí)，另一句對(duì)我影響很大的語句是：“為Accessibility設(shè)計(jì)就是為幾十年后的自己設(shè)計(jì)”?；蛟S我們都幸運(yùn)的沒有在任何方面出現(xiàn)生理機(jī)能上或認(rèn)知能力上的缺陷，你也壓根不想與殘疾人這個(gè)社會(huì)群體有聯(lián)系，但我們有一天都會(huì)變老，步入老年后，人的感官功能和認(rèn)知能力都會(huì)大幅下降，無論是聽覺、視覺、觸覺，還是行動(dòng)能力、認(rèn)知能力上都會(huì)出現(xiàn)問題（更多請(qǐng)參考WebAccessibilityforOlderUsers）：
色彩辨析和敏感度：難以辨析深藍(lán)與黑色，相對(duì)藍(lán)色與綠色，老年人對(duì)紅色和黃色更容易辨識(shí)；
瞳孔縮?。菏估夏耆诵枰蟮牧炼?，對(duì)亮度改變的適應(yīng)能力也隨之下降。60歲老人年的視網(wǎng)膜對(duì)光的接收只有20歲年輕人的40%，而到了80歲則迅速下降到15%；
對(duì)比敏感度：從40歲開始，在較高空間頻率上的對(duì)比敏感度開始下降，直到80歲時(shí)，只有原來的15%。
如果我們希望幾十年后的自己還能有質(zhì)量的享有各方面的信息和服務(wù)，那么我們最好能從現(xiàn)在開始讓更多的產(chǎn)品，更多的設(shè)計(jì)師意識(shí)到Accessibility的重要，并為此做出一些努力。
Form的Accessibility是個(gè)很有爭(zhēng)議的話題，很多建議也是自相矛盾，例如Luke建議在WebForm中為鍵盤用戶使用tabindex屬性，而sitepoint的書中認(rèn)為這沒有必要，合理安排元素在HTML中的位置就能保證Tab的順序。就這一點(diǎn)我的想法與SitePoint類似，良好的HTML結(jié)構(gòu)和語義構(gòu)造是Accessibility的根本（說到語義，HTML5在我看來最大的貢獻(xiàn)就是對(duì)這方面的強(qiáng)化）。accessKey屬性也有類似的境遇，總的來說，除非你的Form足夠復(fù)雜且被用戶反復(fù)使用，否則，我不會(huì)考慮遵循Luke的建議，去為Form添加快捷鍵。
Ajax技術(shù)的大規(guī)模應(yīng)用是讓Accessibility非常頭疼的事情，舉個(gè)簡(jiǎn)單的例子，如果一個(gè)頁面的內(nèi)容動(dòng)態(tài)更新了，我們?nèi)庋劭梢钥吹?，但ScreenReader要如何知道更新發(fā)生了，而重新閱讀頁面的相關(guān)部分？W3C專門提出了標(biāo)準(zhǔn)試圖緩解類似這樣的問題：WAI-ARIA，如果你對(duì)這方面有興趣，可以參考Opera開發(fā)社區(qū)的文章：IntroductiontoWAIARIA，讀起來自然比W3C的標(biāo)準(zhǔn)有樂趣點(diǎn)。
說到這里，舉個(gè)我在學(xué)習(xí)HCI時(shí)反復(fù)聽到的例子，一個(gè)典型的在HTML文檔里加強(qiáng)Accessibility的舉措是為每個(gè)<img>加入alt屬性，這個(gè)屬性的值一般會(huì)簡(jiǎn)單的描述圖片的性質(zhì)或內(nèi)容，很多ScreenReader也會(huì)將其讀出，所以不要把文件名等無意義的內(nèi)容留在里面，對(duì)于依靠ScreenReader得到信息的用戶來說，這些內(nèi)容的存在還不如你將alt的值留空，如果圖片只是裝飾性而并不對(duì)整體內(nèi)容有什么影響，同樣考慮將alt留空，因?yàn)檫@些可能反而會(huì)影響視力有障礙者理解內(nèi)容。另外，<img>有一個(gè)longdesc屬性，指向一個(gè)專門描述圖片的文檔。比如一張大型的圖表，你可以專門用一個(gè)文檔說明這張圖表所要顯示的數(shù)據(jù)、關(guān)系與重要結(jié)論。
當(dāng)然，要保證Accessibility，最重要的依然是用戶測(cè)試。你可能拿著一本關(guān)于Accessibility的書把網(wǎng)站全部改造一遍，給每個(gè)<img>加上一個(gè)詳細(xì)的alt，但這能保證使用ScreenReader的用戶順利的使用你的網(wǎng)站嗎？想想上一段談到的問題。最后只有真正的用戶才能評(píng)價(jià)你的網(wǎng)站是否滿足他們的需求，所以，還是別忘了用戶測(cè)試！
你自己可以做一些類似的測(cè)試，對(duì)，我沒開玩笑，這是我自己嘗試過的方法。如果你使用Ubuntu，那么OrcaScreenReader很有可能已經(jīng)在你的機(jī)器上。打開它，然后打開你要測(cè)試的頁面，閉上眼，或者找你老婆或女友要條絲襪蒙上眼，看看你能否通過ScreenReader順利的理解頁面，找到目標(biāo)鏈接？還是像沒頭蒼蠅般在ScreenReader的指導(dǎo)下亂飛（如果你不知道ScreenReader的某些工作機(jī)制有多奇怪，可以參考SitePoint那本書中關(guān)于legend和fieldset這兩個(gè)元素的討論）？這時(shí)或許你就會(huì)稍許理解生理機(jī)能上有障礙的用戶在生活上有多不便了，我們應(yīng)該在尊重他們堅(jiān)毅和努力的前提下，幫助他們做得更多。
|