1. Don`t Make Me Think

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

3. 別讓我思考
 KRUG 的使用性第一定律
 什麼會讓我們思考
 命名
 行銷取向的名字、公司相關的名字、陌生的技術名字…
 在『人人皆懂』與『窒礙難行』之間的的取捨
 以『淺顯易懂』的方向思考
 有些東西是無法自圓其說的
 讓一般使用者看到後就能知道要怎樣使用
 如果無法使頁面自圓其說，至少要讓頁面可以自我解釋
 何以這麼重要
 如我讓使用者感到不耐煩，他們就會去別的地方

4. 實際使用頁面的方式
 掃描，將就與速讀
 事實
 我們不讀網頁，我們只會掃描
 忙、不需讀完一切
 我們部會做出最好的選擇，我們只會將就
 忙、猜錯沒差、猜測較有趣、思考不會增加正確的機率
 我們不想知道背後原理，我們只想含糊帶過
 那東西對我們不重要、發現管用的方法就會沿用

5. 佈告欄設計 (1/2)
 頁面是讓人掃描的，不是閱讀的
 看清與理解您的網站





在毎一頁上建立清楚的視覺階層
善用慣例
將頁面區隔成定義清楚的東西
明確標示出可以點選的東西
降低干擾

6. 佈告欄設計 (2/2)
 建立清楚的視覺階層
 越重要的東西，就應該要越明顯
 放大、加粗、不同顏色、留白或頁面頂端
 邏輯上有關連的東西，就應該在視覺上也有關連
 相似的視覺風格、放進同一個清楚定義的區域中
 運用視覺上的『巢狀』階層，顯示事物屬於那一部份




慣例很有用
將頁面分成定義清楚的區域
明確標示可以點選的東西
減少干擾

7. 動植、物，還是礦物
 使用者何以喜歡不用大腦的選擇
 不管我需要按幾次滑鼠都無所謂，只要毎一次按滑鼠都
不用大腦、不用思考就好
-Krug 的使用性第二定律
 有些網站甚至有設計守則，連網站內任一頁時，不能超
過一定的滑鼠點擊次數 ( 通常是 3 、 4 或 5 次 )

8. 整略贅字
 網頁文案的寫作藝術
 刪掉不需要的文字
 簡潔的文字更有力道
 句子之中不該有累贅文字，段落之中不該有沒用的句子
 將沒人要看的文字刪掉
 減少頁面個干擾程度
 讓有用資訊更顯著
 使用者不用捲動頁面，即可看到更多內容
 開場白該死
 說明也一樣該死

9. 路標與麵包屑 (1/4)
 設計導覽列
 如果大家在您的網路上會迷路，他們就不會繼續使用
 網站導覽 101




尋找某樣東西
先逛逛，還是找人問 –『搜尋』
決定導覽，必須透過階層結構，使用路標找到正確方向
無法找到需要的東西，您會轉身離開
 『瀏覽中』不可承受之輕
 對於規模缺乏感覺
 沒有方向感
 缺乏空間感

10. 路標與麵包屑 (2/4)
 被忽略的導覽列目的
 目的
 幫助我們找到所需要的東西
 告訴我們身在何處
 導覽列會給我們一個堅持下去的目標
 導覽列告我們這裡有些什麼
 告訴我們怎麼使用網站
 不需要放導覽列的地方
 首頁
 表單
 註冊、填寫意見或個人化設定

11. 路標與麵包屑 (3/4)
 頁面名稱 – 網站的路標




每一頁都要有名稱
名稱必須放在正確的地方
名稱必須顯著
名稱必須與點選結果相符
 麵包屑





放在頂端
在每一層級間使用 > 符號
使用小字型
加上『你在這裡』字樣
不要用『麵包屑』取代網頁名稱

12. 路標與麵包屑 (4/4)
 四個喜歡標籤的理由




標籤可以自圓其說
標籤很難被忽略
標籤可以很精緻
標籤會讓人聯想到實體空間
 後車廂測試






這是麼網站？ ( 網站名稱 )
我在哪一頁上面？ ( 網頁名稱 )
網站上有哪些主要區分？ ( 分區 )
我在這一層有哪些選擇？ ( 區域導覽列 )
在整個架構中，我身在何處？ ( 『你在這裡』標示 )
我要怎樣搜尋？

13. 復原第一步 (1/7)
 承認首頁仍在自己控制之中
 設計首頁
 首頁要作到哪些事情 (1/2)
 網站身份與任務
 這是什麼網站、目的，為何要來這裡
 網站階層架構
 將所能提供的東西作概括性的描述–內容及功能
 通常是以固定導覽列表現
 搜尋

14. 復原第一步 (2/7)
 首頁要作到哪些事情 (2/2)
 引誘
 內容宣傳
 點出最新、最棒或者熱門的內容
 功能宣傳
 邀請探索往站上附加的部份
 定時更新內容
 商業合作
 廣告、合作宣傳以及品牌合作等
 捷徑
 內容之中最常被讀取的部份
 註冊 ( 登入 )

15. 復原第一步 (3/7)
 其他目標
 顯示我要的東西
 明顯標示出我要的東西
 … 以及其他我沒有要找的東西
 一些網站上的好東西
 告訴我從何處開始
 建立信用
 首頁是唯一建立好印象的機會

16. 復原第一步 (4/7)
 常見的限制
 人人都想分一杯羹
 廠商想獲得宣傳與廣告的機會
 人人都有意見
 老少咸宜
 必須要讓大家都看得順眼
 無論興趣差異多大
 怎樣傳遞訊息
 副標
 歡迎詞

17. 復原第一步 (5/7)
 怎樣傳遞訊息
 使用越多空間越好
 … 但是不要浪費過多空間
 歡迎詞簡短重點 ( 最多四條 )
 不要在歡迎詞中加上使命描述
 要測試的東西之中，這是最重要的
 不能相信自己的判斷
 所謂的『重點』，即使完全被漏掉，也沒有人會發現

18. 復原第一步 (6/7)
 好的副標勝過一切






好副標，簡單明瞭
爛副標，含糊不清
好副標，長度恰到好處
好副標傳達與眾不同之處與明確的優點
爛副標看起來很空泛
好副標可以觸動人心、生動活潑、睿智聰明

19. 復原第一步 (7/7)
 首頁導覽
 分區說明
 說明詞句
 不同導向
 版型變化
 更多用於辨識網站的空間
 首頁上的網站名稱
 下拉選單
 自己找出下拉選單的內容
 下拉選單難以掃描
 選單不易閱讀

20. 農夫和牛仔也可以作朋友
 為什麼大部分網站設計關於使用性的爭論都
是在浪廢時間，以及怎樣避免這種爭論
 人人都喜歡？？？
 也可能覺得？？？很惹人厭
 避免宗教式辯論
 測試是好事

21. 每天一塊錢的使用性測試 (1/4)
 測試簡單化，自己就可以
 焦點團體測試並不算使用性測試
 事實




好網站必須測試
測試一位使用者，比不測試要好
計畫前對一個使用者測試，勝過事後多人測試
選擇可能使用此網站的人進行測試
 提早、經常測試，隨機挑選
 測試重點並非證明事物的正確或錯誤
 測試是重複不斷的過程
 實際使用者的反應式最重要的

22. 每天一塊錢的使用性測試 (2/4)
 無不花錢的使用性測試
 時間：將測試規模盡量縮小
 不需要：無止盡的辯論、到最後才重新作業
 經費：借攝影機
 專家：任何有耐性的人測試皆可產生部份可用的結果
 實驗室：
 不受干擾的房間、桌子 *1 、椅子 *2 、電腦 *1
 解讀測試結果：
 觀看的人容易抓到重點
 何時測試：開發過程中部段進行小規模測試

23. 每天一塊錢的使用性測試 (3/4)
 該找幾個使用者作測試
 理想人數： 3 ～ 4 人
 兩次測試三個使用者
 第一次
 找到問題較少
 第二次
 由於第一次問題已解決，較能發現到前一次未發現的問題
 任意挑選，增加取樣廣度
 測什麼？何時測試？
 瞭解測試：目的、價值定位、組織運作
 關鍵工作測試：去作某件事，然後看做的怎樣

24. 每天一塊錢的使用性測試 (4/4)
 以正確的方式查閱結果
 分類
 解決問題
 常見問題
 使用者對概念不清楚
 想找得字彙不在網頁上
 頁面上東西太多

25. 將使用性測試當成基本禮儀 (1/2)
 會消耗善意的事物






隱藏我想要得資訊
因為我沒照你的方式去作而遭受懲罰
我要其實您不需要的資料
用廢話敷衍我
不是抬舉：冗長的 Flash 簡介
你的網站看起來不專業

26. 將使用性測試當成基本禮儀 (2/2)
 可以增加善意的事物
 瞭解大家在你的網站上主要是為了什麼，並且把他們作
明顯易用
 說明我想知道的事情
 隨時隨地讓我省事
 用心處理
 知道我可能遇到什麼問題，並提出答案
 提供我各種體貼的功能，如有善列印頁面
 易於錯誤中復原
 若有疑問，先道歉

27. 親和性，樣式表，與你 (1/2)
 親和性是使用性的一部分 (1/2)
 修正會困擾每一個人的使用性問題
 開始使用樣式表 CSS





最大的格式控制權利
彈性
各種瀏覽器結果一致
使內容更連續
可讓使用者調整文字大小

28. 親和性，樣式表，與你 (2/2)
 親和性是使用性的一部分 (2/2)
 柿子挑軟的吃






對每一圖片加上適當的替換文字
讓表單可以與螢幕閱讀器並用
在每一頁開頭建立一個『進入主要內容』連結
所有內容都要能以鍵盤控制
沒有重要理由別用 JavaScript
使用用戶端 ( 不是伺服器端 ) 的地圖檔案

29. 救命！老闆要我…
 要求過多個人資料的風險
 會讓您難以得到正確的資料
 您會得到較少的完成表單
 這會讓您看起來心懷不軌
 在網站上加些『酷玩意兒』
 沒必要？
 影響網站運作