Delightful UX

170
Real-Life Responsive Web Design Vitaly Friedman 20/02/2014 • UX Riga, Latvia

description

Виталий Фридман​ «Delightful UX»​ Frontend Dev Conf'14 www.fdconf.by

Transcript of Delightful UX

Page 1: Delightful UX

Real-Life Responsive Web Design

Vitaly Friedman20/02/2014 • UX Riga, Latvia

Page 2: Delightful UX

Vitaly Friedman, editor-in-chiefand co-founder of SmashingMag

Page 3: Delightful UX
Page 4: Delightful UX
Page 5: Delightful UX
Page 6: Delightful UX

“ Designing for the Web is like visualizing a tesseract. We build experiences by manipulating their shadows.

— Tim Brown

Page 7: Delightful UX
Page 8: Delightful UX

Responsive Design is an appropriate tool for “multi-dimensional” designs.

Page 9: Delightful UX

It’s a new mindset that requires us to rethink and extend our practices.

Page 10: Delightful UX
Page 11: Delightful UX
Page 12: Delightful UX
Page 13: Delightful UX

Content Choreography

Page 14: Delightful UX

“ Content parity doesn’t mean every experience is identical. It means that the content is always available: whatever settings and input modes the user uses.

— Scott Jehlhttp://www.lukew.com/ff/entry.asp?1684

Page 15: Delightful UX
Page 16: Delightful UX
Page 17: Delightful UX
Page 18: Delightful UX
Page 19: Delightful UX

“ It’s OK if we don’t have complete content up front, but we do need complete content structure when we start designing.

— Sarah Parmenter

Page 20: Delightful UX
Page 21: Delightful UX

Gov.uk Redesign (2011–2012)

• Typical characteristics of a “decaying” system:

• Huge, slow-moving, complex architecture,• Outdated and heavily customized legacy CMS,

• Solution: a new content-focused digital strategy based on user needs and sound design principles.

• Increasing maintenance and development costs,• An inconsistent, fragmented online presence,• Duplicate content authored by single departments,• Steady increase in user complaints and requests.

Page 22: Delightful UX
Page 23: Delightful UX

• Rethinking the role of the UK government online:

