Advancing	 UX
Kaba Su
Yahoo Design
“設計就是不停的戰鬥!”
‣ Developer

‣ SOHO

‣ 公司內的Designer

‣ ⽼老闆

‣ 能寫code的Designer
Who are you?
Interaction Designer
What my mom think I do.What my friends think I do.What the society think I do.
What I think I do.What engineers think I do What I really do.
?
‣ UX能吃嗎	

‣ 了解你的使⽤用者	

‣ 原型開發不寫code
使用者經驗
USER
塊
陶
啊
Bad experience
存續
Business

viability
可行
Technology

feasibility
存續
Business

viability
可行
Technology

feasibility
需求
User

desirability
成功的創新
UXUser eXperience
使⽤用者經驗
UCDUser Centered Design
使⽤用者中⼼心設計
Empathy
共感同理⼼心
鯈(ㄔㄡˊ)魚出游從容,是魚之樂也
子非魚,焉知魚之樂
很幸運我們的USER通常不是魚
不過她我可以 >/////<
UX策略與設計流程
策略就是方向、 時機跟程度。
而且順序不能錯。
郭台銘
Self-actualization

⾃自我實現
Esteem

⾃自尊
Social needs

歸屬和愛
Safety and Security

安全與保障
Physiological needs

基本⽣生理需求
Maslow - Hierarchy of needs
商業策略
理性機能
Rational
感性體驗
Emotional
價值創造
Meaningful
M
E
R
商業策略
Vision	 
&	 
Strategy
分⽽而化之
商業策略 實作發想學習
source: Nordstrom Innovation Lab
Optimization
‣ Metrics driven
‣ Usability
‣ Lean testing
Revamp
‣ User Study
Innovation
‣ Exploratory
Research
‣ Conceptual front-
end
‣ Design Thinking
Optimization Revamp Innovation
‣ Metrics driven
‣ Usability
‣ Lean testing
‣ User Study ‣ Exploratory
Research
‣ Conceptual front-
end
‣ Design Thinking
與使⽤用者⼀一起成⻑⾧長
視覺設計師
互動設計師
設計研究員
現代 UX 戰⾾鬥團隊編成
廟算者,多算勝,少算敗?
Empathy Interview
© 2011 Jeremy Alexis
30
Need Finding Idea generation Prototyping
“how might
we?”
Value
proposition
Research Patterns Ideas Concept
systems
Build Iterate
食無定味,適口者珍
山家清供,林洪
Don’t listen to your users
Observe them
Context
情境
Concept
概念
© 2011 Jeremy Alexis
34
A few interviews can significantly reduce uncertainty
0 5 10 15 20 25 30 35
0
-100%
100%
Typicalrelativewidthofa90%confidenceinterval
(morenarrowthebetter)
Number of samples
The first few samples reduce uncertainty the most…
beyond 30 samples you need to quadruple the
sample size to cut the error in half.
I highly recommend the book “how to measure anything” by
Douglas Hubbard – he uses this chart in the book, don’t be
scared away by the math…
© 2011 Jeremy Alexis
35
Picking a user group to study
Lead User: Engage
with people with
extreme needs well
ahead of market
trends
Universal Design:
Design for people with
specialized needs &
the solution will be
good for all
Traditional HCD:
Engage with people
with average needs
Knowledge of system and /
intensity of use
# of users
CAFE STUDY
屬性	 
Attribute
結果	 
Consequence
價值	 
Value
我想要先把後天的餐廳訂好
為何?
因為我想要事先準備好
為何?
因為他們是我的家⼈人
為何?
因為我不想讓⾃自⼰己丟臉
為何?
哩⾦金雞ㄋㄟ
....
Interview Do’s
✓讓使⽤用者去主導

讓⾃自⼰己成為⼀一個”初學者/學徒”的
⾓角⾊色,打開⼼心向使⽤用者學習
✓⿎鼓勵使⽤用者操作

當要瞭解產品使⽤用經驗時,使⽤用者直
接操作⽐比⼝口頭說明還要好
✓保持好奇⼼心

問⼀一些深⼊入的問題,能夠引發使⽤用者
說出更多的細節,並且注意你的肢體
語⾔言(表達友善的肢體語⾔言)
✓保持開放⼼心態

允許使⽤用者與你分享你沒有預期要問
的資訊,讓討論保持⾃自然就好
✓運⽤用使⽤用者的語⾔言

傾聽使⽤用者的“關鍵字”並加以運⽤用
這些話,盡量不要使⽤用內部或太技術
性的專有名詞
✓做你⾃自⼰己

當你的⾏行為是真實的⽽而且不造作的態
度時,使⽤用者也會⽐比較舒適⾃自在
Interview Don’ts
X主導使⽤用者

確保你的提問不會引導使⽤用者回答問
題
X	
停留在粗淺的回答

不要滿⾜足於使⽤用者“是”或“否”的
回答,試著⽤用“為什麼…”和“告訴
我更多…”去深⼊入探究更多
X提供協助

觀察使⽤用者遇到困難時的反應,可以
告訴我們使⽤用者在哪個步驟以及為什
麼會發⽣生問題
X假設未來的使⽤用狀況

