原文：10條有用的可用性結(jié)論和指南
譯自：10 Useful Usability Findings and Guidelines
版權(quán)所有，轉(zhuǎn)載請注明出處，多謝！

--------------------------------------------------------------------------------
每個人都會贊同可用性是網(wǎng)站的一個很重要的方面的說法。無論你是在做一個作品集網(wǎng)站、網(wǎng)上商店還是網(wǎng)絡(luò)應(yīng)用，讓你的頁面對用戶來說可以容易和快樂的使用是一個關(guān)鍵。這些年，很多人在網(wǎng)站和界面設(shè)計的很多方面完成了很多的研究，這些結(jié)論在幫助我們提高我們的工作方面很有價值。這里是能夠幫助你提高你的網(wǎng)站的用戶體驗的10條有用的可用性結(jié)論和指南。

Form標(biāo)簽最好放到字段的上面

UX Matters的一份研究發(fā)現(xiàn)表單中的標(biāo)簽(label)的理想位置是在字段(field)的上面。在很多的表單中，標(biāo)簽被放到字段的左邊，以形成一個兩欄的布局；盡管這樣看起來不錯，但它不是最容易使用的布局。為什么這樣說呢？因為表單通常是垂直導(dǎo)向的；也就是用戶從上向下填寫表單，用戶是向下瀏覽表單的。這樣在標(biāo)簽下面放置字段比在標(biāo)簽右邊放置字段要更容易(瀏覽)一些。

Tumblr 遵循UX Matter的建議，提供了一個簡單而簡潔的注冊表單。
在左側(cè)放置標(biāo)簽還會引發(fā)另一個問題：你讓標(biāo)簽居左還是居右？居左可讓表單可掃描但是會將標(biāo)簽和字段分離，從而使得區(qū)分哪個標(biāo)簽歸哪個字段就比較困難。居右則相反：它可以實現(xiàn)好的界面但是可掃描性弱些。在各種情況下，標(biāo)簽在上面是最好的。該研究同時發(fā)現(xiàn)標(biāo)簽最好不要加粗，盡管此條建議并不能令人完全信服……

用戶關(guān)注面部

當(dāng)別人進(jìn)入到視野的時候，人們本能的會立馬注意到他們。在網(wǎng)站頁面，我們趨向于關(guān)注人的面部和眼睛， 這為市場人員提供了一個引起關(guān)注的很好的技術(shù)。但是我們被人們的面部和眼睛吸引只是個開始；事實證明，我們確實會將目光轉(zhuǎn)向圖片中的人正在看的方向。

一個正在看我們的小孩兒的圖片的眼動跟蹤熱圖，來自于UsableWorld的研究。

那么現(xiàn)在這個小孩正在看內(nèi)容。注意人們在看向標(biāo)題和文字的方向增長。

這里是一份描述這個的眼動跟蹤研究。我們本能的被吸引到臉部，但是如果那張臉在看其他地方而不是我們，我們同樣會看那個方向。利用這種現(xiàn)象來吸引你的用戶的注意力到你的頁面或廣告中最重要的部分吧。

設(shè)計的質(zhì)量是可信度的一個指標(biāo)

各種研究已轉(zhuǎn)向到是什么影響人們對網(wǎng)站的可信度的看法方向：

Stanford-Makovsy網(wǎng)站可信度研究2002: 調(diào)查當(dāng)前什么讓一個網(wǎng)站可信(pdf)
什么讓一個網(wǎng)站可信？大量定量研究的報告(pdf)
計算機(jī)可信度元素(pdf)
影響網(wǎng)站可信度的元素：一份源自自我評定研究的早期結(jié)果(Proceedings of ACM CHI 2000 Conference on Human Factors in Computing Systems, v.2, New York: ACM Press)

我們不知道Fever app 是不是真的比較好，但是時尚的用戶界面和網(wǎng)站給我們很好的第一印象。

這些研究的一個有趣的結(jié)論是用戶真的通過封面來判斷一本書… 更確切的說，一個網(wǎng)站依賴其設(shè)計。比如布局、一致性、排版、色彩和樣式之類的元素都會影響到用戶對你的網(wǎng)站的理解以及你的項目的形象。你的網(wǎng)站不應(yīng)該僅僅有一個良好的形象，還應(yīng)該就是你的用戶所需要的。
其它影響可信度的因素有：網(wǎng)站的內(nèi)容的質(zhì)量、錯誤數(shù)、更新頻率、易用以及可信賴的作者。