• JavaScript:var size = window.getComputedStyle(document.body,':after').get PropertyValue('content'); if (size == 'desktop') { // Load some more content. }

• Digital content to be managed centrally, (was run on a departmental level previously);

• Service model with focus on user needs, (iterative, agile mentality now re-applied);

• “Radical simplification of the digital footprint”(both in terms of content and technology).

Gov.uk Redesign (2011–2012)

Page 24: Delightful UX

“ The UK Government has 400 organizations, and each of them had at least one website, overall with 75.000 pages. The goal was to bring them all together, in one central place on Gov.uk…

— Sarah Richards“Revolutionizing Government Content”, https://vimeo.com/83280410

Page 25: Delightful UX

“ …Users don’t need to know what institution is responsible for a specific task—they need to find answers, easily. So the government structure can’t be the main point of interaction, the content should be.

— Sarah Richards“Revolutionizing Government Content”, https://vimeo.com/83280410

Page 26: Delightful UX
Page 27: Delightful UX
Page 28: Delightful UX
Page 29: Delightful UX
Page 30: Delightful UX
Page 31: Delightful UX
Page 32: Delightful UX

• User stories helped define content’s main scope:

• All content was rephrased as a set of user needs,• 1,800 user needs grouped/classified as stories,• Each was assigned a format (page, multipart guide),

• A priority/tags were assigned to each user need,• Needotron was built to track and prioritise user needs.

Gov.uk Redesign (2011–2012)

Page 33: Delightful UX
Page 34: Delightful UX
Page 35: Delightful UX

• Every user need had to pass a strategic review:

Gov.uk Redesign (2011–2012)

• What’s the point of the page?(identify the core, remove the waffle)

• Do people want it?(based on traffic and search terms)

• Do they want it from government?(content should be reasonably expected)

• Can only government meet the need? (focused content, no general advice)

Page 36: Delightful UX
Page 37: Delightful UX
Page 38: Delightful UX

• 18 months of work, with 200 people involved.Total cost saved: £542.000.000 per year.

• 116,000 documents deleted, 223 policies rewritten, 222 subdomains closed, 22,250 user stories.

Page 39: Delightful UX
Page 40: Delightful UX
Page 41: Delightful UX

“ …The service manual tells all departments how to conduct their services. If a service can’t prove that there is a use case for specific content, it won’t go live.

— Sarah Richards“Revolutionizing Government Content”, https://vimeo.com/83280410

Page 42: Delightful UX
Page 43: Delightful UX
Page 44: Delightful UX
Page 45: Delightful UX

Responsive Iconography

Page 46: Delightful UX

Responsive Iconography

• Sometimes, rescaling an icon or illustration doesn’t aid but rather hinders usability.

• Idea: with iconography, for different views deliver various levels of fidelity & interaction.

• The “art-direction” use-case beyond images— applied to icons, based on its displayed size.

Page 47: Delightful UX
Page 48: Delightful UX

“ Just because an image is scalable doesn’t mean it’s legible at all sizes. Most visual elements have a perfect sweet spot in terms of legibility—icons are no different in this regard.

— Iconic

Page 49: Delightful UX
Page 50: Delightful UX
Page 51: Delightful UX
Page 52: Delightful UX
Page 53: Delightful UX
Page 54: Delightful UX
Page 55: Delightful UX
Page 56: Delightful UX
Page 57: Delightful UX
Page 58: Delightful UX

“ Sparkicon is a small, inline icon with additional link meta data to describe either the content and/or the behaviour when the user clicks the link.

— Mark Boultonhttp://www.markboulton.co.uk/journal/sparkicons

Page 59: Delightful UX
Page 60: Delightful UX
Page 61: Delightful UX
Page 62: Delightful UX

Optimistic Interfaces

Page 63: Delightful UX

Optimistic Interfaces

• Performance is not only about technology;it’s about how users perceive it, too.

• To create a noticeable performance improvement, it has to improve by 20%.

• Idea: fake performance by being optimistic about user’s next steps.

Steven C. Seow, “Designing and Engineering Time: The Psychology of Time Perception”

Page 64: Delightful UX

Optimistic Interfaces

• Perform actions optimisticallyPretend that an action succeeded right away.

• Adaptively prefetch contentReprioritize loading based on user’s actions.

• Move bits when no one is watching Keep users busy while boring stuff happens.

Mike Krieger, co-founder of Instagram, “Secrets to Lightning-Fast Mobile Design”

Page 65: Delightful UX
Page 66: Delightful UX
Page 67: Delightful UX
Page 68: Delightful UX
Page 69: Delightful UX
Page 70: Delightful UX
Page 71: Delightful UX

“ The optimal style is a backwards moving and decelerating ribbed progress bar, which made the load time appear 11% faster than a solid colored bar.

Page 72: Delightful UX
Page 73: Delightful UX
Page 74: Delightful UX
Page 75: Delightful UX
Page 76: Delightful UX

Progressive Reduction

Page 77: Delightful UX

“ Your proficiency in a product will decay over time without usage. As such, this proficiency is reflected in experience decays over time. These decays should be avoided at all costs.

— Allan Grinshtein

Page 78: Delightful UX

Progressive Reduction

• Usability is a moving target; users getsmarter at a product as they keep using it.

• An interface should adapt and enable usersto become more efficient at using it.

• Idea: change the UI as the user moves through different stages of proficiency.

Page 79: Delightful UX
Page 80: Delightful UX

Progressive Reduction

• Every UI regresses without usage. For major features, track and observe their usage.

• Create a proficiency profile for every user;as a feature is used more, start reducing the “hand-holding” in a series of levels.

Page 81: Delightful UX

Progressive Reduction

• Assign a proficiency level to each feature and design its variations for each level.

• If a user doesn’t use a feature for a long time, UI regresses back to level 1.

• If a user uses a feature more, UI keeps increasing levels to the “advanced” mode.

Page 82: Delightful UX
Page 83: Delightful UX
Page 84: Delightful UX
Page 85: Delightful UX
Page 86: Delightful UX
Page 87: Delightful UX
Page 88: Delightful UX

Designing for Extremes

Page 89: Delightful UX

“ We have clients come to us and say, “We know our average customer. She’s female, 34 years old, with 2.3 kids…” But what we really need to do to design well, is to look at the extremes…

— Dan Formosa, “Smart Design”

Page 90: Delightful UX

“ ...the weakest, or the person with arthritis, or the athlete, or the strongest or the fastest person. Because if we really understand what the extremes are, the middle will take care of itself.

— Dan Formosa, “Smart Design”

Page 91: Delightful UX
Page 92: Delightful UX
Page 93: Delightful UX
Page 94: Delightful UX
Page 95: Delightful UX

Designing for Extremes

• Average user is an artificial, static representation of users that don’t exist.

• Real users change constantly, reaching different positions, roles and contexts.

• Idea: optimize for edge cases first (“minimal usability threshold”), then converge towards more common cases.

Page 96: Delightful UX
Page 97: Delightful UX
Page 98: Delightful UX
Page 99: Delightful UX
Page 100: Delightful UX

Delightful UX

Page 101: Delightful UX

“ Online relationships are like regular relationships; we should aspire to design interfaces [that] recognize users are humans by mirroring the natural process of relationship building.

— Trent Walton“Human Internet”, http://doriantaylor.com/the-redesign-dissolved

Page 102: Delightful UX

Delightful UX

• Feature sets can’t empathize with users.The atmosphere of performing tasks can.

• Being friendly and personal is default. Small kindnesses help us go beyond that.

• Idea: integrate small kindnesses in every interaction to keep users engaged and happy.

Page 103: Delightful UX
Page 104: Delightful UX
Page 105: Delightful UX
Page 106: Delightful UX
Page 107: Delightful UX

Pain

Page 108: Delightful UX

Value > Pain

Page 109: Delightful UX

Delightful UX + Value Value > Pain>

Page 110: Delightful UX
Page 111: Delightful UX

Delightful UX + ValueThe key to is agreat, authentic, humane personality.

Page 112: Delightful UX
Page 113: Delightful UX
Page 114: Delightful UX
Page 115: Delightful UX
Page 116: Delightful UX
Page 117: Delightful UX

Delightful UX

• For every potential negative experience, provide reassurance, solutions and rewards:

• Intl. shipping? Detect user’s country and reassure her.

• Input mistakes: Show only error-fields and hints.

• Slow checkout: Give $5 discount after 45s in checkout.

• Card declined: Provide alternate payment methods.

• First purchase: Provide a discount for next purchase.

• Large purchase: Send a handwritten thank-you note.

• Personal profile: Ask for the favorite movie character.

Page 118: Delightful UX
Page 119: Delightful UX
Page 120: Delightful UX
Page 121: Delightful UX
Page 122: Delightful UX
Page 123: Delightful UX
Page 124: Delightful UX
Page 125: Delightful UX
Page 126: Delightful UX
Page 127: Delightful UX
Page 128: Delightful UX
Page 129: Delightful UX
Page 130: Delightful UX
Page 131: Delightful UX
Page 132: Delightful UX
Page 133: Delightful UX
Page 134: Delightful UX
Page 135: Delightful UX
Page 136: Delightful UX
Page 137: Delightful UX
Page 138: Delightful UX
Page 139: Delightful UX
Page 140: Delightful UX

Responsive Newsletters

Page 141: Delightful UX
Page 142: Delightful UX
Page 143: Delightful UX
Page 144: Delightful UX

Responsive Emails

• “Mobile” email is big: 47% of email opens on mobile; more than desktop clients/webmail.

• Only 12% of high-impact newsletters are responsive; 80% delete email if it looks broken.

• Most newsletters are broken on mobile (zoom’n’pinching) → business advantage.

“Mobile Email Usage Statistics”, http://www.emailmonday.com/mobile-email-usage-statistics“Mobile Opens Hit Record High”, https://litmus.com/blog/mobile-opens-hit-record-high-of-47?“Only 11% of newsletters feature responsive mobile layouts”, http://blog.equinux.com/2013/07/responsive-mobile-email-layouts/

Page 145: Delightful UX
Page 146: Delightful UX
Page 147: Delightful UX
Page 148: Delightful UX
Page 149: Delightful UX
Page 150: Delightful UX
Page 151: Delightful UX
Page 152: Delightful UX
Page 153: Delightful UX

Twitter’s Case-Study

• Minor tweaks in the layout help optimize the newsletter experience for readers:

• Colored cells for buttons (text+background),• Different CTA/landing pages for different views,• Column switching and padding adjustments,• Inline table styling first, media queries second,

Twitter Inspires With Unique Responsive Design, https://litmus.com/blog/twitter-inspires-with-unique-responsive-designDreamforce Email Newsletter, https://litmus.com/blog/inspiration-dreamforceVML Backgrounds, http://www.emailonacid.com/blog/details/C13/emailology_vector_markup_language_and_backgrounds

• Backgrounds with VML for Outlook 07/10/13.

Page 154: Delightful UX

Responsive Newsletters

• Mobile email is a fragile medium with many specific constraints and requirements:

• JavaScript:var size = window.getComputedStyle(document.body,':after').get PropertyValue('content'); if (size == 'desktop') { // Load some more content. }

• Single-column layout, width 500–600px,• Minimum target area of 44×44 px,• Minimum font size of 13px,• DOCTYPE ignore: clients impose their own/leave out,• No JavaScript support is available,• Often images are disabled (base64 won’t work),• There is no way around tables, px and display: none.• Culprits: Outlook 2010, Lotus Notes, Yahoo, Gmail.

Page 155: Delightful UX

“Email Market Share”, Litmus, http://emailclientmarketshare.com

Page 156: Delightful UX
Page 157: Delightful UX
Page 158: Delightful UX
Page 159: Delightful UX
Page 160: Delightful UX
Page 161: Delightful UX
Page 162: Delightful UX
Page 163: Delightful UX
Page 164: Delightful UX
Page 165: Delightful UX
Page 166: Delightful UX

Conclusion

Page 167: Delightful UX
Page 168: Delightful UX

Thank you.

Page 169: Delightful UX

Image credits

• Front cover: Geometric Wallpapers by Simon C Page (http://simoncpage.co.uk/blog/2012/03/ipad-hd-retina-wallpaper/)

• JavaScript:var size = window.getComputedStyle(document.body,':after').get PropertyValue('content'); if (size == 'desktop') { // Load some more content. }

• Homer Simpsons: http://smashed.by/homer

• Sections illustrations: “bisous les copains”, by Guillaume Kurkdjian (http://bisouslescopains.tumblr.com/)

• Hypercube: http://en.academic.ru, Wikipedia

Page 170: Delightful UX