每個(gè)人都會(huì)贊同可用性是網(wǎng)站的一個(gè)很重要的方面的說(shuō)法。無(wú)論你是在做一個(gè)作品集網(wǎng)站、網(wǎng)上商店還是網(wǎng)絡(luò)應(yīng)用，讓你的頁(yè)面對(duì)用戶來(lái)說(shuō)可以容易和快樂(lè)的使用是一個(gè)關(guān)鍵。這些年，很多人在網(wǎng)站和界面設(shè)計(jì)的很多方面完成了很多的研究，這些結(jié)論在幫助我們提高我們的工作方面很有價(jià)值。這里是能夠幫助你提高你的網(wǎng)站的用戶體驗(yàn)的10條有用的可用性結(jié)論和指南。
Form標(biāo)簽最好放到字段的上面
UX Matters的一份研究發(fā)現(xiàn)表單中的標(biāo)簽(label)的理想位置是在字段(field)的上面。在很多的表單中，標(biāo)簽被放到字段的左邊，以形成一個(gè)兩欄的布局；盡管這樣看起來(lái)不錯(cuò)，但它不是最容易使用的布局。為什么這樣說(shuō)呢？因?yàn)楸韱瓮ǔＪ谴怪睂?dǎo)向的；也就是用戶從上向下填寫(xiě)表單，用戶是向下瀏覽表單的。這樣在標(biāo)簽下面放置字段比在標(biāo)簽右邊放置字段要更容易(瀏覽)一些。
Tumblr 遵循UX Matter的建議，提供了一個(gè)簡(jiǎn)單而簡(jiǎn)潔的注冊(cè)表單。
在左側(cè)放置標(biāo)簽還會(huì)引發(fā)另一個(gè)問(wèn)題：你讓標(biāo)簽居左還是居右？居左可讓表單可掃描但是會(huì)將標(biāo)簽和字段分離，從而使得區(qū)分哪個(gè)標(biāo)簽歸哪個(gè)字段就比較困難。居右則相反：它可以實(shí)現(xiàn)好的界面但是可掃描性弱些。在各種情況下，標(biāo)簽在上面是最好的。該研究同時(shí)發(fā)現(xiàn)標(biāo)簽最好不要加粗，盡管此條建議并不能令人完全信服……
[Page: ]
用戶關(guān)注面部
當(dāng)別人進(jìn)入到視野的時(shí)候，人們本能的會(huì)立馬注意到他們。在網(wǎng)站頁(yè)面，我們趨向于關(guān)注人的面部和眼睛， 這為市場(chǎng)人員提供了一個(gè)引起關(guān)注的很好的技術(shù)。但是我們被人們的面部和眼睛吸引只是個(gè)開(kāi)始；事實(shí)證明，我們確實(shí)會(huì)將目光轉(zhuǎn)向圖片中的人正在看的方向。
一個(gè)正在看我們的小孩兒的圖片的眼動(dòng)跟蹤熱圖，來(lái)自于UsableWorld的研究。
那么現(xiàn)在這個(gè)小孩正在看內(nèi)容。注意人們?cè)诳聪驑?biāo)題和文字的方向增長(zhǎng)。
這里是一份描述這個(gè)的眼動(dòng)跟蹤研究。我們本能的被吸引到臉部，但是如果那張臉在看其他地方而不是我們，我們同樣會(huì)看那個(gè)方向。利用這種現(xiàn)象來(lái)吸引你的用戶的注意力到你的頁(yè)面或廣告中最重要的部分吧。
[Page: ]
設(shè)計(jì)的質(zhì)量是可信度的一個(gè)指標(biāo)
各種研究已轉(zhuǎn)向到是什么影響人們對(duì)網(wǎng)站的可信度的看法方向：
- Stanford-Makovsy網(wǎng)站可信度研究2002: 調(diào)查當(dāng)前什么讓一個(gè)網(wǎng)站可信(pdf)
- 什么讓一個(gè)網(wǎng)站可信？大量定量研究的報(bào)告(pdf)
- 計(jì)算機(jī)可信度元素(pdf)
- 影響網(wǎng)站可信度的元素：一份源自自我評(píng)定研究的早期結(jié)果(Proceedings of ACM CHI 2000 Conference on Human Factors in Computing Systems, v.2, New York: ACM Press)
我們不知道Fever app 是不是真的比較好，但是時(shí)尚的用戶界面和網(wǎng)站給我們很好的第一印象。
這些研究的一個(gè)有趣的結(jié)論是用戶真的通過(guò)封面來(lái)判斷一本書(shū)… 更確切的說(shuō)，一個(gè)網(wǎng)站依賴其設(shè)計(jì)。比如布局、一致性、排版、色彩和樣式之類的元素都會(huì)影響到用戶對(duì)你的網(wǎng)站的理解以及你的項(xiàng)目的形象。你的網(wǎng)站不應(yīng)該僅僅有一個(gè)良好的形象，還應(yīng)該就是你的用戶所需要的。
其它影響可信度的因素有：網(wǎng)站的內(nèi)容的質(zhì)量、錯(cuò)誤數(shù)、更新頻率、易用以及可信賴的作者。
[Page: ]
大多數(shù)用戶不滾動(dòng)
Jakob Nielsen關(guān)于多少用戶滾動(dòng)的研究(在 Prioritizing Web Usability)顯示只有23%的訪問(wèn)者在第一次訪問(wèn)一個(gè)網(wǎng)站的時(shí)候滾動(dòng)。這意味著77% 的用戶并不滾動(dòng)；他們只是看折疊線以上(也就是不用向下滾動(dòng)而在屏幕上可見(jiàn)的頁(yè)面區(qū)域)的內(nèi)容。而且，回訪時(shí)滾動(dòng)的用戶的百分比也有所降低，只有16%的用戶在他們第二次訪問(wèn)時(shí)滾動(dòng)。這些數(shù)據(jù)強(qiáng)調(diào)在顯著的位置放置關(guān)鍵的內(nèi)容是多么的重要。特別是在登錄頁(yè)面。
這不是說(shuō)你應(yīng)該把所有東西塞到頁(yè)面的上部區(qū)域里面，只是說(shuō)，你應(yīng)該最好的利用那一塊地方。把內(nèi)容填塞進(jìn)去只會(huì)讓內(nèi)容難懂；當(dāng)用戶看到太多的信息，他們會(huì)不知道該從哪里開(kāi)始看。
Basecamp很好的利用了空間。折疊線以上(768 像素高)，它顯示一個(gè)巨大的截圖、標(biāo)語(yǔ)、有價(jià)值的主張、行為召喚、客戶列表、視頻和使用圖片展示的簡(jiǎn)短特性列表。
這對(duì)主頁(yè)是最重要的，大部分新訪問(wèn)者都會(huì)瀏覽首頁(yè)。所以請(qǐng)?jiān)谀抢锾峁┻@些核心要素：
- 網(wǎng)站名稱；
- 網(wǎng)站的有價(jià)值的主張(比如說(shuō)，用戶將從使用中得到什么好處)；
- 與用戶相關(guān)的主要部分導(dǎo)航。
但是，現(xiàn)在用戶的習(xí)慣已經(jīng)發(fā)生明顯的改變了。最近研究證明用戶對(duì)滾動(dòng)相當(dāng)接受，而且在某種情況下他們會(huì)期望滾動(dòng)到頁(yè)面的底部。很多用戶喜歡滾動(dòng)勝過(guò)分頁(yè)，而且對(duì)很多用戶來(lái)說(shuō)頁(yè)面的最重要的信息并不是必須放在“折疊線上面”(這是因?yàn)楦鞣N大量的可見(jiàn)的顯示方案是無(wú)用的，拒用)。所以將你的布局分割成段以方便瀏覽是個(gè)很不錯(cuò)的主意，使用一些空白分開(kāi)它們吧。
[Page: ]
藍(lán)色是鏈接的最佳顏色
盡管給你的網(wǎng)站一個(gè)獨(dú)特的設(shè)計(jì)是很棒的，但是當(dāng)遇到可用性的時(shí)候，做其他人正在做的是最好的。遵從慣例，因?yàn)楫?dāng)一個(gè)人訪問(wèn)一個(gè)新的網(wǎng)站的時(shí)候，他們尋找東西的第一個(gè)位置就是他們?cè)谄渌蠖鄶?shù)網(wǎng)站找到它們的地方；他們利用他們的經(jīng)驗(yàn)來(lái)理解新內(nèi)容的意思。這被稱為使用習(xí)慣。人們期望某些東西保持一致，比如鏈接顏色、網(wǎng)站的logo的位置、tab導(dǎo)航的行為等。
Google在其網(wǎng)站上保持所有的鏈接都是藍(lán)色只有一個(gè)原因：大多數(shù)用戶對(duì)這個(gè)顏色熟悉，這使得很容易定位。
你的鏈接應(yīng)該是什么顏色？第一要義就是差異(對(duì)比)：鏈接要足夠暗(或者亮)以和背景色相對(duì)照。其次，它要能從其他文本中凸顯出來(lái)；所以，不要在黑色字體上使用黑色鏈接。最后，研究表明(Van Schaik 和Ling)如果可用性是你的重點(diǎn)，保持藍(lán)色鏈接是最好的。瀏覽器的默認(rèn)鏈接顏色是藍(lán)色，所以用戶比較期望它。選擇一個(gè)其它顏色絕對(duì)不是問(wèn)題，但是它將會(huì)影響到用戶找到它的速度。
[Page: ]
理想的搜索框是27個(gè)字符寬
搜索框的理想寬度是多少？有這回事兒?jiǎn)幔縅akob Nielsen做了一次關(guān)于在網(wǎng)站的搜索框中搜索問(wèn)題的長(zhǎng)度的調(diào)查(Prioritizing Web Usability)。結(jié)果是現(xiàn)在的大部分搜索框太短了。搜索框太短的問(wèn)題是即便你可以輸入較長(zhǎng)的問(wèn)題，你也只能一次看到文本的一部分，從而使得難于檢查或編輯你輸入的內(nèi)容。
該研究發(fā)現(xiàn)搜索框的平均寬度是18個(gè)字符。數(shù)據(jù)顯示27%的查詢太長(zhǎng)以至于不能輸入。擴(kuò)展搜索框到27個(gè)字符能夠滿足90%的查詢。請(qǐng)注意，你可以使用em設(shè)置寬度，而不是像素或者pt。1em正好是一個(gè)“m”字符的寬度和高度(而無(wú)論你的網(wǎng)站使用多大的字號(hào))。那么，就用這個(gè)單位來(lái)控制搜索的文本框?yàn)?7個(gè)字符寬吧。
Google的搜索框足夠?qū)拋?lái)容納長(zhǎng)句子。
Apple的搜索框有些短，會(huì)切斷查詢內(nèi)容：“Microsoft Office 2008.”
總體來(lái)說(shuō)，搜索框太寬比太短要好，這樣用戶就可以快速檢查、核實(shí)并提交查詢。這條準(zhǔn)則相當(dāng)簡(jiǎn)單，但是不幸的是常常被無(wú)視。在輸入?yún)^(qū)域里使用一些內(nèi)邊距(padding)同樣可以提高設(shè)計(jì)和用戶體驗(yàn)。
[Page: ]
空白可以增進(jìn)理解
很多設(shè)計(jì)師都知道空白的價(jià)值，也就是頁(yè)面中段落、圖片、按鈕和其它元素之間的空白?？瞻淄ㄟ^(guò)給各元素足夠的空間來(lái)“呼吸”以避免頁(yè)面過(guò)于擁擠凌亂。我們也可以通過(guò)減少條目之間的空間和增加它們與頁(yè)面中的其它條目之間的空間來(lái)進(jìn)行分組。在頁(yè)面中顯示條目之間的關(guān)系(比如，在這個(gè)條目集那里顯示這個(gè)按鈕)和構(gòu)筑元素的等級(jí)很重要。
注意Netsetter網(wǎng)站上的大大的內(nèi)容margin、padding和段落空間。所有的這些空間讓內(nèi)容更容易和舒適的閱讀。
空白同樣讓內(nèi)容更加清晰易讀。一份研究(Lin, 2004)發(fā)現(xiàn)段落之間和左右間距可以增進(jìn)理解20%左右。用戶會(huì)發(fā)現(xiàn)更容易聚焦和處理使用大空白的內(nèi)容。
事實(shí)上，根據(jù)Chaperro、Shaikh和Baker的研究，一個(gè)頁(yè)面的布局(包括空白、標(biāo)題、縮進(jìn)和插圖)可能不會(huì)明顯的影響表現(xiàn)但是肯定會(huì)影響用戶的舒適度和體驗(yàn)。
[Page: ]
有效的用戶測(cè)試并不一定要廣泛
Jakob Nielsen關(guān)于在可用性測(cè)試中的測(cè)試對(duì)象的理想數(shù)字的研究表明僅僅測(cè)試5個(gè)用戶就可以發(fā)現(xiàn)你的網(wǎng)站的所有問(wèn)題的85%，而15名用戶就能發(fā)現(xiàn)差不多所有的問(wèn)題。
來(lái)源: Jakob Nielsen’s AlertBox
最大的問(wèn)題通常是第一個(gè)或者第二個(gè)用戶發(fā)現(xiàn)的，后續(xù)的用戶會(huì)確認(rèn)這些問(wèn)題并發(fā)現(xiàn)其它的一些小問(wèn)題。只有兩個(gè)測(cè)試用戶的話可能能發(fā)現(xiàn)你的網(wǎng)站的一半的問(wèn)題。這意味著測(cè)試并不是必須要很廣泛或者很昂貴以獲取較好的結(jié)果。最大的收益來(lái)自于從0個(gè)測(cè)試用戶到1個(gè)，所以不必?fù)?dān)心測(cè)試用戶太少：任何測(cè)試都聊勝于無(wú)。
[Page: ]
信息產(chǎn)品頁(yè)面可以助你引人注目
如果你的網(wǎng)站有產(chǎn)品頁(yè)面，人們?cè)诰€購(gòu)物的時(shí)候?qū)⒁欢〞?huì)看到它們。但是很多產(chǎn)品頁(yè)面缺乏足夠的信息，甚至不足以讓瀏覽器快速瀏覽。這是個(gè)嚴(yán)肅的問(wèn)題，因?yàn)楫a(chǎn)品信息有助于讓人們下定購(gòu)買的決心。研究顯示缺乏產(chǎn)品信息會(huì)導(dǎo)致大概8%的可用性問(wèn)題和甚至高達(dá)10%的用戶失敗(也就是說(shuō)用戶放棄并離開(kāi)這個(gè)網(wǎng)站) (Prioritizing Web Usability).
Apple為其產(chǎn)品提供獨(dú)立的“技術(shù)特性”頁(yè)面，這可以將復(fù)雜的詳情頁(yè)面獨(dú)立于簡(jiǎn)單的產(chǎn)品銷售頁(yè)面，然后在他們(用戶)需要的時(shí)候提供一個(gè)方便的入口。
為你的產(chǎn)品提供詳細(xì)的信息，但是不要掉進(jìn)用太多文字炮轟用戶的陷阱。讓這些信息易于理解。通過(guò)將文字分成小段并使用大量的子標(biāo)題讓頁(yè)面可瀏覽，為你的產(chǎn)品添加大量的圖片，并使用合適的語(yǔ)言：不要使用術(shù)語(yǔ)，你的用戶可能不懂。
[Page: ]
大部分用戶無(wú)視廣告
Jakob Nielsen在其AlertBox entry中報(bào)告說(shuō)大部分用戶根本就無(wú)視廣告橫幅。如果他們?cè)谝粋€(gè)頁(yè)面中尋找一個(gè)信息片段或者專心的看內(nèi)容，他們是不會(huì)被旁邊的廣告擾亂的。
這意味著用戶不僅會(huì)避開(kāi)廣告，而且他們還會(huì)避開(kāi)一切看起來(lái)像廣告的東西，即便它們跟本不是廣告。一些重風(fēng)格的導(dǎo)航條會(huì)看起來(lái)像橫幅廣告，所以小心使用那些元素。
FlashDen左側(cè)的方形橫幅確實(shí)不是廣告：它們只是內(nèi)容鏈接，但是它們的確看起來(lái)和廣告條很像，以至于會(huì)被一些用戶無(wú)視。
也就是說(shuō)，如果廣告看起來(lái)像內(nèi)容，人們會(huì)瀏覽并點(diǎn)擊。這會(huì)帶來(lái)更多的廣告收入但是會(huì)以你的用戶的信任為代價(jià)，因?yàn)樗麄凕c(diǎn)擊他們認(rèn)為真的是內(nèi)容的東西。在你采取那種方式前，請(qǐng)先衡量一下這筆交易：短期收益與長(zhǎng)期信任。
號(hào)外：來(lái)自于我們的個(gè)案研究的結(jié)論
最近幾年，Smashing Magazine的編輯團(tuán)隊(duì)帶領(lǐng)了一些個(gè)案研究以試圖找到一些普遍的方案和實(shí)踐。到目前為止，我們已經(jīng)分析了網(wǎng)站表單、博客、排版和作品集；更多的個(gè)案研究將在下個(gè)月發(fā)布。我們發(fā)現(xiàn)了一些能夠?yàn)槟愕南乱粋€(gè)設(shè)計(jì)充當(dāng)指導(dǎo)方針的有趣的模式。
在這里，我們將回顧一下我們?cè)谀切﹤€(gè)案研究中發(fā)現(xiàn)的一些實(shí)踐和設(shè)計(jì)模式，簡(jiǎn)化這些概述，以使你更方便。
根據(jù)我們的排版研究:
- 行高(像素) ÷ 主體字體大小(像素) = 1.48
1.5 通常被推薦于傳統(tǒng)印刷的書(shū)籍中，那么我們的研究也支持這個(gè)單憑經(jīng)驗(yàn)的方法。只有很少的網(wǎng)站使用小于這個(gè)的，而且使用超過(guò)1.48的網(wǎng)站就像也在減少。 - 行長(zhǎng)度(像素) ÷ 行高(像素) = 27.8
平均的行的長(zhǎng)度是538.64 像素(不包括外邊距和內(nèi)邊距)，這是相當(dāng)大的，考慮到很多網(wǎng)站仍然在body中使用是12至13像素大小的字體。 - 段落之間的空間(像素) ÷ 行高(像素) = 0.754
結(jié)果是段落空間(就是一個(gè)段落的最后一行和下一段落的第一行之間的空間) 難得的等于行間空白了(這將是完美的垂直節(jié)奏的主要特點(diǎn))。更常見(jiàn)的是，段落間距正好是行間空白的75%。原因可能是行間空白通常都包括下行線；而因?yàn)榇蟛糠肿址紱](méi)有下行線，那么多余的空白就出現(xiàn)在了線的下面了。 - 每行字符數(shù)最好是55到75
根據(jù)傳統(tǒng)排版圖書(shū)，每行文字的最佳字符數(shù)是55-75，但是事實(shí)上，每行75-85個(gè)字符更流行。
[Page: ]
根據(jù)我們的博客設(shè)計(jì)研究:
- 布局通常采用固定寬度(基于像素) (92%)并且通常是居中的(94%)。固定布局的寬度大部分在951px和1000px之間(56%)。
- 首頁(yè)顯示10到20篇日志的摘要(62%)；
- 一個(gè)網(wǎng)站的整體布局的58%用來(lái)顯示主內(nèi)容。
根據(jù)我們的網(wǎng)站表單設(shè)計(jì)研究:
- 注冊(cè)鏈接寫(xiě)為“sign up” (40%)并被放置在頁(yè)面的右上角；
- 注冊(cè)表單有簡(jiǎn)單的布局，以避免分散用戶的注意力(61%)；
- 輸入字段的標(biāo)題加粗(62%)，字段垂直放置的要明顯多于水平放置的(86%).
- 設(shè)計(jì)師趨向于采用一些強(qiáng)制性字段和可選字段；
- 未提供Email驗(yàn)證(82%)，但是需要密碼驗(yàn)證(72%)；
- “Submit”按鈕即有居左的(56%)也有居右的(26%)。
根據(jù)我們的作品集網(wǎng)站研究:
- 89%的布局水平居中，而且他們中的大部分使用巨大的水平導(dǎo)航菜單。
- 47.2%的作品集網(wǎng)站有一個(gè)客戶頁(yè)面，67.2%有一些獨(dú)立的服務(wù)頁(yè)面。
- 63.6%對(duì)每一個(gè)項(xiàng)目會(huì)有個(gè)詳細(xì)的頁(yè)面，包括個(gè)案研究、感言、截屏幻燈、草稿和草圖等。
- 聯(lián)系頁(yè)面包括努力方向、手機(jī)號(hào)碼、Email地址、郵寄地址、名片以及在線表單。
