delightful ux

Download Delightful UX

Post on 14-Nov-2014




0 download

Embed Size (px)


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


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

2. Vitaly Friedman, editor-in-chief and co-founder of SmashingMag 3. Designing for the Web is like visualizing a tesseract. We build experiences by manipulating their shadows. Tim Brown 4. Responsive Design is an appropriate tool for multi-dimensional designs. 5. Its a new mindset that requires us to rethink and extend our practices. 6. Content Choreography 7. Content parity doesnt mean every experience is identical. It means that the content is always available: whatever settings and input modes the user uses. Scott Jehl 8. Its OK if we dont have complete content up front, but we do need complete content structure when we start designing. Sarah Parmenter 9. Redesign (20112012) 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. 10. Rethinking the role of the UK government online: 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 simplication of the digital footprint (both in terms of content and technology). Redesign (20112012) 11. 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 Sarah Richards Revolutionizing Government Content, 12. Users dont need to know what institution is responsible for a specic taskthey need to nd answers, easily. So the government structure cant be the main point of interaction, the content should be. Sarah Richards Revolutionizing Government Content, 13. User stories helped dene contents main scope: All content was rephrased as a set of user needs, 1,800 user needs grouped/classied 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. Redesign (20112012) 14. Every user need had to pass a strategic review: Redesign (20112012) Whats the point of the page? (identify the core, remove the wae) Do people want it? (based on trac 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) 15. 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. 16. The service manual tells all departments how to conduct their services. If a service cant prove that there is a use case for specic content, it wont go live. Sarah Richards Revolutionizing Government Content, 17. Responsive Iconography 18. Responsive Iconography Sometimes, rescaling an icon or illustration doesnt aid but rather hinders usability. Idea: with iconography, for dierent views deliver various levels of delity & interaction. The art-direction use-case beyond images applied to icons, based on its displayed size. 19. Just because an image is scalable doesnt mean its legible at all sizes. Most visual elements have a perfect sweet spot in terms of legibility icons are no dierent in this regard. Iconic 20. 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 Boulton 21. Optimistic Interfaces 22. Optimistic Interfaces Performance is not only about technology; its 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 users next steps. Steven C. Seow, Designing and EngineeringTime:The Psychology ofTime Perception 23. Optimistic Interfaces Perform actions optimistically Pretend that an action succeeded right away. Adaptively prefetch content Reprioritize loading based on users actions. Move bits when no one is watching Keep users busy while boring stu happens. Mike Krieger, co-founder of Instagram, Secrets to Lightning-Fast Mobile Design 24. 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. 25. Progressive Reduction 26. Your prociency in a product will decay over time without usage. As such, this prociency is reected in experience decays over time. These decays should be avoided at all costs. Allan Grinshtein 27. Progressive Reduction Usability is a moving target; users get smarter at a product as they keep using it. An interface should adapt and enable users to become more ecient at using it. Idea: change the UI as the user moves through dierent stages of prociency. 28. Progressive Reduction Every UI regresses without usage. For major features, track and observe their usage. Create a prociency prole for every user; as a feature is used more, start reducing the hand-holding in a series of levels. 29. Progressive Reduction Assign a prociency level to each feature and design its variations for each level. If a user doesnt 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. 30. Designing for Extremes 31. We have clients come to us and say, We know our average customer. Shes 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 32. ...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 33. Designing for Extremes Average user is an articial, static representation of users that dont exist. Real users change constantly, reaching dierent positions, roles and contexts. Idea: optimize for edge cases rst (minimal usability threshold), then converge towards more common cases. 34. Delightful UX 35. 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, 36. Delightful UX Feature sets cant 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. 37. Pain 38. Value >Pain 39. Delightful UX + Value Value > Pain> 40. Delightful UX + ValueThe key to is a great, authentic, humane personality. 41. Delightful UX For every potential negative experience, provide reassurance, solutions and rewards: Intl. shipping? Detect users country and reassure her. Input mistakes: Show only error-elds 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 prole: Ask for the favorite movie character. 42. Responsive Newsletters 43. 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 (zoomnpinching) business advantage. Mobile Email Usage Statistics, Mobile Opens Hit Record High, Only 11% of newsletters feature responsive mobile layouts, 44. Twitters Case-Study Minor tweaks in the layout help optimize the newsletter experience for readers: Colored cells for buttons (text+background), Dierent CTA/landing pages for dierent views, Column switching and padding adjustments, Inline table styling rst, media queries second, Twitter Inspires With Unique Responsive Design, Dreamforce Email Newsletter, VML Backgrounds, Backgrounds with VML for Outlook 07/10/13. 45. Responsive Newsletters Mobile email is a fragile medium with many specic constraints and requirements: Single-column layout, width 500600px, Minimum target area of 4444 px, Minimum font size of 13px, DOCTYPE ignore: clients impose their own/leave out, No JavaScript support is available, Often images are disabled (base64 wont work), There is no way around tables, px and display: none. Culprits: Outlook 2010, Lotus Notes, Yahoo, Gmail. 46. Email Market Share, Litmus, 47. Conclusion 48. Thank you. 49. Image credits Front cover: Geometric Wallpapers by Simon C Page ( blog/2012/03/ipad-hd-retina-wallpaper/) Homer Simpsons: Sections illustrations: bisous les copains, by Guillaume Kurkdjian (http:// bisouslescopains.tumblr.