法鼓山德貴學苑 公益論壇 2009/04/15

1. 講題：
網路、設計、心理學使用者經驗
web, design, psychology user experience
www.xxc.idv.tw
陳啟亮 2009.05.16
xxc.chen@gmail.com

6. 目前職稱:
網站資訊架構師

7. 什麼是資訊架構師
What is Information Architect

8. 建築師,
不規劃房子規劃網站的

9. 我們公司想做個網站，你
們明天作個首頁來提案吧
1網站 2設計 3專業 4失靈 5參與

10. 誰來規劃網站？
• 視覺創作者: 設計師
• 網站是一種互動多媒體的表現
1網站 2設計 3專業 4失靈 5參與

11. 誰來規劃網站？
• 作者: 文案、編劇、導演(作者論) • 視覺創作者: 設計師
• 網站是一種敘事形式 • 網站是一種互動多媒體的表現
1網站 2設計 3專業 4失靈 5參與

12. 誰來規劃網站？
• 管理者: 專案經理/產品經理 • 視覺創作者: 設計師
• 網站是一種產品 • 網站是一種互動多媒體的表現
• 作者: 文案、編劇、導演(作者論)
• 網站是一種敘事形式
1網站 2設計 3專業 4失靈 5參與

13. 誰來規劃網站？
• 工程師 • 視覺創作者: 設計師
• 網站是一種資訊系統 • 網站是一種互動多媒體的表現
• 作者: 文案、編劇、導演(作者論)
• 網站是一種敘事形式
• 管理者: 專案經理/產品經理
• 網站是一種產品
1網站 2設計 3專業 4失靈 5參與

14. 誰來規劃網站？
• 行銷、傳播專業人士 • 視覺創作者: 設計師
• 網站是一種傳播媒體 • 網站是一種互動多媒體的表現
• 作者: 文案、編劇、導演(作者論)
• 網站是一種敘事形式
• 管理者: 專案經理/產品經理
• 網站是一種產品
• 工程師
• 網站是一種資訊系統
1網站 2設計 3專業 4失靈 5參與

15. 誰來規劃網站？
• 視覺創作者: 設計師 • 網站是一種互動多媒體的表現
• 作者: 文案、編劇、導演(作者論) • 網站是一種敘事形式
• 管理者: 專案經理/產品經理 • 網站是一種產品
• 工程師 • 網站是一種資訊系統
• 行銷、傳播專業人士 • 網站是一種傳播媒體
1網站 2設計 3專業 4失靈 5參與

16. 網站設計/企劃者的奮鬥
1網站 2設計 3專業 4失靈 5參與

17. 在台灣，
你不會想被叫做”美工”
1網站 2設計 3專業 4失靈 5參與

18. 提昇地位
1. 變得更像藝術家
2. 變得更像銷售員
3. 變得更像(理性的)專業人員
1網站 2設計 3專業 4失靈 5參與

19. 例子 1
1網站 2設計 3專業 4失靈 5參與

20. 1網站 2設計 3專業 4失靈 5參與

21. Deborah Adler
School of Visual Arts MFA in Design program
1網站 2設計 3專業 4失靈 5參與

22. 1網站 2設計 3專業 4失靈 5參與

23. 例子 2
1網站 2設計 3專業 4失靈 5參與

24. Pizza tripod
小處著手：追求完美的設計
Small Things Considered : Why There is no Perfect Design
Henry Petroski, 陳正芬(譯), 時報出版
1網站 2設計 3專業 4失靈 5參與

25. 藏於民間，隨手可得，不愧為最佳設計之首
http://www.flickr.com/photos/80445716@N00/3353181375/
1網站 2設計 3專業 4失靈 5參與

26. 設計師的專業化：
也許來一些心理學與社會學
1網站 2設計 3專業 4失靈 5參與

27. 設計
• [名詞]. 製作某物以解決使用者特定問題的過程.
• [動詞]. 決定如何製作出某物以解決使用者特定問題.
1網站 2設計 3專業 4失靈 5參與

28. Dervin's sense-making metaphor (1992)
1網站 2設計 3專業 4失靈 5參與

29. UCD, User centered design
The human-centred design process, ISO-13407 (ISO 1999)
1網站 2設計 3專業 4失靈 5參與

30. 確定
使用者需求
確定
設計問題
檢驗設計
UCD 了解
使用情境
建構
解決方案
1網站 2設計 3專業 4失靈 5參與

31. 例1
1網站 2設計 3專業 4失靈 5參與

32. Jakob Nielsen(2006)
Enquiro (2006)
1網站 2設計 3專業 4失靈 5參與

