close

設計一個好用的錯誤頁面 - 網頁設計

http://webdesign.zoapcon.com

下面從一個非常簡單的例子來說明如何設計一個好用的錯誤頁面。
例子是豆瓣網站的錯誤頁面,首先我們看現在的豆瓣的錯誤頁面,如下圖所示,整個頁面比較復雜,信息很多,包括了

1. “標題”說明錯誤信息。
2. 具體的錯誤信息。
3. 可能造成的原因。
4. 你可以怎么做?
5. 詳細的錯誤信息

 

 

首先我們來回答下面三個問題:

1.誰會看到這個錯誤頁面?

絕大多數情況是普通用戶看到。工程師調試的時候可能看到。

2.什么情況下看到這個錯誤頁面?

可能出現錯誤頁面的原因有:
1.鏈接失效,內容被刪除或轉移
2.鏈接根本不存在,404錯誤
3.程序造成的bug

3.我們想讓看到的人做些什么?

1.告訴用戶出現錯誤
2.可能需要用戶的反饋。
3.給一個有用的鏈接

因此我們基于以上的分析,我們考慮得到以下的一些結論:

1. 首先這個錯誤頁面要是簡潔明了的說明錯誤的。可以包括一個小的圖片,為什么要包括圖片呢?因為視覺上的圖形會給用戶一個非常直觀的印象,恩,這里出錯了。但是圖片又不能太大,因為圖片加載需要時間,如果出現圖片還在加載的時候,就失去了給用戶第一視覺的沖擊。比較優秀的這個方面的例子,我們參考了:

1. last.fm

 


2. 淘寶網

 

 

2. 其次,提示語言要簡單,也可以比較人性化。但是詳細信息可以不出現,因為要用到這個詳細信息的用戶太少,而且會造成整個頁面的復雜,和視覺噪音。
3. 我們同時也希望得到一些用戶的反饋,這時我們可以考慮是否讓用戶發送錯誤信息給我們。但是因為如果是簡單的放置錯誤信息,給出幫助中心的link。會造成用戶的操作很復雜,同時我們前面說過,詳細信息使用的人太少,因此,為5%的使用人數來造成95%的人的迷惑,這個是非常不值得的事情。這里我們參考了cooper.com的頁面設計,雖然他們是給出可以點擊的email鏈接。但是我們進行了改進,做成一個可以點擊的按鈕,用戶點擊,錯誤信息會直接發送到后臺。

1. cooper.com

 

 

4. 最后,我們希望告訴用戶還可以去哪里?給他們一些可能有用訪問的鏈接。在這里我們參考了很多的設計。比較正面的有:

1. digg.com

 


2. cooper.com

 


3. last.fm給出的鏈接太多。所以我們認為是一個不好的設計。

 


4. taobao.com給出的link也太多,雖然進行了分級的設置,但是我還是覺得過于復雜。不利于用戶的選擇。
因為用戶在選擇的時候,你給用戶一個鏈接,用戶可能點擊,但是如果你給它10個link。用戶可能就放棄了點擊的欲望,因為用戶不知道如何選擇。需要閱讀,思考。到點擊。這個我們認為是一個非常不好的設計。

 

 

最后,我們去掉了很多沒有用的,可以簡化的錯誤頁面。例如,評論轉成日記,活動轉成小組等。這些完全可以直接程序跳轉而不用經過錯誤頁面,確切的說這些也不能算作錯誤。
其次,我們去掉了如果需要登陸才能訪問的時候的錯誤頁面,而跳轉到登陸頁面,給出紅色的提示字符。

需要說明的是,這個頁面的css是寫死在頁面內部的,因為錯誤的情況可能造成css也加載不全。所以寫死在頁面內部是一個最保險的情況。

因此,我們最后的成型的設計包含了3類頁面:

1.已知錯誤頁面,包括被刪除,頁面不存在等等。

 


2.程序bug的錯誤頁面。用戶可以選擇去提交這個錯誤,但是操作非常方便。

 


3.未登錄或者權限不夠的錯誤頁面,直接跳轉到login,給出紅色的字提示。

以上僅為自己的一些思考。不對地方請指正。


arrow
arrow
    文章標籤
    網頁設計 web design
    全站熱搜
    創作者介紹
    創作者 apsc 的頭像
    apsc

    apsc的部落格

    apsc 發表在 痞客邦 留言(0) 人氣()