每個(gè)人都會(huì )贊同可用性是網(wǎng)站的一個(gè)很重要的方面的說(shuō)法。無(wú)論你是在做一個(gè)作品集網(wǎng)站、網(wǎng)上商店還是網(wǎng)絡(luò )應用，讓你的頁(yè)面對用戶(hù)來(lái)說(shuō)可以容易和快樂(lè )的使用是一個(gè)關(guān)鍵。這些年，很多人在網(wǎng)站和界面設計的很多方面完成了很多的研究，這些結論在幫助我們提高我們的工作方面很有價(jià)值。這里是能夠幫助你提高你的網(wǎng)站的用戶(hù)體驗的10條有用的可用性結論和指南。
UX Matters的一份研究發(fā)現表單中的標簽(label)的理想位置是在字段(field)的上面。在很多的表單中，標簽被放到字段的左邊，以形成一個(gè)兩欄的布局；盡管這樣看起來(lái)不錯，但它不是最容易使用的布局。為什么這樣說(shuō)呢？因為表單通常是垂直導向的；也就是用戶(hù)從上向下填寫(xiě)表單，用戶(hù)是向下瀏覽表單的。這樣在標簽下面放置字段比在標簽右邊放置字段要更容易(瀏覽)一些。
Tumblr 遵循UX Matter的建議，提供了一個(gè)簡(jiǎn)單而簡(jiǎn)潔的注冊表單。
在左側放置標簽還會(huì )引發(fā)另一個(gè)問(wèn)題：你讓標簽居左還是居右？居左可讓表單可掃描但是會(huì )將標簽和字段分離，從而使得區分哪個(gè)標簽歸哪個(gè)字段就比較困難。居右則相反：它可以實(shí)現好的界面但是可掃描性弱些。在各種情況下，標簽在上面是最好的。該研究同時(shí)發(fā)現標簽最好不要加粗，盡管此條建議并不能令人完全信服……
當別人進(jìn)入到視野的時(shí)候，人們本能的會(huì )立馬注意到他們。在網(wǎng)站頁(yè)面，我們趨向于關(guān)注人的面部和眼睛， 這為市場(chǎng)人員提供了一個(gè)引起關(guān)注的很好的技術(shù)。但是我們被人們的面部和眼睛吸引只是個(gè)開(kāi)始；事實(shí)證明，我們確實(shí)會(huì )將目光轉向圖片中的人正在看的方向。
這里是一份描述這個(gè)的眼動(dòng)跟蹤研究。我們本能的被吸引到臉部，但是如果那張臉在看其他地方而不是我們，我們同樣會(huì )看那個(gè)方向。利用這種現象來(lái)吸引你的用戶(hù)的注意力到你的頁(yè)面或廣告中最重要的部分吧。
各種研究已轉向到是什么影響人們對網(wǎng)站的可信度的看法方向：
我們不知道Fever app 是不是真的比較好，但是時(shí)尚的用戶(hù)界面和網(wǎng)站給我們很好的第一印象。
這些研究的一個(gè)有趣的結論是用戶(hù)真的通過(guò)封面來(lái)判斷一本書(shū)… 更確切的說(shuō)，一個(gè)網(wǎng)站依賴(lài)其設計。比如布局、一致性、排版、色彩和樣式之類(lèi)的元素都會(huì )影響到用戶(hù)對你的網(wǎng)站的理解以及你的項目的形象。你的網(wǎng)站不應該僅僅有一個(gè)良好的形象，還應該就是你的用戶(hù)所需要的。
其它影響可信度的因素有：網(wǎng)站的內容的質(zhì)量、錯誤數、更新頻率、易用以及可信賴(lài)的作者。
Jakob Nielsen關(guān)于多少用戶(hù)滾動(dòng)的研究(在 Prioritizing Web Usability)顯示只有23%的訪(fǎng)問(wèn)者在第一次訪(fǎng)問(wèn)一個(gè)網(wǎng)站的時(shí)候滾動(dòng)。這意味著(zhù)77% 的用戶(hù)并不滾動(dòng)；他們只是看折疊線(xiàn)以上(也就是不用向下滾動(dòng)而在屏幕上可見(jiàn)的頁(yè)面區域)的內容。而且，回訪(fǎng)時(shí)滾動(dòng)的用戶(hù)的百分比也有所降低，只有16%的用戶(hù)在他們第二次訪(fǎng)問(wèn)時(shí)滾動(dòng)。這些數據強調在顯著(zhù)的位置放置關(guān)鍵的內容是多么的重要。特別是在登錄頁(yè)面。
這不是說(shuō)你應該把所有東西塞到頁(yè)面的上部區域里面，只是說(shuō)，你應該最好的利用那一塊地方。把內容填塞進(jìn)去只會(huì )讓內容難懂；當用戶(hù)看到太多的信息，他們會(huì )不知道該從哪里開(kāi)始看。
Basecamp很好的利用了空間。折疊線(xiàn)以上(768 像素高)，它顯示一個(gè)巨大的截圖、標語(yǔ)、有價(jià)值的主張、行為召喚、客戶(hù)列表、視頻和使用圖片展示的簡(jiǎn)短特性列表。
這對主頁(yè)是最重要的，大部分新訪(fǎng)問(wèn)者都會(huì )瀏覽首頁(yè)。所以請在那里提供這些核心要素：
但是，現在用戶(hù)的習慣已經(jīng)發(fā)生明顯的改變了。最近研究證明用戶(hù)對滾動(dòng)相當接受，而且在某種情況下他們會(huì )期望滾動(dòng)到頁(yè)面的底部。很多用戶(hù)喜歡滾動(dòng)勝過(guò)分頁(yè)，而且對很多用戶(hù)來(lái)說(shuō)頁(yè)面的最重要的信息并不是必須放在“折疊線(xiàn)上面”(這是因為各種大量的可見(jiàn)的顯示方案是無(wú)用的，拒用)。所以將你的布局分割成段以方便瀏覽是個(gè)很不錯的主意，使用一些空白分開(kāi)它們吧。
想了解更多信息可以查看這些文章：將折疊展開(kāi) (Clicktale), 分頁(yè)與滾動(dòng) ( 威之卡大學(xué) – SURL), 打破折疊的神話(huà) (盒子與箭頭)。(多謝Fred Leuck).
盡管給你的網(wǎng)站一個(gè)獨特的設計是很棒的，但是當遇到可用性的時(shí)候，做其他人正在做的是最好的。遵從慣例，因為當一個(gè)人訪(fǎng)問(wèn)一個(gè)新的網(wǎng)站的時(shí)候，他們尋找東西的第一個(gè)位置就是他們在其他大多數網(wǎng)站找到它們的地方；他們利用他們的經(jīng)驗來(lái)理解新內容的意思。這被稱(chēng)為使用習慣。人們期望某些東西保持一致，比如鏈接顏色、網(wǎng)站的logo的位置、tab導航的行為等。
Google在其網(wǎng)站上保持所有的鏈接都是藍色只有一個(gè)原因：大多數用戶(hù)對這個(gè)顏色熟悉，這使得很容易定位。
你的鏈接應該是什么顏色？第一要義就是差異(對比)：鏈接要足夠暗(或者亮)以和背景色相對照。其次，它要能從其他文本中凸顯出來(lái)；所以，不要在黑色字體上使用黑色鏈接。最后，研究表明(Van Schaik和Ling)如果可用性是你的重點(diǎn)，保持藍色鏈接是最好的。瀏覽器的默認鏈接顏色是藍色，所以用戶(hù)比較期望它。選擇一個(gè)其它顏色絕對不是問(wèn)題，但是它將會(huì )影響到用戶(hù)找到它的速度。
搜索框的理想寬度是多少？有這回事兒?jiǎn)?？JakobNielsen做了一次關(guān)于在網(wǎng)站的搜索框中搜索問(wèn)題的長(cháng)度的調查(Prioritizing WebUsability)。結果是現在的大部分搜索框太短了。搜索框太短的問(wèn)題是即便你可以輸入較長(cháng)的問(wèn)題，你也只能一次看到文本的一部分，從而使得難于檢查或編輯你輸入的內容。
該研究發(fā)現搜索框的平均寬度是18個(gè)字符。數據顯示27%的查詢(xún)太長(cháng)以至于不能輸入。擴展搜索框到27個(gè)字符能夠滿(mǎn)足90%的查詢(xún)。請注意，你可以使用em設置寬度，而不是像素或者pt。1em正好是一個(gè)“m”字符的寬度和高度(而無(wú)論你的網(wǎng)站使用多大的字號)。那么，就用這個(gè)單位來(lái)控制搜索的文本框為27個(gè)字符寬吧。
Google的搜索框足夠寬來(lái)容納長(cháng)句子。
Apple的搜索框有些短，會(huì )切斷查詢(xún)內容：“Microsoft Office 2008.”
總體來(lái)說(shuō)，搜索框太寬比太短要好，這樣用戶(hù)就可以快速檢查、核實(shí)并提交查詢(xún)。這條準則相當簡(jiǎn)單，但是不幸的是常常被無(wú)視。在輸入區域里使用一些內邊距(padding)同樣可以提高設計和用戶(hù)體驗。
很多設計師都知道空白的價(jià)值，也就是頁(yè)面中段落、圖片、按鈕和其它元素之間的空白?？瞻淄ㄟ^(guò)給各元素足夠的空間來(lái)“呼吸”以避免頁(yè)面過(guò)于擁擠凌亂。我們也可以通過(guò)減少條目之間的空間和增加它們與頁(yè)面中的其它條目之間的空間來(lái)進(jìn)行分組。在頁(yè)面中顯示條目之間的關(guān)系(比如，在這個(gè)條目集那里顯示這個(gè)按鈕)和構筑元素的等級很重要。
注意Netsetter網(wǎng)站上的大大的內容margin、padding和段落空間。所有的這些空間讓內容更容易和舒適的閱讀。
空白同樣讓內容更加清晰易讀。一份研究(Lin, 2004)發(fā)現段落之間和左右間距可以增進(jìn)理解20%左右。用戶(hù)會(huì )發(fā)現更容易聚焦和處理使用大空白的內容。
事實(shí)上，根據Chaperro、Shaikh和Baker的研究，一個(gè)頁(yè)面的布局(包括空白、標題、縮進(jìn)和插圖)可能不會(huì )明顯的影響表現但是肯定會(huì )影響用戶(hù)的舒適度和體驗。
Jakob Nielsen關(guān)于在可用性測試中的測試對象的理想數字的研究表明僅僅測試5個(gè)用戶(hù)就可以發(fā)現你的網(wǎng)站的所有問(wèn)題的85%，而15名用戶(hù)就能發(fā)現差不多所有的問(wèn)題。
來(lái)源: Jakob Nielsen’s AlertBox
最大的問(wèn)題通常是第一個(gè)或者第二個(gè)用戶(hù)發(fā)現的，后續的用戶(hù)會(huì )確認這些問(wèn)題并發(fā)現其它的一些小問(wèn)題。只有兩個(gè)測試用戶(hù)的話(huà)可能能發(fā)現你的網(wǎng)站的一半的問(wèn)題。這意味著(zhù)測試并不是必須要很廣泛或者很昂貴以獲取較好的結果。最大的收益來(lái)自于從0個(gè)測試用戶(hù)到1個(gè)，所以不必擔心測試用戶(hù)太少：任何測試都聊勝于無(wú)。
如果你的網(wǎng)站有產(chǎn)品頁(yè)面，人們在線(xiàn)購物的時(shí)候將一定會(huì )看到它們。但是很多產(chǎn)品頁(yè)面缺乏足夠的信息，甚至不足以讓瀏覽器快速瀏覽。這是個(gè)嚴肅的問(wèn)題，因為產(chǎn)品信息有助于讓人們下定購買(mǎi)的決心。研究顯示缺乏產(chǎn)品信息會(huì )導致大概8%的可用性問(wèn)題和甚至高達10%的用戶(hù)失敗(也就是說(shuō)用戶(hù)放棄并離開(kāi)這個(gè)網(wǎng)站) (Prioritizing Web Usability).
Apple為其產(chǎn)品提供獨立的“技術(shù)特性”頁(yè)面，這可以將復雜的詳情頁(yè)面獨立于簡(jiǎn)單的產(chǎn)品銷(xiāo)售頁(yè)面，然后在他們(用戶(hù))需要的時(shí)候提供一個(gè)方便的入口。
為你的產(chǎn)品提供詳細的信息，但是不要掉進(jìn)用太多文字炮轟用戶(hù)的陷阱。讓這些信息易于理解。通過(guò)將文字分成小段并使用大量的子標題讓頁(yè)面可瀏覽，為你的產(chǎn)品添加大量的圖片，并使用合適的語(yǔ)言：不要使用術(shù)語(yǔ)，你的用戶(hù)可能不懂。
Jakob Nielsen在其AlertBox entry中報告說(shuō)大部分用戶(hù)根本就無(wú)視廣告橫幅。如果他們在一個(gè)頁(yè)面中尋找一個(gè)信息片段或者專(zhuān)心的看內容，他們是不會(huì )被旁邊的廣告擾亂的。
這意味著(zhù)用戶(hù)不僅會(huì )避開(kāi)廣告，而且他們還會(huì )避開(kāi)一切看起來(lái)像廣告的東西，即便它們跟本不是廣告。一些重風(fēng)格的導航條會(huì )看起來(lái)像橫幅廣告，所以小心使用那些元素。
FlashDen左側的方形橫幅確實(shí)不是廣告：它們只是內容鏈接，但是它們的確看起來(lái)和廣告條很像，以至于會(huì )被一些用戶(hù)無(wú)視。
也就是說(shuō)，如果廣告看起來(lái)像內容，人們會(huì )瀏覽并點(diǎn)擊。這會(huì )帶來(lái)更多的廣告收入但是會(huì )以你的用戶(hù)的信任為代價(jià)，因為他們點(diǎn)擊他們認為真的是內容的東西。在你采取那種方式前，請先衡量一下這筆交易：短期收益與長(cháng)期信任。
最近幾年，Smashing Magazine的編輯團隊帶領(lǐng)了一些個(gè)案研究以試圖找到一些普遍的方案和實(shí)踐。到目前為止，我們已經(jīng)分析了網(wǎng)站表單、博客、排版和作品集；更多的個(gè)案研究將在下個(gè)月發(fā)布。我們發(fā)現了一些能夠為你的下一個(gè)設計充當指導方針的有趣的模式。
在這里，我們將回顧一下我們在那些個(gè)案研究中發(fā)現的一些實(shí)踐和設計模式，簡(jiǎn)化這些概述，以使你更方便。
根據我們的排版研究:
根據我們的博客設計研究:
根據我們的網(wǎng)站表單設計研究:
根據我們的作品集網(wǎng)站研究:
對我們所講的有什么想法嗎？或者了解其它的有用的可用性結論？請在下面留言給我們，多謝！
Dmitry Fadeyev Usability Post 博客的創(chuàng )建者，在那里你可以讀到他關(guān)于良好設計和可用性的觀(guān)點(diǎn)。Follow Dmitry on Twitter @usabilitypost
聯(lián)系客服
