手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

提高網(wǎng)站可用性的經(jīng)驗(yàn)指南

2014-4-9    藍(lán)藍(lán)設(shè)計(jì)的小編

我想每個(gè)人都會(huì)贊成,網(wǎng)站的可用性是它能否受歡迎的一個(gè)重要方面,無(wú)論你進(jìn)行的是公司網(wǎng)站、在線(xiàn)商店還是其他,讓你的界面變得容易操控,使用時(shí)令人舒服是關(guān)鍵,近幾年已經(jīng)有很多針對(duì)網(wǎng)站界面優(yōu)化的研究,而且這些研究的成果對(duì)于提高網(wǎng)站可用性是非常有價(jià)值的?,F(xiàn)在藍(lán)藍(lán)設(shè)計(jì)這里有10個(gè)超實(shí)用的經(jīng)驗(yàn)分享,相信我,這些建議會(huì)極大地提高你那個(gè)網(wǎng)站的用戶(hù)體驗(yàn),讓用戶(hù)愛(ài)上你的網(wǎng)站設(shè)計(jì)!

 

一、善用人物配圖,使用戶(hù)專(zhuān)注于你想呈現(xiàn)的

當(dāng)進(jìn)入你的網(wǎng)站,我們會(huì)本能地關(guān)注網(wǎng)站上人物圖片中的臉和眼睛,這倒是為我們提供了一個(gè)想法,是不是可以用人物配圖吸引小伙伴的注意力呢?當(dāng)然,但這僅是第一步,我們還可以這樣做,你瞧,是不是大不相同!(見(jiàn)下圖)

這是第一步:

20090316 dmwcj8wqr8egihdihssm4xm517 You look where they look

「根據(jù)眼球追蹤的研究,我們先會(huì)關(guān)注這個(gè)直望著我們的小萌孩」


20090316 ppjuax3s371pecmbt9cuakwanh You look where they look

「現(xiàn)在,小萌孩是仰望著右邊文字的,與此同時(shí),你是不是也把注意力轉(zhuǎn)移到右邊的內(nèi)容呢?」

這里是原始的研究報(bào)告 → usableworld.com,實(shí)踐證明,如果其他人往某個(gè)方向望,那么人們也會(huì)跟著望同一個(gè)方向(參照腦筋急轉(zhuǎn)彎:大街上有,有一個(gè)人仰著頭站著。旁邊的人以為天空中有什么好看的東西,都跟著往天上看,可天空中什么都沒(méi)有。你猜那人怎么說(shuō)?答案附最后..)基于這個(gè)特點(diǎn),我們可以利用人物配圖來(lái)呈現(xiàn)你想要讓用戶(hù)關(guān)注的內(nèi)容。

二、表格的最理想位置

一個(gè)來(lái)自UX Matters 的研究發(fā)現(xiàn),最理想的表格置放應(yīng)該是由上至下,因?yàn)槿藗兺ǔ?huì)適應(yīng)垂直的表格,這樣通常易于閱讀與填寫(xiě)。

三、人們對(duì)網(wǎng)站的信任度取決于設(shè)計(jì)質(zhì)量

第一印象很重要!栗子:

Fever

這是一個(gè)展示手機(jī)應(yīng)用的網(wǎng)站,可能我們不知道這個(gè)名為”fever”的APP究竟怎么樣,可是看到一個(gè)這么干凈圓潤(rùn)的用戶(hù)界面,對(duì)它的好感理應(yīng)大大提升了。

一個(gè)有趣的研究發(fā)現(xiàn),人們判斷一本書(shū)的根據(jù)往往是它的封面…同樣的,一個(gè)網(wǎng)站的布局、一致性、配色、排版等都在影響你的用戶(hù),他們會(huì)以此判斷你將提供的東西。因此,你要確切保證網(wǎng)站的風(fēng)格不僅要干凈漂亮,更要適合你的受眾用戶(hù)。

