|
我想每個(gè)人都會贊成，網(wǎng)站的可用性是它能否受歡迎的一個(gè)重要方面,，無論你進(jìn)行的是公司網(wǎng)站,、在線商店還是其他，讓你的界面變得容易操控,，使用時(shí)令人舒服是關(guān)鍵,，近幾年已經(jīng)有很多針對網(wǎng)站界面優(yōu)化的研究，而且這些研究的成果對于提高網(wǎng)站可用性是非常有價(jià)值的?，F(xiàn)在這里有10個(gè)超實(shí)用的經(jīng)驗(yàn)分享，相信我,，這些建議會極大地提高你那個(gè)網(wǎng)站的用戶體驗(yàn)，讓用戶愛上你的網(wǎng)站! 這是一篇09年的老文章咯,，但是這些技巧和經(jīng)驗(yàn)并沒有過時(shí),，所以我們依然翻譯出來,，推薦您仔細(xì)閱讀。 一,、善用人物配圖,，使用戶專注于你想呈現(xiàn)的 當(dāng)進(jìn)入你的網(wǎng)站,，我們會本能地關(guān)注網(wǎng)站上人物圖片中的臉和眼睛，這倒是為我們提供了一個(gè)想法,，是不是可以用人物配圖吸引小伙伴的注意力呢?當(dāng)然,，但這僅是第一步，我們還可以這樣做,，你瞧,，是不是大不相同!(見下圖) 這是第一步：
「根據(jù)眼球追蹤的研究,，我們先會關(guān)注這個(gè)直望著我們的小萌孩」
「現(xiàn)在,，小萌孩是仰望著右邊文字的，與此同時(shí),，你是不是也把注意力轉(zhuǎn)移到右邊的內(nèi)容呢?」 這里是原始的研究報(bào)告 → usableworld.com,，實(shí)踐證明，如果其他人往某個(gè)方向望,，那么人們也會跟著望同一個(gè)方向(參照腦筋急轉(zhuǎn)彎：大街上有,，有一個(gè)人仰著頭站著。旁邊的人以為天空中有什么好看的東西,，都跟著往天上看,，可天空中什么都沒有。你猜那人怎么說?答案附最后..)基于這個(gè)特點(diǎn),，我們可以利用人物配圖來呈現(xiàn)你想要讓用戶關(guān)注的內(nèi)容,。 二、表格的最理想位置 一個(gè)來自UX Matters 的研究發(fā)現(xiàn),，最理想的表格置放應(yīng)該是由上至下,，因?yàn)槿藗兺ǔm應(yīng)垂直的表格，這樣通常易于閱讀與填寫,。 三,、人們對網(wǎng)站的信任度取決于設(shè)計(jì)質(zhì)量 第一印象很重要!栗子：
這是一個(gè)展示手機(jī)應(yīng)用的網(wǎng)站，可能我們不知道這個(gè)名為”fever”的APP究竟怎么樣,，可是看到一個(gè)這么干凈圓潤的用戶界面,，對它的好感理應(yīng)大大提升了。 一個(gè)有趣的研究發(fā)現(xiàn),，人們判斷一本書的根據(jù)往往是它的封面…同樣的,，一個(gè)網(wǎng)站的布局、一致性,、配色,、排版等都在影響你的用戶，他們會以此判斷你將提供的東西,。因此,，你要確切保證網(wǎng)站的風(fēng)格不僅要干凈漂亮,，更要適合你的受眾用戶。 除了網(wǎng)站設(shè)計(jì),，其他影響用戶對你的網(wǎng)站信任度的還有：網(wǎng)站內(nèi)容的質(zhì)量,、出錯(cuò)的次數(shù)、更新的頻率,、操作的便捷性和網(wǎng)站站住的人品。 四,、大多數(shù)用戶不會滾動瀏覽 一份來自Jakob Nielsen的研究顯示(研究在此 → nngroup)僅僅有23%的用戶第一次進(jìn)入網(wǎng)站時(shí)會滾動瀏覽,，這意味著有77%的用戶只會看那個(gè)區(qū)域(無須滾動的可見頁面)，更重要的是,，只有16%的用戶會在第二次訪問時(shí)繼續(xù)滾動瀏覽,。該數(shù)據(jù)突顯出，將關(guān)鍵的內(nèi)容放在首頁的突出位置是多么的重要! 不過,，這并不意味著你要填滿頁面的上部區(qū)域,，全部塞在那兒只會讓內(nèi)容難懂，當(dāng)用戶看到太多的信息時(shí),，他們不知道該從哪里開始看,。 讓我們看看優(yōu)秀范例：
basecamp 在這折疊線以上(768px高)，網(wǎng)站顯示了一個(gè)巨大的截圖,，標(biāo)語,、價(jià)值主張、呼吁行動,、客戶列表,、視頻以及顯示特點(diǎn)的小圖。 這些內(nèi)容對于網(wǎng)站主頁是至關(guān)重要的,，所以我們需要提供的核心要點(diǎn)有：
然而,，自那時(shí)以來,，用戶習(xí)慣發(fā)生了很大的改變，最近的研究證明用戶很喜歡視差滾動的效果,，他們寧愿滾動到頁面底部而不是翻頁,，對很多用戶來說，最重要的信息也不須置放在首頁,，所以有個(gè)好主意,，我們可以利用留白空間的方式將頁面分成幾段。 五,、可以獨(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í),，他們會啟動自身的「經(jīng)驗(yàn)?zāi)Ｊ健谷ダ斫膺@個(gè)網(wǎng)站的使用，例如：藍(lán)色是鏈接的顏色,，網(wǎng)站LOGO的位置,、導(dǎo)航標(biāo)簽的下拉行為等。
谷歌之所以所有的鏈接都是藍(lán)色是由緣由的,，這個(gè)顏色適合大多數(shù)用戶,，也便于辨認(rèn)。 鏈接該選什么顏色? 顏色夠深/淺,，能夠與背景色有強(qiáng)烈地對比,，易于區(qū)分 不能與文字顏色相同，所以你可以看到,，沒有鏈接是黑色的 研究證明,，選用藍(lán)色的鏈接是最好的，因?yàn)闉g覽器默認(rèn)的鏈接是藍(lán)色的,。選擇其他顏色也沒問題,，但可能會影響用戶找到它 六、理想的搜索框?qū)挾仁?7個(gè)英語字符 什么是理想的搜索框?有的,，Jakob Nielsen針對可用性進(jìn)行了一個(gè)搜索框?qū)挾鹊难芯?，發(fā)現(xiàn)大多數(shù)搜索框都太短了，搜索框太短帶來的問題是盡管你可以輸入足夠長的字符,，但只有一部分文本字符可見,，這導(dǎo)致你很難檢查或者編輯。 這項(xiàng)研究發(fā)現(xiàn)搜索框的平均長度是18個(gè)字符,，27個(gè)字符的搜索框可能會太長而很難適應(yīng),，不過，它能滿足90%的搜索,。記住,，你可以用像素和點(diǎn)設(shè)置寬度，而不僅僅是em,。小技巧,，一em的寬與高對應(yīng)一個(gè)英文字符”m”,，所以你可以以此來檢測搜索框是否有27個(gè)英文字符的寬度,。
谷歌的搜索框?qū)挾染b綽有余
相對而言，蘋果就力不從心了,。 通常來說,，搜索框稍長比稍短好,，因?yàn)橛脩艨梢噪S時(shí)查看,、核實(shí)、修改,。這條經(jīng)驗(yàn)非常簡單,，但是很不幸的是經(jīng)常被人們忽略。其實(shí)在輸入?yún)^(qū)域的一點(diǎn)改進(jìn)也會帶來更好地用戶體驗(yàn) 七,、留白設(shè)計(jì)帶來更好的閱讀 大多數(shù)設(shè)計(jì)師都知道白色空間在段落,、圖片、按鈕以及其他項(xiàng)目中的價(jià)值,，白色空間可以讓各個(gè)項(xiàng)目自由地呼吸,。當(dāng)然，我們也可以通過空間的排列(組合,、減少)來制造白色空間。對于在頁面展示內(nèi)容間的聯(lián)系,、建立層級關(guān)系非常重要,。
注意：文本的邊緣，段落的間隔這些細(xì)節(jié)都給閱讀帶來了舒適的感受,。 白色空間讓頁面內(nèi)容的可讀性相應(yīng)提高,。一個(gè)04年的研究表明，如果在段落與左右邊緣間能夠卓越地地利用留白,，至少提高20%的閱讀舒適感,。讀者可以更加容易地專注于閱讀。 八,、不必進(jìn)行廣泛的用戶測試 Jakob Nielsen的研究顯示僅需要5個(gè)用戶就可以發(fā)現(xiàn)你的網(wǎng)站85%的問題,，如果有15人就能找出接近全部的問題。
第一或第二個(gè)用戶會發(fā)現(xiàn)最大的問題,，其他人會確認(rèn)這些問題并且發(fā)現(xiàn)其他小問題,，只有2個(gè)用戶能找到你網(wǎng)站50%的問題，這意味著其實(shí)你不需花很多錢去得到一個(gè)好的結(jié)果,。當(dāng)你開始測試時(shí),，你已經(jīng)有巨大的收獲了。任何小小的測試都比沒有好 九,、有多少信息,，就有多少青睞。 大多數(shù)介紹產(chǎn)品的頁面總是缺少足夠多的信息,，有些僅僅能讓用戶掃一眼,。這是個(gè)必須正視的問題，因?yàn)楫a(chǎn)品的信息將幫助人們忖度購買的決定,。在可用性的研究中,，貧乏的產(chǎn)品信息這個(gè)失敗的案例占據(jù)了8%甚至10%的網(wǎng)站,。
Apple提供了詳細(xì)的產(chǎn)品介紹頁面,，包括產(chǎn)品特點(diǎn)及規(guī)格等,。請注意，不要讓一點(diǎn)難懂的技術(shù)細(xì)節(jié)停留在介紹頁面,，給消費(fèi)者看的懂的,。 提供關(guān)鍵的信息，而不要臃腫,，讓你的文案易于吸收,。通過段落間隔和副標(biāo)題使介紹能夠一掃明了，給你的添加足夠的圖片,，且不要使用行話,，否則你的用戶看不懂。 十,、大多數(shù)用戶會無視廣告 Jakob Nielsen的研究表明大多數(shù)用戶會直接無視廣告的存在,，如果他們在全神貫注地閱讀文章，他們不會被廣告轉(zhuǎn)移注意力,。 這條經(jīng)驗(yàn)要告訴你的是,，人們會無視廣告，并且與任何看起來與廣告類似的東西,，即使它不是廣告,。一些顏色風(fēng)格強(qiáng)烈的導(dǎo)航會讓他們誤以為是廣告，所以請仔細(xì)注意這個(gè)經(jīng)驗(yàn),。
在左側(cè)的方塊圖其實(shí)不是廣告,，但是看起來與廣告很類似，所以可能會被一些用戶誤解,。 所以,，廣告看起來最好能像文章，那樣人們才會去點(diǎn)擊它,，也能給你帶來更多的收入,，但無疑這將會損失你的用戶信任度，當(dāng)他們點(diǎn)擊廣告時(shí)他們以為會是文章,，結(jié)果被你欺騙,。因此當(dāng)你決定這樣做之前，考慮下這個(gè)交易：短期的利益與長期的信任,。 干貨福利： 在這些年,，我們的雜志組為了確定最佳地設(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è)贊,。幾乎沒有網(wǎng)站使用低于它的,，那些高于這個(gè)標(biāo)準(zhǔn)的也會越來越少，特別是當(dāng)你看完這篇文章后,。 行長(px)÷行高(px)=27.8 行的平均長度是538.64px(排除邊緣),，對于大多數(shù)還采用12px到13px大小字體的網(wǎng)站來說，這是最完美的安排,。 最佳的字/行是55——75 根據(jù)經(jīng)典的排版書籍,，最佳的字/行應(yīng)該是55到75，但現(xiàn)在流行的75——85,，童鞋們自由斟酌(英文字符) 注冊頁面通常很簡單,，是為了避免人們分心
|
|
|
