Responsive Design vs Context-Driven Design

C62d661f7eee599f40423911634705c7?s=47 wallowmuddy
October 11, 2012

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.

C62d661f7eee599f40423911634705c7?s=128

wallowmuddy

October 11, 2012
Tweet

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.
  6. None
  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.
  18. None
  19. None
  20. www.bostonglobe.com

  21. question: How is each element changing?

  22. None
  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

  62. None
  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.