進擊的ux - the basics of ux and rapid prototyping @ cht

88

Upload: kaba-su

Post on 22-Nov-2014

478 views

Category:

Design


3 download

DESCRIPTION

This deck covered the basics of user experience and rapid prototyping. Some video clips are lost when converted to PDF.

TRANSCRIPT

Page 1: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

���������

Page 2: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

Kaba SuYahoo Design

�����������

Page 3: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

‣ Developer‣ ;]D�Designer‣ PM / 1v‣ �Xcode�Designer

Who are you?

Page 4: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

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.

?

Page 5: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

‣ UX�*���,8�!‣ �L��P$S!‣ Cf"��Xcode!

‣ !�B�wj��

Page 6: 進擊的UX - the basics of UX and Rapid prototyping @ CHT
Page 7: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

使用者經驗

Page 8: 進擊的UX - the basics of UX and Rapid prototyping @ CHT
Page 9: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

USER塊 陶 啊

Bad experience

Page 10: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

存續 Businessviability

可行 Technologyfeasibility

Page 11: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

存續 Businessviability

可行 Technologyfeasibility

需求 User

desirability

#W�e�

Page 12: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

UXUser eXperience H�J)W

Page 13: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

3��]�7b�@

UCDUser Centered Design H�J��PG

Page 14: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

3��]�7b�@

EmpathyZ$-2�

Page 15: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

����������� ���

��������

Page 16: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

(#?!-&����61�*7

��A��� >/////<

Page 17: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

UX策略與設計流程

Page 18: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

策略就是方向、 時機跟程度。而且順序不能錯。

}\|

Page 19: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

Self-actualization��6+

Esteem�s

Social needsqQ��

Safety and Security@3:N{

Physiological needsi5�<HI

Maslow - Hierarchy of needs

Page 20: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

UCed

24( Rational

$48W Emotional

ITYS Meaningful

ME

R

Page 21: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

0>;3��������

���� ��

Page 22: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

�0R/

0>;3 A :=F4

Page 23: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

Optimization Revamp Innovation‣ Metrics driven ‣ Usability ‣ Lean testing

‣ User Study ‣ Exploratory Research

‣ Conceptual front-end

‣ Design Thinking

Page 24: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

1H�J���0

Page 25: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

廟算者,多算勝,少算敗? Empathy Interview

Page 26: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

G2_OJ

n-_OJ_OpoF

+T UX Urgbu#

"�S[=4<

Page 28: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

© 2011 Jeremy Alexis32

Need Finding Idea generation Prototyping

“how might we?”

Value proposition

Research Patterns Ideas Concept systems

Build Iterate

Page 29: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

食無定味,適口者珍山家清供,林洪

Page 30: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

Don’t listen to your users

Page 31: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

Observe them

Context �^

Concept yZ

Page 32: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

H$���������

<%����� �� ��

D,���

Page 33: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

�� Y7&��dtz

�M�

9��� )Y`^

�M�

9�%�����

�M�

9����(�'ma

Page 34: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

�M�

~Kk��

....

Page 35: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

設計就是不停地戰鬥

Page 36: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

2,500,000

Lotus Elise S

Page 37: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

X =h X 12 = ? NTD

Page 38: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

9�.;

Page 39: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

yZ cB ?#

V>�.�#5

Page 40: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

yZ cB ?#

V>�.�#5

Page 41: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

2345N1

Page 42: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

0

2

3

4

5

N

1

Page 43: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

0 1

Page 45: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

<:Eai<BD�K�Ol�

xE�h

Page 46: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

prototype

Page 47: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

5��#N1ZX

Page 48: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

Redesigning the way you see the world

世界之窗,重新設計

Page 49: 進擊的UX - the basics of UX and Rapid prototyping @ CHT
Page 50: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

使用者告訴我們... What we learned from users

Page 51: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

產品設計原則 Product design principles�aE/

Efficiency

;��g%��V��

Rich content

�a,SwFN

To simply participate and express themselves

>7M��![

to know what others feel

�"^~3They want diversity

使用者告訴我們... What we learned from users

Page 52: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

快速

�� �易於參與

����

彙整多元觀點

������������� ��

產品設計原則 Product design principles

Page 53: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

8G9&/B��HOW MIGHT WE DESIGN THE EASIEST WAY FOR USERS TO EXPRESS THEIR OPINION?

!-)C5+�.

Page 54: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

"�E�'@�2THE MOST DELIGHTFUL WAY TO KNOW WHAT OTHERS FEEL?

Page 55: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

戰鬥就是快 Rapid Prototyping

Page 56: 進擊的UX - the basics of UX and Rapid prototyping @ CHT
Page 57: 進擊的UX - the basics of UX and Rapid prototyping @ CHT
Page 58: 進擊的UX - the basics of UX and Rapid prototyping @ CHT
Page 59: 進擊的UX - the basics of UX and Rapid prototyping @ CHT
Page 60: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

���5�

Page 61: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

�',?�

Page 62: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

Prototyping tools

Page 63: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

Prototyping tools

���+ */ */ */ !� #/ /

O *� *� *� #? *? *?

%QF[> #? � � # *? *?

c%V> # #? #? ? *? *?

\!6V ? ? ? *? # #�

#N_M � � � # ? #

f/ � ? *? #? � ?

Page 64: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

Keynote animation prototype!

.-%G£*/x$£*�=}d�Z£#?�=�Z£#DU��:�Z£?<v�u£�

Page 65: 進擊的UX - the basics of UX and Rapid prototyping @ CHT
Page 66: 進擊的UX - the basics of UX and Rapid prototyping @ CHT
Page 67: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

DEMO

Page 68: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

Flinto Browser base prototype!

.-%G£*/x$£*�=}d�Z£��=�Z£#?U��:�Z£?�I£?<v�u£�

Page 69: 進擊的UX - the basics of UX and Rapid prototyping @ CHT
Page 70: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

DEMO

Page 71: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

Invision Browser base prototype!

.-%G£*/x$£*�=}d�Z£��=�Z£#?U��:�Z£?�I£*?<v�u£�

Page 72: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

Axure Browser base prototype!

.-%G£!�x$£#?=}d�Z£#D�=�Z£?U��:�Z£?<v�u£#

Page 73: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

Pixate interactive single screen prototyping!

.-%G£/x$£*?=}d�Z£*?�:��=�Z£*?U��:�Z£#�<v�u£#

Page 74: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

framer.js highly interactive single screen prototyping!

.-%G£/x$£*?=}d�Z£*?�:��=�Z£*?U��:�Z£#<v�u£?

Page 75: 進擊的UX - the basics of UX and Rapid prototyping @ CHT
Page 76: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

DEMO

Page 77: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

% &

‣ ���X�JK�@�3{f��9@App!

‣ 5�screen+]!‣ '+0oe�prototyping tool ml0��!

‣ P��K�$|p�9��W

Page 78: 進擊的UX - the basics of UX and Rapid prototyping @ CHT
Page 79: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

�*g`Prototype��pd4)i_

Page 80: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

小結

Page 81: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

‣ Developermotion design *�� r6Kn¢�`l�*"5�¡�P�q�

‣ Oz]�Designer motion s����F��user insight���T�\�prototyping $2�j�;�t��o���Lh bCk

‣ PM / B�W�HYQA����R�( E81&�|�%G

Page 82: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

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

Page 83: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

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

Stay hungry, stay foolish.

Page 84: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

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

Page 85: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

與夥伴一起改變世界!

Page 86: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

y��={fc��

Page 87: 進擊的UX - the basics of UX and Rapid prototyping @ CHT
Page 88: 進擊的UX - the basics of UX and Rapid prototyping @ CHT

Thank you