網(wǎng)頁設(shè)計10大金律讓用戶為你留在網(wǎng)中央

2014-10-27    藍(lán)藍(lán)設(shè)計的小編

為了能更好地理解和應(yīng)用我將要談到的這些準(zhǔn)則,讓我們先來對用戶與網(wǎng)站的互動過程,用戶的思維方式和基本的行為模式做一個分析。

網(wǎng)站用戶如何思維?

簡單說來,網(wǎng)站用戶的思考模式與在商店里購買東西的購客差別不大。打開一個新網(wǎng)頁后,用戶會匆匆瀏覽一下,然后點(diǎn)擊一個能引起他們注意的鏈接或與其尋找的目標(biāo)相符的內(nèi)容。事實(shí)上,對網(wǎng)頁中的很大一部分內(nèi)容用戶看都不會看。

絕大多數(shù)用戶尋找的是他們感興趣的(或?qū)λ麄冇杏玫模┒帜艽蜷_的內(nèi)容。一旦遇到這樣的內(nèi)容,他們會立刻點(diǎn)擊。如果新打開的網(wǎng)頁不符合用戶的期待,那么他們會點(diǎn)擊“返回”按鈕,繼續(xù)瀏覽和搜索的過程。

? 用戶對網(wǎng)站內(nèi)容的質(zhì)量和可信度最為看重 。 如果一個網(wǎng)站能為用戶提供非常優(yōu)質(zhì)的內(nèi)容,那么用戶是愿意向網(wǎng)頁中的廣告和網(wǎng)站的設(shè)計缺陷做出妥協(xié)的。這也是為什么很多設(shè)計的不怎么樣的網(wǎng)站卻擁有巨大流量的原因。在用戶眼里,網(wǎng)站內(nèi)容往往比這些內(nèi)容的載體(設(shè)計)更為重要。

 用戶不閱讀,只瀏覽。

當(dāng)用戶打開一個網(wǎng)頁時,他們傾向于搜索某些特定內(nèi)容或察看能指引他們?yōu)g覽網(wǎng)頁內(nèi)容的關(guān)鍵信息點(diǎn)。

網(wǎng)頁設(shè)計10大金律讓用戶為你留在網(wǎng)中央

 網(wǎng)站用戶缺乏耐心,傾向于立即獲得結(jié)果。 這是個非常簡單的事實(shí):如果一個網(wǎng)站不能滿足用戶的期望,說明網(wǎng)站設(shè)計師的工作還不到位,而而公司就要承擔(dān)經(jīng)濟(jì)上的損失。網(wǎng)站設(shè)定的認(rèn)知過程越復(fù)雜,導(dǎo)航能力越差,用戶放棄使用該網(wǎng)站而尋求替代網(wǎng)站的幾率也就越高。

 用戶很難做出最佳選擇。

在尋找目標(biāo)內(nèi)容時,用戶的搜索方式常常是低效的。他們也很少把一個網(wǎng)頁中各部分的內(nèi)容都瀏覽一遍以找出最有用的內(nèi)容。相反,用戶通常會選擇第一個他們覺得有趣的內(nèi)容。當(dāng)用戶看到某個符合他們期待的內(nèi)容鏈接時,他們立即點(diǎn)開察看的幾率是非常高的。最優(yōu)化選擇需要花費(fèi)更多時間,用戶不愿忍受這種困難。而隨機(jī)選擇就簡單的多。

網(wǎng)頁設(shè)計10大金律讓用戶為你留在網(wǎng)中央 網(wǎng)頁設(shè)計10大金律讓用戶為你留在網(wǎng)中央

