Designing Responsive Experiences
•Télécharger en tant que PPTX, PDF•
2 j'aime•1,677 vues
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.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (20)
Similaire à Designing Responsive Experiences
Similaire à Designing Responsive Experiences (20)
Plus de John Eckman
Plus de John Eckman (20)
Dernier
Dernier (20)
Designing Responsive Experiences
- 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.
- 5. #d4dBoston #trulyresponsive @jeckman THE RISE OF RESPONSIVE DESIGN http://www.flickr.com/photos/redlinx/9072816774/
- 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.”
- 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. #d4dBoston #trulyresponsive @jeckman Users ≠ Devices http://www.flickr.com/photos/brimley/6307761251/in/photostream/
- 11. #d4dBoston #trulyresponsive @jeckman BRAND/COMPANY LEVEL: CUSTOMER EXPERIENCE STRATEGY http://dilbert.com/strips/comic/2002-09-07/
- 12. #d4dBoston #trulyresponsive @jeckman Companies that are loved, win
- 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. #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. #d4dBoston #trulyresponsive @jeckman Align Imagine Map Getting there: AIM
- 16. #d4dBoston #trulyresponsive @jeckman Align Imagine Map Customer & Business / Teams & Vision Journeys & Content / Technology & Processes Goals & Measurement Getting there: AIM
- 17. #d4dBoston #trulyresponsive @jeckman Align Imagine Map Experience Principles / Ideation Touch point design / Co-creation Getting there: AIM
- 18. #d4dBoston #trulyresponsive @jeckman Imagine MapAlign Service Blueprint / Roadmap Getting there: AIM
- 19. #d4dBoston #trulyresponsive @jeckman Understand customer journeys
- 20. #d4dBoston #trulyresponsive @jeckman Prioritize for Impact, Effort
- 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. #d4dBoston #trulyresponsive @jeckman PROJECT LEVEL: USER CENTERED DESIGN http://www.flickr.com/photos/kt/19925290/
- 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
- 25. #d4dBoston #trulyresponsive @jeckman Card Sorting
- 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. #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. #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. #d4dBoston #trulyresponsive @jeckman Sketch for Flexibility
- 31. #d4dBoston #trulyresponsive @jeckman POST-LAUNCH: CONTINUOUS OPTIMIZATION http://getreadyforday2.com/
- 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. #d4dBoston #trulyresponsive @jeckman Continuous Optimization
- 34. #d4dBoston #trulyresponsive @jeckman PARTING THOUGHTS
- 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. #d4dBoston #trulyresponsive @jeckman We Know Better
- 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. #d4dBoston #trulyresponsive @jeckman Experiences > Marketing http://gapingvoid.com/2006/05/09/if-you-talked-to-people/
- 39. #d4dBoston #trulyresponsive @jeckman Q & A John Eckman @jeckman johneckman.com openparenthesis.org ISITE Design www.isitedesign.com delight.us www.cmsmyth.com
Notes de l'éditeur
- 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