ITP / SED Day 6

1,528 views

Published on

Second day of the week two of lectures at Aalto University School of Economics’ ITP summer programme’s Strategy and Experience. https://itp.hse.fi/

Contents: Interaction design, designing for flow, prototyping

Published in: Design, Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,528
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
29
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

ITP / SED Day 6

  1. 1. 06Strategy & Experience DesignITP 2011Aalto University School of EconomicsSami NiemeläCreative Director, Nordkappsami.niemela@gmail.com@samin— www.nordkapp.fi— @Nordkapp
  2. 2. InteractionDesign
  3. 3. “Interaction Design is thecreation of a dialogue betweena person and a product, serviceor system.”—Jon Kolko in Thoughts on Interaction Design
  4. 4. TheLargerContext(s) graph Ville Tikka / wevolve.us
  5. 5. Empathy http://www.openideo.com/open/maternal-health/inspiration/empathy-belly-/
  6. 6. businessdesigner “user” technology
  7. 7. “Complexity isgood. Simplicitycan be misleading.” user experience wheel http://userexperienceproject.blogspot.com/ visualisation Facebook usage
  8. 8. “…but complexityis good only if it isunderstandable,sensible,and meaningful.” boxee remote http://boxee.tv
  9. 9. “As we learn to “intuitively”use a product, we are in factillustrating the scope of ourpast experiences with it.“—Jon Kolko in Thoughts on Interaction Design
  10. 10. http://swipe.nokia.com
  11. 11. Usable,Useful andDesirable
  12. 12. Usable
  13. 13. Useful
  14. 14. Desirable
  15. 15. Designingfor Flowhttp://www.boxesandarrows.com/view/design-for-emotion
  16. 16. DESIGNING FOR FLOWAttention and Flow
  17. 17. CAUSES OF FLOW1— A clear goal2—Immediate feedback3—A challenge you’re confidentwith
  18. 18. CHARACTERISTICS OF FLOW—Total concentration and focus—A sense of control over interactions—Openness to new things—Increased exploratory behavior—Increased learning—Positive feelings
  19. 19. CONSEQUENCES OF FLOW—Loss of consciousness of self—Distortions in the perception of time—Activity is perceived as intrinsicallyrewarding
  20. 20. “As we learn to “intuitively”use a product, we are in factillustrating the scope of ourpast experiences with it.“—Jon Kolko in Thoughts on Interaction Design
  21. 21. 0 challenges high Anxiety skills Flow Channel Boredomhigh Anxiety, Boredom and Flow (Csikszentmihalyi, 1990) (captions added van Gorp, 2006)
  22. 22. Causes of Flow
  23. 23. 1 2 Immediate 3 Challenge balancedA clear goal feedback with one’s skills
  24. 24. Different users
  25. 25. Less Challenges More Challenges Novice users Experienced users LessExploration Exploration Entertainment Connected with tasks
  26. 26. Tasks and subtasks
  27. 27. EXAMPLE“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
  28. 28. EXAMPLE— 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
  29. 29. HIGH LEVEL FLOW HOME VIEW SUBCATEGORY 1 SUBCATEGORY 2 PRODUCT DETAILS PURCHASE PATHS X N
  30. 30. IN DETAIL
  31. 31. EXERCISEFlesh out your scenario from weekone into a task flow. Design theinteractions within it.60 MINUTES
  32. 32. Making thingstangible
  33. 33. http://www.slideshare.net/tbisaacs/keynote-kungfu-how-to-wireframe-like-a-ninja?from=ss_embed
  34. 34. http://www.slideshare.net/tbisaacs/keynote-kungfu-how-to-wireframe-like-a-ninja?from=ss_embed
  35. 35. http://www.boxesandarrows.com/view/prototyping-with
  36. 36. http://www.flickr.com/photos/rosenfeldmedia/3977544675/in/set-72157622384497663/
  37. 37. http://www.flickr.com/photos/rosenfeldmedia/3977544675/sizes/o/in/set-72157622384497663/
  38. 38. UI SCENARIOS
  39. 39. EXERCISEPrototyping: Build a prototype ofan interaction relating your project.Draw it out on paper, step by step.90 MINUTES
  40. 40. Document your work: the taskflows and prototype, send by email.FRI HOMEWORK WHERE? Deliver to sami.niemela@gmail.com w/ title “GROUPNAME Flows and prototype”
  41. 41. Design Review of team project:show & tell of design process +progress so far, design critique.THU WHERE? Present at class on Thursday Deliver to sami.niemela@gmail.com w/ title “GROUPNAME Design Review 1 ”
  42. 42. Q&A time!

×