1. 優使性設計（Usability）
童上瑋
swtung@omeagnet.com.tw
易網通科技有限公司

4. 優使性
 好用
 舒服

6. 讓使用者在「有效率」、「感到
滿意」情況下，完成瀏覽網站資
訊的工作。

7. 為何很尐聽到優使性？
 歐美已數十年，台灣近年從重視設計
 成效難以量化
 沒人在教

8. 優使性 VS 銷售量
‧低優使性
1.可能喪失50%的銷售量
2.可能喪失40%的後續流量
‧高優使性
1.平均增加100%的銷售量
2.平均提升150%的流量

9. 學優使性的目的

11. 優使性的兩難
漂亮 vs 好用

12. 如何測試優使性
聽聽真正使用者的想法

13. 網站優使性流程
 設計前 --- 了解需求
 設計中 --- 遵守原則
 設計後 --- 找問題
★ 把訪客當成都是小學生來設計

14. 優使性檢測
 www.asus.com.tw
 www.thsrc.com.tw

15. 要了解優使性設計，
先了解「訪客行為模式」。

16. 訪客行為模式

17. 行為模式一：不讓訪客思考
 www.youtube.com
 www.slideshare.net
 www.yahoo.co.jp
 www.filestube.com

18. 行為模式二：訪客掃描網站
公司介紹 產品頁 Google 搜尋頁
紅色表示最常看的區域

19. 行為模式三：任務導向
 找產品
 找資訊

20. 行為模式四：厭惡干擾
 不停移動的廣告Banner
 彈跳視窗
 跑馬燈
 Flash動畫

21. 行為模式五：容易迷路
 現在的位置在哪
 怎麼回上一層目錄
 使用路徑列
 網站地圖
 明顯的頁面標題

22. 行為模式六：網站使用自由度
 Skip Flash
 關掉音樂
 取消電子報訂閱
 選擇「取消」或回上一頁

23. 行為模式七：給予訪客適當協助
 隨時有 Help功能
 隨時隨地有「客服專區」

24. 行為模式八：訪客忽略「廣告」
訪客會下意識的過濾「看起來」像廣告的內容
（PS：入口網站首頁廣告點擊率約為0.1%）

25. 行為模式九：灌用設計方式
 Youtube & Slideshare
 博客來 & Amazon

26. 行為模式十：訪客不信任網站
 公司介紹
 個人隱私保護條款
 金流機制、數位憑證

27. 關於優使性設計
 1.選單命名精確
 2.不做隱藏性設計
 3.選單只有圖示
 4.連結不知道能不能點
 5.選單項目太多
 6.首頁及內頁缺乏一致性
 7.回首頁不清楚
 8.選單名稱與頁面標題不同

28.  9.版面太擠
 10.字體太小
 11.框架/視窗太小
 12.網站內容過長
 13.對比不足，字看不清楚
 14.使用適當的圖片做引導
 15.圖片亂閃
 16.圖表無圖例說明

29.  17.未提供關閉聲音或跳過動畫
 18.廣告和重要內容太相近
 19.網站「標題」、「副標」說明

30. http://sprlight.net/

31. 關於表單設計
 1.標示必填欄位
 2.步驟指示清楚
 3.告知為何需要填個人資料
 4.儘量讓訪客不用打字
 5.告知正確資料格式
 6.更有效的「欄位設計」
 7.告知已填表完成及確認訊息
 8.重要步驟再次確認

34. 優使性的設計慣例
 1.Logo 放左上角
 2.搜尋放上方
 3.會員登入放左上方及右上方
 4.按鈕像個按鈕
 5.用語一般化
 6.使用圖示慣例
 7. Title 對應內容
 8.按Logo能夠回首頁

35.  9.導覽列要在所在位置標示
 10.點過的連結要變色
 11.顯示目前的路徑
 12.連結使用藍字加底線
 13.與頁面內，顯示相關連結
 14.頁面最上方方置功能列
 15.不使用重覆連結名稱
 16.不使用框架

36.  17.設計五九原則（5-9段）
 18.辨視度高的顏色組合
 19.瀏覽器版本問題
 20.動畫等待不能太長
 21.網頁內要有「關於我們」及「聯絡我們」的
連結
 22.圖片要有註解
 23.不要使用開場頁
 24.儘量不使用彈跳視窗

37. 「行銷觀點」的 排版理論

38. 如果你了解 CRAP（廢話）
 你的網站營收將再提升 25% -
300%
 C（Contrast）對比
 R（Repetition）重複
 A（Alignment）對齊
 P（Proximity）相近

39. 對比（Contrast）
 讓不同的內容元素別長的太像，長的太像會讓訪
客產生視覺混淆。所以你想讓訪客知道兩個元素
間的不同，就用不同的「字體大小」、「對比
色」、「形狀」…來展現吧！

45. 重複（Repetition）
 重複的視覺元素設計（形狀、字體、大小）能增
加一致性，讓訪客的眼睛容易找到資訊

48. 對齊（Alignment）
 同一個網頁上，每個項目應和其他項目有某些視
覺上的關聯性，這樣一來讓會網頁看起來更容易
被理解

51. 相近（Proximity）
 網頁上相關的項目，要放在一起，如此能讓這些
項目成為一個視覺單位，容易讓讀者了解整個網
頁架構

54.  http://www.apure.com.tw/edm/060214/

55. 關於設計選單

56.  25個創意選單設計範例
 Table 設計
 最佳網頁設計網站

57. 優使性參考書籍

58. 使用者最大：從優使性(Usability)出發的網站設計原則
作者：魏澤群
出版社：網奕
出版日期：2005年06月16日
語言：繁體中文 ISBN：9867236114
裝訂：平裝

59. 優使性2.0(Usability 2.0)-網站經驗設計與使用者研究
作者：魏澤群
出版社：網奕
出版日期：2007年09月03日
語言：繁體中文 ISBN：9789866879333
裝訂：平裝