一個有趣的404頁面,是如何體現的?

2020-12-17 36kr

編者按:本文來自微信公眾號「人人都是產品經理」(ID:woshipm),作者:Ella,36氪經授權發布。

有趣的404頁面能緩解用戶的焦慮和挫敗感,那麼一個有趣的404頁面,是如何體現的?

以下內容來自天天問用戶:@Jasmine @JaylonG @joe @CHIN_PM @小u @請叫我馬小胖 @月半小閣 @九久玖

404頁面,指的是顯示網站錯誤連結的頁面,可能是該訪問的頁面不存在,也可能是頁面已經被刪除。出現404異常狀態,用戶體驗可能不佳,但有趣的404頁面能緩解用戶的焦慮和挫敗感。於是許多網站/App各出奇招,出現了不少讓人眼前一亮的404頁面。

01

在了解「一個有趣的404頁面,是如何體現的?」前,我們先了解幾個在做這類頁面設計時會考慮的問題:

  • 問題一:為什麼會存在404頁面?

  • 問題二:什麼人群會看到404頁面?

  • 問題三:404頁面的作用

  • 問題四:404頁面的表現形式

通過以上流程的思考,能夠幫助避免主觀盲目設計這類頁面。

問題一和問題二幫我們界定404頁面存在的狀況以及人群,具體要通過用戶體驗以及調研去得到具體的答案。大概來說,一般看到404頁面的人群,基本也屬於「網絡情況問題」和「產品本身問題」,但是他們都有個相同的特徵,就是在「需要你的時候,你掛了」。

所以問題三,404頁面存在的作用有兩個:

  • 緩解用戶當前遇到的問題所產生的焦慮

  • 解決用戶當前所遇到的問題

我們應該從問題一到問題三來思考404頁面的表現形式,而不是說自認為越炫越好,首先要意識到這個頁面是因什麼而存在,存在又是為了什麼。如果你不能思考到這個問題,那你的設計是盲目的。

02

接下來,我們重點介紹一下「如何定義表現形式」。在研究分析了幾十款404頁面設計之後,發現優秀的設計方式都包含下列元素:圖形(動畫)+文字+(操作按鈕)

  • 圖形——品牌形象/可愛形象等——緩解轉移用戶焦點

  • 動畫——品牌形象——緩解用戶焦慮

  • 文字——提示問題/引導操作——給出解決方案

  • 遊戲/互動——互動性引導——緩解用戶焦慮

  • 按鈕——引導操作——(視情況而定)

因此,綜合以上這些元素,可以把有趣的404頁面分為以下幾類展現方式:轉移注意力法、隱喻手法、平鋪直敘法、遊戲娛樂法、自嘲手法。

1. 轉移注意力法

這種方法將404頁面視作可被利用的空間,來呈現公益信息,這種方法暫時減弱了用戶對產品的憤怒,將注意力轉向對弱勢群體或社會問題的關心,側面感受產品的社會價值,這種方法適用於社會公益性質或相關業務的產品。

比如騰訊公益的404頁面,這個項目的靈感源於歐洲失蹤兒童聯合會主導的,名為「NotFound Project」的網絡公益工程。就是利用404頁面展示那些被拐賣兒童、失蹤兒童的信息,幫助那些孩子重新找到家人。

比如丁香園的404頁面,文案是「你所訪問的頁面就如那些遇害的同道,已離我們遠去。」下面還會有這些白衣天使的照片和名字。以這樣的方式悼念亡者,也側面展現了丁香園的社會價值。

2. 隱喻手法

這是一種很藝術很委婉的方式,404這幾個大字太平鋪直敘,缺少細細品味和想像的餘地。隱喻手法運用現實中的事物對404的意義進行比喻,具有藝術審美價值,適合產品品牌介紹網頁。

將產品的形象融入到404頁面,也是一個不錯的法子。不僅顯得有趣,提高了用戶體驗,也提升了品牌認知。

像之前收集過的一張棒球網站404,同時也可以延伸出許多靈感,例如:足球類產品404可以放張守球失敗相關圖片,而籃球可以放張「三不沾」的照片,結合自身產品以此類推。也可以根據不同行業,在提示信息中加入行業詞語,例如:教育類的「老師累了,需要休息,請稍後再來哦」。

3. 平鋪直敘法

這種方法雖然沒有藝術性,沒有幽默感或者社會意義,但也是最負責的表達方式,直接告知用戶頁面出現了問題,導致問題的原因有哪些,聚焦於如何解決404頁面問題,適合效率為主的產品,例如電商類產品。

4. 遊戲娛樂法

遊戲可以促進多巴胺產生,玩遊戲或有趣的交互互動,可以激發快樂感受,這種方法可能消耗較多開發和設計人力,用戶體驗價值也難以量化,所以慎用吧。

一個典型的慄子是谷歌404小恐龍。呆萌的小恐龍趣味性十足,網上還有用戶發布了谷歌404小恐龍教程,像這類小遊戲404應用的網站也比較多。