大多數(shù)用戶 不 滾動

Jakob Nielsen關(guān)于多少用戶滾動的研究(在 Prioritizing Web Usability)顯示只有23%的訪問者在第一次訪問一個網(wǎng)站的時候滾動。這意味著77% 的用戶并不滾動；他們只是看折疊線以上(也就是不用向下滾動而在屏幕上可見的頁面區(qū)域)的內(nèi)容。而且，回訪時滾動的用戶的百分比也有所降低，只有16%的用戶在他們第二次訪問時滾動。這些數(shù)據(jù)強(qiáng)調(diào)在顯著的位置放置關(guān)鍵的內(nèi)容是多么的重要。特別是在登錄頁面。
這不是說你應(yīng)該把所有東西塞到頁面的上部區(qū)域里面，只是說，你應(yīng)該最好的利用那一塊地方。把內(nèi)容填塞進(jìn)去只會讓內(nèi)容難懂；當(dāng)用戶看到太多的信息，他們會不知道該從哪里開始看。

Basecamp很好的利用了空間。折疊線以上(768 像素高)，它顯示一個巨大的截圖、標(biāo)語、有價值的主張、行為召喚、客戶列表、視頻和使用圖片展示的簡短特性列表。

這對主頁是最重要的，大部分新訪問者都會瀏覽首頁。所以請在那里提供這些核心要素：
1、網(wǎng)站名稱；
2、網(wǎng)站的有價值的主張(比如說，用戶將從使用中得到什么好處)；
3、與用戶相關(guān)的主要部分導(dǎo)航。

但是，現(xiàn)在用戶的習(xí)慣已經(jīng)發(fā)生明顯的改變了。最近研究證明用戶對滾動相當(dāng)接受，而且在某種情況下他們會期望滾動到頁面的底部。很多用戶喜歡滾動勝過分頁，而且對很多用戶來說頁面的最重要的信息并不是必須放在“折疊線上面”(這是因為各種大量的可見的顯示方案是無用的，拒用)。所以將你的布局分割成段以方便瀏覽是個很不錯的主意，使用一些空白分開它們吧。
想了解更多信息可以查看這些文章：將折疊展開 (Clicktale), 分頁與滾動 ( 威之卡大學(xué) – SURL), 打破折疊的神話 (盒子與箭頭)。(多謝Fred Leuck).

藍(lán)色是鏈接的最佳顏色

盡管給你的網(wǎng)站一個獨特的設(shè)計是很棒的，但是當(dāng)遇到可用性的時候，做其他人正在做的是最好的。遵從慣例，因為當(dāng)一個人訪問一個新的網(wǎng)站的時候，他們尋找東西的第一個位置就是他們在其他大多數(shù)網(wǎng)站找到它們的地方；他們利用他們的經(jīng)驗來理解新內(nèi)容的意思。這被稱為使用習(xí)慣。人們期望某些東西保持一致，比如鏈接顏色、網(wǎng)站的logo的位置、tab導(dǎo)航的行為等。

Google在其網(wǎng)站上保持所有的鏈接都是藍(lán)色只有一個原因：大多數(shù)用戶對這個顏色熟悉，這使得很容易定位。

你的鏈接應(yīng)該是什么顏色？第一要義就是差異(對比)：鏈接要足夠暗(或者亮)以和背景色相對照。其次，它要能從其他文本中凸顯出來；所以，不要在黑色字體上使用黑色鏈接。最后，研究表明(Van Schaik 和Ling)如果可用性是你的重點，保持藍(lán)色鏈接是最好的。瀏覽器的默認(rèn)鏈接顏色是藍(lán)色，所以用戶比較期望它。選擇一個其它顏色絕對不是問題，但是它將會影響到用戶找到它的速度。

理想的搜索框是27個字符寬

搜索框的理想寬度是多少？有這回事兒嗎？Jakob Nielsen做了一次關(guān)于在網(wǎng)站的搜索框中搜索問題的長度的調(diào)查(Prioritizing Web Usability)。結(jié)果是現(xiàn)在的大部分搜索框太短了。搜索框太短的問題是即便你可以輸入較長的問題，你也只能一次看到文本的一部分，從而使得難于檢查或編輯你輸入的內(nèi)容。
該研究發(fā)現(xiàn)搜索框的平均寬度是18個字符。數(shù)據(jù)顯示27%的查詢太長以至于不能輸入。擴(kuò)展搜索框到27個字符能夠滿足90%的查詢。請注意，你可以使用em設(shè)置寬度，而不是像素或者pt。1em正好是一個“m”字符的寬度和高度(而無論你的網(wǎng)站使用多大的字號)。那么，就用這個單位來控制搜索的文本框為27個字符寬吧。