33. Think Eyetracking (2008) 1網站 2設計 3專業 4失靈 5參與

34. Reader don’t Read!!
On the average Web page, users have time to read at most 25% of the words
Jakob Nielsen (2008)
1網站 2設計 3專業 4失靈 5參與

35. 例2
1網站 2設計 3專業 4失靈 5參與

36. Jan Chipchase
• Principal Researcher at Mobile HCI
Group of Nokia Research
• has a Master degree of User Interface
Design in UK
• has a Blog
http://www.janchipchase.com/
• is living and working in Tokyo
1網站 2設計 3專業 4失靈 5參與

37. Photos: Center of Gravity, Jan Chipchase, Berlin, Tokyo, 2003, 2004.
1網站 2設計 3專業 4失靈 5參與

38. 例3
1網站 2設計 3專業 4失靈 5參與

39. 小筆電
1網站 2設計 3專業 4失靈 5參與

40. Asus eeePC
1網站 2設計 3專業 4失靈 5參與

41. Acer Aspire One
1網站 2設計 3專業 4失靈 5參與

42. Ubuntu Netbook Remix
1網站 2設計 3專業 4失靈5參與

43. HP Mini Note Dashboard
1網站 2設計 3專業 4失靈 5參與

44. 設計者失靈
哪一個設計”客觀上”比較好？
1網站 2設計 3專業 4失靈 5參與

45. 設計者失靈 (1)
意外行為
Thoughtless act
Thoughtless Acts?: Observations on Intuitive Design (Hardcover)
by Jane Fulton Suri (Author), Ideo (Author)
http://www.thoughtlessacts.com/
1網站 2設計 3專業 4失靈 5參與

46. 設計者失靈 (1)
http://www.flickr.com/photos/stribs/363124906/in/pool-thoughtlessacts/
1網站 2設計 3專業 4失靈 5參與

47. 設計者失靈 (2)
人性:
並非完全理性行動
1網站 2設計 3專業 4失靈 5參與

48. 設計者失靈 (2)
Herbert Simon:剛好滿意
satisficing
1網站 2設計 3專業 4失靈 5參與

49. 設計者失靈 (2) Don Norman: Emotional design
1988 2004
1網站 2設計 3專業 4失靈 5參與

50. 設計者失靈 (2) Don Norman: Emotional design
• 吸引力（感覺的, visceral ）
• 功能性和可用性（行為的, behavioral）
• 品位（反思性的, reflective）
Herbert Simon:剛好滿意
• Satisficing
• 決策時不會考慮最佳的解決問題方法
• 夠用就好
1網站 2設計 3專業 4失靈 5參與

51. 設計者失靈 (3)
設計循環時差
1網站 2設計 3專業 4失靈 5參與

52. 確定
使用者需求
確定
設計問題
檢驗設計
UCD 了解
使用情境
建構
解決方案
1網站 2設計 3專業 4失靈 5參與

53. 設計師的除魅
1網站 2設計 3專業 4失靈 5參與

54. 參與式設計
Participatory design
1網站 2設計 3專業 4失靈 5參與

55. 參與式設計
• 空間設計
• 建築
• 社區、都市規劃
1網站 2設計 3專業 4失靈 5參與

56. 成功的參與式資訊設計
• Folksonomy (scoial tagging)
• Wikipedia
• Open source
1網站 2設計 3專業 4失靈 5參與

57. by Wesley Fryer
CC Attribution-Share Alike 2.0 Generic
http://www.flickr.com/photos/wfryer/433566428/
1網站 2設計 3專業 4失靈 5參與

58. 但也有失敗的
1網站 2設計 3專業 4失靈 5參與

59. 1網站 2設計 3專業 4失靈 5參與

60. 造物者之死
• 將資訊設計，從一種”造物”的觀點，轉為另一種” 系統”的觀
點
• 資訊生態系統 Information ecologies
• 資訊經濟學 Information economics
• 社會科技網絡 Socio-tech network
1網站 2設計 3專業 4失靈 5參與

61. 例：圖書館/書店/漫畫出租店的分類法
Photo by Nienyi Ho
http://flickr.com/photos/honienyi/2216528946/
CC 2.0 Attribution-Noncommercial-Share Alike 1網站 2設計 3專業 4失靈 5參與

62. 例：瀏覽者與搜尋者
1網站 2設計 3專業 4失靈 5參與

63. ending

64. 新店慈濟醫院

65. Bad Good
不清楚的導覽 超互動導覽

66. Thanks,
www.xxc.idv.tw
陳啟亮 2009.05.16
xxc.chen@gmail.com