7. The benefits of a modern, standards-
based web site:
Great customer experience
Seamlessly cross-device
High performance
Lower maintenance costs
Better marketability
Perception
12. Sure, Responsive Design is
hip & cool, but is it enough?
User context drives needs.
Devices have different capabilities.
13. We need to be “on PAR”
but what the hell does that mean?
14. A set of web development methodologies and techniques
used for the creation of web experiences that work
seamlessly across browsers, platforms, sizes, & form factors.
Progressive+Adaptive+Responsive
15. Being on PAR covers the 3 Tenets of
Modern Web Design
State-of-art Front-end.
Content that meet’s user intent.
Contemporary Design.
17. Ensure site capabilities, features and content, are appropriately
rendered and targeted to the fullest extent possible - based on a
visitor’s device type, location, connection speed, and browser/OS.
19. So we knew what we had to do.
We just had to figure out how to
bring others along the journey.
… and by others, we really mean our
execs
20.
21. What was the Customer Criteria for Selecting Site as Best in Class?
34% clear / clean / concise / simple
24% easy to navigate
20% good layout / well organized
15% easy to find what you’re looking for
13% graphics / pictures + images
Q: What is it about (this/these) websites that
makes (it/them) the best for visual design in
your opinion?
Q: What (does this/do these) website(s)
do better than other sites?
22. It’s easy to build experiences that function, are
understandable, and usable.
We also need to build experiences that bring joy,
excitement, fun, and yes, beauty to peoples lives.
23. Meaningful
Has personal significance
Pleasurable
Memorable experience worth sharing
Convenient
Super easy to use, works like I think
Usable
Can be used without difficulty
Reliable
Is available and accurate
Functional (Useful)
Works as programmed
Focused on Tasks
(Platform, Features)
**Modified from model created by Stephen P. Anderson
THIS IS THE CHASM THAT IS REALLY, REALLY
HARD FOR ORGANIZATIONS TO CROSS
Focused on Experiences
(People, Activities, Context)
Have a believable story
Co-create value with customers
Connect people in community
Appeal to emotional and social values
Highly personal
Empower people to do things
previously not possible
Simplify, organize, and clarify information
Display information visually
Reduce features and complexity
Easy to understand
Use language for more natural interactions
Add features that support desired behaviors
(gestures)
Have a Personality
Design for FLOW (boredom vs anxiety)
Prioritize Aesthetics (visual, behaviors,
sounds, psychology)
Create conversational and context aware
interactions (Narrative IA structures,
compelling dialog)
Elicit Desire (Limited availability, limited
access, curious and seductive experiences)
24. We needed to change how we work
We needed “Lean UX”
25. Common challenges
Tendency for siloed work – separation of
people/roles
Stuck in the “Waterfall” method – Business planning
phase, Design phase, Develop phase
Decision driven meetings, wrestling for “ownership”
Compromises were being made and the aspirational
vision was being lost
UX wasn’t championing the right experience
29. Lean UX key learnings
Early, frequent iteration together drives unity and
reduces opportunities for personal bias
You can expand the surface area of discussion
without becoming trapped by it
Having a common understanding of problems and
our philosophy speeds up downstream decisions
30.
31. “Day by day, the number of devices, platforms, and browsers that need
to work with your site grows. Responsive design [Multi-device design]
represents a fundamental shift in how we’ll build websites for the
decade to come.”
32.
33. Fixed width layouts :(
There is no standard screen resolution, so quit
designing like there is.
35. Responsive = responsible
Consumption of content is more than just design.
Ensure your solutions are accessible, lightweight,
cross-browser compatible, etc.
36. Content hierarchy
choreography
Land on key content flows, balanced with business
priorities. Data will help prioritize how content layout
changes, disappears - but beware of removing content.
Instead use content enhancement.
37. Breakpoints and
tweakpoints
“If it ain’t broke, then don’t fix it.” – Someone
Define breakpoints when content breaks, not for
common device sizes
40. Designing from the Gut
Designing from the gut is a radical concept. It is
generally met with a tremendous amount of
friction in most software circles that tend to rely
heavily on "logic and data" for all decisions.
Being truly Progressive means we needed to emphasize accessibility and semantics in web page markup, ensuring universal access to all basic content and functionality, regardless of a visitor’s browser and connection speed. And only serve additional, enhanced functionality, where the browsing experience is not degraded.
As web designers, we have to look beyond the layout to envision how its elements will reflow & lockup at various widths, while maintaining form & hierarchy. Think flexible Text, Images, Videos, Tables, Forms, etc.
Focus on the layout of a web page, ensuring the viewing environment renders appropriately across a broad range of devices and browsers, utilizing maximum effective screen real estate.
“The concept of permanently placing content on a web page for a single browsing width or resolution is becoming a thing of the past.”
Trent Walton – Paravel
In order to have organizations and partners fully embrace the modern web design philosophy, you need to change how you work together.
With Lean UX… the best way forward is to pull all members of a team together to design, build, test and then evaluate in multiple quick rounds.
Collaboration, building trust, and having open discussions are key transformation principles that when paired with the Lean UX approach, maximize what is delivered and how it’s delivered.
Get over the things you can’t control: Monitor color settings, Browser or version, Browser settings, Connection speed, User context
Accessible means more then building for impaired users, it means designing for the person who is sitting outside, having a coffee on a bright sunny day.
Content stacking, content swapping – its all the same. Media queries can be used to do more than patch broken layouts: with proper planning, you can begin to choreograph content proportional to screen size, serving the best possible experience on any device.
Be careful though, what happens if a user visits at full-width one afternoon and revisits your site in the evening on a tablet, and everything looks completely different? It’s annoying.
Determine your breakpoints based on visitor resolution ranges.
320px
1 column
Masked hero
540px
Larger header logo
Show navigation and search
Unmasked hero
Horizontal Discover and Follow us
2 column fat footer
680px
Tile overlay on hero
3 column pivot
900px
Increased padding on navigation
1+3 split: Discover + pivot
1+3 split: Follow us + news
Vertical Discover and Follow us
Larger headings
4 column fat footer
1180px
Max-width of content containers
1600px
Max-width of hero
This is not to say that there isn't a place for telemetry or usability studies in the act of designing software. It's simply a question of when and where. At Microsoft, we drew learnings from analytics and previous A/B testing, but at the end of the day it was strategy by gut, tweaking by data. Design had the ability and freedom to make gut calls.