? 用戶憑直覺行事。 對來自設(shè)計師的信息,大多數(shù)用戶的反應(yīng)不是細(xì)讀,而是忽略。根據(jù)Steve Krug的說法,用戶這么的做的原因是因?yàn)樗麄儗υO(shè)計師毫不關(guān)心?!拔覀円怯X得一樣?xùn)|西好使,就會拿來用,至于它的工作原理是什么,我們才不關(guān)心呢,只要我們覺得好用就行。如果用戶認(rèn)為你是在設(shè)計廣告牌,那么就把廣告牌設(shè)計的好一些?!?/span>

 用戶樂于掌控網(wǎng)頁。 用戶傾向于控制自己的瀏覽進(jìn)程,傾向于認(rèn)可內(nèi)容一致性較高的網(wǎng)站。例如,他們不樂意看到毫無征兆地打開的新窗口,當(dāng)點(diǎn)擊“返回”按鈕時,他們要求能真的能回到剛瀏覽過的頁面:因此,如果可能的話,盡量別設(shè)置“在新窗口中打開”的選項。

1. 別讓用戶費(fèi)腦筋

根據(jù)Krug關(guān)于網(wǎng)站可用性“第一原則”的說法,好的網(wǎng)頁應(yīng)該是“一望即知,不言自明”的。當(dāng)設(shè)計師設(shè)計一個網(wǎng)頁時,他的工作應(yīng)該是消除問號--即需要用戶自己思索,權(quán)衡,選擇和決定的項目。

如果一個網(wǎng)站的導(dǎo)航和網(wǎng)站結(jié)構(gòu)設(shè)置不合理,導(dǎo)致網(wǎng)站的可用性不高,那么就會留下很多問號,用戶在使用時,就容易被被網(wǎng)站的運(yùn)行方式弄糊涂,甚至從A點(diǎn)轉(zhuǎn)到B點(diǎn)都成問題。而清晰的網(wǎng)站架構(gòu),簡潔的視覺引導(dǎo)方式,辨識度強(qiáng)的導(dǎo)航鏈接都在用戶搜尋目標(biāo)內(nèi)容時提供極大的幫助。

網(wǎng)頁設(shè)計10大金律讓用戶為你留在網(wǎng)中央

讓我們來看個例子。Beyondis.co.uk聲稱他們“超越渠道,超越產(chǎn)品,超越銷售”。但他們究竟想說什么呢?由于用戶傾向于以“F”形模式瀏覽網(wǎng)站,網(wǎng)頁完全打開后,這三句話很可能是用戶留意到的網(wǎng)頁元素。

雖然這個網(wǎng)站本身還算簡潔易用,但如果用戶想理解這三句話,就得進(jìn)一步搜索信息。這種情況就是一個非必要的問號。網(wǎng)頁設(shè)計師的任務(wù)之一就是將問號的數(shù)量降低至0.對于這三句話的意思,該網(wǎng)站在主頁的右側(cè)以視圖的方式給出了解釋。如果能把這兩部分內(nèi)容調(diào)換一下位置的話,可用性就會增強(qiáng)很多。

網(wǎng)頁設(shè)計10大金律讓用戶為你留在網(wǎng)中央

ExpressionEngine網(wǎng)站的布局方式與 Beyondi很接近,但卻沒有留下“不必要的問號”。而且這個網(wǎng)頁中的宣傳性文字也有其功能:當(dāng)用戶試用該網(wǎng)站的服務(wù)或下載免費(fèi)版本時,這些文字為他們提供了相應(yīng)的選擇。

降低網(wǎng)站的認(rèn)知難度能讓用戶更好地理解如何使用網(wǎng)站。如果你能做到這一點(diǎn),用戶便能體會到你所設(shè)計的網(wǎng)站的易用性和由此帶來的便利。如果一個網(wǎng)站讓用戶覺得很迷惑的話,用戶自然也不會使用它。

2. 別考驗(yàn)用戶的耐心

如果你想在任何設(shè)計項目中為用戶提供服務(wù)或工具,請力求把對用戶的要求降到。一個測試或服務(wù)對用戶要求的條件越少,它被用戶使用的幾率也就越高。新用戶尤其如此。他們通常只想體驗(yàn)一下你提供的服務(wù),而不愿為了獲得一個他們也許永遠(yuǎn)用不著的賬號去填寫一連串的表格。盡量讓用戶自行瀏覽和了解你的服務(wù),別強(qiáng)迫他們提供個人信息。為了體驗(yàn)一下網(wǎng)站的服務(wù),用戶就得留下自己的郵箱地址,這種做法并不合理。

