Designers and developers are innovators! Merge mindsets between designers, engineers and other stakeholders with design thinking. Come together and engage in the development process with a more effective approach.
Presented on GDG DevFest Hong Kong 2017
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
去理理解設計