出錯(cuò)不尷尬:怎樣設(shè)計(jì)404頁(yè)面快速提升用戶體驗(yàn)?

404頁(yè)面是用戶在瀏覽某個(gè)不存在或已刪除的網(wǎng)頁(yè)時(shí),服務(wù)器無(wú)法正常提供信息所返回的頁(yè)面。在網(wǎng)站中設(shè)置404頁(yè)面很有必要,404頁(yè)面可以避免失效的URL網(wǎng)址或者說(shuō)死鏈影響網(wǎng)站的收錄排名,有利于網(wǎng)站在搜索引擎上好感度的提高,為SEO優(yōu)化掃清障礙。除此以外,404頁(yè)面還肩負(fù)著用戶體驗(yàn)的重任。雖然訪客在尋找想要信息的過(guò)程中遇到了頁(yè)面不存在或鏈接錯(cuò)誤的問(wèn)題,但巧妙的頁(yè)面設(shè)計(jì)可以引導(dǎo)用戶瀏覽其他頁(yè)面,讓他們?cè)诰W(wǎng)站獲得較好的用戶體驗(yàn),從而提升用戶轉(zhuǎn)化率。小飛今天就是來(lái)介紹一下怎樣做好404頁(yè)面的設(shè)計(jì)的以及它的心理學(xué)依據(jù)、一些富有創(chuàng)意的404頁(yè)面實(shí)例。一起來(lái)看看吧!
在介紹404頁(yè)面的有效設(shè)計(jì)方法之前,小飛先帶大家看看它背后的心理學(xué)依據(jù):峰終定律。
峰終定律
峰終定律是指人們對(duì)于某項(xiàng)體驗(yàn)的記憶是由兩個(gè)因素決定的:高峰(無(wú)論是正向的還是負(fù)向的)時(shí)和結(jié)束時(shí)的感覺(jué),而整個(gè)過(guò)程中好與不好體驗(yàn)的比重、好與不好體驗(yàn)的時(shí)間長(zhǎng)短對(duì)于記憶幾乎沒(méi)有影響。這個(gè)概念的出現(xiàn)給經(jīng)濟(jì)學(xué)開(kāi)辟了新的道路,它的發(fā)現(xiàn)者也因此獲得了2002年的諾貝爾經(jīng)濟(jì)學(xué)獎(jiǎng)。不少管理者都使用峰終定律重點(diǎn)管理公司服務(wù)的"峰-終體驗(yàn)",峰終定律還廣泛地應(yīng)用于我們的生活之中:為什么電影的高潮總是在后?為什么我們后吃甜點(diǎn)?
說(shuō)了這么多,相信你對(duì)峰終定律也有了一定的了解。其實(shí)峰終定律還可以應(yīng)用在404頁(yè)面中提升用戶體驗(yàn)。根據(jù)峰終定律,即使訪客在瀏覽網(wǎng)頁(yè)的過(guò)程中看見(jiàn)404頁(yè)面、無(wú)法獲取想要的信息時(shí)會(huì)產(chǎn)生挫敗感,但只要這不是"終",就不會(huì)影響他們的整體體驗(yàn)。我們可以好好設(shè)計(jì)404頁(yè)面,引領(lǐng)訪客瀏覽其他網(wǎng)頁(yè),找到想要的信息或是新的興趣點(diǎn),將404頁(yè)面可能的"終"變成網(wǎng)頁(yè)瀏覽的"峰",這樣就能提升用戶的體驗(yàn),給訪客留下比較好的印象。

有效設(shè)計(jì)404頁(yè)面的方法:
1.創(chuàng)建相關(guān)內(nèi)容的鏈接
雖然訪客在404頁(yè)面沒(méi)有及時(shí)獲取想要的內(nèi)容,但這并不是瀏覽體驗(yàn)的終點(diǎn)。在訪客走進(jìn)死胡同時(shí),我們可以給他們以指引,在404頁(yè)面提供一些相關(guān)內(nèi)容的鏈接,就像下圖Airbnb在404頁(yè)面放置了"主頁(yè)"、"幫助"、"查找"等諸多選項(xiàng),讓用戶有"柳暗花明又一村"的感覺(jué)。沒(méi)準(zhǔn),用戶能在其他頁(yè)面找到自己想要的信息,又或是對(duì)某個(gè)頁(yè)面產(chǎn)生興趣,從而在網(wǎng)站上停留更長(zhǎng)時(shí)間,這不就是我們想要達(dá)成的目的嗎?

