Successfully reported this slideshow.

Truly Responsive Design Means Aligning to Business and User Goals

2

Share

Loading in …3
×
1 of 39
1 of 39

Truly Responsive Design Means Aligning to Business and User Goals

2

Share

Download to read offline

Description

Perhaps the greatest sea-change in the industry since the “Web 2.0″ meme, Responsive Design has been the unavoidable theme of the web industry in 2011 and 2012. But too much of the focus in responsive design has been on the mechanics: media queries, responsive images, javascript polyfills, and techniques for progressive enhancement.

Not enough attention has been paid to how responsive sites and applications should be designed to take into account the needs and contexts of users. In short, we’ve been designing sites that respond to the needs (and capabilities) of *browsers* and *devices* rather than the desires and contexts of users.

In this talk I cover strategies and processes you can follow which help ensure your web applications are truly responsive to business goals and user needs, not just device capabilities.

Transcript

  1. 1. #d4dBoston #trulyresponsive @jeckman TRULY RESPONSIVE DESIGN John Eckman
  2. 2. #d4dBoston #trulyresponsive @jeckman About ISITE Design Digital Experience Agency About the Agency Founded in 1997 70+ full time employees Boston & Portland, OR Customers 250+ clients including Siemens, Genzyme, Nike, Zipcar, Intel, Columbia Sportswear, New England Biolabs, Harvard Kennedy, Wharton Exec Ed.
  3. 3. #d4dBoston #trulyresponsive @jeckman
  4. 4. #d4dBoston #trulyresponsive @jeckman http://delight.us/
  5. 5. #d4dBoston #trulyresponsive @jeckman THE RISE OF RESPONSIVE DESIGN http://www.flickr.com/photos/redlinx/9072816774/
  6. 6. #d4dBoston #trulyresponsive @jeckman http://alistapart.com/article/dao “Now is the time for the medium of the web to outgrow its origins in the printed page. . . . It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility . . . The journey begins by letting go of control, and becoming flexible.”
  7. 7. #d4dBoston #trulyresponsive @jeckman http://www.alistapart.com/articles/responsive-web-design/
  8. 8. #d4dBoston #trulyresponsive @jeckman Responsive Design
  9. 9. #d4dBoston #trulyresponsive @jeckman “an emergent discipline called ‘responsive architecture’ has begun asking how physical spaces can respond to the presence of people passing through them. . . . rather than creating immutable, unchanging spaces that define a particular experience, they suggest inhabitant and structure can—and should—mutually influence each other” http://www.alistapart.com/articles/responsive-web-design/ Responsive as in Respond
  10. 10. #d4dBoston #trulyresponsive @jeckman Users ≠ Devices http://www.flickr.com/photos/brimley/6307761251/in/photostream/
  11. 11. #d4dBoston #trulyresponsive @jeckman BRAND/COMPANY LEVEL: CUSTOMER EXPERIENCE STRATEGY http://dilbert.com/strips/comic/2002-09-07/
  12. 12. #d4dBoston #trulyresponsive @jeckman Companies that are loved, win
  13. 13. #d4dBoston #trulyresponsive @jeckman The Chief Customer Officer “The corporation does not live in rapport with its customers because the customer doesn’t experience a company through its silos. The customer experiences a company horizontally, across the silos”
  14. 14. #d4dBoston #trulyresponsive @jeckman http://answerlab.com/resources/research/elevate-customer-experience-in-your-company/ Customer is at the center Designers, product managers and marketers look to user goals as the driver of product development and marketing Performance is measured by how well experiences meet users’ needs, goals, or desires Win = best user experience and positive customer reviews, which leads to revenue growth
  15. 15. #d4dBoston #trulyresponsive @jeckman Align Imagine Map Getting there: AIM
  16. 16. #d4dBoston #trulyresponsive @jeckman Align Imagine Map Customer & Business / Teams & Vision Journeys & Content / Technology & Processes Goals & Measurement Getting there: AIM
  17. 17. #d4dBoston #trulyresponsive @jeckman Align Imagine Map Experience Principles / Ideation Touch point design / Co-creation Getting there: AIM
  18. 18. #d4dBoston #trulyresponsive @jeckman Imagine MapAlign Service Blueprint / Roadmap Getting there: AIM
  19. 19. #d4dBoston #trulyresponsive @jeckman Understand customer journeys
  20. 20. #d4dBoston #trulyresponsive @jeckman Prioritize for Impact, Effort
  21. 21. #d4dBoston #trulyresponsive @jeckman Lessons from Zipcar • Great experiences drive loyalty; loyalty drives growth. • Observe and understand people. • Understand and dissect journeys and supporting processes. • Design internal experiences too. • Use data. • Conceptualize ideals. • Design experiences, not features. http://delight.us/zipcar-principles-for-designing-great-experiences/
  22. 22. #d4dBoston #trulyresponsive @jeckman PROJECT LEVEL: USER CENTERED DESIGN http://www.flickr.com/photos/kt/19925290/
  23. 23. #d4dBoston #trulyresponsive @jeckman Tools & Processes • User Research – Contextual Observation, Surveys, Interviews – Mix Qualitative and Quantitative – Establish Personas, Goals • Listening – Analytics – Social – Customer Service • Content Strategy – Content appropriate to customer journey, persona – Format, style, tone, hierarchy
  24. 24. #d4dBoston #trulyresponsive @jeckman
  25. 25. #d4dBoston #trulyresponsive @jeckman Card Sorting
  26. 26. #d4dBoston #trulyresponsive @jeckman UX Design in a RWD World Understand the What and Why – Define business and user goals – Make those goals the North Star for everyone on the team (including the client). – Map these goals to an experience rather than a device
  27. 27. #d4dBoston #trulyresponsive @jeckman UX Design in a RWD World Put Content First – Banish lorem ipsum – Define content strategy early in process – Content hierarchy mockups > flat wireframes
  28. 28. #d4dBoston #trulyresponsive @jeckman UX Design in a RWD World Think through Interactions – Consider all use cases, even edge cases • Interface vs. page, fluid vs. static • Map out task flows – Sketch first: Paper (or whiteboard) is your friend – Show chrome: context in RWD is important – Live Prototype: iterate early and often
  29. 29. #d4dBoston #trulyresponsive @jeckman Sketch for Flexibility
  30. 30. #d4dBoston #trulyresponsive @jeckman
  31. 31. #d4dBoston #trulyresponsive @jeckman POST-LAUNCH: CONTINUOUS OPTIMIZATION http://getreadyforday2.com/
  32. 32. #d4dBoston #trulyresponsive @jeckman Your Website is NOT a Project • Always Be Testing – A/B and Multivariate – User Testing – Beware local maximums – Archive and socialize knowledge • Listen to users – Make friends with customer service – Publish a feedback mechanism http://www.flickr.com/photos/mightyohm/2729474646/in/photostream/
  33. 33. #d4dBoston #trulyresponsive @jeckman Continuous Optimization
  34. 34. #d4dBoston #trulyresponsive @jeckman PARTING THOUGHTS
  35. 35. #d4dBoston #trulyresponsive @jeckman What users want The real challenge isn’t finding out what users want. The real challenge is defending what users want against what the business wants, and developing a strategy whereby those conflicting needs/wants can be consistently and pragmatically balanced in a sustained ongoing fashion.
  36. 36. #d4dBoston #trulyresponsive @jeckman We Know Better
  37. 37. #d4dBoston #trulyresponsive @jeckman User-Driven vs User-Centric “When I first talked with Doc about user- driven instead of user-centric, Jim Carrey’s The Truman Show immediately sprang to mind: from birth, Truman is the protagonist in a huge reality show revolving around him… only he doesn’t know it. . . . Clearly the Truman Show is Truman-centric… but it is most definitely not Truman-driven.” - http://blog.joeandrieu.com/2008/07/12 /towards-user-driven-search/
  38. 38. #d4dBoston #trulyresponsive @jeckman Experiences > Marketing http://gapingvoid.com/2006/05/09/if-you-talked-to-people/
  39. 39. #d4dBoston #trulyresponsive @jeckman Q & A John Eckman @jeckman johneckman.com openparenthesis.org ISITE Design www.isitedesign.com delight.us www.cmsmyth.com

