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