By Dmitry Fadeyev
原文鏈接：
http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/
iamsure譯
現(xiàn)在，比較牛的設(shè)計(jì)師和開發(fā)者都認(rèn)識(shí)到了可用性在他們工作中的重要性�？捎眯院玫木W(wǎng)站會(huì)極大地提高用戶體驗(yàn)，并且好的用戶體驗(yàn)會(huì)讓用戶更加快樂。用聰明的設(shè)計(jì)決策取悅并滿足您的訪客，而不是阻撓和激怒他們。下面是9個(gè)網(wǎng)站經(jīng)常面臨的可用性問題 ，以及對(duì)于這些問題的推薦解決方案。
您可能還對(duì)下面的文章感興趣：
- 10 Usability Nightmaters That You Should Avoid
- 30 Usability Issues To Be Aware Of
- 12 Useful Techniques For Good Interface Design
- 10 Useful Web Application Interface Techniques
1. 太小的鏈接點(diǎn)擊區(qū)域
設(shè)置超文本鏈接的目的是被點(diǎn)擊，確保它們很容易點(diǎn)擊才有意義。下面的示例中的鏈接實(shí)在是太小了;點(diǎn)擊它們的難度太高。 這些是 評(píng)論中的鏈接，Hacker News 是一個(gè)社會(huì)新聞的網(wǎng)站。 （點(diǎn)擊區(qū)域用紅色突出顯示） ：
下面例子中包含相同的界面元素，鏈接的評(píng)論，但是這個(gè)例子中有一個(gè)很大的可點(diǎn)擊區(qū)域：
Newspondcomments link.
為什么我們需要一個(gè)更大的點(diǎn)擊區(qū)域？ 很簡(jiǎn)單。 因?yàn)槲覀円苿?dòng)鼠標(biāo)并不是很準(zhǔn)確。 一個(gè)大號(hào)的點(diǎn)擊區(qū)域使鼠標(biāo)光標(biāo)懸停在鏈接上更容易。如何能有一個(gè)大號(hào)的點(diǎn)擊區(qū)域呢？我們可以使整個(gè)鏈接更大，或者使用CSS “padding”屬性增加鏈接周圍的空間。 代碼如下：
<a style=”padding: 5px;” href=http://www.68design.net/Web-Guide/Web-Theory/”http://www.examplesite.com”>Example Site</a>
2. 錯(cuò)誤使用的分頁
FeedMyApp以正確的方式使用分頁：把其海量的應(yīng)用服務(wù)列表以合適的量顯示。
但是現(xiàn)在還有人用另一種方式在Web上使用分頁。 .內(nèi)容網(wǎng)頁上，比如博客的一篇文章，有時(shí)也會(huì)分成若干頁。 為什么這樣做？ 有什么好處么？不太可能是文章實(shí)在太長(zhǎng)了，因此需要分頁; 在大多數(shù)情況下， 這樣做是用來提高頁面瀏覽量的 。因?yàn)楹芏嗖┛秃碗s志通過廣告獲得收入，獲得更多的頁面瀏覽量（即單獨(dú)網(wǎng)頁的加載數(shù)量）來提高他們的瀏覽統(tǒng)計(jì)數(shù)據(jù)，使他們能夠在每個(gè)廣告上獲利更多。
Wired 上的文章《Google的Logo》 分為8頁，非常難以閱讀。
雖然這可能看起來像是一種簡(jiǎn)單的方法，讓您可以從廣告中擠壓出更多的錢，但它也帶來了兩個(gè)主要的問題。 首先，這樣做真的，真的非常討厭。 閱讀一篇文章不得不加載好幾頁一點(diǎn)也不好玩。 您給您的訪客設(shè)置了一個(gè)完全沒有必要的障礙。
第二個(gè)原因是SEO（搜索引擎優(yōu)化） 。 搜索引擎使用您網(wǎng)頁上的內(nèi)容理解它是關(guān)于什么的，然后相應(yīng)地進(jìn)行索引。 如果內(nèi)容分成若干頁，內(nèi)容就被稀釋了，每個(gè)頁面更難理解并且其中和主題相關(guān)的關(guān)鍵字也更少了 。 這可能會(huì)對(duì)文章在搜索引擎中的排名產(chǎn)生不利影響。
3. 重復(fù)的網(wǎng)頁標(biāo)題
每個(gè)網(wǎng)頁上的標(biāo)題都是非常重要的。網(wǎng)頁標(biāo)題就是HTML代碼<head>區(qū)段中我們寫在<title>標(biāo)記里面文本。 有時(shí)，人們?cè)诰帉懰麄兙W(wǎng)站模板時(shí)設(shè)定一個(gè)通用名稱——例如其網(wǎng)站的名字——然后在整個(gè)網(wǎng)站反復(fù)使用相同的名稱。 這樣做是錯(cuò)誤的，因?yàn)闉槊總�(gè)頁面設(shè)置單獨(dú)的標(biāo)題有幾個(gè)關(guān)鍵的好處。
第一個(gè)好處是，一個(gè)好的標(biāo)題能向您的訪客傳達(dá)很多信息，解釋這個(gè)頁面的內(nèi)容是什么。人們可以迅速知道他們是否在正確的地方。請(qǐng)記住，標(biāo)題不僅僅顯示在瀏覽器窗口頂部，它也顯示在搜索引擎結(jié)果頁上 。 當(dāng)人們?cè)贕oogle的時(shí)候看到一個(gè)搜索結(jié)果列表，他們會(huì)去閱讀那些網(wǎng)頁標(biāo)題來了解每個(gè)網(wǎng)頁的內(nèi)容。僅僅因?yàn)檫@個(gè)，你也應(yīng)該花一些時(shí)間來優(yōu)化你的網(wǎng)頁標(biāo)題。
第二個(gè)好處是SEO。 搜索引擎需要不同的信息來為一次特定的查詢排序搜索結(jié)果。 網(wǎng)頁標(biāo)題是重要的信息之一，它們用來衡量您的網(wǎng)頁與一個(gè)特定的搜索關(guān)鍵字的相關(guān)程度。 這并不意味著你應(yīng)該在標(biāo)題里添加許多關(guān)鍵字——這與第一個(gè)好處相矛盾——但你應(yīng)確保每個(gè)標(biāo)題簡(jiǎn)明扼要地介紹了網(wǎng)頁的內(nèi)容，其中包括幾個(gè)你覺得人們會(huì)用來搜索這篇文章的關(guān)鍵字。
下面是一個(gè)好網(wǎng)頁標(biāo)題的例子。這是一個(gè)Smashing Magazine網(wǎng)頁標(biāo)題在Safari中瀏覽的樣子：
例子里，我們可以看到文章標(biāo)題，類別和文章的網(wǎng)站名稱。 把網(wǎng)站名稱放在最后，更強(qiáng)調(diào)的是網(wǎng)頁本身的內(nèi)容 ，而不是網(wǎng)站的品牌。 下面是標(biāo)記中HTML代碼的樣子:
<title>Vintage and Blues WordPress Themes | Freebies | Smashing Magazine</title>
<title>Vintage and Blues WordPress Themes | Freebies | Smashing Magazine</title>
Google搜索結(jié)果中這個(gè)頁面的樣子：
4. 內(nèi)容難以掃描
為了確保您的網(wǎng)站易用性，您不僅需要有一個(gè)好的設(shè)計(jì)，你還需要良好的Copy（文案）。 Copy（文案）是一個(gè)術(shù)語，用來描述網(wǎng)站上所有的文本內(nèi)容。 是的，好的設(shè)計(jì)能引導(dǎo)您的訪客瀏覽您的網(wǎng)站，將其注意力集中在重要的事情上，幫助他們理解信息塊，但訪客仍然需要閱讀文字來處理信息。這意味著Copy是你整體網(wǎng)站設(shè)計(jì)中的一個(gè)重要組成部分。
在你能寫出一份好的文案之前，你需要了解人們實(shí)際上如何瀏覽你的網(wǎng)站。不要以為你的訪客會(huì)從頭到尾閱讀所有的文字。 那樣當(dāng)然很好，但是不幸的是，根本事實(shí)不是這樣滴。 人們被Web上的信息狂轟亂炸，而且我們中的大部分人在盡力去消化那些信息。這就導(dǎo)致非常瘋狂的瀏覽行為：我們從一塊內(nèi)容跳躍到另一塊，從一個(gè)網(wǎng)站網(wǎng)站跳到下一個(gè)。人們往往不能從頭到尾閱讀一個(gè)網(wǎng)站；他們從最先吸引他們注意力的那一塊內(nèi)容開始，然后移動(dòng)到下一個(gè)捕獲他們興趣的地方。 這個(gè)模式看起來有點(diǎn)像這樣：
The Basecamp 的到達(dá)頁面。
紅圈表示訪客目光聚焦的區(qū)域，數(shù)字表示他們看那些元素的順序。用戶的視線在頁面上的興趣點(diǎn)之間跳躍，想要充分利用這種混亂的瀏覽模式，你需要用一種特定的方法組織你的文案。下面是幾個(gè)重點(diǎn)：
- 設(shè)置幾個(gè)“關(guān)注點(diǎn)”（Points of focus）。這些部分吸引訪客的注意力，你可以用粗體，高對(duì)比度的顏色和較大的字體來實(shí)現(xiàn)這個(gè)目的。你也可以使用圖片，例如圖標(biāo)，把圖標(biāo)放在文字旁邊，給這區(qū)域帶來更多的視覺吸引力。
- 每個(gè)“關(guān)注點(diǎn)”應(yīng)該伴隨一個(gè)描述性的標(biāo)題。在進(jìn)一步閱讀文案之前，訪客可以了解到一點(diǎn)內(nèi)容概要。不要做“標(biāo)題黨”，標(biāo)題應(yīng)該簡(jiǎn)單明了。人們希望迅速獲得信息，藏著掖著只會(huì)惹惱他們。
- 任何文字都應(yīng)該簡(jiǎn)短并容易消化。只提供要點(diǎn)，把其余的都刪去。在大多數(shù)情況下，文案撰寫者想補(bǔ)充說明觀點(diǎn)的文字只是增加了網(wǎng)站的負(fù)載。人們將只閱讀小塊小塊的文字，并且忽視大段的文章。把你的文案刪減到不能再減的地步吧。
“為什么你應(yīng)該使用的 OpenOffice”網(wǎng)頁肯定可以改進(jìn)。除了頂部的大橫幅之外沒有設(shè)置明確“關(guān)注點(diǎn)”；并且，文案聚在一起成了一個(gè)大疙瘩，閱讀起來相當(dāng)困難。
Things軟件的功能頁，每個(gè)功能都是一小段文字，包含一個(gè)自己的圖標(biāo)和標(biāo)題。這使得這個(gè)列表非常容易被掃描。為了使文案給人印象更深，列出實(shí)際的好處，而不是功能的名字。
5.沒有辦法取得聯(lián)系
如果你想建立一個(gè)成功的社區(qū)，用戶參與是非常重要的，并且如果你想建立一個(gè)成功的網(wǎng)站或是社會(huì)網(wǎng)絡(luò)軟件，社區(qū)是非常重要的。此外，如果你想擁有忠實(shí)的用戶，用戶參與同樣很重要。迅速回答用戶提出的疑問，修復(fù)他們遇到的問題并不僅僅意味著你有很好的客戶服務(wù)——這意味這你在乎他們，并且你的用戶和訪客會(huì)很欣賞這一點(diǎn)。
但是很多網(wǎng)站依舊沒有給訪客一個(gè)方便渠道和公司取得聯(lián)系。一些網(wǎng)站甚至沒有Email地址或是聯(lián)系方式。
當(dāng)你點(diǎn)擊可口可樂Coca-Cola網(wǎng)站上的“聯(lián)系我們”鏈接。顯示出來的頁面，沒有電子郵件，沒有電話號(hào)碼。大部分的鏈接指向“常見問題”；反饋表需要您的地址和年齡，還有500個(gè)字符的限制；“提交一個(gè)想法”的表單有兩頁那么長(zhǎng)，還包含一大堆條款。看來可口可樂真的不想你與他們聯(lián)系。
當(dāng)然，把你的Email地址放到網(wǎng)站上可能會(huì)吸引大量的垃圾郵件，這里有幾個(gè)解決辦法。
Enkoder是我最喜歡的把Email放到Web上的解決方案。Enkoder是一個(gè)軟件，有兩個(gè)版本，一個(gè)是基于Mac平臺(tái)的，一個(gè)是免費(fèi)的網(wǎng)絡(luò)應(yīng)用。它可以加密你提交的任何Email地址，生成一串亂七八糟的JavaScript代碼，你可以把它放在你的頁面上。當(dāng)網(wǎng)頁加載這段代碼的時(shí)候，你的電子郵件地址就會(huì)奇跡般地出現(xiàn)，還是一個(gè)可點(diǎn)擊的鏈接。抓取EMail地址的爬蟲機(jī)器人不能讀取你的地址，起碼計(jì)劃是這樣的。
你還可以用“聯(lián)系表單”（contact forms）來避免在網(wǎng)頁上顯示你的EMail的問題，但是你仍舊會(huì)收到一些垃圾郵件，除非你使用一個(gè)有效的Captchas，或是其他垃圾郵件保護(hù)機(jī)制。請(qǐng)記住，像Captchas這樣的東西是用戶交互的障礙，并且可能會(huì)降低用戶體驗(yàn)。
論壇救援。在線論壇是一個(gè)很好的溝通渠道，是一個(gè)不錯(cuò)的和用戶聯(lián)系替代方案。一個(gè)公開的論壇比一個(gè)簡(jiǎn)單的“聯(lián)系表單”或Email更好，因?yàn)槟愕挠脩粼谡搲?STRONG>可以相互幫助。即使你不親自回應(yīng)用戶，其他的用戶可能幫助那個(gè)人，解決他的問題。
GetSatisfaction是一個(gè)Web應(yīng)用程序，它就像一個(gè)論壇，用戶可以在板塊里張貼自己的問題和反饋，用戶或是團(tuán)隊(duì)成員都可以回復(fù)。用戶可以添加評(píng)論闡述自己的問題。無論你選擇GetSatisfaction的托管解決方案或是運(yùn)行你自己的留言板，這樣雙向的溝通渠道是一個(gè)與用戶保持聯(lián)系的優(yōu)秀方法。
The GetSatisfaction forum for Apple.
粵公網(wǎng)安備 44010402000282號(hào)