網(wǎng)站設(shè)計(jì)可用性結(jié)論與指南

發(fā)布：2022-01-09 13:34:09 瀏覽：3219

      眾所周知，可用性是網(wǎng)站設(shè)計(jì)中至關(guān)重要的一個(gè)因素，不管你是在設(shè)計(jì)作品集網(wǎng)站、網(wǎng)店還是網(wǎng)站應(yīng)用，最關(guān)鍵的一-點(diǎn)就是要讓網(wǎng)頁(yè)使用起來(lái)簡(jiǎn)單舒服。近幾年來(lái)，針對(duì)網(wǎng)站和用戶界面設(shè)計(jì)的各方面因素的研究有許多，研究結(jié)果對(duì)改善我們的工作很有幫助。本文收集了10項(xiàng)有用的可用性結(jié)論以及一些指南，可以在網(wǎng)站用戶體驗(yàn)設(shè)計(jì)方面助你一臂之力。

1. Form (表單)標(biāo)簽最好是在字段之上

UX Matters的一份研究顯示，表單中標(biāo)簽的最理想位置應(yīng)該是在輸入框.上方。許多表單中，標(biāo)簽一般都位于輸入框左側(cè)，形成一個(gè)兩欄的布局。雖然這看起來(lái)還行，實(shí)際使用起來(lái)卻不是最方便的。為什么會(huì)這樣呢?通常情況下，表單是垂直導(dǎo)向的，也就是說(shuō)，用戶從上到下填寫表單，一邊填寫、一邊掃視表單，因此將標(biāo)簽放在輸入框上方要比放在左側(cè)更方便瀏覽。

2. 用戶注意力集中在面部

一旦有人進(jìn)入視線范圍，人們就會(huì)本能地注意到。在網(wǎng)頁(yè)上，我們會(huì)比較關(guān)注人的面部與眼睛，這便為市場(chǎng)營(yíng)銷人員吸引訪客注意力提供了一個(gè)好方法。但我們對(duì)人們面部與眼睛的關(guān)注還只是開始，事實(shí)證明，我們會(huì)看向圖像中人物眼睛所看的方向。

3. 設(shè)計(jì)質(zhì)量是可信度的標(biāo)桿

為找出哪些因素會(huì)影響人們對(duì)網(wǎng)站可信度的看法，大家做了很多研究。
●Stanford-Makovsy網(wǎng)站可信度研究，2002:當(dāng)前影響網(wǎng)站可信度因素的調(diào)查。
●影響網(wǎng)站可信度的因素是什么?大量定量研究報(bào)告。
●計(jì)算機(jī)可信度因素。
●影響網(wǎng)站可信度的因素:自主研究報(bào)告前期結(jié)果。

4. 大多數(shù)用戶不喜歡滾屏

Jakob Nielsen關(guān) 于用戶怎樣滾屏閱讀的研究表明，只有23%的訪客初次訪問(wèn)頁(yè)面時(shí)會(huì)拉動(dòng)滾動(dòng)條，這意味著77%的訪客是不會(huì)滾屏閱讀的，他們只會(huì)看看折疊線以上的內(nèi)容(也就是網(wǎng)頁(yè)上他們只會(huì)看看折疊線以上的內(nèi)容(也就是網(wǎng)頁(yè)上外，之后再訪問(wèn)頁(yè)面時(shí)，拉滾動(dòng)條的用戶就更少了，只有16%的訪客在他們第二次訪問(wèn)時(shí)向下滾動(dòng)屏幕。從這組數(shù)據(jù)就能明顯看出，把重要內(nèi)容放在突出位置有多么重要，尤其是在登錄頁(yè)面。這并不意味著你要把所有內(nèi)容都放在網(wǎng)頁(yè)的上半部分，只是你得好好對(duì)其加以利用。全部填塞進(jìn)去，只會(huì)降低這些內(nèi)容的可讀性-當(dāng)用戶看到太多信息，他們會(huì)不知道該從哪里開始。

5. 藍(lán)色是最佳鏈接色

雖然讓自己的網(wǎng)站具有獨(dú)特的設(shè)計(jì)很不錯(cuò)的，但提到可用性，有時(shí)候和別人保持一致才是王道。遵循常規(guī)，因?yàn)槿藗優(yōu)g覽一個(gè)新網(wǎng)站時(shí)，常常會(huì)根據(jù)他們?cè)趧e的網(wǎng)站尋找信息的經(jīng)驗(yàn)來(lái)判斷信息在這個(gè)網(wǎng)站的位置，也就是用他們的經(jīng)驗(yàn)來(lái)理解這個(gè)新內(nèi)容一這就是所謂的使用習(xí)慣。人們希望有些東西能夠保持一致，比如鏈接的顏色、網(wǎng)站L ogo的位置以及選項(xiàng)卡式的導(dǎo)航欄等。
           Google所有網(wǎng)頁(yè)上的鏈接都是藍(lán)色，這是有理可循的:藍(lán)色是多數(shù)用戶的熟悉鏈接色，找起來(lái)很容易。你的網(wǎng)站鏈接應(yīng)該是什么顏色呢?首先要注意的就是對(duì)比:鏈接顏色必須足夠深(或淺) 從而與背景色形成鮮明對(duì)比。其次，它們應(yīng)該從其他文本中突顯出來(lái)。因此，如果文字顏色是黑色，那鏈接就不能也是黑色。最后，研究顯示(Van Schaik和Ling)，如果你覺(jué)得可用性是第一-位的，那么將鏈接設(shè)置成藍(lán)色便是不二之選。瀏覽器默認(rèn)的鏈接顏色是藍(lán)色，因此人們會(huì)比較期待是這樣。選用另-種顏色也沒(méi)有多大問(wèn)題，但它可能會(huì)拖慢用戶找到它的速度。

