Basics of Interaction Design Strategy Spring 2012 Part 2

865 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
865
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Basics of Interaction Design Strategy Spring 2012 Part 2

  1. 1. Let’s eat! LUNCH Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 84
  2. 2. Let’s chat! TRENDING TOPICS http://www.flickr.com/photos/westmidlandspolice/6898977638/ Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 85
  3. 3. TRENDS Future Friendly Thinking • Laser focus • Orbital data • Universal/structured content • Unknown vessels • Command your fleet Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 86
  4. 4. TRENDS Progressive Enhancements • Abandon comfortable assumptions • Mobile first • Build up core experience • Set solid foundation Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 87
  5. 5. TRENDS Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 88
  6. 6. TRENDS Ethan Marcotte Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 89
  7. 7. TRENDS Responsive Design • Flexible foundation • Responsive architecture • Adaptive templates Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 90
  8. 8. TRENDS Simon Collison Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 91
  9. 9. TRENDS Boston Globe Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 92
  10. 10. TRENDS Anti- Responsive Design Responsive Design is counter productive, not-fit-for-purpose, and based on hypocritical-and-contradicting bull***. KEVIN GALLAGHER http://kevinjohngallagher.com/ Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 93
  11. 11. TRENDS Responsive Design Mobile Design Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 94
  12. 12. Basics Responsive Design I think of responsive design as an alternative to mobile sites. ETHAN MARCOTTE Experiencinginformation.com Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 95
  13. 13. TRENDS Luke Wroblewski Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 96
  14. 14. TRENDS Mobile First • Mobile is exploding. • Mobile forces you to focus. • Mobile extends your capabilities. Luke Wroblewski Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 97
  15. 15. TRENDS Adweek Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 98
  16. 16. BASICS CONTEXT UX CONTENT USERS Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh DangFriday, April 13, 12 99
  17. 17. TRENDS Mobile Considerations • Mobile Screen sizes – Varying widths based on devices 128, 160, 176, 240, 320, 360, 400, 480 • Display modes – Landscape and portrait • Technical Support – Javascript, cookies Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 100
  18. 18. TRENDS Organizing Mobile • Align with how people use their mobile devices and why. • Emphasize content over navigation. • Provide relevant options for exploration and pivoting. • Maintain clarity and focus. • Align with mobile behaviors Mobile First by Luke Wroblewski (A Book Apart, 2011) Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 101
  19. 19. TRENDS Mobile Capabilities – Location/GPS – Multi-touch – Accelerometer – Camera Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 102
  20. 20. TRENDS @Lukew in Mobile First: “When holding a touch phone screen with only your right hand, it’s easy to hit the dark green area and a stretch to tap the yellow area with your thumb.” UXRave.com Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 103
  21. 21. TRENDS Touch First Windows touch gestures interactions Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 104
  22. 22. TRENDS 5th Finger’s Five Tenets • The NUI is not the GUI. • Be thoughtful about the location of your main interface elements & navigation. • It’s tactile like the real world so use existing real world metaphors! • Don’t be limited by what others are doing – create a new interaction paradigm • Be passionate, and iterate often, to build a tablet UX that customers go out of their way to ‘experience’ not just ‘use’. Steen Anderson, fingerfood.5thfinger.com Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 105
  23. 23. TRENDS Mobile Experience Responsive design, adaptive design, progressive enhancement, and progressive disclosure give us the technical tools we need to create a single website that works well on all sites. Were still learning to use those tools the right way. JOSH CLARK http://globalmoxie.com Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 106
  24. 24. Mobile Landscape Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 107
  25. 25. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 108
  26. 26. EXPLORE: Noteworthy Practices Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 109
  27. 27. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 110
  28. 28. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 111
  29. 29. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 112
  30. 30. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 113
  31. 31. MOBILE Taylor  photostream Taylor  photostream Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 114
  32. 32. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 115
  33. 33. MOBILE Taylor  photostream Taylor  photostream Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 116
  34. 34. MOBILE Taylor  photostream Taylor  photostream Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 117
  35. 35. MOBILE Taylor  photostream Taylor  photostream Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 118
  36. 36. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 119
  37. 37. MOBILE Taylor  photostream Taylor  photostream Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 120
  38. 38. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 121
  39. 39. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 122
  40. 40. MOBILE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 123
  41. 41. MOBILE Taylor  photostream Taylor  photostream Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 124
  42. 42. MOBILE Taylor  photostream Taylor  photostream Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 125
  43. 43. Let’s mobilize! MOBILE http://www.flickr.com/photos/mattpelletier/486918215/ Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 126
  44. 44. Design Challenge Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 127
  45. 45. EXPLORE Personas & Scenarios I know what I want… let’s learn more and I’m not sure what I see what’s similar. I know what I like… want… Show me. let’s see what fits my let’s see what’s there. interests. Surprise me. Lead me. The Planner The The Explorer Generalist Mindset: Tentative, Passive Mindset: Direct, Active Mindset: Generalist Goals: Browse Goals: Search Goals: Configure Need: Inspiration Need: Information Need: Direction Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 128
  46. 46. EXPLORE Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 129
  47. 47. EXPLORE Wireframes & Paper Prototypes The 100 Places to Go Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 130
  48. 48. EXPLORE Goals • Establish strong content strategy • Prioritize features • Set a solid foundation • Optimize for mobile experience Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 131
  49. 49. EXPLORE Conceptual Explorations The The The Configurators Facet-ilators Navigators Configuration Faceted Search Basic Navigation Find results based on Find and filter results View a grid of results interest Landing Page (Interests) Landing Page (Search) Landing Page (All) Configuration Results Filtered Results Destination Details Destination Details Destination Details Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 132
  50. 50. EXPLORE Team Review Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 133
  51. 51. EXPLORE Noteworthy Practices • Fluid layouts to fit various sizes for mobile devices • Consider performance and load times • Dont use hover states • Keep design and functionality simple • Option to visit full site Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 134
  52. 52. Let’s chat! QUESTIONS & ANSWERS http://www.flickr.com/photos/mattpelletier/486918215/ Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 135
  53. 53. http://www.flickr.com/photos/katerha/5203462147/ Bon Voyage! School of Visual Arts Basics of Interaction Design & Strategy Spring 2012 Anh Dang adang@sva.edu slideshare.com/sva.ia Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh DangFriday, April 13, 12 136

×