5. 自嘲手法

這種方式一般會將產品擬人化,採用用戶熟悉的人物形象,用偏幽默的方式告知用戶頁面崩了,有點像喜劇中自嘲的手段,逗樂用戶,創造積極體驗。適合娛樂類產品,例如電影類網站等。

結語 

無論如何,404頁面之所以出現,是因為沒有滿足用戶需求。所以不管做得再怎麼好玩有趣,原本該出來的沒有出來,用戶想知道的沒有知道,做得再好玩也都是本末倒置的。

404頁面如同你在跟女神表白,表達了你想跟她在一起的需求,但她拒絕了你。把404頁面做得有趣,就有點像女神在委婉拒絕,話說得再好聽,拒絕了就是拒絕了,終究是會影響用戶體驗的。

那麼有趣的404頁面存在的意義,大概是「雖然女神拒絕了我,但不妨礙她有趣的靈魂會一直吸引我」。

相關焦點

  • 404 的傳說:你訪問的頁面找不到了!
    下面愛範兒帶你來看看中外網站那些有趣的 404 頁面。國外篇Twitter 的宕機鯨魚這大概是網際網路歷史上流傳最廣和最受歡迎的 404 頁面之一了。GoogleGoogle 在不同節日的 Logo 設計一直別出心裁,而它的 404 頁面也不例外。你最熟悉的,可能就是這幅手繪風格的機器人。但更有趣的是 Google Chrome 的 404 頁面,這是一個操控恐龍躲避障礙物的小遊戲。
  • 如何製作一個酷炫的網站404頁面-賓哥網站優化
    我們在瀏覽頁面的時候,經常會碰到404頁面,今天,賓哥網站優化介紹下如何製作網站404頁面1.製作一個自定義404頁面瀏覽器會自帶一個超級醜的404頁面,喏,形如下面這個。醜拒,不說,對於用戶的體驗度也是不好,用戶看到會很快地跳出,所以需要一個有引導功能的自定義404頁面。2.上傳至網站根目錄上面製作好的網站404頁面是靜態,需要將其上傳至網站的根目錄裡。
  • 如何修復WordPress 404頁面「Not Found」錯誤
    如果沒有正確維護,您通常會在您的網站上遇到WordPress 404頁面錯誤。但有時候您的網站處於維護狀態,您的訪問者也會自動轉到404錯誤頁面。你是否也遇到過WordPress 404錯誤?不要害怕,wpnicer為您提供解決方案。
  • 網站優化時產生404頁面後正確的處理方法
    今天,我想與您分享如何最好地處理網站優化生成的404頁?當我們訪問已刪除或不存在的頁面時,通常會返回404頁面。一種是伺服器自動返回的404錯誤。另一個是專門在網站建設中設計的404頁面。一,如何生成404頁面對於SEO優化而言,404頁無疑起著非常重要的作用,不是不存在的頁面搜尋引擎不會爬網,也許您會遇到這種情況,例如,您在網站上發布了更新的文章,但隨後您發現本文內容中有很多問題需要刪除,但通常在此時,搜尋引擎可能已經包含了當前問題。
  • 404 not found是怎麼回事 404頁面處理方法【解決方法】
    404 not found是一種標準的HTTP返回代碼,當用戶輸入一個連結時,伺服器上的IIS(Internet信息服務)會首先檢測用戶輸入的地址連結是否有對應 的網頁信息,如果沒有對應的網頁信息,說明用戶輸入的是一串無效的連結,這時IIS就會通過伺服器向終端用戶發送404錯誤代碼頁提示,告訴用戶找不到與 該地址連結對應的網頁信息。
  • 24個創意404錯誤頁面
    我們觀察到了,許多熱門網站都設計了錯誤頁面,儘管有錯誤但它給用戶提供了愉快的用戶體驗,以幽默的方式告訴他錯誤,並引導用戶找到需要的內容。所以,請不要忽略此頁面,並花一些時間進行錯位頁面設計,因為這對你的用戶非常重要。通過以下24個404錯誤頁面示例,我們總結了一些「404頁面」的設計經驗,希望能夠為大家帶來幫助。
  • 404頁面我們應該怎麼做
    我們都知道,一名優秀的SEO,網站的方方面面優化工作不容忽視,404頁面的製作無論是對搜尋引擎還是對用戶來說都是必不可少的,404頁面也是我們網站優化中的基礎之一,那麼網站優化中404頁面怎麼做呢?下面飛馬小站就詳細介紹下這個問題。
  • 16款優秀的網站404錯誤頁面HTML模板-站長之家
    站長之家(CHINAZ.com)3月20日編譯:404錯誤頁面是一個非常普遍的現象,該頁面的目的是告訴瀏覽者其所請求的頁面不存在或連結錯誤,同時引導用戶使用網站其他頁面而不是關閉窗口離開。
  • 九款不同風格的動態404頁面源碼(帶演示)
    在平時上網的過程中即使是大型網站,也會有不存在404頁面的情況發生,當用戶由於某種原理訪問網站不存在頁面時,沒有客制化的404頁面就會大大降低用戶體驗,所以很多站長想方設法的來美化網站中的404頁面,大家是否還在為如何設計簡單而又美觀的404頁面而發愁呢?
  • 18個漂亮個性的404頁面設計欣賞
    站長之家(CHINAZ.com)5月2日編譯:404頁面是網站必備的一個頁面,它承載著用戶體驗與SEO優化的重任。訪問到錯誤頁面一定不是愉快的用戶體驗,這就是現在許多設計師花一些額外的時間和精力去製作有創意的404頁面的原因。
  • 【遊俠導讀】404錯誤頁面是伺服器接到瀏覽器訪問請求後返回的狀態...
    404錯誤頁面是伺服器接到瀏覽器訪問請求後返回的狀態碼(伺服器信息頭),不同的代碼有著不同的含義,但是它們都是告訴你一件事,出錯了!這個頁面打不開了!
  • 什麼是過期失效頁面?失效的網頁如何處理?
    企業網站在長期的運營過程中,由於企業的生產經營變化,導致產品的換代升級等等原因,同樣地也體現在網站上,明顯的例子就是某些產品由於企業停產,結果就是網站上也必然要刪除該頁面,但是如果這些頁面曾經被搜尋引擎收錄了而且有了排名。這個時候搜尋引擎的收錄並不會馬上消失,排名也依然存在。
  • 網站過期的頁面該如何處理?
    網站過期頁面,該如何處理?你可能會說,直接刪除,然後用戶打開,顯示404頁面。方法確實沒錯,但是卻不是最佳的做法。一、有流量網頁通常在處理一個過期頁面的時候,如果它仍然在持續獲取網站流量,那麼我們可以通過如下方式處理這個頁面:1、增加相關推薦我們可以適當的增加售罄產品的相關產品,提高目標產品的點擊率,促進轉化,我們同樣可以從SEO
  • 網站出現 404 錯誤時應如何處理?-站長之家
    一個網站想要長久地擁有良好的排名,必須做好平時網站問題的排查工作。比如,網站出現了404、 503 等訪問錯誤,站長們需要了解清楚其出現的原因和快速解決的方法。下面文章內容是針對網站出現 404 錯誤時應如何處理的介紹。
  • TED34 404, the story of a page not found
    這就是404頁面 它是在瀏覽網頁時讓人很崩潰的一種體驗 它是當你點擊某網頁 卻無法找到時 所顯示的默認頁面 404頁面很容易讓人感到崩潰 大家回想一下,當你點出一個 404頁面時,心裡那種煩躁 就像被女朋友甩了一樣那麼不爽 And that's where it's actually also interestingto think about, where
  • 404錯誤頁面幫找失蹤兒童:公益域名NotFound.org亮了-站長之家
    404錯誤頁面幫找失蹤兒童:公益域名NotFound.org亮了 易名中國(eName.cn)9月28日訊,據悉,Missing Children Europe和European
  • 你只知404是錯誤 卻不知它竟還有這多含義-404, ——快科技(驅動之...
    想必,各位都曾有過以下經歷,本想打開網頁瀏覽資訊,怎料出現的卻是個「404」?不用懷疑,你的頁免丟失了。那麼,「404」除了代表你所要瀏覽的頁面丟失外,你可知它的產生原理?不僅如此,在龐大的網際網路中除了404還有哪些HTTP狀態碼又分別代表著什麼?
  • 為什麼我的上傳的數據會「404 No Found」?
    大家在上網的時候,一定經歷過404 No Found(無法找到頁面)的情景。出現頁面404的原因有很多,有可能是在伺服器停了,有可能是伺服器因為一些外部原因而壞掉了。 但不管如何,儲存在這個頁面的數據已經消失了,再也無法找回。
  • 網站伺服器經常性出現404錯誤的解決方案
    網絡上瀏覽頁面呈現的過錯連結提示多種多樣,呈現404notfound也算是一個很普遍的問題,信任上網族都遇到過該情況,當咱們翻開某網頁時會呈現提示:404NotFound,看到該頁面心境本就糟糕了,404notfound首要用於瀏覽器無法抓取網頁內的信息,是引導讀者繼續瀏覽網站其他頁面仍是什麼都不做
  • 提交新站收錄的前提是做好網站欄目內容及404頁面設置
    ,否則搜尋引擎會被視為內容較少、頁面質量低劣。我的建議是,我們最好在本地環境中建立一個網站,首先在本地填寫內容,或者使用臨時域名。記住,不要先用機器人來阻止爬行,一旦被阻止,你要搜尋引擎來爬行你的網站,那將是一個漫長的過程。在上線之前,每個欄目最好也要有5個以上的內容。