Google的搜索框足夠?qū)拋砣菁{長句子。

Apple的搜索框有些短，會切斷查詢內(nèi)容：“Microsoft Office 2008.”

總體來說，搜索框太寬比太短要好，這樣用戶就可以快速檢查、核實并提交查詢。這條準(zhǔn)則相當(dāng)簡單，但是不幸的是常常被無視。在輸入?yún)^(qū)域里使用一些內(nèi)邊距(padding)同樣可以提高設(shè)計和用戶體驗。

空白可以增進(jìn)理解

很多設(shè)計師都知道空白的價值，也就是頁面中段落、圖片、按鈕和其它元素之間的空白?？瞻淄ㄟ^給各元素足夠的空間來“呼吸”以避免頁面過于擁擠凌亂。我們也可以通過減少條目之間的空間和增加它們與頁面中的其它條目之間的空間來進(jìn)行分組。在頁面中顯示條目之間的關(guān)系(比如，在這個條目集那里顯示這個按鈕)和構(gòu)筑元素的等級很重要。

注意Netsetter網(wǎng)站上的大大的內(nèi)容margin、padding和段落空間。所有的這些空間讓內(nèi)容更容易和舒適的閱讀。

空白同樣讓內(nèi)容更加清晰易讀。一份研究(Lin, 2004)發(fā)現(xiàn)段落之間和左右間距可以增進(jìn)理解20%左右。用戶會發(fā)現(xiàn)更容易聚焦和處理使用大空白的內(nèi)容。

事實上，根據(jù)Chaperro、Shaikh和Baker的研究，一個頁面的布局(包括空白、標(biāo)題、縮進(jìn)和插圖)可能不會明顯的影響表現(xiàn)但是肯定會影響用戶的舒適度和體驗。

有效的用戶測試并不一定要廣泛

Jakob Nielsen關(guān)于在可用性測試中的測試對象的理想數(shù)字的研究表明僅僅測試5個用戶就可以發(fā)現(xiàn)你的網(wǎng)站的所有問題的85%，而15名用戶就能發(fā)現(xiàn)差不多所有的問題。

來源: Jakob Nielsen’s AlertBox

最大的問題通常是第一個或者第二個用戶發(fā)現(xiàn)的，后續(xù)的用戶會確認(rèn)這些問題并發(fā)現(xiàn)其它的一些小問題。只有兩個測試用戶的話可能能發(fā)現(xiàn)你的網(wǎng)站的一半的問題。這意味著測試并不是必須要很廣泛或者很昂貴以獲取較好的結(jié)果。最大的收益來自于從0個測試用戶到1個，所以不必?fù)?dān)心測試用戶太少：任何測試都聊勝于無。

信息產(chǎn)品頁面可以助你引人注目

如果你的網(wǎng)站有產(chǎn)品頁面，人們在線購物的時候?qū)⒁欢〞吹剿鼈儭５呛芏喈a(chǎn)品頁面缺乏足夠的信息，甚至不足以讓瀏覽器快速瀏覽。這是個嚴(yán)肅的問題，因為產(chǎn)品信息有助于讓人們下定購買的決心。研究顯示缺乏產(chǎn)品信息會導(dǎo)致大概8%的可用性問題和甚至高達(dá)10%的用戶失敗(也就是說用戶放棄并離開這個網(wǎng)站) (Prioritizing Web Usability).

Apple為其產(chǎn)品提供獨立的“技術(shù)特性”頁面，這可以將復(fù)雜的詳情頁面獨立于簡單的產(chǎn)品銷售頁面，然后在他們(用戶)需要的時候提供一個方便的入口。

為你的產(chǎn)品提供詳細(xì)的信息，但是不要掉進(jìn)用太多文字炮轟用戶的陷阱。讓這些信息易于理解。通過將文字分成小段并使用大量的子標(biāo)題讓頁面可瀏覽，為你的產(chǎn)品添加大量的圖片，并使用合適的語言：不要使用術(shù)語，你的用戶可能不懂。

大部分用戶無視廣告