正如37Signals團(tuán)隊的程序員Ryan Singerstates所說,如果用戶在使用過你提供的服務(wù)之后,你再要求他們提供郵箱地址,他們沒準(zhǔn)兒會積極配合,因?yàn)檫@時用戶已經(jīng)對你的服務(wù)有了了解,也期待得到更多回饋。

網(wǎng)頁設(shè)計10大金律讓用戶為你留在網(wǎng)中央

Stikkit網(wǎng)站的用戶體驗(yàn)就做的非常好,它幾乎不要求用戶提供任何信息,給用戶一種寬松愉悅的感覺。 這不正是網(wǎng)頁設(shè)計師希望用戶體驗(yàn)的感覺嗎?

網(wǎng)頁設(shè)計10大金律讓用戶為你留在網(wǎng)中央

當(dāng)然,設(shè)計師也想從用戶那里獲得信息。所以該網(wǎng)站的用戶三十秒內(nèi)就能完成注冊--注冊步驟是以水平并列的方式展開的,用戶連下拉網(wǎng)頁的步驟都省了。

理想的網(wǎng)頁應(yīng)該是沒有任何障礙的,它不會強(qiáng)迫用戶先訂閱或注冊才能體驗(yàn)網(wǎng)站的服務(wù)。即使只是注冊一下也足以使用戶感到不便,這會降低他們對網(wǎng)頁的興趣,從而拉低網(wǎng)站的瀏覽量。

3. 調(diào)動用戶的注意力

通常網(wǎng)站的內(nèi)容有靜態(tài)的,也有動態(tài)的,某些互動元素比另一些更能吸引用戶的注意力。我們都了解,圖象比文字更能吸引目光,正如在文字中,加粗加黑的字體比普通字體更引人注意一樣。

人眼觀察世界的方式是高度非線性的,這也為什么網(wǎng)頁中的線條,圖案和動態(tài)畫面能立即被用戶所注意。頁面中的動態(tài)廣告之所以如此煩人且分散我們的注意力也是這個原理,但是從市場營銷的角度來看,在吸引用戶關(guān)注上,視頻彈窗確實(shí)是一種非常有效的手段。

網(wǎng)頁設(shè)計10大金律讓用戶為你留在網(wǎng)中央

Humanized.com網(wǎng)站近乎完美地運(yùn)用了注意力法則。 這個頁面中用戶唯一立即可見的內(nèi)容是“免費(fèi)”(FREE)的大字,它以一種迷人且漂亮的方式呈現(xiàn),但本身也是一種非常有用的信息。下面的文字則為用戶如何獲得“免費(fèi)”的產(chǎn)品提供了足夠詳細(xì)的說明。

巧妙地在網(wǎng)頁中使用簡潔的視覺元素,能有效地把用戶的目光引向網(wǎng)頁中的特定區(qū)域,用戶的注意力從A點(diǎn)轉(zhuǎn)向B點(diǎn),而他們很可能對此還毫無察覺呢。用戶心中的問號越少,他們對網(wǎng)站的認(rèn)同度就越強(qiáng),對網(wǎng)頁所宣傳的公司的信任度也就越高。換句話說:用戶對網(wǎng)站的內(nèi)容認(rèn)知越容易,用戶體驗(yàn)就越好,而用戶體驗(yàn)正是網(wǎng)站可用性的第一要素。

4. 力求突出特色

當(dāng)代設(shè)計常因?yàn)檫^度使用視覺圖象和大圖標(biāo)按鈕而飽受批評。但是純粹從設(shè)計的角度來看,這并不全是壞事。事實(shí)上,這些視覺元素能夠以非常簡單而友好的方式來呈現(xiàn)網(wǎng)站內(nèi)容,也是極為有效的導(dǎo)航手段。

網(wǎng)頁設(shè)計10大金律讓用戶為你留在網(wǎng)中央

