Responsive Design vs Context-Driven Design

Why designing responsively isn't enough. We must think about adaptive design based on a user's context. This is from my class taught at General Assembly in New York October 11, 2012.

Transcript

1. wifi = yellowpencil
2. October 11, 2012 Responsive Design vs Context – General Assembly Class
3. A little about me. User Experience (ID). Huge. Responsive. Context.
4. A little about me. User Experience (ID). Huge. . Context.
5. Founded in 1999 Full-service digital agency within Interpublic Group 550 employees How we’re structured. Los Angeles. Rio de Janeiro. London. Brooklyn. San Francisco. Portland.
7. A little about me. User Experience (ID). Huge. Responsive. Context.
8. A little about me. User Experience (ID). Huge. Responsive. Context.
9. A little about you.
10. Today’s class: 1. What is responsive? 2. The good. The bad. 3. The context of channels. 4. Context + responsive. 5. How.
11. What is responsive?
12. Responsive = digital experiences from a single code base optimized for various devices (small to large).
13. Responsive = digital experiences from a single code base optimized for various devices (small to large).
14. m.
15. Responsive = digital experiences from a single code base optimized for various devices (small to large).
16. How? Fluid + breakpoints.
17. A fluid layout simply flows a single, static design into whatever space is provided.
20. www.bostonglobe.com
21. question: How is each element changing?
23. 1 2 3 4
24. Desktop Tablet Mobile 480px 768px 978px
25. vs
26. read How BostonGlobe.com was made: http://upstatement.com/blog/2012/01/how- to-approach-a-responsive-design/
27. www.regent-college.edu www.regent-college.edu
28. www.atlantaballet.com
29. bookmark More examples: http://mediaqueri.es/
30. bookmark View for various devices: http://responsive.is/ http://www.responsinator.com
31. The good. The bad.
32. question: What’s good about responsive?
33. Saves time. Saves money. New sizes? No problem.
34. 1,453 different sized screens in 2011. Source: 2012 Superior Web Solutions
35. question: What’s bad about responsive?
36. Higher initial cost. Harder to develop. Still constrained.
37. We didn’t talk about the user.
38. Users have different needs at different times.
39. Where are they? What is their mindset? Who is with them? What other channels are around them?
40. Context.
41. Why context matters – cream & sugar.
42. The context of channels.
43. 5 myths
44. Myth #1: Mobile is just used when people are on-the-go.
45. Myth #1: Mobile is just used when people are on-the-go. Mobile is the lazy man’s computer.
46. Source: Yahoo Mobile Shopping Framework Study, 2011 89% of people use mobile while at home.
47. Myth #2: People want less on their mobile phone than on desktops.
48. Myth #2: People want less on their mobile phone than on desktops. People complain when mobile can only give them part of the answer.
49. Myth #3: Tablets are just an oversized mobile device or a simpler PC.
50. Myth #3: Tablets are just an oversized mobile device or a simpler PC. Tablets entertain.
51. 0 10 20 30 40 50 60 70 80 90 Source: AlphaWiseTM, Morgan Stanley Research Tablet Demand & Disruption, Feb 14, 2011 % of people who use for… PC Tablet
52. Myth #4: PCs are dying.
53. Myth #4: PCs are dying. They’re dying the way radio is dying.
54. Myth #5: TV lets you shut off your brain.
55. Myth #5: TV lets you shut off your brain. TV is one of many channels around us.
56. Source: Google’s The New Multiscreen World Study, 2012 77% of TV viewers use another device at the same time in a typical day.
57. Phone “I consider it my personal device, my go-to device. It’s close to me, if I need that quick, precise feedback.” Tablet “When I need to be more in depth, that’s when I start using my tablet. The other part of it is where I disconnect from my work life and kind of go into where I want to be at the moment... I’m totally removed from today’s reality. I can’t get a phone call, I don’t check my email it’s my dream world.” Laptop “For me that’s business. That’s work. I feel like I’ve got to be crunching numbers or doing something.” - Bradley Google’s The New Multiscreen World Study, 2012
58. read Google’s The New Multiscreen World Study: http://www.thinkwithgoogle.com/insights/ library/studies/the-new-multi-screen-world- study/
59. Context + responsive.
60. Case study: store planning vs. visit Store planning needs •  Making a list •  Finding store location •  Researching a category / specific product •  Getting inspired •  Inventory check Store visit needs •  Checking off list •  Wayfinding •  Quick decision making (based on price, ratings) •  Price lookup •  Additional sizes / colors
61. Default mode In-Store mode
63. The risks of scaling up.
64. If we only think about pixels, we’re missing significant opportunities to wow our users and meet their needs.
65. Responsive should be responsive to: •  Location •  Predicted needs by channel (be careful not to make incorrect generalizations) •  Other channels in proximity •  Accessibility •  Bandwidth
66. Another name for this is adaptive design.
67. How do we do this?
68. •  Who are you designing for? •  What is the goal of the product? •  Are the user’s goals always the same from device to device? What are their primary contexts? •  Is it time to start taking advantage of larger monitors as well as smaller devices? •  Other insightful questions… First, define WHY you’re doing this.
69. Process. How: Mobile first.
70. •  It makes you identify the most important aspects of an application. •  The narrow viewport dictates that you lay things out based on importance. •  It requires you to simplify UI and interaction patterns. •  It encourages you to think more seriously about what the actual content will be. Mobile forces you to focus.
71. Based on: •  Site analytics •  Content priorities •  Where users benefit from a shift in content display •  Standard device dimensions Choose break points to determine the number of layouts
72. Source: metaltoad.com/blog/simple-device-diagram-responsive-design-planning 3 breakpoints 4 breakpoints 6 breakpoints
73. •  You can never create something that is inherently dynamic by creating a bunch of static deliverables. •  Each wireframe, visual design and development solution should be implemented in a simple prototype. From here, decisions can be solidified. •  How does that menu change? •  What happens to these content areas? •  Can we introduce a new way of getting from breakpoint A to breakpoint B? Use prototypes to evolve towards your final product. Prototype early and often:
74. Design a system, not a page. •  Visual design can start creating a style guide without having to wait for UX to produce a deliverable. •  It lets you create universal components, not unique pages. •  It will allow you to be more consistent from the start which hopefully prevents you from having to go back to revise and consolidate.
75. Wrap up.
76. Understand the basics of responsive. Avoid pithy (incorrect) channel ideas. Be responsive to more than screen size. Place. Channel behaviors. Other channels. And more. 1.  Mobile is more than on the go. 2.  Mobile should offer just as much as desktop. 3.  Tablets are the great entertainer. 4.  PCs will have to morph to survive. 5.  TV is almost always consumed with another channel. Fluid + breakpoints.
77. Use responsive responsibly.
78. Questions…
79. Please fill out the survey.
80. Thanks.