Jakob Nielsen在其AlertBox entry中報告說大部分用戶根本就無視廣告橫幅。如果他們在一個頁面中尋找一個信息片段或者專心的看內(nèi)容，他們是不會被旁邊的廣告擾亂的。
這意味著用戶不僅會避開廣告，而且他們還會避開一切看起來像廣告的東西，即便它們跟本不是廣告。一些重風(fēng)格的導(dǎo)航條會看起來像橫幅廣告，所以小心使用那些元素。

FlashDen左側(cè)的方形橫幅確實不是廣告：它們只是內(nèi)容鏈接，但是它們的確看起來和廣告條很像，以至于會被一些用戶無視。

也就是說，如果廣告看起來像內(nèi)容，人們會瀏覽并點擊。這會帶來更多的廣告收入但是會以你的用戶的信任為代價，因為他們點擊他們認(rèn)為真的是內(nèi)容的東西。在你采取那種方式前，請先衡量一下這筆交易：短期收益與長期信任。

號外：來自于我們的個案研究的結(jié)論

最近幾年，Smashing Magazine的編輯團(tuán)隊帶領(lǐng)了一些個案研究以試圖找到一些普遍的方案和實踐。到目前為止，我們已經(jīng)分析了網(wǎng)站表單、博客、排版和作品集；更多的個案研究將在下個月發(fā)布。我們發(fā)現(xiàn)了一些能夠為你的下一個設(shè)計充當(dāng)指導(dǎo)方針的有趣的模式。
在這里，我們將回顧一下我們在那些個案研究中發(fā)現(xiàn)的一些實踐和設(shè)計模式，簡化這些概述，以使你更方便。

根據(jù)我們的排版研究:

行高(像素) ÷ 主體字體大小(像素) = 1.48
1.5 通常被推薦于傳統(tǒng)印刷的書籍中，那么我們的研究也支持這個單憑經(jīng)驗的方法。只有很少的網(wǎng)站使用小于這個的，而且使用超過1.48的網(wǎng)站就像也在減少。

行長度(像素) ÷ 行高(像素) = 27.8
平均的行的長度是538.64 像素(不包括外邊距和內(nèi)邊距)，這是相當(dāng)大的，考慮到很多網(wǎng)站仍然在body中使用是12至13像素大小的字體。

段落之間的空間(像素) ÷ 行高(像素) = 0.754
結(jié)果是段落空間(就是一個段落的最后一行和下一段落的第一行之間的空間) 難得的等于行間空白了(這將是完美的垂直節(jié)奏的主要特點)。更常見的是，段落間距正好是行間空白的75%。原因可能是行間空白通常都包括下行線；而因為大部分字符都沒有下行線，那么多余的空白就出現(xiàn)在了線的下面了。

每行字符數(shù)最好是55到75
根據(jù)傳統(tǒng)排版圖書，每行文字的最佳字符數(shù)是55-75，但是事實上，每行75-85個字符更流行。

根據(jù)我們的博客設(shè)計研究:

布局通常采用固定寬度(基于像素) (92%)并且通常是居中的(94%)。固定布局的寬度大部分在951px和1000px之間(56%)。
首頁顯示10到20篇日志的摘要(62%)；
一個網(wǎng)站的整體布局的58%用來顯示主內(nèi)容。

根據(jù)我們的網(wǎng)站表單設(shè)計研究:
注冊鏈接寫為“sign up” (40%)并被放置在頁面的右上角；
注冊表單有簡單的布局，以避免分散用戶的注意力(61%)；
輸入字段的標(biāo)題加粗(62%)，字段垂直放置的要明顯多于水平放置的(86%).
設(shè)計師趨向于采用一些強(qiáng)制性字段和可選字段；
未提供Email驗證(82%)，但是需要密碼驗證(72%)；
“Submit”按鈕即有居左的(56%)也有居右的(26%)。

根據(jù)我們的作品集網(wǎng)站研究:
89%的布局水平居中，而且他們中的大部分使用巨大的水平導(dǎo)航菜單。
47.2%的作品集網(wǎng)站有一個客戶頁面，67.2%有一些獨立的服務(wù)頁面。
63.6%對每一個項目會有個詳細(xì)的頁面，包括個案研究、感言、截屏幻燈、草稿和草圖等。
聯(lián)系頁面包括努力方向、手機(jī)號碼、Email地址、郵寄地址、名片以及在線表單。

其它資源(英文)