Dibusoft.com網(wǎng)站是將的視覺元素與清晰的網(wǎng)站架構(gòu)相結(jié)合的極佳范例。該網(wǎng)站有9個主要的導(dǎo)航選項,網(wǎng)頁布局也非常簡潔明了。只是顏色搭配上有點(diǎn)偏淡。在UI設(shè)計中,讓用戶能清楚地理解網(wǎng)站提供的各種功能是非常重要的一個設(shè)計原則。至于如何去實(shí)現(xiàn)這一點(diǎn),可以有很多不同的方法。最重要的是設(shè)法讓用戶更好地理解網(wǎng)站的內(nèi)容,并能在使用網(wǎng)站時獲得輕松愉悅的用戶體驗(yàn)。

5. 注意文字風(fēng)格

網(wǎng)頁文字與印刷文字的行文方式有所不同,所以網(wǎng)頁中的文字內(nèi)容一定要考慮到網(wǎng)站用戶的偏好和瀏覽習(xí)慣。促銷推廣類的內(nèi)容一般不會被認(rèn)真閱讀。沒有配圖的長篇大論,加黑加粗的主題詞和斜體字常被用戶略過。浮夸花哨的文字內(nèi)容很難引起用戶的興趣。

最好平實(shí)一點(diǎn)。請盡量避免使用油腔滑調(diào)的名詞,充滿營銷氣息的名詞和技術(shù)性太強(qiáng)的名詞。舉個例子,如果你介紹一項服務(wù)時,希望用戶能注冊一個賬號,那么簡單的“注冊”就比“即刻開始!”好一些,而“即刻開始!”又比“請體驗(yàn)我們的服務(wù)”之類的詞更好一些。

網(wǎng)頁設(shè)計10大金律讓用戶為你留在網(wǎng)中央

Eleven2.com網(wǎng)站便深諳此道。沒有輕佻的宣傳,沒有花哨的噱頭。只有用戶最想知道的內(nèi)容:一個明確的價格。

一些可行的策略:

? 盡可能使用簡短,明白的語句(越能點(diǎn)明重點(diǎn)越好)。

? 布局要一眼就能看清楚(可適當(dāng)為內(nèi)容分類或使用多級標(biāo)題,視覺元素或編號格式等手段來打破大段文字可能造成的枯燥感)。

? 語言的風(fēng)格盡量平實(shí),客觀(促銷信息沒必要渲染得像廣告一樣。客觀扼要地列出用戶應(yīng)選擇你的產(chǎn)品,網(wǎng)站或服務(wù)的原因即可)。

6. 簡約而純粹

設(shè)計師應(yīng)該把“保持簡單”當(dāng)成網(wǎng)頁設(shè)計的主要原則和目標(biāo)。普通用戶訪問一個網(wǎng)站很少是為了欣賞網(wǎng)站的設(shè)計,多數(shù)情況下他們是為了尋找有效的信息,設(shè)計只是一個載體。因此設(shè)計師應(yīng)該力求簡潔而不是復(fù)雜。

網(wǎng)頁設(shè)計10大金律讓用戶為你留在網(wǎng)中央

Crcbus網(wǎng)站就很好地體現(xiàn)了簡潔的原則。 你可能不認(rèn)識網(wǎng)頁中的意大利文,但你一定能清楚地認(rèn)出導(dǎo)航按鈕,標(biāo)題,內(nèi)容區(qū)和腳注。甚至網(wǎng)頁中的圖標(biāo)都能傳遞出信息。當(dāng)你把鼠標(biāo)置于圖標(biāo)之上時,旁邊會出現(xiàn)相應(yīng)的提示文字。

從網(wǎng)站用戶的角度看,最好的網(wǎng)站在內(nèi)容上應(yīng)該極為純粹,除了他正在使用或?qū)ふ业膬?nèi)容外,不應(yīng)該再有任何廣告或無關(guān)內(nèi)容。這也是為什么一個文字內(nèi)容設(shè)計良好的網(wǎng)頁常能帶來優(yōu)越的用戶體驗(yàn)的原因。

網(wǎng)頁設(shè)計10大金律讓用戶為你留在網(wǎng)中央