Editor's Notes

  • The team I work with ISITE design – lets me work with awesome clients – who whom we co-create apps, websites, and campaign work with digital experience at the core.Forrester in covering this field uniquely – and we were honored to be among 40 or so firms who’s work they highlight in their latest report.
  • And we gather brands and experts in digital experience that we admire both virually in our blog – Delight.US – and in person at two in-person conferences we host in our headquarters cities of Portland, Oregon and Boston, Mass.If these stories resonate with you – we’d love to talk with you, to feature your work, and to have you as our guest at Delight.
  • Way back in 2000, John Allsopp identified a fundamental issue of control and flexibility
  • 10 years later, Ethan Marcotte names Responsive Web Design. In between? 10 years of fixed-width, table-based layouts replaced by DIV-based but still fixed layouts. (That’s not entirely true, but it was broadly the case)
  • The official theme of DrupalCon Denver 2012 was “collaborative publishing for every device” – but Robert Douglass and Jeffrey McGuire's opening session shortened the official tagline to this version for the tl;dr; crowd
  • Origin – responsive architectureLet’s not forget the user is who we should be responding to, not just the device
  • What’s positive about RWD is that it forced the end of the collective hallucination that digital experiences should be the same across all devices – the myth of the 1024 x768 screen and the fixed width design. The challenge is that in all our focus on devices – on different form factors and capabilities we’ve lost touch with the notion that devices don’t use the web, people do. We want to respond to the users, not the devices. Truly responsive web design requires a focus on the brains (and hearts) behind the devices.
  • I’m going to focus today on how you ensure that what you’re doing keeps “what users want” in mind. I’ll cover three stages:Whole company / brand levelSpecific project / site / application Ongoing
  • We respect what we can measure – improve and report.Research from Bain, Forrester, and Temkin Group
  • Personas / Journey Maps / Strategic Brief
  • Theme / Opportunities / Prototypes
  • We lead a two day workshop with oer 30 stakeholders from all across the organization.Confirmend existing journey map and brainstormed “future-perfect” state.
  • This is the hard work of bringing the great thinking down to earth and making decisions about what can be done today, tomorrow and in the future.
  • User research (quantitative & qualitative; in-context observation, surveys, focus groups)Social ListeningAnalyticsPersonasContent Strategy
  • Personas mapped to tasks
  • This is a card sort – a Content Strategy exercise for tailoring messaging – divided into what we are, what we aspire to be, what we are not. Triggers lots of good discussion
  • 3. RWD moves us away from device centric and pixel specific design process. Part of our design methodology should include a detailed goal and experience map that can serve as a guide throughout the project. Consider your client as a team member.
  • Lorum Ipsum – “Neither is there anyone who loves pain itself since it is pain and thus wants to obtain it”
  • 3. RWD moves us away from device centric and pixel specific design process. Part of our design methodology should include a detailed goal and experience map that can serve as a guide throughout the project. Consider your client as a team member.
  • A couple of sketch examples that demonstrate high level thinking. When sketching start out at 50k foot view…Loose ideas, big boxes on post-its, napkins, etc…Begin validating the big ideas with more detailed sketching
  • Detailed sketching example that explores specific interactions. What happens when a certain action is taken…work through task flows. Great way to find interaction problems before too much commitment.
  • For example, in the Media & Publishing space, users want engaging content with high production value and high quality, at no cost, with no DRM, with no annoying ads or interruptions. In ecommerce, users want high quality goods as cheaply and conveniently as possible. But businesses also have goals – and those goals are critical to long term success.
  • You know more about what is not working than you admitSeparate “image problems” from “reality problems” and fix the reality problems first
  • Description

    Perhaps the greatest sea-change in the industry since the “Web 2.0″ meme, Responsive Design has been the unavoidable theme of the web industry in 2011 and 2012. But too much of the focus in responsive design has been on the mechanics: media queries, responsive images, javascript polyfills, and techniques for progressive enhancement.

    Not enough attention has been paid to how responsive sites and applications should be designed to take into account the needs and contexts of users. In short, we’ve been designing sites that respond to the needs (and capabilities) of *browsers* and *devices* rather than the desires and contexts of users.

    In this talk I cover strategies and processes you can follow which help ensure your web applications are truly responsive to business goals and user needs, not just device capabilities.

    Transcript

    1. 1. #d4dBoston #trulyresponsive @jeckman TRULY RESPONSIVE DESIGN John Eckman
    2. 2. #d4dBoston #trulyresponsive @jeckman About ISITE Design Digital Experience Agency About the Agency Founded in 1997 70+ full time employees Boston & Portland, OR Customers 250+ clients including Siemens, Genzyme, Nike, Zipcar, Intel, Columbia Sportswear, New England Biolabs, Harvard Kennedy, Wharton Exec Ed.
    3. 3. #d4dBoston #trulyresponsive @jeckman
    4. 4. #d4dBoston #trulyresponsive @jeckman http://delight.us/
    5. 5. #d4dBoston #trulyresponsive @jeckman THE RISE OF RESPONSIVE DESIGN http://www.flickr.com/photos/redlinx/9072816774/
    6. 6. #d4dBoston #trulyresponsive @jeckman http://alistapart.com/article/dao “Now is the time for the medium of the web to outgrow its origins in the printed page. . . . It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility . . . The journey begins by letting go of control, and becoming flexible.”
    7. 7. #d4dBoston #trulyresponsive @jeckman http://www.alistapart.com/articles/responsive-web-design/
    8. 8. #d4dBoston #trulyresponsive @jeckman Responsive Design
    9. 9. #d4dBoston #trulyresponsive @jeckman “an emergent discipline called ‘responsive architecture’ has begun asking how physical spaces can respond to the presence of people passing through them. . . . rather than creating immutable, unchanging spaces that define a particular experience, they suggest inhabitant and structure can—and should—mutually influence each other” http://www.alistapart.com/articles/responsive-web-design/ Responsive as in Respond
    10. 10. #d4dBoston #trulyresponsive @jeckman Users ≠ Devices http://www.flickr.com/photos/brimley/6307761251/in/photostream/
    11. 11. #d4dBoston #trulyresponsive @jeckman BRAND/COMPANY LEVEL: CUSTOMER EXPERIENCE STRATEGY http://dilbert.com/strips/comic/2002-09-07/
    12. 12. #d4dBoston #trulyresponsive @jeckman Companies that are loved, win
    13. 13. #d4dBoston #trulyresponsive @jeckman The Chief Customer Officer “The corporation does not live in rapport with its customers because the customer doesn’t experience a company through its silos. The customer experiences a company horizontally, across the silos”
    14. 14. #d4dBoston #trulyresponsive @jeckman http://answerlab.com/resources/research/elevate-customer-experience-in-your-company/ Customer is at the center Designers, product managers and marketers look to user goals as the driver of product development and marketing Performance is measured by how well experiences meet users’ needs, goals, or desires Win = best user experience and positive customer reviews, which leads to revenue growth
    15. 15. #d4dBoston #trulyresponsive @jeckman Align Imagine Map Getting there: AIM
    16. 16. #d4dBoston #trulyresponsive @jeckman Align Imagine Map Customer & Business / Teams & Vision Journeys & Content / Technology & Processes Goals & Measurement Getting there: AIM
    17. 17. #d4dBoston #trulyresponsive @jeckman Align Imagine Map Experience Principles / Ideation Touch point design / Co-creation Getting there: AIM
    18. 18. #d4dBoston #trulyresponsive @jeckman Imagine MapAlign Service Blueprint / Roadmap Getting there: AIM
    19. 19. #d4dBoston #trulyresponsive @jeckman Understand customer journeys
    20. 20. #d4dBoston #trulyresponsive @jeckman Prioritize for Impact, Effort
    21. 21. #d4dBoston #trulyresponsive @jeckman Lessons from Zipcar • Great experiences drive loyalty; loyalty drives growth. • Observe and understand people. • Understand and dissect journeys and supporting processes. • Design internal experiences too. • Use data. • Conceptualize ideals. • Design experiences, not features. http://delight.us/zipcar-principles-for-designing-great-experiences/
    22. 22. #d4dBoston #trulyresponsive @jeckman PROJECT LEVEL: USER CENTERED DESIGN http://www.flickr.com/photos/kt/19925290/
    23. 23. #d4dBoston #trulyresponsive @jeckman Tools & Processes • User Research – Contextual Observation, Surveys, Interviews – Mix Qualitative and Quantitative – Establish Personas, Goals • Listening – Analytics – Social – Customer Service • Content Strategy – Content appropriate to customer journey, persona – Format, style, tone, hierarchy
    24. 24. #d4dBoston #trulyresponsive @jeckman
    25. 25. #d4dBoston #trulyresponsive @jeckman Card Sorting
    26. 26. #d4dBoston #trulyresponsive @jeckman UX Design in a RWD World Understand the What and Why – Define business and user goals – Make those goals the North Star for everyone on the team (including the client). – Map these goals to an experience rather than a device
    27. 27. #d4dBoston #trulyresponsive @jeckman UX Design in a RWD World Put Content First – Banish lorem ipsum – Define content strategy early in process – Content hierarchy mockups > flat wireframes
    28. 28. #d4dBoston #trulyresponsive @jeckman UX Design in a RWD World Think through Interactions – Consider all use cases, even edge cases • Interface vs. page, fluid vs. static • Map out task flows – Sketch first: Paper (or whiteboard) is your friend – Show chrome: context in RWD is important – Live Prototype: iterate early and often
    29. 29. #d4dBoston #trulyresponsive @jeckman Sketch for Flexibility
    30. 30. #d4dBoston #trulyresponsive @jeckman
    31. 31. #d4dBoston #trulyresponsive @jeckman POST-LAUNCH: CONTINUOUS OPTIMIZATION http://getreadyforday2.com/
    32. 32. #d4dBoston #trulyresponsive @jeckman Your Website is NOT a Project • Always Be Testing – A/B and Multivariate – User Testing – Beware local maximums – Archive and socialize knowledge • Listen to users – Make friends with customer service – Publish a feedback mechanism http://www.flickr.com/photos/mightyohm/2729474646/in/photostream/
    33. 33. #d4dBoston #trulyresponsive @jeckman Continuous Optimization
    34. 34. #d4dBoston #trulyresponsive @jeckman PARTING THOUGHTS
    35. 35. #d4dBoston #trulyresponsive @jeckman What users want The real challenge isn’t finding out what users want. The real challenge is defending what users want against what the business wants, and developing a strategy whereby those conflicting needs/wants can be consistently and pragmatically balanced in a sustained ongoing fashion.
    36. 36. #d4dBoston #trulyresponsive @jeckman We Know Better
    37. 37. #d4dBoston #trulyresponsive @jeckman User-Driven vs User-Centric “When I first talked with Doc about user- driven instead of user-centric, Jim Carrey’s The Truman Show immediately sprang to mind: from birth, Truman is the protagonist in a huge reality show revolving around him… only he doesn’t know it. . . . Clearly the Truman Show is Truman-centric… but it is most definitely not Truman-driven.” - http://blog.joeandrieu.com/2008/07/12 /towards-user-driven-search/
    38. 38. #d4dBoston #trulyresponsive @jeckman Experiences > Marketing http://gapingvoid.com/2006/05/09/if-you-talked-to-people/
    39. 39. #d4dBoston #trulyresponsive @jeckman Q & A John Eckman @jeckman johneckman.com openparenthesis.org ISITE Design www.isitedesign.com delight.us www.cmsmyth.com

    Editor's Notes

  • The team I work with ISITE design – lets me work with awesome clients – who whom we co-create apps, websites, and campaign work with digital experience at the core.Forrester in covering this field uniquely – and we were honored to be among 40 or so firms who’s work they highlight in their latest report.
  • And we gather brands and experts in digital experience that we admire both virually in our blog – Delight.US – and in person at two in-person conferences we host in our headquarters cities of Portland, Oregon and Boston, Mass.If these stories resonate with you – we’d love to talk with you, to feature your work, and to have you as our guest at Delight.
  • Way back in 2000, John Allsopp identified a fundamental issue of control and flexibility
  • 10 years later, Ethan Marcotte names Responsive Web Design. In between? 10 years of fixed-width, table-based layouts replaced by DIV-based but still fixed layouts. (That’s not entirely true, but it was broadly the case)
  • The official theme of DrupalCon Denver 2012 was “collaborative publishing for every device” – but Robert Douglass and Jeffrey McGuire's opening session shortened the official tagline to this version for the tl;dr; crowd
  • Origin – responsive architectureLet’s not forget the user is who we should be responding to, not just the device
  • What’s positive about RWD is that it forced the end of the collective hallucination that digital experiences should be the same across all devices – the myth of the 1024 x768 screen and the fixed width design. The challenge is that in all our focus on devices – on different form factors and capabilities we’ve lost touch with the notion that devices don’t use the web, people do. We want to respond to the users, not the devices. Truly responsive web design requires a focus on the brains (and hearts) behind the devices.
  • I’m going to focus today on how you ensure that what you’re doing keeps “what users want” in mind. I’ll cover three stages:Whole company / brand levelSpecific project / site / application Ongoing
  • We respect what we can measure – improve and report.Research from Bain, Forrester, and Temkin Group
  • Personas / Journey Maps / Strategic Brief
  • Theme / Opportunities / Prototypes
  • We lead a two day workshop with oer 30 stakeholders from all across the organization.Confirmend existing journey map and brainstormed “future-perfect” state.
  • This is the hard work of bringing the great thinking down to earth and making decisions about what can be done today, tomorrow and in the future.
  • User research (quantitative & qualitative; in-context observation, surveys, focus groups)Social ListeningAnalyticsPersonasContent Strategy
  • Personas mapped to tasks
  • This is a card sort – a Content Strategy exercise for tailoring messaging – divided into what we are, what we aspire to be, what we are not. Triggers lots of good discussion
  • 3. RWD moves us away from device centric and pixel specific design process. Part of our design methodology should include a detailed goal and experience map that can serve as a guide throughout the project. Consider your client as a team member.
  • Lorum Ipsum – “Neither is there anyone who loves pain itself since it is pain and thus wants to obtain it”
  • 3. RWD moves us away from device centric and pixel specific design process. Part of our design methodology should include a detailed goal and experience map that can serve as a guide throughout the project. Consider your client as a team member.
  • A couple of sketch examples that demonstrate high level thinking. When sketching start out at 50k foot view…Loose ideas, big boxes on post-its, napkins, etc…Begin validating the big ideas with more detailed sketching
  • Detailed sketching example that explores specific interactions. What happens when a certain action is taken…work through task flows. Great way to find interaction problems before too much commitment.
  • For example, in the Media & Publishing space, users want engaging content with high production value and high quality, at no cost, with no DRM, with no annoying ads or interruptions. In ecommerce, users want high quality goods as cheaply and conveniently as possible. But businesses also have goals – and those goals are critical to long term success.
  • You know more about what is not working than you admitSeparate “image problems” from “reality problems” and fix the reality problems first
  • More Related Content

    Related Books

    Free with a 30 day trial from Scribd

    See all

    ×