Ming Apps

Defensive Web Design

Posted on: 2011/06/20

筆者今天神奇地七點便醒來,

一早起來就是學習的好時機~

今天為大家帶來了和User Interface有關的Web design:

Defensive web design, 或稱Contingency Design.

What is Defensive Web design?

意指對錯誤所針著的網頁設計(Design for when things go wrong)。

Why do we need Defensive Web design?

墨菲定律: “If anything can go wrong, it will."

每個人在用你的網頁設計的時候,

便會出現錯誤!

如果能好好處理好這些錯誤,

你便能:

  • 提升易用性(improve usability)
  • 提升轉換率(Improved Conversion Rates)
  • 增加收入(Increased Revenues)
  • 增加品牌忠誠度(Increased Brand Loyalty)

(Reference: http://37signals.com/whitepaper/37s_contingency_wp_feb02.pdf)

Examples

Inline and Contextual Helps

不少的網頁設計都涉及大量文字資訊,

某些設計未必能在同一頁面展示出所有的資訊。

一些網頁會利用tooltips或是文字版FAQ/Keyword Defination,

用以提示用戶某些字眼的意思。

tooltips example

例如新聞網頁除了有新聞的標題外,

可以在滑鼠移到標題上出理相關圖片和一些新聞資料。

tooltips example-37signals.com

又或者針對keywords以tooltips形式列出其意思。

Google的說明中心,

正好就是Contextual Help的好例子:

http://www.google.com/support/

Slow Connections

朋友曾告訴筆者,

香港的寬頻網絡很廣又快,

根本不用理會網頁設計對速度的影響。

筆者卻不這樣認為~

正正因為這麼多人上你的網站,

所以在處理異常大的流量的時候,

網頁設計和流量正息息相關!

有趣的是,

由於智能手機的技術成熟,

更多人利用流動網絡上網,

不少智能手機使用者會取消載入圖片或影片,

這些時候便會對整個個網頁設計有所影響。

CNN.com的網頁在不載入圖片之下,

仍能保持整個網頁的外觀,

很厲害!

On-site Search

如果你的網頁只是寥寥無幾,

搜索功能對網頁應該幫助不大;

但如果你的網頁成千上萬,

Search就是必須的功能!

openrice simple search and advanced search

以openrice為例,

大家都可以看到除了個simple search在頂,

還會另外設計一個advanced search的功能,

讓用戶更能針對自己想吃的,

找到合適的餐廳。

Form Validation And Error Handling

登人或申請新用戶的時候,

最常預料到的問題就是,

輸入錯誤!

yahoo mail error handling

以Yahoo mail為例,

申請為新用戶的時候,

必須填寫的資料可以利用背景顏色和醒目文字提示,

非常清楚列出使用者那些地方需要重新填寫。

Page not found!

404Error,

相信很多人都見過的網頁問題,

有可能是網址錯誤而成!

給大家看看別人如何處理404的設計:

40個404設計:
http://www.smashingmagazine.com/2007/08/17/404-error-pages-reloaded/

60個404設計:
http://www.hongkiat.com/blog/60-really-cool-and-creative-error-404-pages/

Google亦提醒404 handling的時候,

可以提供一些符合瀏覽者預期的網頁連結,

方便使用者繼續在你的網頁瀏覽~

小總結

一些看來很小付出的Defensive Web design,

可以為你的網頁帶來無比效益!

大家應該以一個開放的態度,

不要盲目假設每個使用者都能知道自己「錯在那裏」!

大家亦要留意網頁能否對應每個瀏覽器,

想copy其他網頁資料時不要簡單的Copy and paste,

可能會改變你的網頁設計!

Happy Design!

2 回應 to "Defensive Web Design"

雖然Google Translate 係翻譯成“墨菲定律”,但係香港多數叫“梅菲定律”

對呀~ 但筆者還是喜歡「墨菲」這個名字~ 只是譯名的問題不用深究~

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

%d 位部落客按了讚: