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.
講題:

網路、設計、心理學使用者經驗
web, design, psychology user experience




     www.xxc.idv.tw
     陳啟亮 2009.05.16
     xxc.chen@gmai...
目前職稱:
網站資訊架構師
什麼是資訊架構師
What is Information Architect
建築師,
不規劃房子規劃網站的
我們公司想做個網站,你
們明天作個首頁來提案吧



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




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




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

• 管理者: 專案經理/產品經理      • 網站是一種產品
• 工程師    ...
網站設計/企劃者的奮鬥




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



         1網站 2設計 3專業 4失靈 5參與
提昇地位

1. 變得更像藝術家
2. 變得更像銷售員
3. 變得更像(理性的)專業人員




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




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




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




       1網站 2設計 3專業 4失靈 5參與
Pizza tripod




      小處著手:追求完美的設計
      Small Things Considered : Why There is no Perfect Design

      Henry Petroski, ...
藏於民間,隨手可得,不愧為最佳設計之首




http://www.flickr.com/photos/80445716@N00/3353181375/

                                           ...
設計師的專業化:
也許來一些心理學與社會學




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


• [名詞]. 製作某物以解決使用者特定問題的過程.
• [動詞]. 決定如何製作出某物以解決使用者特定問題.




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




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




                                     ...
確定
       使用者需求
        確定
       設計問題



檢驗設計
       UCD      了解
               使用情境



        建構
       解決方案


        ...
例1




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




Enquiro (2006)
      1網站 2設計 3專業 4失靈 5參與
Think Eyetracking (2008)   1網站 2設計 3專業 4失靈 5參與
Reader don’t Read!!




                       On the average Web page, users have time to read at most   25% of the words...
例2




     1網站 2設計 3專業 4失靈 5參與
Jan Chipchase

•   Principal Researcher at Mobile HCI
    Group of Nokia Research
•   has a Master degree of User Interfac...
Photos: Center of Gravity, Jan Chipchase, Berlin, Tokyo, 2003, 2004.




                                                 ...
例3




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




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




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




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




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




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




                 1網站 2設計 3專業 4失靈 5參與
設計者失靈 (1)




  意外行為
  Thoughtless act




   Thoughtless Acts?: Observations on Intuitive Design (Hardcover)
   by Jane F...
設計者失靈 (1)




http://www.flickr.com/photos/stribs/363124906/in/pool-thoughtlessacts/




                                 ...
設計者失靈 (2)




  人性:
  並非完全理性行動



             1網站 2設計 3專業 4失靈 5參與
設計者失靈 (2)




  Herbert Simon:剛好滿意
  satisficing




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




            1988                     2004



                               ...
設計者失靈 (2)   Don Norman: Emotional design

• 吸引力(感覺的, visceral )
• 功能性和可用性(行為的, behavioral)
• 品位(反思性的, reflective)




    ...
設計者失靈 (3)




  設計循環時差




            1網站 2設計 3專業 4失靈 5參與
確定
       使用者需求
        確定
       設計問題



檢驗設計
       UCD      了解
               使用情境



        建構
       解決方案


        ...
設計師的除魅




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




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

• 空間設計
• 建築
• 社區、都市規劃




            1網站 2設計 3專業 4失靈 5參與
成功的參與式資訊設計

• Folksonomy (scoial tagging)
• Wikipedia
• Open source




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




         1網站 2設計 3專業 4失靈 5參與
1網站 2設計 3專業 4失靈 5參與
造物者之死

• 將資訊設計,從一種”造物”的觀點,轉為另一種” 系統”的觀
  點
 • 資訊生態系統 Information ecologies
 • 資訊經濟學 Information economics
 • 社會科技網絡 Socio-...
例:圖書館/書店/漫畫出租店的分類法




Photo by Nienyi Ho
http://flickr.com/photos/honienyi/2216528946/
CC 2.0 Attribution-Noncommercial-S...
例:瀏覽者與搜尋者




            1網站 2設計 3專業 4失靈 5參與
ending
新店慈濟醫院
Bad      Good
不清楚的導覽   超互動導覽
Thanks,




  www.xxc.idv.tw
  陳啟亮 2009.05.16
  xxc.chen@gmail.com
網路、設計、使用者經驗
網路、設計、使用者經驗
網路、設計、使用者經驗
網路、設計、使用者經驗
Upcoming SlideShare
Loading in …5
×

網路、設計、使用者經驗

3,161 views

Published on

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

Published in: Design
  • Be the first to comment