Finch網(wǎng)站在清楚地傳達(dá)信息的同時,也為用戶提供了多種選擇,并且沒有添加任何無關(guān)的多余內(nèi)容。 

7.  別怕負(fù)空間

負(fù)空間的重要性怎么強(qiáng)調(diào)都不過分。負(fù)空間不僅能簡化用戶對網(wǎng)站的認(rèn)知過程,更有利于用戶讀取呈現(xiàn)于屏幕上的信息。當(dāng)一個新用戶打開一個網(wǎng)頁時,他或她要做的第一件事就是瀏覽網(wǎng)頁并把網(wǎng)頁上的內(nèi)容劃分為自己能夠理解的,不同的信息段。

如果一個網(wǎng)站的布局很復(fù)雜的話,用戶瀏覽,分析,使用這個網(wǎng)站的過程就會相當(dāng)困難。在為網(wǎng)頁中不同的設(shè)計元素劃分區(qū)域時,你可以使用明顯的分隔線,也可以利用負(fù)空間,通常負(fù)空間的效果要更好一些。分層式設(shè)計也可以有效地降低網(wǎng)站的復(fù)雜程度(所謂的“西蒙法則”):設(shè)計師給用戶造成的視覺層次感越強(qiáng),用戶就越容易理解網(wǎng)站的內(nèi)容。

網(wǎng)頁設(shè)計10大金律讓用戶為你留在網(wǎng)中央

負(fù)空間值得好好利用。Cameron.io網(wǎng)站的設(shè)計就是把負(fù)空間原理作為主要設(shè)計準(zhǔn)則的。網(wǎng)站內(nèi)容被放在了應(yīng)有的突出位置,網(wǎng)站的整體布局看起來也非常均衡。

8. 發(fā)揮“視覺語言”的魔力

Aaron Marcus在他一篇以視覺傳達(dá)為主題的論文中,就所謂的“視覺語言”--也就是用戶看到網(wǎng)站內(nèi)容---的應(yīng)用問題提出了三個關(guān)鍵原則:

? 組織:盡量為用戶提供清晰而一致的網(wǎng)站架構(gòu)。內(nèi)容的一致性,網(wǎng)站在屏幕上呈現(xiàn)的布局,網(wǎng)站內(nèi)容之間的銜接,導(dǎo)航的易用性等都是與組織有關(guān)的重要概念。設(shè)計師在設(shè)計一個網(wǎng)站時遵循的原則應(yīng)適用于這個網(wǎng)站的所有元素。

? 節(jié)儉:指的是盡量以最少的視覺元素傳達(dá)出最多的信息量。這個原則包含四個要點(diǎn):簡潔,清晰,顯著,強(qiáng)調(diào)。簡潔的意思是視覺傳達(dá)中應(yīng)該只采用最重要的元素。清晰的意思是要保證所有元素都意義明確,沒有歧義。顯著的意思是所有視覺元素的重要特性都應(yīng)該十分鮮明。強(qiáng)調(diào)的意思是用于視覺傳達(dá)的一切重要元素都有很高的辨識度。

? 傳達(dá):根據(jù)用戶的感受和理解能力來決定網(wǎng)站的呈現(xiàn)方式。為了取得理想的視覺傳達(dá)效果,設(shè)計師在考慮UI時,必須把握網(wǎng)頁的穩(wěn)定性,易用性,字體和顏色等不同元素之間的平衡關(guān)系。遵循最大化法則:任何3種字體的總大小不得超過3磅---意即每行文字最多只能使用18個單詞或50-80個字符。

9. 與慣例為友

按常規(guī)的方式來安排設(shè)計元素并不意味著你設(shè)計的網(wǎng)站一定會平庸無聊。事實(shí)上,遵循常規(guī)常常是最有效的方式,因?yàn)樗档土擞脩魧W(wǎng)站的認(rèn)知難度。舉例來說,如果所有網(wǎng)站的RSS的視覺呈現(xiàn)方式都各不相同,那對于追求網(wǎng)站可用性的設(shè)計師來說將是一個噩夢。無論是組織數(shù)據(jù)(如整理文件夾)還是從事銷售活動(如商品的擺放),我們遵循的其實(shí)都是在日常生活中早已習(xí)慣的一些原則。

