【觀後筆記】Don’t Make Me Think 如何設計好網站
A Common Sense Approach to Web Usability
在網路上看到許多人推薦這本書做為 UI/UX 設計的入門書籍，又剛好自己先前有設計網站的經驗，但其實又不是很明確的知道應該注意哪些要點，希望可以透過這本書來更了解網站的內容、階層、優先順序應該怎麼排序。
很幸運的剛好學校圖書館可以直接借閱，所以就把它借回家讀了！（ 不過看完才發現借到第二版，而現在已經出到第三版了...QQ ）
比對目錄之後發現兩個版本的差異不算太大，比較可惜的是缺少了移動性裝置體驗的章節。不過都看完了就還是來記錄一下這次的觀後筆記！
書名：Don't Make Me Think 如何設計好網站
作者：Steve Krug
這本書的內容多樣、語調輕鬆，並且充滿了插圖，是可以讓讀者在閱讀中輕鬆獲取知識的一本書。以下將紀錄這次閱讀後所學習到的幾項重點。
一、我們不讀網頁，我們只會掃描
我們上網站查詢大部分是為了節省時間，我們只會對網頁中的其中一部分感興趣、只會尋找和目標或是手邊工作有關的東西。
就像每次網購完我們幾乎不記得曾經仔細看完網站首頁上的文字，因為我們都想著要很迅速地完成購買特定商品的目標，沒時間閱讀非必要的東西。
就像上圖所述，我們期望使用者閱讀完所有資訊，最後謹慎的點選其中一個連結。但事實上使用者只要找到大致符合目標的東西就會繼續前往下步步，如果不符合期望則再一次的重複前面的動作。
所以當我們在設計網站的時候，應該注意以下幾點：
- 使用標題：它能告訴你每個段落是在講什麼，幫助使用者決定是否要繼續掃視或就此離開這個網站。
- 讓段落簡短：簡潔的文字比冗長的段落更有力道，句子中不該有累贅文字，段落之中不該有沒用的句子，就如同機器上不該有多餘的零件。
- 標記關鍵字：把最重要的資訊使用粗體格式，或是任何使它容易被找到的形式。當然也記得不要標記太多東西，不然就失去它的效用了。
二、建立清楚的視覺階層
這也是一個能幫助使用者快速瀏覽頁面的重要因素，必須要讓頁面上的每一樣東西所呈現的視覺都能夠簡潔明瞭，並能夠清楚地傳達出每一個物件之間的關係。
有清楚的視覺階層的頁面，會有以下三點特徵：
- 越重要的東西，就應該越明顯：例如將重點標題放大、加粗、使用不同顏色、或是留些空白。
- 邏輯上有關聯的東西，視覺上也應該有關聯：例如把相似東西放在同一個標題下、用相似的視覺風格呈現，或是放進同一個清楚標示的區域中。
- 用視覺上的「巢狀」階層，顯示事物屬於哪一部分：例如網路書店頁面中的階層就應該是：書籍類別>書名>內容。
有了良好的視覺階層，可以將網頁內容排序，讓使用者可以立即找尋到需要資訊內容，節省他們的心力。
三、省略贅字，不需要開場白與說明
開場白就像是閒聊一樣毫無內容，單純是社交用途。而說明文字通常是沒有人會看的，我們的目標應該放在讓所有事情一看就懂，要是有說明文字的必要，也至少要刪到最精簡。
當你把不必要的文字刪除，就可以：
- 減少頁面的干擾程度
- 讓有用的資訊更顯著
- 頁面會短的許多，使用者不需要轉動介面及可以看到更多內容
四、頁面名稱 ─ 網站的路標
網頁名稱就像是網站上的路標，當瀏覽過程進行得順利時，我們可能不會注意到網頁名稱。但當我們開始發現自己找不到方向時，就可以從網頁名稱輕鬆得知自己所在的位置。
關於網頁名稱，必須具有以下四個要點：
- 每一頁都要有名稱：就像每個路口都要有路標，每一頁也都該有名稱。
- 名稱必須放在正確的位置：在網頁視覺階層結構中，網頁名稱應該要放在頁面內容的框架之外。
- 名稱必須要顯著：例需要位置、大小、顏色與字體的組合，使名稱能夠表達出「這是整頁的標題。」通常名稱會是整頁最大的字體。
- 名稱必須與點選結果相符：例如果連結名稱與網頁名稱差異很大，或者有許多些微差異，使用者對於網頁是製作者的信任就會被磨滅殆盡。
五、下拉式選單大麻煩
有時候在設計網站時候為了想要拓展空間，就會使用下拉選單，畢竟它真的很省空間。我自己在設計第一版的個人網站中也曾使用過下拉選單，但可以發現下拉選單有幾個問題：
- 下拉選單難以掃描：當頁面在被掃描時，使用者必須自己去找出下拉選單的內容，而這些在選單內的東西可能就不會引起使用者的注意。
- 選單不易閱讀：例有時選單項目會出現或消失得太快，所以不易閱讀。
六、問對問題，勤做測試
當你問「大部分的人喜歡下拉選單嗎？」這種問題完全沒有幫助。正確的問題形式應該是「這個下拉選單，加上這些項目，寫成這種形式，放在這個網頁上，可以讓大部分使用本網站的人產生良好的體驗嗎？」
而回答問題的方法就是：測試。
爭論大家喜歡什麼，只會浪費時間、消耗團隊的生產力，測試可以緩和爭執，將討論重點從對與錯改為聚焦在有用與沒用。
七、焦點團體法不是易用性測試
如果想要做出一個好網站，那就必須經過測試。書中提到了兩種測試方法，分別適用於不同時機
1. 焦點團體法 (Focus Group)
「焦點團體」測試是在整個步驟的前期進行的。是找一小群人來圍坐在桌子前，對於展示給他們看的想法與設計做出反應。他們談論自己對於產品的想法、過去的經驗、對新概念的感覺和心得。
焦點團體法適合找出你的使用者所想要的，可以迅速對使用者的意見與感受取得樣本，但這種測試無法告訴你使用者是否可以正確地使用你的網站。
2. 易用性測試 (Usability Test)
據ISO 9241的標準定義，易用性 (Usability) 為產品本身在特定的情境(context)下為特定的使用者使用，其所具有之有效性 (effectiveness) 、效率 (efficiency) 與滿足 (satisfaction)。
簡言之，當你使用一項產品或服務，該產品/服務 是否有滿足使用者的目標 (goal)，使用情況是否為有效使用及有效率的，即為易用性 (Usability)。
所以易用性測試 (Usability test) 即是測試上述三個面向之內容，檢視產品對於使用者的表現為何，藉以觀察是否要修正你的觀念。
因此，焦點團體是在聆聽，而易用性測試是在觀察。
八、使用者不該思考的問題
我在哪？
該從哪邊開始？
他們把 _____ 放在哪？
這頁裡最重要的事情是什麼？
為什麼他們要用這種方法稱呼它？
這是廣告，還是網站的一部分？
不要設計出會讓使用者感到困惑或猶豫不曉得要點哪裡的介面。網站分類要明確，使用統一、常見的名稱，按鈕要像按扭、系統的回饋要符合使用者所預期的。
使用者在網站上的每一次錯誤點擊，雖然不致於造成立即性的客戶流失，但使用者體驗是會堆疊的，只有做好每一個細節，使用者才能在極短的時間感受到企業要傳達的東西。
以上就是這次閱讀後所吸收的一些概念，希望自己往後在設計網站時也要把這些謹記在心！最後，如果大家喜歡我的分享或是有什麼問題的話，歡迎留言讓我知道，當然也絕對歡迎多拍手 👏🏻
👏🏻1~20下：感謝分享，到此一遊。
👏🏻21~30下：覺得這篇文章對你有一點幫助。
👏🏻31~50下：太棒了，覺得獲得很大的幫助！期待之後的分享！
