Don`t Make Me Think

開場致詞 如果東西難用，那就盡量不去用

別讓我思考 KRUG的使用性第一定律 什麼會讓我們思考

命名 行銷取向的名字、公司相關的名字、陌生的技術名字…

在『人人皆懂』與『窒礙難行』之間的的取捨 以『淺顯易懂』的方向思考

有些東西是無法自圓其說的 讓一般使用者看到後就能知道要怎樣使用 如果無法使頁面自圓其說，至少要讓頁面可以自我解釋

何以這麼重要 如我讓使用者感到不耐煩，他們就會去別的地方

實際使用頁面的方式 掃描，將就與速讀 事實

我們不讀網頁，我們只會掃描 忙、不需讀完一切

我們部會做出最好的選擇，我們只會將就 忙、猜錯沒差、猜測較有趣、思考不會增加正確的機率

我們不想知道背後原理，我們只想含糊帶過 那東西對我們不重要、發現管用的方法就會沿用

告欄佈 設計 (1/2) 頁面是讓人掃描的，不是閱讀的 看清與理解 的網站您

在毎一頁上建立清楚的視覺階層 善用慣例 將頁面區隔成定義清楚的東西 明確標示出可以點選的東西 降低干擾

告欄設計佈 (2/2) 建立清楚的視覺階層

越重要的東西，就應該要越明顯 放大、加粗、不同顏色、留白或頁面頂端

邏輯上有關連的東西，就應該在視覺上也有關連 相似的視覺風格、放進同一個清楚定義的區域中

運用視覺上的『巢狀』階層，顯示事物屬於那一部份 慣例很有用 將頁面分成定義清楚的區域 明確標示可以點選的東西 減少干擾

動植、物，還是礦物 使用者何以喜歡不用大腦的選擇

不管我需要按幾次滑鼠都無所謂，只要毎一次按滑鼠都不用大腦、不用思考就好

-Krug 的使用性第二定律

有些網站甚至有設計守則，連網站內任一頁時，不能超過一定的滑鼠點擊次數 (通常是 3、 4或 5次 )

整略贅字 網頁文案的寫作藝術 刪掉不需要的文字

簡潔的文字更有力道 句子之中不該有累贅文字，段落之中不該有沒用的句子

將沒人要看的文字刪掉 減少頁面個干擾程度 讓有用資訊更顯著 使用者不用捲動頁面，即可看到更多內容

開場白該死 說明也一樣該死

路標與麵包屑 (1/4) 設計導覽列

如果大家在 的網路上會迷路，他們就不會繼續使用您 網站導覽 101

尋找某樣東西 先 ，還是找人問 –『搜尋』逛逛 決定導覽，必須透過階層結構，使用路標找到正確方向 無法找到需要的東西， 會轉身離開您

『瀏覽中』不可承受之輕 對於規模缺乏感覺 沒有方向感 缺乏空間感

路標與麵包屑 (2/4) 被忽略的導覽列目的

目的 幫助我們找到所需要的東西 告訴我們身在何處

導覽列會給我們一個堅持下去的目標 導覽列告我們這裡有些什麼 告訴我們怎麼使用網站

不需要放導覽列的地方 首頁 表單

註冊、填寫意見或個人化設定

路標與麵包屑 (3/4) 頁面名稱 – 網站的路標

每一頁都要有名稱 名稱必須放在正確的地方 名稱必須顯著 名稱必須與點選結果相符

麵包屑 放在頂端 在每一層級間使用 > 符號 使用小字型 加上『你在這裡』字樣 不要用『麵包屑』取代網頁名稱

路標與麵包屑 (4/4) 四個喜歡標籤的理由

標籤可以自圓其說 標籤很難被忽略 標籤可以很精緻 標籤會讓人聯想到實體空間

後車廂測試 這是麼網站？ ( 網站名稱 ) 我在 一頁上面？哪 ( 網頁名稱 ) 網站上有 些主要區分？哪 ( 分區 ) 我在這一層有 些選擇？哪 ( 區域導覽列 ) 在整個架構中，我身在何處？ ( 『你在這裡』標示 ) 我要怎樣搜尋？

復原第一步 (1/7) 承認首頁仍在自己控制之中

設計首頁 首頁要作到 些事情哪 (1/2)

網站身份與任務 這是什麼網站、目的，為何要來這裡

網站階層架構 將所能提供的東西作概括性的描述–內容及功能 通常是以固定導覽列表現

搜尋

復原第一步 (2/7) 首頁要作到 些事情哪 (2/2)

引誘 內容宣傳

點出最新、最棒或者熱門的內容 功能宣傳

邀請探索往站上附加的部份 定時更新內容 商業合作

廣告、合作宣傳以及品牌合作等 捷徑

內容之中最常被讀取的部份 註冊 (登入 )

復原第一步 (3/7) 其他目標

顯示我要的東西 明顯標示出我要的東西

…以及其他我沒有要找的東西 一些網站上的好東西

告訴我從何處開始 建立信用

首頁是唯一建立好印象的機會

復原第一步 (4/7) 常見的限制

人人都想分一杯羹 廠商想獲得宣傳與廣告的機會

人人都有意見 老少咸宜

必須要讓大家都看得順眼 無論興趣差異多大

怎樣傳遞訊息 副標 歡迎詞

復原第一步 (5/7) 怎樣傳遞訊息

使用越多空間越好 … 但是不要浪費過多空間

歡迎詞簡短重點 ( 最多四條 ) 不要在歡迎詞中加上使命描述 要測試的東西之中，這是最重要的

不能相信自己的判斷 所謂的『重點』，即使完全被漏掉，也沒有人會發現

復原第一步 (6/7) 好的副標勝過一切

好副標，簡單明瞭 爛副標，含糊不清 好副標，長度恰到好處 好副標傳達與 不同之處與明確的優點眾 爛副標看起來很空泛 好副標可以觸動人心、生動活潑、睿智聰明

復原第一步 (7/7)

首頁導覽 分區說明

說明詞句 不同導向

版型變化 更多用於辨識網站的空間

首頁上的網站名稱 下拉選單

自己找出下拉選單的內容 下拉選單難以掃描 選單不易閱讀

農夫和牛仔也可以作朋友 為什麼大部分網站設計關於使用性的爭論都

是在浪廢時間，以及怎樣避免這種爭論 人人都喜歡？？？ 也可能覺得？？？很惹人厭

避免宗教式辯論 測試是好事

每天一塊錢的使用性測試 (1/4) 測試簡單化，自己就可以 焦點團體測試並不算使用性測試 事實

好網站必須測試 測試一位使用者，比不測試要好 計畫前對一個使用者測試，勝過事後多人測試 選擇可能使用此網站的人進行測試

提早、經常測試，隨機挑選 測試重點並非證明事物的正確或錯誤 測試是重複不斷的過程 實際使用者的反應式最重要的

每天一塊錢的使用性測試 (2/4) 無不花錢的使用性測試

時間：將測試規模盡量縮小 不需要：無止盡的辯論、到最後才重新作業

經費：借攝影機 專家：任何有耐性的人測試皆可產生部份可用的結果 實驗室：

不受干擾的房間、 子桌 *1、椅子 *2、電腦 *1 解讀測試結果：

觀看的人容易抓到重點 何時測試：開發過程中部段進行小規模測試

每天一塊錢的使用性測試 (3/4) 該找幾個使用者作測試

理想人數： 3～ 4 人 兩次測試三個使用者

第一次 找到問題較少

第二次 由於第一次問題已解決，較能發現到前一次未發現的問題

任意挑選，增加取樣廣度 測什麼？何時測試？

瞭解測試：目的、價 定位、組織運作值 關鍵工作測試：去作某件事，然後看做的怎樣

每天一塊錢的使用性測試 (4/4) 以正確的方式 閱結果查

分類 解決問題

常見問題 使用者對概念不清楚 想找得字彙不在網頁上 頁面上東西太多

將使用性測試當成基本禮儀 (1/2) 會消耗善意的事物

隱藏我想要得資訊 因為我沒照你的方式去作而遭受懲罰 我要其實 不需要的資料您 用廢話敷衍我 不是抬舉：冗長的 Flash簡介 你的網站看起來不專業

將使用性測試當成基本禮儀 (2/2) 可以增加善意的事物

瞭解大家在你的網站上主要是為了什麼，並且把他們作明顯易用

說明我想知道的事情 隨時隨地讓我省事 用心處理 知道我可能遇到什麼問題，並提出答案 提供我各種體貼的功能，如有善列印頁面 易於錯誤中復原 若有疑問，先道歉

親和性是使用性的一部分 (1/2) 修正會困擾每一個人的使用性問題 開始使用樣式表CSS

最大的格式控制權利 彈性 各種瀏覽器結果一致 使內容更連續 可讓使用者調整文字大小

親和性，樣式表，與你 (1/2)

親和性是使用性的一部分 (2/2) 柿子挑軟的吃

對每一圖片加上適當的替換文字 讓表單可以與螢幕閱讀器並用 在每一頁開頭建立一個『進入主要內容』連結 所有內容都要能以鍵盤控制 沒有重要理由別用 JavaScript 使用用戶端 (不是伺服器端 )的地圖 案檔

親和性，樣式表，與你 (2/2)

要求過多個人資料的風險 會讓 難以得到正確的資料您 會得到較少的完成表單您 這會讓 看起來心懷不軌您

在網站上加些『酷玩意兒』 沒必要？ 影響網站運作

救命！老 要我…闆