Bridging the Gap – Developers Meet Design
- 1. 1# D E V F E S T 1 7 U S E R E X P E R I E N C E & C O L L A B O R A T I V E W O R K F L O W www.constance-tang.com Bridging the Gap Developers Meet Design Constance Tang UI/UX Designer
- 2. 2 應⽤用 Design Thinking 來來設計產品 以⽤用⼾戶為本的設計 # D E V F E S T 1 7 www.constance-tang.com 理理解各⼈人的⼯工作⽬目標，並進⾏行行有效率的開發 多⽅方合作 現時流⾏行行的設計及開發協作⼯工具 協作⼯工具 探討設計與 UX 的本質 解構 UX Bridging the Gap Developers Meet Design
- 3. 3# D E V F E S T 1 7 www.constance-tang.com 解構 UX 我們先談談設計的本質
- 4. 認知 ⽬目標 情緒 對象 4# D E V F E S T 1 7 www.constance-tang.com 各⾨門各路路的設計師，不論是平⾯面設計、互動設計、產品設計、室內設計、 介⾯面設計、廣告設計、印刷設計、⽤用⼾戶體驗設計等，都是藉設計去解決 「⼈人」的問題或傳達訊息。 以⼈人為本 解決問題 設計的本質
- 5. 5# D E V F E S T 1 7 www.constance-tang.com 銷售對象 設計熱⽔水煲 Office Lady ⽤用⼾戶需求／功能 輕便便易易攜、可煲湯煮飯、容易易清洗 產品造型（認知／情緒） ⼩小型、單⼿手可攜、多種女性偏好的顏⾊色可選 解構 UX
- 6. 6# D E V F E S T 1 7 www.constance-tang.com Don Norman – Former Apple Advanced Technology Group VP I invented the term because I thought Human Interface and usability were too narrow: I wanted to cover all aspects of the person’s experience with a system, including industrial design, graphics, the interface, the physical interaction, and the manual.
- 7. UX以⽤用⼾戶為本解決問題 # D E V F E S T 1 7 7www.constance-tang.com 視覺 + 介⾯面 + 易易⽤用性 + 系統 + ⼯工業 + 互動 + ...
- 8. 8# D E V F E S T 1 7 www.constance-tang.com 以⽤用⼾戶為本的設計 尋找與製訂 user requirement
- 9. 9# D E V F E S T 1 7 www.constance-tang.com 各⾨門各路路的設計師，不論是平⾯面設計、互動設計、產品設計、室內設計、 介⾯面設計、廣告設計、印刷設計、⽤用⼾戶體驗設計等，都是藉設計去解決 「⼈人」的問題或傳達訊息。 「⽤用法」決定「功能」 製訂產品要求 功能 範圍 內容對象 媒介
- 10. 1 0 Design Thinking Stakeholder / User Interview Focus Group Investigation Quantitative / Qualitative Survey Competitive Audit Content Audit Metric Analysis EMPATHIZE 理理解 IDEO Design Thinking ⽅方法論建議設計師⽤用研究和驗證，設計以⽤用⼾戶為本的產品。 從探討⽤用⼾戶需要開始，最後考慮技術上的可⾏行行性。 User Pain Points Persona User Journey Mapping User Pattern DEFINE 定義 Crazy Eights / Brainstorming Diverge / Converge Thinking Define User Requirements Prioritize Ideas / Features User Flow / Scenario Storyboard Task Analysis Card Sorting Wireframe IDEATE 概念念 Mockups Code Prototype PROTOTYPE 原型 # D E V F E S T 1 7 www.constance-tang.com User Testing A/B Test Usability Testing Accessibility Testing Eye Tracking TEST 測試
- 11. 1 1# D E V F E S T 1 7 www.constance-tang.com User Story 需要以 persona 為根據，較適合有 persona 或⽬目標⽤用⼾戶群 ⼗十分明顯的產品。 ⾝身為空中銷售員， 我希望提升銷售技巧， 因此可以有更更多乘客下單 User Story ! !
- 12. 1 2# D E V F E S T 1 7 www.constance-tang.com Job Story 適合⽤用於⽬目標⽤用⼾戶群不太明顯的產品，或產品要求已製訂好 的情況。 當乘客向我查詢貨品時， 我希望快捷地找出貨品編號， 因此可以減少乘客等待時間。 Job Story
- 13. 1 3# D E V F E S T 1 7 你或許也是⽬目標⽤用⼾戶之⼀一，多從⽤用⼾戶⾓角度思考 ⽤用 Task Analysis 去分析、推論⽤用⼾戶需求 UX Designer 毋須做齊所有 deliverables，做得太多反 ⽽而裹⾜足不前 如果你無法接觸 user research 或 service design，那 就要很清楚產品想達到怎樣的⽬目標。 www.constance-tang.com 以⽤用⼾戶為本 的設計
- 14. 1 4# D E V F E S T 1 7 www.constance-tang.com 多⽅方合作 ⼀一件產品成功與否，由誰去決定？
- 15. 1 5 太有創意＝無⼈人鍾意？ # D E V F E S T 1 7 www.constance-tang.com 驗證設計概念念，其實要從 business model 和 service design 開始計劃。 程式對⽤用⼾戶有何裨益？ 服務該如何營運？ 如何留留住活躍⽤用⼾戶？ 這些問題是令設計概念念不再離地的考量量。
- 16. 創造完美的產品 1 6# D E V F E S T 1 7 www.constance-tang.com Product Design Business Marketing Tech 在局限下開發最好的產品
- 17. # D E V F E S T 1 7 1 7www.constance-tang.com REQUIREMENT MOCKUP DEVELOPMENT LAUNCH UAT WIREFRAME 流⽔水式開發流程 ⼯工作流程 Product Owner + PM Product Owner + PM Designer Product Owner + PM + Developer Developer
- 18. # D E V F E S T 1 7 1 8www.constance-tang.com 雙線並⾏行行的開發流程 ⼯工作流程 Design Development REQUIREMENT DESIGN MOCKUP, UI SPEC FRAMEWORK SOURCING, ARCHITECT & SYSTEM DESIGN, DEV FEATURE LAUNCHUAT RESEARCH / WIREFRAMING DEV UIFEATURE STUDY
- 19. 1 9# D E V F E S T 1 7 讓設計師在開發早期加入團隊 多溝通、多向隊友詢問意⾒見見 拿捏設計與技術上的平衡 多以⽤用⼾戶的⾓角度分析設計的效益 切忌對設計改動／⼯工程師的看法感到抗拒 www.constance-tang.com 有效率的 ⼯工作流程
- 20. 2 0# D E V F E S T 1 7 www.constance-tang.com 協作⼯工具 ⼿手寫 spec 甚麼的很麻煩吧！
- 21. # D E V F E S T 1 7 2 1www.constance-tang.com Zeplin
- 22. # D E V F E S T 1 7 2 2www.constance-tang.com Zeplin
- 23. 2 3# D E V F E S T 1 7 以客觀的態度評論設計 暸解設計背後的動機 補⾜足設計師想漏了了的事物，讓他逐步掌握設計與技術的平 衡 www.constance-tang.com 去理理解設計
- 24. 2 4www.constance-tang.com Thanks for listening. # D E V F E S T 1 7