我們無法精準的去預測使⽤用者未來的
⾏行為(我們應該以現在能觀察到的⾏行
為為主)
X防衛⼼心態

把使⽤用者的意⾒見當成是學習改善我們
產品的機會點
5	 minutes	 
描述自己一天之中看新
聞、部落格或者其他網
路資訊的經驗
10	 minutes	 
分享使用特定新聞產品
的經驗
TASKS
▪ ⽤用分類瀏覽常看的新聞類型
▪ 選⼀一篇有興趣的⽂文章、閱讀後並談⼀一下內容
▪ ⼼心情投票
▪ 看⼼心情新聞
▪ 調整⾃自定分類
▪ 整體使⽤用上,	
  哪邊是吸引你的?
▪ 使⽤用上有遇到哪些不順的地⽅方?什麼可以更好?
▪ 有沒有什麼覺得應該要有的功能卻沒有看到的?
▪ ⾃自由瀏覽之後給⼀一些feedback
#1
#2
#3
受訪者 ID
設計就是不停地戰鬥
2,500,000
Lotus Elise S
X ⽉月薪 X 12 = ? NTD
試了再買
概念 測試 完成
任性⼀一次的成本
概念 測試 完成
任性⼀一次的成本
越早失敗,越接近成功
有計劃的
延平郡⺩王
prototype
重點是學習與共識
Redesigning
the way you
see the world
世界之窗,重新設計
使用者告訴我們...
What we learned from users
產品設計原則
Product design principles
簡單明快
Efficiency
更豐富即時的
媒體素材
Rich content
想簡單地表達
意⾒見
To simply participate and
express themselves
想知道別⼈人的
看法
to know what others feel
想要多元觀點
They want diversity
使用者告訴我們...
What we learned from users
快速
Fast
易於參與
Engaging
彙整多元觀點
Organized
Diversity
產品設計原則
Product design principles
最簡單的參與方式
HOW MIGHT WE DESIGN THE EASIEST WAY
FOR USERS TO EXPRESS THEIR OPINION?
我們怎麼設計一個
更有趣地表達心情
THE MOST DELIGHTFUL WAY TO
KNOW WHAT OTHERS FEEL?
戰鬥就是快
Rapid Prototyping
最多⼀一天
重點
⼀一次打⼗十個
Prototyping tools
Prototyping tools
開發時間 很快 很快 很快 看你 中快 快
效能 很好 很好 很好 中⾼高 很⾼高 很⾼高
動畫精細度 中⾼高 低 低 中 很⾼高 很⾼高
互動程度 中 中⾼高 中⾼高 ⾼高 很⾼高 很⾼高
展現流程 ⾼高 ⾼高 ⾼高 很⾼高 中 中低
學習曲線 低 低 低 中 ⾼高 中
協作 低 ⾼高 很⾼高 中⾼高 低 ⾼高
Keynote
animation prototype

!
開發時間:很快

效能:很好

動畫精細度:中⾼高

互動程度:中等

流程展現程度:⾼高

學習曲線:低
DEMO
Flinto
Browser base prototype

!
開發時間:很快

效能:很好

動畫精細度:低

互動程度:中⾼高

流程展現程度:⾼高

協作:⾼高

學習曲線:低
DEMO
Invision
Browser base prototype

!
開發時間:很快

效能:很好

動畫精細度:低

互動程度:中⾼高

流程展現程度:⾼高

協作:很⾼高

學習曲線:低
Axure
Browser base prototype

!
開發時間:看你

效能:中⾼高

動畫精細度:中等

互動程度:⾼高

流程展現程度:⾼高

學習曲線:中
Pixate
interactive single screen
prototyping

!
開發時間:快

效能:很⾼高

動畫精細度:很⾼高

展現的互動程度:很⾼高

流程展現程度:中低

學習曲線:中
framer.js
highly interactive single screen
prototyping

!
開發時間:快

效能:很⾼高

動畫精細度:很⾼高

展現的互動程度:很⾼高

流程展現程度:中

學習曲線:⾼高
DEMO
小結
‣ Developer

motion design 很有趣

⻝⾷食無定味,適⼝口者珍

很多事是徒勞但有功的

‣ SOHO

prototyping 能讓你提案更順利

‣ 公司內的Designer

motion 必須要是有意義的

user insight是你的重要⼯工具

你的任務就是把夢想視覺化

‣ ⽼老闆

試了再買

相信你的團隊⽐比你還聰明

給他們⾜足夠的時間

‣ 能寫code的Designer

好⼯工作不投嗎?
一位非常成功的微禿中年曾說
你的時間有限,不要為別人而
活,不要規循別人的信念中...
最重要的是,鼓起勇氣跟隨你
的心靈與直覺,它們才知道你
想成為怎樣的人。
!
Stay hungry, stay foolish.
重要的是,千萬不要以為你是 Steve Jobs
與夥伴一起改變世界!
台灣互動設計師協會
Thank you

進擊的UX - rapid prototyping @ 新北市企業產經大學