遵循常規(guī)原則行事反倒能更容易贏得用戶的信賴,同時也能建立自己的信譽(yù)。一定要尊重用戶的期望---站在用戶的角度去思考,什么樣的導(dǎo)航設(shè)計,內(nèi)容結(jié)構(gòu)或搜索方式等等才是他們想要的。(更多這方面的建議可以參考Nielsen的Usability Alertbox)。

網(wǎng)頁設(shè)計10大金律讓用戶為你留在網(wǎng)中央

讓我們來做個測試:如果你用Babelfish之類的翻譯軟件將圖中的亞馬遜頁面翻譯成日文(假定你的目標(biāo)用戶不懂日文),并且要求用戶試著在這個日文網(wǎng)頁中尋找某樣?xùn)|西,如果你很好地遵循了常規(guī)的設(shè)計原則,而沒有對網(wǎng)頁做太大改動,那么接受測試的用戶哪怕不懂日文,大概也能找到這樣?xùn)|西。

Steve Krug也建議說,除非你真正確信你的創(chuàng)意足夠好時再去創(chuàng)新,否則按常規(guī)行事才是上策。

10. 測試應(yīng)從早從多

“測試從早從多”的原則應(yīng)貫徹于每個網(wǎng)站設(shè)計項目之中,因?yàn)榫W(wǎng)站易用性測試常常能暴露出設(shè)計和網(wǎng)站布局等方面存在的重大問題。

不要在設(shè)計后期才開始測試,也不要僅針對一些無關(guān)痛癢的細(xì)節(jié)測試,更不要為了錯誤的目的而測試。拿“從早測試”來說吧,你需要理解設(shè)計師的大多數(shù)決定都是“片面”的,他無法斷言說某些網(wǎng)頁布局方案就一定比另一些好,因?yàn)樗獜奶囟ǖ慕嵌热シ治鲞@些設(shè)計方案(如客戶的要求,其他利益相關(guān)者及項目預(yù)算等因素)。 請仔細(xì)考慮以下建議:

? 根據(jù)Steve Krug的說法,哪怕測試一個用戶也百分之百比不做測試強(qiáng),寧可在早期測試一個用戶,也不要等到晚期去測試五十個用戶。根據(jù)玻姆第一定律,在制定設(shè)計方案和早期設(shè)計活動中錯誤出現(xiàn)的頻率最高,而設(shè)計越接近后期,修正的代價也就越大。

? 測試是個不斷重復(fù)的過程。這意味著你需要不斷設(shè)計,不斷測試,不斷修正,再重新測試。在這個過程中,你很可能會發(fā)現(xiàn)第一輪測試中被忽視的問題,你沒發(fā)現(xiàn)這些問題可能是因?yàn)橛脩粼诘谝惠啘y試中被遇到的其他問題纏住了。

? 網(wǎng)站易用性方面的測試永遠(yuǎn)會為你提供有益的幫助。因?yàn)闇y試的結(jié)果,要么是你發(fā)現(xiàn)了設(shè)計中存在的問題,要么是你發(fā)現(xiàn)沒有什么大問題,這兩種結(jié)果都是你繼續(xù)展開項目的依據(jù)。

? 按照溫伯格的說法,讓一個程序員測試自己編寫的程序并不合適。這句話同樣也適用于設(shè)計領(lǐng)域。當(dāng)一個設(shè)計師一連幾周都花在同一個網(wǎng)站項目的設(shè)計上時,他已經(jīng)無法再用最初的眼光來評價自己的項目了。因?yàn)檫@時他已經(jīng)熟悉了這個網(wǎng)站的建設(shè)和運(yùn)行方式--他已經(jīng)對這個項目有了自己的見解,而獨(dú)立的測試者或用戶卻沒有這種成見。

永遠(yuǎn)記住:如果你想設(shè)計一個好網(wǎng)站,就得去不斷測試。

分享本文至:

日歷

鏈接

個人資料

存檔