2.利用贈(zèng)品等方式獲取訪客郵箱
即使訪客現(xiàn)在沒(méi)有找到想要的信息,我們也可以將他們轉(zhuǎn)化為潛在的客戶。怎樣將訪客轉(zhuǎn)化為潛在的用戶?以下圖為例,只要用戶輸入郵箱地址,他們就可以免費(fèi)獲得很多設(shè)計(jì)文件和模板等,我們也可以使用類似的方法,提供一些好處(寶貴的信息、電子版文件的下載等等)獲得訪客的聯(lián)系方式。這樣我們能夠在適當(dāng)?shù)臅r(shí)候給訪客推送一些網(wǎng)站消息,與他們進(jìn)行互動(dòng)。不過(guò)要注意,索要電話號(hào)碼并不是一個(gè)好主意,因?yàn)閷?duì)大多數(shù)人來(lái)說(shuō)手機(jī)號(hào)碼要更加私人,不會(huì)輕易泄露。

3.添加搜索框
除了網(wǎng)頁(yè)不存在或已刪除的情況,404頁(yè)面的出現(xiàn)還可能是因?yàn)槟硞€(gè)網(wǎng)址重新指向到其他地方。這時(shí)我們就可以在404頁(yè)面添加一個(gè)搜索框,方便訪客們?cè)诖溯斎腙P(guān)鍵詞搜索,快速獲取信息。
Twitter在這一點(diǎn)上就做的很好,用戶可以直接在搜索框查找想要獲取的信息。

4.添加聯(lián)系表單
在404頁(yè)面添加聯(lián)系表單也是一種有效的設(shè)計(jì)方法。這是因?yàn)椋?lián)系表單可以充當(dāng)訪客與站長(zhǎng)交流溝通的橋梁。訪客通過(guò)它可以直接與站長(zhǎng)聯(lián)系,獲取自己想要的信息,反過(guò)來(lái),站長(zhǎng)能夠從聯(lián)系表單中獲得訪客們的體驗(yàn)反饋,及時(shí)改正404頁(yè)面或其他頁(yè)面可能存在的錯(cuò)誤,進(jìn)一步提高網(wǎng)站的整體表現(xiàn)力。

5.避免幽默
小飛并不否認(rèn)幽默是避免尷尬的一種方式,但它并不是在所有情況下都適用的。這不,在404頁(yè)面使用幽默可能還會(huì)有適得其反的效果,不少訪客反映在無(wú)法找到想要的信息時(shí)就已經(jīng)很失望了,那些愚蠢的笑話更會(huì)讓人覺(jué)得惱火。我們要明白,訪客在登進(jìn)網(wǎng)站時(shí)目標(biāo)很明確:找到自己想要的信息,然后離開(kāi),他們想要以盡可能快的速度完成這一目標(biāo),而不是來(lái)來(lái)回回地兜圈子。盡管在網(wǎng)站中使用幽默的出發(fā)點(diǎn)是好的,但還是使用更加實(shí)際的方法吧!

一些創(chuàng)意404頁(yè)面的實(shí)例:
如果你想要找到一些404頁(yè)面設(shè)計(jì)的靈感,下面是小飛個(gè)人比較欣賞的幾個(gè)實(shí)例,一起來(lái)看看吧!
Wufoo
Wufoo是一個(gè)幫助人們?cè)诰€創(chuàng)建獨(dú)特表格的網(wǎng)站。在Wufoo的404錯(cuò)誤頁(yè)面上,綠色的按鈕(免費(fèi)創(chuàng)建表格)很是顯眼,背景圖片中還有這一只恐龍正在直勾勾的盯著行為引導(dǎo)按鈕,這無(wú)形之中又給了訪客暗示,訪客更有可能點(diǎn)擊這個(gè)按鈕。除此以外,Wufoo還將可選的菜單項(xiàng)放在了行為引導(dǎo)按鈕的下方,給訪客提供多種選擇。

MailChimp
Mailchimp是一個(gè)非常流行的電子郵箱營(yíng)銷平臺(tái)。在它的404錯(cuò)誤頁(yè)面,Mail Chimp使用了一張猩猩在森林中的背景圖片,似乎在暗示訪客已經(jīng)迷路了。進(jìn)入這個(gè)頁(yè)面的訪客可以在插圖的幫助下更加清晰地明白它的信息。棒的地方在于Mail Chimp在頁(yè)面的下方提供了一個(gè)搜索框,訪客可以在這搜索任何自己感興趣的內(nèi)容。如果搜索框在查找或定位資源方面還不夠給力的話,訪客還可以使用搜索框下方的導(dǎo)航菜單。

Bitly
Bitly是一家提供縮短URL服務(wù)的網(wǎng)站。下圖就是它的404錯(cuò)誤頁(yè)面,很美觀,也富有深意。如果你仔細(xì)觀察一下它的錯(cuò)誤頁(yè)面,你會(huì)發(fā)現(xiàn)設(shè)計(jì)師將海洋設(shè)計(jì)成空無(wú)一物的,這其實(shí)是在暗示網(wǎng)頁(yè)里什么都沒(méi)有,能給訪客提供一個(gè)更加直觀的感受:在這沒(méi)有想要的資源。Bitly同樣也在頁(yè)面的底部放置了導(dǎo)航菜單。另外,為了讓網(wǎng)站上的各種元素更具有互動(dòng)性,Bitly的設(shè)計(jì)團(tuán)隊(duì)還將海洋設(shè)計(jì)了波浪的動(dòng)效,海鷗也是可以揮動(dòng)翅膀的,你可以來(lái)這個(gè)網(wǎng)站親自感受一下。

