ITP / SED Day 6
-
Upload
sami-niemelae -
Category
Design
-
view
132 -
download
2
description
Transcript of ITP / SED Day 6
![Page 1: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/1.jpg)
— www.nordkapp.fi— @Nordkapp
Strategy & Experience Design
ITP 2011Aalto University School of Economics
Sami NiemeläCreative Director, Nordkapp
[email protected]@samin
06
![Page 2: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/2.jpg)
InteractionDesign
![Page 3: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/3.jpg)
“Interaction Design is the creation of a dialogue between a person and a product, service or system.”
—Jon Kolko in Thoughts on Interaction Design
![Page 4: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/4.jpg)
TheLargerContext(s)
graph Ville Tikka / wevolve.us
![Page 5: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/5.jpg)
![Page 6: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/6.jpg)
Empathy
http://www.openideo.com/open/maternal-health/inspiration/empathy-belly-/
![Page 7: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/7.jpg)
designer “user”
technology
business
![Page 8: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/8.jpg)
![Page 9: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/9.jpg)
![Page 10: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/10.jpg)
“Complexity isgood. Simplicity can be misleading.”
user experience wheel http://userexperienceproject.blogspot.com/visualisation Facebook usage
![Page 11: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/11.jpg)
“…but complexity is good only if it is understandable, sensible, and meaningful.”
boxee remote http://boxee.tv
![Page 12: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/12.jpg)
“As we learn to “intuitively” use a product, we are in fact illustrating the scope of our past experiences with it.“
—Jon Kolko in Thoughts on Interaction Design
![Page 14: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/14.jpg)
Usable, Useful and Desirable
![Page 15: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/15.jpg)
Usable
![Page 16: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/16.jpg)
![Page 17: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/17.jpg)
Useful
![Page 18: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/18.jpg)
![Page 19: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/19.jpg)
Desirable
![Page 20: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/20.jpg)
![Page 21: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/21.jpg)
![Page 22: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/22.jpg)
Designingfor Flow
http://www.boxesandarrows.com/view/design-for-emotion
![Page 23: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/23.jpg)
Attention and Flow
DESIGNING FOR FLOW
![Page 24: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/24.jpg)
1— A clear goal2—Immediate feedback3—A challenge you’re confident with
CAUSES OF FLOW
![Page 25: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/25.jpg)
—Total concentration and focus—A sense of control over interactions—Openness to new things—Increased exploratory behavior—Increased learning—Positive feelings
CHARACTERISTICS OF FLOW
![Page 26: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/26.jpg)
—Loss of consciousness of self—Distortions in the perception of time—Activity is perceived as intrinsically rewarding
CONSEQUENCES OF FLOW
![Page 27: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/27.jpg)
“As we learn to “intuitively” use a product, we are in fact illustrating the scope of our past experiences with it.“
—Jon Kolko in Thoughts on Interaction Design
![Page 28: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/28.jpg)
chal
len
ges
skills0 high
high Anxiety
Boredom
Flow Channel
Anx
iety
, Bor
edom
and
Flo
w (
Csi
ksze
ntm
ihal
yi, 1
99
0)
(cap
tion
s ad
ded
van
Gor
p, 2
00
6)
![Page 29: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/29.jpg)
Causes of Flow
![Page 30: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/30.jpg)
A clear goal
1Immediate feedback
2Challenge balanced
with one’s skills
3
![Page 31: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/31.jpg)
Different users
![Page 32: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/32.jpg)
Novice users Experienced usersExploration
Entertainment
Less Challenges More Challenges
Less Exploration
Connected with tasks
![Page 33: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/33.jpg)
Tasks and subtasks
![Page 34: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/34.jpg)
“Produce a podcast”— Collect Information— Interview Someone— Record My Parts— Edit Audio— Mix audio— Write Show Notes— Produce the files— Upload Files to Host— Build Corresponding Show Notes Post
EXAMPLE
![Page 35: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/35.jpg)
— Input- audio mix from GarageBand 3 and Show Notes in Text Editor.— Work- Play through audio once, listening for big mistakes.— Send the file to iTunes.— Inside iTunes, select the file, choose Get Info.— Edit info, inserting show notes and links into Lyrics tab. Doublecheck.—Choose “Convert File to MP3.”—Play the new MP3 file once it’s converted.—Move MP3 file to upload area.—Output- Upload Files to Host flow
EXAMPLE
![Page 36: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/36.jpg)
HIGH LEVEL FLOW
HOME VIEW SUBCATEGORY 1 SUBCATEGORY 2 PRODUCT DETAILS PURCHASE PATHS X N
![Page 37: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/37.jpg)
IN DETAIL
![Page 38: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/38.jpg)
![Page 39: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/39.jpg)
Flesh out your scenario from week one into a task flow. Design the interactions within it.
EXERCISE
60MINUTES
![Page 40: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/40.jpg)
Making things tangible
![Page 41: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/41.jpg)
http://www.slideshare.net/tbisaacs/keynote-kungfu-how-to-wireframe-like-a-ninja?from=ss_embed
![Page 42: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/42.jpg)
http://www.slideshare.net/tbisaacs/keynote-kungfu-how-to-wireframe-like-a-ninja?from=ss_embed
![Page 43: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/43.jpg)
http://www.boxesandarrows.com/view/prototyping-with
![Page 44: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/44.jpg)
![Page 45: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/45.jpg)
http://www.flickr.com/photos/rosenfeldmedia/3977544675/in/set-72157622384497663/
![Page 46: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/46.jpg)
http://www.flickr.com/photos/rosenfeldmedia/3977544675/sizes/o/in/set-72157622384497663/
![Page 47: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/47.jpg)
![Page 48: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/48.jpg)
![Page 49: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/49.jpg)
![Page 50: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/50.jpg)
![Page 51: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/51.jpg)
![Page 52: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/52.jpg)
UI SCENARIOS
![Page 53: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/53.jpg)
Prototyping: Build a prototype of an interaction relating your project. Draw it out on paper, step by step.
EXERCISE
90MINUTES
![Page 54: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/54.jpg)
Document your work: the task flows and prototype, send by email.
FRIHOMEWORK
WHERE?Deliver to [email protected] w/ title “GROUPNAME Flows and prototype”
![Page 55: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/55.jpg)
Design Review of team project: show & tell of design process + progress so far, design critique.
THU WHERE?Present at class on ThursdayDeliver to [email protected] w/ title “GROUPNAME Design Review 1 ”
![Page 56: ITP / SED Day 6](https://reader031.fdocuments.net/reader031/viewer/2022013121/54c8369b4a7959a26d8b4668/html5/thumbnails/56.jpg)
Q&A time!