從雛形到設計-了解您的使用者在想什麼

4,018 views

Published on

簡報於2011/5/31於屏科大資管系大二「網際網路原理」課程 ,主要為了解使用者的重要性,與雛形(prototyping)的介紹。

本投影片Prototype資料由蔡明哲 (Richard Tsai)整理提供,經同意進行修改與教學使用。

Published in: Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,018
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
86
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

從雛形到設計-了解您的使用者在想什麼

  1. 1. 從雛形著手- 設計出使用者需要的 楊梭逸2011/5/31於屏科大資管系「網際網路原理」課程
  2. 2. • 楊梭逸 Carter Yang• 現職: – 凌誠科技(股)經理• 興趣: – Capability Maturity Model Integration – Quality Assurance – Project Management – Web Design – User Center Design – Usability• 網絡平台: – 大頭鼠的部落格,http://www.bhm.idv.tw/blog/ – AboutMe社交名片,http://about.me/bhm本投影片Prototype資料由蔡明哲 (Richard Tsai)整理提供,經同意進行修改與教學使用悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd. http://www.userxper.com -2-
  3. 3. 本堂課對您有什麼 『意義』 ? -3-
  4. 4. 意義是三小? 林北只知道義氣http://iphoto.ipeen.com.tw/photo/comment/201002/cgmec8d7dae3596eaa6ebb977aa3c225e2e153.jpg -4-
  5. 5. http://www.crazyleafdesign.com/blog/wp-content/uploads/2010/07/web-design-usability.jpg -5-
  6. 6. 1.符合使用者需求並表現專業http://mymkc.com/sites/default/files/imagecache/400xY/SP034-086.jpg -6-
  7. 7. 2.方便溝通,容易達成共識http://www.its4training.com/wp-content/uploads/communication.jpg -7-
  8. 8. 3.規劃下的快速開發http://www.xhtml-css-code.com/wp-content/uploads/2009/07/search_engine_friendly.jpg -8-
  9. 9. 4.產出令老師驚艷的作品http://image.chinaacc.com/upload/html/2009/8/20/xinyan29572009820850234105.jpg -9-
  10. 10. 為何了解使用者 是重要的 ? -10-
  11. 11. 1.您覺得這是什麼建築物? -11-
  12. 12. 台南鹽水鎮天主聖神堂 -12-
  13. 13. 2 1 4 3http://farm4.static.flickr.com/3577/3379395472_d6da0be894.jpg 2.您要下車時如何感應? -13-
  14. 14. -14-
  15. 15. http://l.yimg.com/f/xp/tw-tech.yahookimo.com.tw/20100917/06/2965299138.jpg?y http://readatech.com/wp-content/uploads/2011/04/SamsungGalaxySII.jpg=500&n=1&sig=MBL_5YXIExCoS9qCf8MFtg-- 3.您父母親偏好提供按鍵的裝置? -15-
  16. 16. http://uedc.163.com/wp-content/uploads/2010/11/phone.png -16-
  17. 17. 4.您注意到白色傳球次數有多少? -17-
  18. 18. http://www.youtube.com/watch?v=vJG698U2Mvo白色衣服總共有15次,但您有注意到黑猩猩嗎? 有限的注意力選擇 -18-
  19. 19. 為何了解使用者是重要的?• 1.您覺得這是什麼建築物? – 環境與風俗會影響使用者認知• 2.您要下車如何感應? – 操作習性會影響使用者認知• 3.您父母親偏好提供按鍵的裝置? – 年齡世代會影響使用者認知• 4.您注意到白色傳球次數有多少? – 有限選擇性會影響使用者認知 -19-
  20. 20. 你也是使用者!!!請不要設計出『自我感覺良好』的作品!!! -20-http://www.thegreatgeekmanual.com/images/humor/motivational/march/motivational-i-want-you.jpg
  21. 21. http://www.crazyleafdesign.com/blog/wp-content/uploads/2010/07/web-design-usability.jpg -21-
  22. 22. 使用者經驗設計流程研究 需求驗證 N 設計 構思http://www.usablebrands.ch/usability_.html -22-
  23. 23. Prototype 雛形 -23-
  24. 24. -24-http://image-1.verycd.com/d326fa8ee9bc3015b5df6e9fa3e6596943228(600x)/thumb.jpg
  25. 25. 模型屋Prototype(雛形)可供討論的模型或樣品 http://www.sexinsex.net/luntan/thread-1704273-1-1.html 樣品屋 透視圖 http://ohwed.youthwant.com.tw/blog/user1/CIDesigner/archives/2007/986.html http://blog.sina.com.tw/a0933448885/article.php?pbgid=52334&entryid=577267 -25-
  26. 26. Low Fidelity(低擬真)• 不像最終設計成品• 好處 – 很快,有東西可以討論 – 可以專注在High-level的設計觀念 – 探討主要的架構與功能 – 更容易發散思考不受拘束 -26-
  27. 27. High Fidelity(高擬真)• 接近最終設計成品• 好處 – 有更具體的東西可以討論 – 專注在更多的設計細節 – 驗證各種角度的使用者經驗 – 開發工作的工程師更容易理解 – 客戶(老闆/老師)更容易理解 -27-
  28. 28. 低擬真 > 高擬真Wireframe(線框) -28-
  29. 29. 設計流程中,二者都具有意義Low Fidelity High Fidelity Prototype (Sketch手繪草稿) = Prototype 實際設計產品時, 大家都希望看到更真實的設計Low Fidelity High Fidelity Prototype(Sketch手繪草稿) < Prototype -29-
  30. 30. Prototyping的方法• Wireframe prototyping• Paper prototyping• Storyboard prototyping• Digital prototyping• Blank model prototyping• Video prototyping• Wizard of Oz prototyping• Coded prototyping (including scripting and HTML) -30-
  31. 31. Wireframe prototyping Paper prototyping http://3.bp.blogspot.com/_tsuzO7Ymydg/TSztbfYyXNI/AAAAAAAA ACE/P5uDxoEfz1w/s1600/lmf_paper_prototype.gif -31-
  32. 32. Storyboard prototyping 混搭mix Paper – Digital prototypinghttp://www.youtube.com/watch?v=GrV2SZuRPv0 -32-
  33. 33. Blank model prototyping Wizard of Oz prototyping http://www.youtube.com/watch?v=_aoo_N-7AYk -33-
  34. 34. Video Prototyping Code Prototypinghttp://www.youtube.com/watch?v=BpWM0FNPZSs http://www.flickr.com/photos/s4xton/2425718415/sizes/z/in/photostream/56秒-64秒 -34-
  35. 35. Tools 工具 -35-
  36. 36. 廣義Prototyping Tool for Web/AP(1)• Diagram Tools (General Purpose) – MS Visio – MS PowerPoint – MS Word – MS Excel – Pencil Project (Plug-in Firefox) – OmniGraffle (Mac OS X, Mac版的Visio) – Cacoo• Graphics Tool – Photoshop / Illustrator / Firework / FlashMX -36-
  37. 37. 廣義Prototyping Tool for Web/AP(2)• Purpose-Built (For Software Application or Web) – Axure RP – iRise Studio – Prototype Composer – GUI Design Studio (Caretta) – MockupScreens – Balsamiq Mockups• Developing Tool – Dreamweaver – MS FrontPage,Express Web,MS Visual Studio• Aid.(其他輔助軟體) – XMinid – FastStone Capture -37-
  38. 38. Axure RP -38-
  39. 39. Pencil Project (Plug-in Firefox) http://pencil.evolus.vn/en-US/Home.aspx -39-
  40. 40. Cacoo(Free)http://cacoo.com/更多簡介:http://playpcesor.blogspot.com/2011/04/cacoo.html -40-
  41. 41. Balsamiq Mockups(Free) http://balsamiq.com/products/mockups -41-
  42. 42. 其他Prototyping輔助軟體 Xmind FastStone Capture心智圖(需求整理) 螢幕畫面擷取編輯 更多簡介:http://briian.com/?p=5713http://www.xmind.net/ -42-
  43. 43. Evolution雛形工具演化經驗 -43-
  44. 44. MS PowerPoint -44-
  45. 45. MS Word + MS Visio -45-
  46. 46. Axure RP -46-
  47. 47. 小結(1)• 本堂課對您有什麼意義? – 符合使用者需求並表現專業 – 方便溝通,容易達成共識 – 規劃下的快速開發 – 產出令老師驚艷的作品• 為何了解使用者是重要的? – 環境與風俗會影響使用者認知 – 操作習性會影響使用者認知 – 年齡世代會影響使用者認知 – 有限選擇性會影響使用者認知 -47-
  48. 48. 小結(2)• Prototyping的方法 – Wireframe prototyping – Paper prototyping – Storyboard prototyping – Digital prototyping – Blank model prototyping – Video prototyping – Wizard of Oz prototyping – Coded prototyping (including scripting and HTML)• Prototyping的工具 – Axure RP – Pencil Project (Plug-in Firefox) – Cacoo(Free) – Balsamiq Mockups(Free) – MS Office -48-
  49. 49. 培養 觀 察 力 的重要性http://pica.nipic.com/2008-03-24/200832414823712_2.jpg -49-
  50. 50. Q&A -50-

×