Cooklet
Cooklet是一家全球美食食譜分享網(wǎng)站。它在自己的404頁(yè)面上放了一張空盤(pán)子的照片,這個(gè)插圖很直觀,也與網(wǎng)站的主題相呼應(yīng)。Oh no!的話語(yǔ)更有感情色彩,能夠引起用戶的情感共鳴,有意思的地方是Cooklet在網(wǎng)站上放置了返回以及回到主頁(yè)的鏈接。除此以外,它們還將導(dǎo)航菜單、搜索框放在了頁(yè)面的上方,便于用戶重新定位資源。

其實(shí),對(duì)于任何網(wǎng)站來(lái)說(shuō),404頁(yè)面都是可能出現(xiàn)的。出現(xiàn)404錯(cuò)誤頁(yè)面并不可怕,可怕是我們沒(méi)有有效的方法應(yīng)對(duì)它??戳松厦孢@些實(shí)例,你對(duì)404頁(yè)面應(yīng)該有了一個(gè)全新的認(rèn)識(shí)了吧!趕緊計(jì)劃計(jì)劃自己網(wǎng)站中的404頁(yè)面怎么做,發(fā)揮404頁(yè)面在提升用戶體驗(yàn)、做好SEO優(yōu)化等方面的益處。
猜你喜歡



-
企業(yè)在網(wǎng)站建設(shè)過(guò)程中擔(dān)心什么
企業(yè)在選擇網(wǎng)站建設(shè)服務(wù)商時(shí),擔(dān)心的地方很多,比如擔(dān)心技術(shù)不過(guò)關(guān)、擔(dān)心質(zhì)量不好、擔(dān)心售后不好,擔(dān)心頁(yè)面不美觀。 其實(shí)企業(yè)普遍害怕的是:我要做定制網(wǎng)站,但你給我的卻是模板網(wǎng)站。那應(yīng)該如何避免這種情況呢? 首先,從報(bào)價(jià)上,如...
-
企業(yè)網(wǎng)站四個(gè)基本要素
網(wǎng)站結(jié)構(gòu):是為了向用戶表達(dá)企業(yè)信息所采用的網(wǎng)站布局、欄目設(shè)置、信息的表現(xiàn)形式等。 網(wǎng)站內(nèi)容:內(nèi)容是用戶通過(guò)企業(yè)網(wǎng)站可以看到的所有信息,也就是企業(yè)希望通過(guò)網(wǎng)站向用戶傳遞的所有信息,網(wǎng)站內(nèi)容包括所有可以在網(wǎng)上被用戶通過(guò)視覺(jué)或聽(tīng)覺(jué)感知的...
-
網(wǎng)站建設(shè)怎么做?
想要建設(shè)好網(wǎng)站,首先就需要給網(wǎng)站建設(shè)一個(gè)清晰的定位,比如行業(yè)網(wǎng)站、電商網(wǎng)站、資訊類網(wǎng)站等等。在明確了網(wǎng)站建設(shè)主題之后,網(wǎng)站建設(shè)一般流程就可以按照:規(guī)劃域名、設(shè)計(jì)網(wǎng)頁(yè)、搭建網(wǎng)站框架、本地建設(shè)網(wǎng)站、測(cè)試后發(fā)布、后期的維護(hù)推廣等步驟來(lái)實(shí)施。 ...
-
線上商城app開(kāi)發(fā)有哪些功能
熱門(mén)產(chǎn)品展示:在線上商城app首頁(yè),用戶可以瀏覽各種熱門(mén)產(chǎn)品信息,方便用戶深入了解平臺(tái)功能和行業(yè)信息,為用戶購(gòu)買(mǎi)產(chǎn)品提供一定的參考依據(jù),揚(yáng)州網(wǎng)站建設(shè)給人們的生活帶來(lái)一定的便利。 產(chǎn)品分類展示:為了滿足用戶的瀏覽需求,APP會(huì)根據(jù)產(chǎn)品...
-
SEO優(yōu)化的幾大盲點(diǎn)
SEO優(yōu)化除了細(xì)節(jié)需要非常注意外,還有一些盲點(diǎn)是大家會(huì)經(jīng)常遇到,但并沒(méi)認(rèn)為有問(wèn)題的方面,本文來(lái)和大家討論一下幾大盲點(diǎn)。 1、SEO教程 SEO越來(lái)越多的人做,很多公司都需要它,因此...