除了網(wǎng)站設(shè)計(jì),其他影響用戶(hù)對(duì)你的網(wǎng)站信任度的還有:網(wǎng)站內(nèi)容的質(zhì)量、出錯(cuò)的次數(shù)、更新的頻率、操作的便捷性和網(wǎng)站站住的人品。

四、大多數(shù)用戶(hù)不會(huì)滾動(dòng)瀏覽

一份來(lái)自Jakob Nielsen的研究顯示(研究在此 → nngroup)僅僅有23%的用戶(hù)第一次進(jìn)入網(wǎng)站時(shí)會(huì)滾動(dòng)瀏覽,這意味著有77%的用戶(hù)只會(huì)看那個(gè)區(qū)域(無(wú)須滾動(dòng)的可見(jiàn)頁(yè)面),更重要的是,只有16%的用戶(hù)會(huì)在第二次訪問(wèn)時(shí)繼續(xù)滾動(dòng)瀏覽。該數(shù)據(jù)突顯出,將關(guān)鍵的內(nèi)容放在首頁(yè)的突出位置是多么的重要!

不過(guò),這并不意味著你要填滿(mǎn)頁(yè)面的上部區(qū)域,全部塞在那兒只會(huì)讓內(nèi)容難懂,當(dāng)用戶(hù)看到太多的信息時(shí),他們不知道該從哪里開(kāi)始看。

讓我們看看優(yōu)秀范例:

basecamp

basecamp 在這折疊線(xiàn)以上(768px高),網(wǎng)站顯示了一個(gè)巨大的截圖,標(biāo)語(yǔ)、價(jià)值主張、呼吁行動(dòng)、客戶(hù)列表、視頻以及顯示特點(diǎn)的小圖。

這些內(nèi)容對(duì)于網(wǎng)站主頁(yè)是至關(guān)重要的,所以我們需要提供的核心要點(diǎn)有:

  • 網(wǎng)站的名稱(chēng)
  • 網(wǎng)站的價(jià)值主張(即用戶(hù)能得到什么,有什么好處,如何使用它)
  • 與用戶(hù)相關(guān)的導(dǎo)航設(shè)計(jì)

然而,自那時(shí)以來(lái),用戶(hù)習(xí)慣發(fā)生了很大的改變,最近的研究證明用戶(hù)很喜歡視差滾動(dòng)的效果,他們寧愿滾動(dòng)到頁(yè)面底部而不是翻頁(yè),對(duì)很多用戶(hù)來(lái)說(shuō),最重要的信息也不須置放在首頁(yè),所以有個(gè)好主意,我們可以利用留白空間的方式將頁(yè)面分成幾段。

五、可以獨(dú)特,但不要難懂

有一個(gè)獨(dú)特設(shè)計(jì)的網(wǎng)站當(dāng)然是好樣的,但當(dāng)你需要提高網(wǎng)站的可用性時(shí),建議你最好遵守大多數(shù)網(wǎng)站采取的方式。因?yàn)楫?dāng)人們?yōu)g覽一個(gè)新網(wǎng)站時(shí),他們會(huì)啟動(dòng)自身的「經(jīng)驗(yàn)?zāi)J健?/strong>去理解這個(gè)網(wǎng)站的使用,例如:藍(lán)色是鏈接的顏色,網(wǎng)站LOGO的位置、導(dǎo)航標(biāo)簽的下拉行為等。

Google

谷歌之所以所有的鏈接都是藍(lán)色是由緣由的,這個(gè)顏色適合大多數(shù)用戶(hù),也便于辨認(rèn)。

鏈接該選什么顏色?

  • 顏色夠深/淺,能夠與背景色有強(qiáng)烈地對(duì)比,易于區(qū)分
  • 不能與文字顏色相同,所以你可以看到,沒(méi)有鏈接是黑色的
  • 研究證明,選用藍(lán)色的鏈接是最好的,因?yàn)闉g覽器默認(rèn)的鏈接是藍(lán)色的。選擇其他顏色也沒(méi)問(wèn)題,但可能會(huì)影響用戶(hù)找到它

