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.
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.
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
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”
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
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/
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.
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/
39. #d4dBoston #trulyresponsive @jeckman
Q & A
John Eckman
@jeckman
johneckman.com
openparenthesis.org
ISITE Design
www.isitedesign.com
delight.us
www.cmsmyth.com
Notas del editor
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