Basics of Interaction Design Strategy Spring 2012 Part 2
1. Let’s eat!
LUNCH
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 84
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 Dang
Friday, April 13, 12 85
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 Dang
Friday, April 13, 12 86
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 Dang
Friday, April 13, 12 87
5. TRENDS
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 88
6. TRENDS
Ethan Marcotte
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 89
7. TRENDS
Responsive Design
• Flexible foundation
• Responsive architecture
• Adaptive templates
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 90
8. TRENDS
Simon Collison
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 91
9. TRENDS
Boston Globe
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 92
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 Dang
Friday, April 13, 12 93
11. TRENDS
Responsive Design
Mobile Design
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 94
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 Dang
Friday, April 13, 12 95
13. TRENDS
Luke Wroblewski
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 96
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 Dang
Friday, April 13, 12 97
15. TRENDS
Adweek
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 98
16. BASICS
CONTEXT
UX
CONTENT USERS
Basics of Interaction Design + Strategy | Fall 2011 School of Visual Arts | Anh Dang
Friday, April 13, 12 99
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 Dang
Friday, April 13, 12 100
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 Dang
Friday, April 13, 12 101
19. TRENDS
Mobile Capabilities
– Location/GPS
– Multi-touch
– Accelerometer
– Camera
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 102
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 Dang
Friday, April 13, 12 103
21. TRENDS
Touch First
Windows touch gestures interactions
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 104
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 Dang
Friday, April 13, 12 105
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. We're 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 Dang
Friday, April 13, 12 106
24. Mobile Landscape
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 107
25. MOBILE
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 108
26. EXPLORE: Noteworthy Practices
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 109
27. MOBILE
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 110
28. MOBILE
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 111
29. MOBILE
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 112
30. MOBILE
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 113
31. MOBILE
Taylor
photostream Taylor
photostream
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 114
32. MOBILE
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 115
33. MOBILE
Taylor
photostream Taylor
photostream
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 116
34. MOBILE
Taylor
photostream Taylor
photostream
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 117
35. MOBILE
Taylor
photostream Taylor
photostream
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 118
36. MOBILE
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 119
37. MOBILE
Taylor
photostream Taylor
photostream
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 120
38. MOBILE
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 121
39. MOBILE
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 122
40. MOBILE
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 123
41. MOBILE
Taylor
photostream Taylor
photostream
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 124
42. MOBILE
Taylor
photostream Taylor
photostream
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 125
43. Let’s mobilize!
MOBILE
http://www.flickr.com/photos/mattpelletier/486918215/
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 126
44. Design Challenge
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 127
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 Dang
Friday, April 13, 12 128
46. EXPLORE
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 129
47. EXPLORE
Wireframes & Paper Prototypes
The 100
Places to Go
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 130
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 Dang
Friday, April 13, 12 131
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 Dang
Friday, April 13, 12 132
50. EXPLORE
Team Review
Basics of Interaction Design + Strategy | Spring 2012 School of Visual Arts | Anh Dang
Friday, April 13, 12 133
51. EXPLORE
Noteworthy Practices
• Fluid layouts to fit various sizes for mobile
devices
• Consider performance and load times
• Don't 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 Dang
Friday, April 13, 12 134
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 Dang
Friday, April 13, 12 135
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 Dang
Friday, April 13, 12 136