網路、設計、使用者經驗

  1. 1. 講題: 網路、設計、心理學使用者經驗 web, design, psychology user experience www.xxc.idv.tw 陳啟亮 2009.05.16 xxc.chen@gmail.com
  2. 2. 目前職稱: 網站資訊架構師
  3. 3. 什麼是資訊架構師 What is Information Architect
  4. 4. 建築師, 不規劃房子規劃網站的
  5. 5. 我們公司想做個網站,你 們明天作個首頁來提案吧 1網站 2設計 3專業 4失靈 5參與
  6. 6. 誰來規劃網站? • 視覺創作者: 設計師 • 網站是一種互動多媒體的表現 1網站 2設計 3專業 4失靈 5參與
  7. 7. 誰來規劃網站? • 作者: 文案、編劇、導演(作者論) • 視覺創作者: 設計師 • 網站是一種敘事形式 • 網站是一種互動多媒體的表現 1網站 2設計 3專業 4失靈 5參與
  8. 8. 誰來規劃網站? • 管理者: 專案經理/產品經理 • 視覺創作者: 設計師 • 網站是一種產品 • 網站是一種互動多媒體的表現 • 作者: 文案、編劇、導演(作者論) • 網站是一種敘事形式 1網站 2設計 3專業 4失靈 5參與
  9. 9. 誰來規劃網站? • 工程師 • 視覺創作者: 設計師 • 網站是一種資訊系統 • 網站是一種互動多媒體的表現 • 作者: 文案、編劇、導演(作者論) • 網站是一種敘事形式 • 管理者: 專案經理/產品經理 • 網站是一種產品 1網站 2設計 3專業 4失靈 5參與
  10. 10. 誰來規劃網站? • 行銷、傳播專業人士 • 視覺創作者: 設計師 • 網站是一種傳播媒體 • 網站是一種互動多媒體的表現 • 作者: 文案、編劇、導演(作者論) • 網站是一種敘事形式 • 管理者: 專案經理/產品經理 • 網站是一種產品 • 工程師 • 網站是一種資訊系統 1網站 2設計 3專業 4失靈 5參與
  11. 11. 誰來規劃網站? • 視覺創作者: 設計師 • 網站是一種互動多媒體的表現 • 作者: 文案、編劇、導演(作者論) • 網站是一種敘事形式 • 管理者: 專案經理/產品經理 • 網站是一種產品 • 工程師 • 網站是一種資訊系統 • 行銷、傳播專業人士 • 網站是一種傳播媒體 1網站 2設計 3專業 4失靈 5參與
  12. 12. 網站設計/企劃者的奮鬥 1網站 2設計 3專業 4失靈 5參與
  13. 13. 在台灣, 你不會想被叫做”美工” 1網站 2設計 3專業 4失靈 5參與
  14. 14. 提昇地位 1. 變得更像藝術家 2. 變得更像銷售員 3. 變得更像(理性的)專業人員 1網站 2設計 3專業 4失靈 5參與
  15. 15. 例子 1 1網站 2設計 3專業 4失靈 5參與
  16. 16. 1網站 2設計 3專業 4失靈 5參與
  17. 17. Deborah Adler School of Visual Arts MFA in Design program 1網站 2設計 3專業 4失靈 5參與
  18. 18. 1網站 2設計 3專業 4失靈 5參與
  19. 19. 例子 2 1網站 2設計 3專業 4失靈 5參與
  20. 20. Pizza tripod 小處著手:追求完美的設計 Small Things Considered : Why There is no Perfect Design Henry Petroski, 陳正芬(譯), 時報出版 1網站 2設計 3專業 4失靈 5參與
  21. 21. 藏於民間,隨手可得,不愧為最佳設計之首 http://www.flickr.com/photos/80445716@N00/3353181375/ 1網站 2設計 3專業 4失靈 5參與
  22. 22. 設計師的專業化: 也許來一些心理學與社會學 1網站 2設計 3專業 4失靈 5參與
  23. 23. 設計 • [名詞]. 製作某物以解決使用者特定問題的過程. • [動詞]. 決定如何製作出某物以解決使用者特定問題. 1網站 2設計 3專業 4失靈 5參與
  24. 24. Dervin's sense-making metaphor (1992) 1網站 2設計 3專業 4失靈 5參與
  25. 25. UCD, User centered design The human-centred design process, ISO-13407 (ISO 1999) 1網站 2設計 3專業 4失靈 5參與
  26. 26. 確定 使用者需求 確定 設計問題 檢驗設計 UCD 了解 使用情境 建構 解決方案 1網站 2設計 3專業 4失靈 5參與
  27. 27. 例1 1網站 2設計 3專業 4失靈 5參與
  28. 28. Jakob Nielsen(2006) Enquiro (2006) 1網站 2設計 3專業 4失靈 5參與
  29. 29. Think Eyetracking (2008) 1網站 2設計 3專業 4失靈 5參與
  30. 30. 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參與
  31. 31. 例2 1網站 2設計 3專業 4失靈 5參與
  32. 32. 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參與
  33. 33. Photos: Center of Gravity, Jan Chipchase, Berlin, Tokyo, 2003, 2004. 1網站 2設計 3專業 4失靈 5參與
  34. 34. 例3 1網站 2設計 3專業 4失靈 5參與
  35. 35. 小筆電 1網站 2設計 3專業 4失靈 5參與
  36. 36. Asus eeePC 1網站 2設計 3專業 4失靈 5參與
  37. 37. Acer Aspire One 1網站 2設計 3專業 4失靈 5參與
  38. 38. Ubuntu Netbook Remix 1網站 2設計 3專業 4失靈5參與
  39. 39. HP Mini Note Dashboard 1網站 2設計 3專業 4失靈 5參與
  40. 40. 設計者失靈 哪一個設計”客觀上”比較好? 1網站 2設計 3專業 4失靈 5參與
  41. 41. 設計者失靈 (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參與
  42. 42. 設計者失靈 (1) http://www.flickr.com/photos/stribs/363124906/in/pool-thoughtlessacts/ 1網站 2設計 3專業 4失靈 5參與
  43. 43. 設計者失靈 (2) 人性: 並非完全理性行動 1網站 2設計 3專業 4失靈 5參與
  44. 44. 設計者失靈 (2) Herbert Simon:剛好滿意 satisficing 1網站 2設計 3專業 4失靈 5參與
  45. 45. 設計者失靈 (2) Don Norman: Emotional design 1988 2004 1網站 2設計 3專業 4失靈 5參與
  46. 46. 設計者失靈 (2) Don Norman: Emotional design • 吸引力(感覺的, visceral ) • 功能性和可用性(行為的, behavioral) • 品位(反思性的, reflective) Herbert Simon:剛好滿意 • Satisficing • 決策時不會考慮最佳的解決問題方法 • 夠用就好 1網站 2設計 3專業 4失靈 5參與
  47. 47. 設計者失靈 (3) 設計循環時差 1網站 2設計 3專業 4失靈 5參與
  48. 48. 確定 使用者需求 確定 設計問題 檢驗設計 UCD 了解 使用情境 建構 解決方案 1網站 2設計 3專業 4失靈 5參與
  49. 49. 設計師的除魅 1網站 2設計 3專業 4失靈 5參與
  50. 50. 參與式設計 Participatory design 1網站 2設計 3專業 4失靈 5參與
  51. 51. 參與式設計 • 空間設計 • 建築 • 社區、都市規劃 1網站 2設計 3專業 4失靈 5參與
  52. 52. 成功的參與式資訊設計 • Folksonomy (scoial tagging) • Wikipedia • Open source 1網站 2設計 3專業 4失靈 5參與
  53. 53. by Wesley Fryer CC Attribution-Share Alike 2.0 Generic http://www.flickr.com/photos/wfryer/433566428/ 1網站 2設計 3專業 4失靈 5參與
  54. 54. 但也有失敗的 1網站 2設計 3專業 4失靈 5參與
  55. 55. 1網站 2設計 3專業 4失靈 5參與
  56. 56. 造物者之死 • 將資訊設計,從一種”造物”的觀點,轉為另一種” 系統”的觀 點 • 資訊生態系統 Information ecologies • 資訊經濟學 Information economics • 社會科技網絡 Socio-tech network 1網站 2設計 3專業 4失靈 5參與
  57. 57. 例:圖書館/書店/漫畫出租店的分類法 Photo by Nienyi Ho http://flickr.com/photos/honienyi/2216528946/ CC 2.0 Attribution-Noncommercial-Share Alike 1網站 2設計 3專業 4失靈 5參與
  58. 58. 例:瀏覽者與搜尋者 1網站 2設計 3專業 4失靈 5參與
  59. 59. ending
  60. 60. 新店慈濟醫院
  61. 61. Bad Good 不清楚的導覽 超互動導覽
  62. 62. Thanks, www.xxc.idv.tw 陳啟亮 2009.05.16 xxc.chen@gmail.com

×