如何設計好的網站

Don’t Make Me Think

「如果東西難用，那我盡量不去用」

在瀏覽網站的時候，很多時候我們會遇到很多問題，例如：這個按鈕可不可以點？我們應該要點哪個按鈕才對？

「三次無意識的滑鼠點擊，相當於一次需要思考的點擊動作。」

好的網站是讓我們不用思考就可以找到想要的東西。

一些可以觀察得到的事實：

• 我們不讀網頁，我們只會掃描。
• 我們不會花很多時間思考要點哪一個連結，我們只會嘗試眼前中看起來最好的那一個。
• 我們並不需要知道背後的原理，我們只想知道怎麼找到我們要的東西，方法可以行就好。

由於我們是習慣透過掃描式閱讀網頁，想快速的找到看似可行目標，我們應該傾向用以下的原則設計網站，盡可能的幫助人們快速在視覺上搜尋：

• 建立視覺階層：越重要的東西應該就要越明顯；有關聯的東西，在視覺上也要相近。
• 善用常見的慣例：將可能使用常見的圖示，文字說明。
• 清楚的分隔區域。
• 明確標示出可以點選的東西。
• 降低不必要的干擾：少就是好，盡可能減少壅擠、減少不必要的文字說明。

— —

除了這個原則之外，另外有2個對於網頁設計比較需要注意的元素：

一、導覽列：

使用一個網站，就像是走進一家賣場，我們都想盡快找到我們想要的東西，但我們也很容易在裡面迷失，而由於網站並沒有實體空間的空間感，更是容易讓人不知道現在在網站的哪裡，因此好的導覽列十分重要。

導覽列主要有兩項重要的功能
1. 告訴我們這個網站有哪些東西。
2. 讓我們知道自己處在哪一個頁面。

因此好的導覽列應該包含：
1. 網站名稱。
2. 功能（選單）。
3. 搜尋欄。
4. 提供我們在哪裡的提示。

二、關於首頁：

問問自己兩個問題：

1. 這個網站的重點是什麼？
2. 您知道要從何處開始嗎？

副標和網站歡迎詞是個好的網站設計，因為可以簡短地告訴我們這個網站提供什麼樣的服務，或是明確的願景。

—

關於網站設計最具常見的爭議是類似於整個團隊在討論「到底要不要用下拉式選單」、「顏色用哪一個才對」…等問題，而這類的問題其實往往並沒有最對的答案，討論到最後只會沒有結果，因為所有的意見都只是個人偏好。

最好的方法就是：「使用者測試」

＊使用者測試：

測試不需要花很多功夫，不需要花很多錢，只要兩、三個人就可以測試，最好的測試應該是每次 3~4 人，在解決發現的問題後，繼續不斷測試。

您可以進行兩種測試：
1. 「瞭解」測試：讓使用者自己看，自己點選，然後我們在一旁觀察，並詢問一些問題。
2. 關鍵工作測試：讓使用者去做某件事情，然後看看結果如何。

在測試中一些小問題是可以忽視的，只要使用者可以快速修正，找到他想要的，其實就無大礙，如果使用者提出一些新功能的要求，其實不一定需要按照他們做的，因為他們只是告訴你，他們喜歡什麼。

使用者測試是極為重要的一個環節，因為我們只是廣大的使用者中其中的一小部分，透過測試才能讓我們看見我們沒有發現的盲點，而盡可能地做出好的網頁。

最後，關於提升使用者好感的方式：

1. 了解大家在你的網站上主要是為了做什麼，並且把它們做的明顯易用。
2. 提供使用者應該知道的說明。
3. 體貼，讓使用者省事。
4. 提供 FAQ。
5. 當使用者不小心點錯、輸入錯誤時，都可以快速復原。
6. 無障礙網站。

—

本文為 Don’t Make Me Think 一書的閱讀筆記

Don’t Make Me Think 是一本非常著名的網頁設計書籍，也是非常推薦任何做網頁、設計網頁的人閱讀的書。

推薦書籍：
* Information Architecture for the World Wide Web
* Why We Buy: The Science of Shopping
* Sources of Power: How People Make Decisions
* The Practice of Creativity: A Manual for Dynamic Group Problem Solving
* Jakob Nielsen Website
* Homepage Usability: 50 Website deconstructed
* Web Application Design Handbook: Best Practices for Web-Based Software
* Defensive Design for the Web
* The Design of Everyday Things
* A Practical Guide to Usability Testing
* Usability News
* WebWord