六、理想的搜索框?qū)挾仁?7個(gè)英語(yǔ)字符

什么是理想的搜索框?有的,Jakob Nielsen針對(duì)可用性進(jìn)行了一個(gè)搜索框?qū)挾鹊难芯浚l(fā)現(xiàn)大多數(shù)搜索框都太短了,搜索框太短帶來(lái)的問(wèn)題是盡管你可以輸入足夠長(zhǎng)的字符,但只有一部分文本字符可見(jiàn),這導(dǎo)致你很難檢查或者編輯。

這項(xiàng)研究發(fā)現(xiàn)搜索框的平均長(zhǎng)度是18個(gè)字符,27個(gè)字符的搜索框可能會(huì)太長(zhǎng)而很難適應(yīng),不過(guò),它能滿(mǎn)足90%的搜索。記住,你可以用像素和點(diǎn)設(shè)置寬度,而不僅僅是em。小技巧,一em的寬與高對(duì)應(yīng)一個(gè)英文字符”m”,所以你可以以此來(lái)檢測(cè)搜索框是否有27個(gè)英文字符的寬度。

Google search

谷歌的搜索框?qū)挾染b綽有余


Apple search

相對(duì)而言,蘋(píng)果就力不從心了。

通常來(lái)說(shuō),搜索框稍長(zhǎng)比稍短好,因?yàn)橛脩?hù)可以隨時(shí)查看、核實(shí)、修改。這條經(jīng)驗(yàn)非常簡(jiǎn)單,但是很不幸的是經(jīng)常被人們忽略。其實(shí)在輸入?yún)^(qū)域的一點(diǎn)改進(jìn)也會(huì)帶來(lái)更好地用戶(hù)體驗(yàn)

七、留白設(shè)計(jì)帶來(lái)更好的閱讀

大多數(shù)設(shè)計(jì)師都知道白色空間在段落、圖片、按鈕以及其他項(xiàng)目中的價(jià)值,白色空間可以讓各個(gè)項(xiàng)目自由地呼吸。當(dāng)然,我們也可以通過(guò)空間的排列(組合、減少)來(lái)制造白色空間。對(duì)于在頁(yè)面展示內(nèi)容間的聯(lián)系、建立層級(jí)關(guān)系非常重要。參照:我們?yōu)楹我谠O(shè)計(jì)中重視”留白”

The Netsetter

注意:文本的邊緣,段落的間隔這些細(xì)節(jié)都給閱讀帶來(lái)了舒適的感受。

白色空間讓頁(yè)面內(nèi)容的可讀性相應(yīng)提高。一個(gè)04年的研究表明,如果在段落與左右邊緣間能夠卓越地地利用留白,至少提高20%的閱讀舒適感。讀者可以更加容易地專(zhuān)注于閱讀。

八、不必進(jìn)行廣泛的用戶(hù)測(cè)試

Jakob Nielsen的研究顯示僅需要5個(gè)用戶(hù)就可以發(fā)現(xiàn)你的網(wǎng)站85%的問(wèn)題,如果有15人就能找出接近全部的問(wèn)題。

User tests

第一或第二個(gè)用戶(hù)會(huì)發(fā)現(xiàn)最大的問(wèn)題,其他人會(huì)確認(rèn)這些問(wèn)題并且發(fā)現(xiàn)其他小問(wèn)題,只有2個(gè)用戶(hù)能找到你網(wǎng)站50%的問(wèn)題,這意味著其實(shí)你不需花很多錢(qián)去得到一個(gè)好的結(jié)果。當(dāng)你開(kāi)始測(cè)試時(shí),你已經(jīng)有巨大的收獲了。任何小小的測(cè)試都比沒(méi)有好

九、有多少信息,就有多少青睞。

大多數(shù)介紹產(chǎn)品的頁(yè)面總是缺少足夠多的信息,有些僅僅能讓用戶(hù)掃一眼。這是個(gè)必須正視的問(wèn)題,因?yàn)楫a(chǎn)品的信息將幫助人們忖度購(gòu)買(mǎi)的決定。在可用性的研究中,貧乏的產(chǎn)品信息這個(gè)失敗的案例占據(jù)了8%甚至10%的網(wǎng)站。

iPod marketing page

Apple提供了詳細(xì)的產(chǎn)品介紹頁(yè)面,包括產(chǎn)品特點(diǎn)及規(guī)格等。請(qǐng)注意,不要讓一點(diǎn)難懂的技術(shù)細(xì)節(jié)停留在介紹頁(yè)面,給消費(fèi)者看的懂的。提供關(guān)鍵的信息,而不要臃腫,讓你的文案易于吸收。通過(guò)段落間隔和副標(biāo)題使介紹能夠一掃明了,給你的添加足夠的圖片,且不要使用行話(huà),否則你的用戶(hù)看不懂。

十、大多數(shù)用戶(hù)會(huì)無(wú)視廣告

Jakob Nielsen的研究表明大多數(shù)用戶(hù)會(huì)直接無(wú)視廣告的存在,如果他們?cè)谌褙炞⒌亻喿x文章,他們不會(huì)被廣告轉(zhuǎn)移注意力。

這條經(jīng)驗(yàn)要告訴你的是,人們會(huì)無(wú)視廣告,并且與任何看起來(lái)與廣告類(lèi)似的東西,即使它不是廣告。一些顏色風(fēng)格強(qiáng)烈的導(dǎo)航會(huì)讓他們誤以為是廣告,所以請(qǐng)仔細(xì)注意這個(gè)經(jīng)驗(yàn)。

flashden

 

在左側(cè)的方塊圖其實(shí)不是廣告,但是看起來(lái)與廣告很類(lèi)似,所以可能會(huì)被一些用戶(hù)誤解。

所以,廣告看起來(lái)最好能像文章,那樣人們才會(huì)去點(diǎn)擊它,也能給你帶來(lái)更多的收入,但無(wú)疑這將會(huì)損失你的用戶(hù)信任度,當(dāng)他們點(diǎn)擊廣告時(shí)他們以為會(huì)是文章,結(jié)果被你欺騙。因此當(dāng)你決定這樣做之前,考慮下這個(gè)交易:短期的利益與長(zhǎng)期的信任。

干貨福利:

在這些年,我們的雜志組為了確定最佳地設(shè)計(jì)方案,研究了很多案例。到目前為止,我們已經(jīng)發(fā)現(xiàn)了很多有趣的模式,是的,它們可以作為你的下個(gè)設(shè)計(jì)項(xiàng)目的指導(dǎo)方針,希望這些標(biāo)準(zhǔn)能予你方便。

  • 行高(px)÷ 英文字符大(px)=1.48

1.5通常被認(rèn)為是最經(jīng)典的排字方式,我們的研究決心為這個(gè)方式點(diǎn)個(gè)贊。幾乎沒(méi)有網(wǎng)站使用低于它的,那些高于這個(gè)標(biāo)準(zhǔn)的也會(huì)越來(lái)越少,特別是當(dāng)你看完這篇文章后。

  • 行長(zhǎng)(px)÷行高(px)=27.8

行的平均長(zhǎng)度是538.64px(排除邊緣),對(duì)于大多數(shù)還采用12px到13px大小字體的網(wǎng)站來(lái)說(shuō),這是最完美的安排。

  • 最佳的字/行是55——75

根據(jù)經(jīng)典的排版書(shū)籍,最佳的字/行應(yīng)該是55到75,但現(xiàn)在流行的75——85,童鞋們自由斟酌(英文字符)

  • 注冊(cè)頁(yè)面通常很簡(jiǎn)單,是為了避免人們分心

分享本文至:

日歷

鏈接

個(gè)人資料

存檔