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

Advancing UX

Kaba SuYahoo 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

存續 Businessviability

可行 Technologyfeasibility

存續 Businessviability

可行 Technologyfeasibility

需求 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

ME

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 Alexis30

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 Alexis34

A few interviews can significantly reduce uncertainty

0 5 10 15 20 25 30 35

0

-100%

100%

Typi

cal r

elat

ive

wid

th o

f a 9

0% c

onfid

ence

inte

rval

(m

ore

narr

ow th

e be

tter)

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 Alexis35

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

小結

‣ Developermotion design 很有趣 ⻝⾷食無定味，適⼝口者珍很多事是徒勞但有功的

‣ SOHOprototyping 能讓你提案更順利

‣ 公司內的Designermotion 必須要是有意義的user insight是你的重要⼯工具你的任務就是把夢想視覺化

‣ ⽼老闆試了再買相信你的團隊⽐比你還聰明給他們⾜足夠的時間

‣ 能寫code的Designer好⼯工作不投嗎？

一位非常成功的微禿中年曾說

你的時間有限，不要為別人而活，不要規循別人的信念中... 最重要的是，鼓起勇氣跟隨你的心靈與直覺，它們才知道你想成為怎樣的人。 !

Stay hungry, stay foolish.

重要的是，千萬不要以為你是 Steve Jobs

與夥伴一起改變世界！

台灣互動設計師協會

Thank you