6. 搜索框的理想寬度為27個(gè)字符

搜索框的理想寬度是多少?這個(gè)概念存在么? Jakob Nielsen就人們?cè)诰W(wǎng)頁(yè)搜索框中輸入的檢索詞條的長(zhǎng)度做了相關(guān)可用性調(diào)查研究，結(jié)果顯示，當(dāng)前大多數(shù)搜索框都太短了。搜索框太短的問(wèn)題在于，盡管你可以輸入一個(gè)很長(zhǎng)的詞條，但只有其中一部分是可見的，這就讓訪客復(fù)查或編輯所輸入的詞條變得很麻煩。研究發(fā)現(xiàn)，搜索框的平均寬度是18個(gè)字符。研究數(shù)據(jù)表明，27%的檢索問(wèn)題都太長(zhǎng)了，無(wú)法完全容納進(jìn)去，如果把搜索框延長(zhǎng)至27個(gè)字符，90%的檢索問(wèn)題就都能納入其中了。記住，你可以用em單位設(shè)置搜索框的寬度，不限于px或pt。一個(gè)em單位剛好是“m”字符的寬度與高度(不管網(wǎng)站設(shè)置的字號(hào)是多少)。那么，就用這個(gè)單位將文字輸入框的寬度設(shè)置成27個(gè)字符寬吧。

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

大多數(shù)設(shè)計(jì)師都知道空白的重要性，也就是在網(wǎng)頁(yè)的斷落、圖片、按鈕以及其他元素之間流出空間?？瞻鬃岉?yè)面上的各個(gè)元素有空間來(lái)“呼吸”，避免頁(yè)面擁擠凌亂。我們也可以通過(guò)縮小某些之間的空隙，同時(shí)增加它們與別的元素之間的關(guān)系（例如，為了顯示某個(gè)按鈕適用于某一組元素）和建立網(wǎng)頁(yè)元素等級(jí)直觀重要。

8. 網(wǎng)頁(yè)產(chǎn)品信息充足有助于其脫穎而出

如果你的網(wǎng)站鏈接有產(chǎn)品頁(yè)面，網(wǎng)上購(gòu)物的人們絕對(duì)會(huì)跟蹤、瀏覽。雖然人們只是大致瀏覽看看，但很多產(chǎn)品也缺乏充足有效的信息。這個(gè)問(wèn)題很嚴(yán)重，因?yàn)楫a(chǎn)品信息能幫助人們做出購(gòu)買選擇。研究顯示，產(chǎn)品信息匱乏會(huì)造成8%左右的可用性問(wèn)題，甚至10%的用戶失?。ㄒ簿褪?，用戶放棄瀏覽行為，離開網(wǎng)站）。

9. 多數(shù)用戶會(huì)無(wú)視廣告

Jakob Nielsen在他的AlertBox網(wǎng)絡(luò)文集中表示，多數(shù)用戶會(huì)自動(dòng)屏蔽廣告條幅。如果他們正盯著網(wǎng)頁(yè)上一小塊信息看，或者全神貫注在內(nèi)容盯著網(wǎng)頁(yè)上一小塊信息看，或者全神貫注在內(nèi)容這意味著用戶屏蔽的不僅僅是廣告自身，還有任何看起來(lái)像廣告的東西。有些導(dǎo)航條設(shè)計(jì)得有些過(guò)火，會(huì)有廣告條幅之嫌，因此這方面得注意一下。