Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Don`t Make Me Think
開場致詞
 如果東西難用,那就盡量不去用
別讓我思考
 KRUG 的使用性第一定律
 什麼會讓我們思考
 命名
 行銷取向的名字、公司相關的名字、陌生的技術名字…

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

 有些東西是無法自圓其說的
 ...
實際使用頁面的方式
 掃描,將就與速讀
 事實
 我們不讀網頁,我們只會掃描
 忙、不需讀完一切

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

 我們不想知道背後原理,我們只想含糊...
佈告欄設計 (1/2)
 頁面是讓人掃描的,不是閱讀的
 看清與理解您的網站






在毎一頁上建立清楚的視覺階層
善用慣例
將頁面區隔成定義清楚的東西
明確標示出可以點選的東西
降低干擾
佈告欄設計 (2/2)
 建立清楚的視覺階層
 越重要的東西,就應該要越明顯
 放大、加粗、不同顏色、留白或頁面頂端

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

 運用視覺上的『巢...
動植、物,還是礦物
 使用者何以喜歡不用大腦的選擇
 不管我需要按幾次滑鼠都無所謂,只要毎一次按滑鼠都
不用大腦、不用思考就好
-Krug 的使用性第二定律

 有些網站甚至有設計守則,連網站內任一頁時,不能超
過一定的滑鼠點擊次數 ( ...
整略贅字
 網頁文案的寫作藝術
 刪掉不需要的文字
 簡潔的文字更有力道
 句子之中不該有累贅文字,段落之中不該有沒用的句子

 將沒人要看的文字刪掉
 減少頁面個干擾程度
 讓有用資訊更顯著
 使用者不用捲動頁面,即可看到更多...
路標與麵包屑 (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)
 無不花錢的使用性測試
 時間:將測試規模盡量縮小
 不需要:無止盡的辯論、到最後才重新作業

 經費:借攝影機
 專家:任何有耐性的人測試皆可產生部份可用的結果
 實驗室:
 不受干擾的房間、...
每天一塊錢的使用性測試 (3/4)
 該找幾個使用者作測試
 理想人數: 3 ~ 4 人
 兩次測試三個使用者
 第一次
 找到問題較少

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

 任意挑選,增加取樣廣...
每天一塊錢的使用性測試 (4/4)
 以正確的方式查閱結果
 分類
 解決問題

 常見問題
 使用者對概念不清楚
 想找得字彙不在網頁上
 頁面上東西太多
將使用性測試當成基本禮儀 (1/2)
 會消耗善意的事物







隱藏我想要得資訊
因為我沒照你的方式去作而遭受懲罰
我要其實您不需要的資料
用廢話敷衍我
不是抬舉:冗長的 Flash 簡介
你的網站看起來不專業
將使用性測試當成基本禮儀 (2/2)
 可以增加善意的事物
 瞭解大家在你的網站上主要是為了什麼,並且把他們作
明顯易用
 說明我想知道的事情
 隨時隨地讓我省事
 用心處理
 知道我可能遇到什麼問題,並提出答案
 提供我各種體貼...
親和性,樣式表,與你 (1/2)
 親和性是使用性的一部分 (1/2)
 修正會困擾每一個人的使用性問題
 開始使用樣式表 CSS






最大的格式控制權利
彈性
各種瀏覽器結果一致
使內容更連續
可讓使用者調整文字大小
親和性,樣式表,與你 (2/2)
 親和性是使用性的一部分 (2/2)
 柿子挑軟的吃







對每一圖片加上適當的替換文字
讓表單可以與螢幕閱讀器並用
在每一頁開頭建立一個『進入主要內容』連結
所有內容都要能以鍵盤控制
...
救命!老闆要我…
 要求過多個人資料的風險
 會讓您難以得到正確的資料
 您會得到較少的完成表單
 這會讓您看起來心懷不軌

 在網站上加些『酷玩意兒』
 沒必要?
 影響網站運作
Upcoming SlideShare
Loading in …5
×

Don't make me think

742 views

Published on

Published in: Design
  • Be the first to comment

Don't make me think

  1. 1. Don`t Make Me Think
  2. 2. 開場致詞  如果東西難用,那就盡量不去用
  3. 3. 別讓我思考  KRUG 的使用性第一定律  什麼會讓我們思考  命名  行銷取向的名字、公司相關的名字、陌生的技術名字…  在『人人皆懂』與『窒礙難行』之間的的取捨  以『淺顯易懂』的方向思考  有些東西是無法自圓其說的  讓一般使用者看到後就能知道要怎樣使用  如果無法使頁面自圓其說,至少要讓頁面可以自我解釋  何以這麼重要  如我讓使用者感到不耐煩,他們就會去別的地方
  4. 4. 實際使用頁面的方式  掃描,將就與速讀  事實  我們不讀網頁,我們只會掃描  忙、不需讀完一切  我們部會做出最好的選擇,我們只會將就  忙、猜錯沒差、猜測較有趣、思考不會增加正確的機率  我們不想知道背後原理,我們只想含糊帶過  那東西對我們不重要、發現管用的方法就會沿用
  5. 5. 佈告欄設計 (1/2)  頁面是讓人掃描的,不是閱讀的  看清與理解您的網站      在毎一頁上建立清楚的視覺階層 善用慣例 將頁面區隔成定義清楚的東西 明確標示出可以點選的東西 降低干擾
  6. 6. 佈告欄設計 (2/2)  建立清楚的視覺階層  越重要的東西,就應該要越明顯  放大、加粗、不同顏色、留白或頁面頂端  邏輯上有關連的東西,就應該在視覺上也有關連  相似的視覺風格、放進同一個清楚定義的區域中  運用視覺上的『巢狀』階層,顯示事物屬於那一部份     慣例很有用 將頁面分成定義清楚的區域 明確標示可以點選的東西 減少干擾
  7. 7. 動植、物,還是礦物  使用者何以喜歡不用大腦的選擇  不管我需要按幾次滑鼠都無所謂,只要毎一次按滑鼠都 不用大腦、不用思考就好 -Krug 的使用性第二定律  有些網站甚至有設計守則,連網站內任一頁時,不能超 過一定的滑鼠點擊次數 ( 通常是 3 、 4 或 5 次 )
  8. 8. 整略贅字  網頁文案的寫作藝術  刪掉不需要的文字  簡潔的文字更有力道  句子之中不該有累贅文字,段落之中不該有沒用的句子  將沒人要看的文字刪掉  減少頁面個干擾程度  讓有用資訊更顯著  使用者不用捲動頁面,即可看到更多內容  開場白該死  說明也一樣該死
  9. 9. 路標與麵包屑 (1/4)  設計導覽列  如果大家在您的網路上會迷路,他們就不會繼續使用  網站導覽 101     尋找某樣東西 先逛逛,還是找人問 –『搜尋』 決定導覽,必須透過階層結構,使用路標找到正確方向 無法找到需要的東西,您會轉身離開  『瀏覽中』不可承受之輕  對於規模缺乏感覺  沒有方向感  缺乏空間感
  10. 10. 路標與麵包屑 (2/4)  被忽略的導覽列目的  目的  幫助我們找到所需要的東西  告訴我們身在何處  導覽列會給我們一個堅持下去的目標  導覽列告我們這裡有些什麼  告訴我們怎麼使用網站  不需要放導覽列的地方  首頁  表單  註冊、填寫意見或個人化設定
  11. 11. 路標與麵包屑 (3/4)  頁面名稱 – 網站的路標     每一頁都要有名稱 名稱必須放在正確的地方 名稱必須顯著 名稱必須與點選結果相符  麵包屑      放在頂端 在每一層級間使用 > 符號 使用小字型 加上『你在這裡』字樣 不要用『麵包屑』取代網頁名稱
  12. 12. 路標與麵包屑 (4/4)  四個喜歡標籤的理由     標籤可以自圓其說 標籤很難被忽略 標籤可以很精緻 標籤會讓人聯想到實體空間  後車廂測試       這是麼網站? ( 網站名稱 ) 我在哪一頁上面? ( 網頁名稱 ) 網站上有哪些主要區分? ( 分區 ) 我在這一層有哪些選擇? ( 區域導覽列 ) 在整個架構中,我身在何處? ( 『你在這裡』標示 ) 我要怎樣搜尋?
  13. 13. 復原第一步 (1/7)  承認首頁仍在自己控制之中  設計首頁  首頁要作到哪些事情 (1/2)  網站身份與任務  這是什麼網站、目的,為何要來這裡  網站階層架構  將所能提供的東西作概括性的描述–內容及功能  通常是以固定導覽列表現  搜尋
  14. 14. 復原第一步 (2/7)  首頁要作到哪些事情 (2/2)  引誘  內容宣傳  點出最新、最棒或者熱門的內容  功能宣傳  邀請探索往站上附加的部份  定時更新內容  商業合作  廣告、合作宣傳以及品牌合作等  捷徑  內容之中最常被讀取的部份  註冊 ( 登入 )
  15. 15. 復原第一步 (3/7)  其他目標  顯示我要的東西  明顯標示出我要的東西  … 以及其他我沒有要找的東西  一些網站上的好東西  告訴我從何處開始  建立信用  首頁是唯一建立好印象的機會
  16. 16. 復原第一步 (4/7)  常見的限制  人人都想分一杯羹  廠商想獲得宣傳與廣告的機會  人人都有意見  老少咸宜  必須要讓大家都看得順眼  無論興趣差異多大  怎樣傳遞訊息  副標  歡迎詞
  17. 17. 復原第一步 (5/7)  怎樣傳遞訊息  使用越多空間越好  … 但是不要浪費過多空間  歡迎詞簡短重點 ( 最多四條 )  不要在歡迎詞中加上使命描述  要測試的東西之中,這是最重要的  不能相信自己的判斷  所謂的『重點』,即使完全被漏掉,也沒有人會發現
  18. 18. 復原第一步 (6/7)  好的副標勝過一切       好副標,簡單明瞭 爛副標,含糊不清 好副標,長度恰到好處 好副標傳達與眾不同之處與明確的優點 爛副標看起來很空泛 好副標可以觸動人心、生動活潑、睿智聰明
  19. 19. 復原第一步 (7/7)  首頁導覽  分區說明  說明詞句  不同導向  版型變化  更多用於辨識網站的空間  首頁上的網站名稱  下拉選單  自己找出下拉選單的內容  下拉選單難以掃描  選單不易閱讀
  20. 20. 農夫和牛仔也可以作朋友  為什麼大部分網站設計關於使用性的爭論都 是在浪廢時間,以及怎樣避免這種爭論  人人都喜歡???  也可能覺得???很惹人厭  避免宗教式辯論  測試是好事
  21. 21. 每天一塊錢的使用性測試 (1/4)  測試簡單化,自己就可以  焦點團體測試並不算使用性測試  事實     好網站必須測試 測試一位使用者,比不測試要好 計畫前對一個使用者測試,勝過事後多人測試 選擇可能使用此網站的人進行測試  提早、經常測試,隨機挑選  測試重點並非證明事物的正確或錯誤  測試是重複不斷的過程  實際使用者的反應式最重要的
  22. 22. 每天一塊錢的使用性測試 (2/4)  無不花錢的使用性測試  時間:將測試規模盡量縮小  不需要:無止盡的辯論、到最後才重新作業  經費:借攝影機  專家:任何有耐性的人測試皆可產生部份可用的結果  實驗室:  不受干擾的房間、桌子 *1 、椅子 *2 、電腦 *1  解讀測試結果:  觀看的人容易抓到重點  何時測試:開發過程中部段進行小規模測試
  23. 23. 每天一塊錢的使用性測試 (3/4)  該找幾個使用者作測試  理想人數: 3 ~ 4 人  兩次測試三個使用者  第一次  找到問題較少  第二次  由於第一次問題已解決,較能發現到前一次未發現的問題  任意挑選,增加取樣廣度  測什麼?何時測試?  瞭解測試:目的、價值定位、組織運作  關鍵工作測試:去作某件事,然後看做的怎樣
  24. 24. 每天一塊錢的使用性測試 (4/4)  以正確的方式查閱結果  分類  解決問題  常見問題  使用者對概念不清楚  想找得字彙不在網頁上  頁面上東西太多
  25. 25. 將使用性測試當成基本禮儀 (1/2)  會消耗善意的事物       隱藏我想要得資訊 因為我沒照你的方式去作而遭受懲罰 我要其實您不需要的資料 用廢話敷衍我 不是抬舉:冗長的 Flash 簡介 你的網站看起來不專業
  26. 26. 將使用性測試當成基本禮儀 (2/2)  可以增加善意的事物  瞭解大家在你的網站上主要是為了什麼,並且把他們作 明顯易用  說明我想知道的事情  隨時隨地讓我省事  用心處理  知道我可能遇到什麼問題,並提出答案  提供我各種體貼的功能,如有善列印頁面  易於錯誤中復原  若有疑問,先道歉
  27. 27. 親和性,樣式表,與你 (1/2)  親和性是使用性的一部分 (1/2)  修正會困擾每一個人的使用性問題  開始使用樣式表 CSS      最大的格式控制權利 彈性 各種瀏覽器結果一致 使內容更連續 可讓使用者調整文字大小
  28. 28. 親和性,樣式表,與你 (2/2)  親和性是使用性的一部分 (2/2)  柿子挑軟的吃       對每一圖片加上適當的替換文字 讓表單可以與螢幕閱讀器並用 在每一頁開頭建立一個『進入主要內容』連結 所有內容都要能以鍵盤控制 沒有重要理由別用 JavaScript 使用用戶端 ( 不是伺服器端 ) 的地圖檔案
  29. 29. 救命!老闆要我…  要求過多個人資料的風險  會讓您難以得到正確的資料  您會得到較少的完成表單  這會讓您看起來心懷不軌  在網站上加些『酷玩意兒』  沒必要?  影響網站運作

×