Bringing Personality Back To The Web

A presentation at Web Clerks in November 2019 in Vienna, Austria by Vitaly Friedman

WE DON’T TAKE ANY LIABILITY FOR THE NIGHTMARES, HEADACHES OR INJURIES CAUSED. YOU ARE ON YOUR OWN HERE.

Vitaly Friedman, co-founder of SmashingMag (I really don’t know what to put in here…)

“ The design process is weird and complicated because it involves people and systems, which often are weird and complicated. — à la Mark Boulton

Junior Designers vs. Senior Designers, https://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e

↬ Davide Scialpi, https://medium.com/@davidescialpi/branding-today-fashion-luxury-brands-look-all-the-same

“ If we want to stand out — to outperform our competitors — we need to delight customers with a remarkable design and a unique, charming personality. Be slow and mindful. With an unprecedented attention to detail… — à la Mogens Møller

↬ Menu Icons, Alex Münch, https://twitter.com/alexmuench/status/1090550334286692352

Breaking Out Of The Box 03 Make Boring Interesting

↬ Chairs Store Concept, Vladislav Gorbunov, https://dribbble.com/shots/5030547-Chairs-Store-App

↬ Animated SVG Avatar, Darin Senneff, https://codepen.io/kingplatano/pen/yvqwrR

↬ Foot Tap Loader, Darin Senneff, https://codepen.io/dsenneff/details/JBvaQd

↬ Interactive Toggle, Chris Gannon, https://gannon.tv/

Authentication UX Email Verification unnecessary “ 60% of customers will consistently copy/ paste their email address when asked to verify it in the eCommerce checkout, especially on mobile. Baymard Institute, baymard.com

↬ Password validation, Andreas Storm, https://dribbble.com/shots/4879135-Password-validation

↬ Fintech onboarding, Piotr Sliwa, https://dribbble.com/shots/4957240-Fintech-Onboarding-Principles

↬ Better password form fields, Paul Lewis, https://aerotwist.com/blog/better-password-form-fields/

↬ Dial login, Nikita Shishkin, https://dribbble.com/shots/3031437-Dial-login

Authentication UX Usability > Security “ If a product is not usable, it’s also not secure. That’s when people start using private email accounts and put passwords on stick-it-notes because they forget them. Jared Spool, UIE.com

Authentication UX Security-Related Behavior 01 — We log in 15-20 times a day, seamless or explicitly. 02 — We tend to have 4.5 emails, used regularly. 03 — We tend to reuse passwords for “simple” accounts. 04 — We are really bad at remembering email/pass combos. 04 — We are really good at bypassing complexity with lifehacks. 05 — Most security breaches target DBs, not individual users. 06 — Strict security has a significant business cost. 07 — Fishing is a much higher threat than insecure passwords.

↬ Password strength indicator, Claudio Scotto, https://dribbble.com/shots/4584825-Password-Strength

↬ Show password, Prekesh, https://dribbble.com/shots/4298963-Show-password

Authentication UX Usability > Security “ Authentication is always a hurdle. As users, we can’t be trusted until our identities have been established, we’ve been authenticated in saying who we are and we are authorized for the transaction we need to perform. Jared Spool, UIE.com

Authentication UX Usability > Security “ We try to make it easy to use for people who should have access, often making it totally unusable for people who don’t have access. We need to think in terms of stages of security and layers of authentication. Jared Spool, UIE.com

Setting Up An Account Users establish their identity. They can also save PayPal credentials or a credit card for future use, but it’s not required. Jared Spool, “Fixing the Failures of Authentication UX”.

Shipping + Payment Details With their first purchase, users have to establish their shipping address and payment methods. 1-click isn’t possible yet. Jared Spool, “Fixing the Failures of Authentication UX”.

Cookies Stored For 15–20 Years Amazon drops cookies to identify the customer, valid for 20 years. Then the “1-click” checkout option is activated by default. Jared Spool, “Fixing the Failures of Authentication UX”.

No Password Needed At All Later, users might be logged out, or a session might have expired, but as long they are identified via cookies, they can buy via 1-click. Jared Spool, “Fixing the Failures of Authentication UX”.

Authentication UX 1-Click-Checkout “ As long as you ship items to the same address that you have already used and authorized on a machine that you’ve already authorized on once, you don’t have to enter your password for the next 20 years. Jared Spool, UIE.com

Authentication UX 1-Click-Checkout “ But the moment you want to buy a gift card or change the address or a payment method, or see/change sensitive personal data, the interface will request your password or credit card. That’s layers of authentication. Jared Spool, UIE.com

Authentication UX 2-Factor Authentication We need 2 separate things to authenticate. Something a user knows (password), and/or something user has (device, key), and/or something user is (biometrics).

Ask Permissions At The Right Time Never ask for permissions on the first page load. Let users engage first and invite them when they are actually ready to commit. Ask permissions only when you know for sure that you’ll receive them.

Authentication UX CAPTCHA Performance “ On average, a user needs around 9.8 seconds to solve a text-based CAPTCHA, and it takes 28.4 seconds to solve the audio version. Notably, 20% give up after a few tries. Stanford University, Elie Bursztein

Authentication UX CAPTCHA Performance “ Bots got so advanced that it’s now nearly impossible to generate images that are easy to solve for humans but unsolvable for bots. AI can solve most diﬃcult distorted texts with 99.8% accuracy while humans with 33%. The Verge, Josh Dzieza

Authentication UX Spam Prevention Strategy 01 — Use Akismet & Co. to block known spam IPs. 02 — Ask a random plain “human” question. 03 — Use a honeypot technique to lure bots into input. 04 — Use a keyboard-accessible slider to verify. 05 — Use time traps (< 1.5s) to disrupt repeated attempts. 06 — Turn off autocomplete for spam prevention input. 07 — Use legit labels (#phone) for a hidden field. 08 — If it doesn’t work, load reCAPTCHA 2 checkbox conditionally. 09 — If it doesn’t work, work around reCAPTCHA 3 on all pages. 10 — Don’t rely on pointer movements/text-based recognition.

L o b c J ↬ SMS Verification API, https://developers.google.com/identity/sms-retriever

“Just-In-Time” Explanations Doubts raise when private information is required without an adequate explanation of why it’s needed. Always consider “just-in-time”-tooltips. Claire Barrett, “What does GDPR mean for UX?”, February 2019. https://uxdesign.cc/what-does-gdpr-mean-for-ux-9b5ecbc51a43

Set Notification Modes Different notifications are perceived differently. People care more about messages from close friends and relatives, selected colleagues during work, bank transactions and critical alerts.

Notification Modes People care less about news updates, announcements, new features, crash reports, web notifications, automated msgs. Don’t rely on generic defaults; set up notification modes.

Inline Editing For Input Fields Users don’t understand why they are brought to the start of the order when editing their data. Inline editing works best, but might be tricky to implement.

Privacy UX F-Secure’s Herod Clause “ …and you agree to assign your first born child to us for the duration of eternity. F-Secure has confirmed that it won’t be enforcing the clause.

Privacy UX AWS Zombie Apocalypse Clause “ …this restriction will not apply in the event of the occurrence (certified by the US Centers for Disease Control or successor body) of a widespread viral infection transmitted via bites or contact with bodily fluids that causes human corpses to reanimate and seek to consume living human flesh, blood, brain or nerve tissue and is likely to result in the fall of organized civilization.

Privacy UX AWS Zombie Apocalypse Clause “ …flesh, blood, brain or nerve tissue and is likely to result in the fall of organized civilization. Terms ban game engine from use for anything “life or safety-critical” except in advent of reanimated human corpses.

Privacy UX Tinder’s Terms (2019) “ …We collect information on your wireless and mobile network connection, like your service provider and signal strength, as well as information on device sensors such as accelerometers, gyroscopes and compasses.

Privacy UX FaceApp’s Terms (2019) “ You grant FaceApp a perpetual, irrevocable, nonexclusive, royalty-free, worldwide, fully-paid, transferable sublicensable license to use, reproduce, modify, adapt, publish, translate, create derivative works from, distribute…

Privacy UX FaceApp’s Terms (2019) “ …publicly perform and display your User Content and any name, username or likeness provided in connection with your User Content in all media formats and channels now known or later developed, without compensation to you.

Privacy UX FaceApp’s Terms (2019) “ Also, a device identifier may deliver information to us or to a third party partner about how you browse and use the Service and may help us or others provide reports or personalized content and advertising.

Privacy UX User Behavior In 2019 Block! Pop-ups and modals. Nope! “Turn off ad-blocker!” Block! Push notifications. Block! Access to camera/photos. Block! Chat window pop-ups. Block! Access to the microphone. Block! Feedback pop-ups. Scroll! Video auto-play. Block! Install app prompts. Fake! Email input. Block! Importing contacts. Fake! Gender, age, phone input. Block! Geolocation permission. Cry ;-( CAPTCHA. Accept! GDPR cookie pop-up. Accept! “I have nothing to hide!”

↬ Kashmir Hill (Twitter), https://twitter.com/kashhill/status/1188870254660861953

Privacy UX Phone Triggers (2019) “ …From time to time, snippets of audio do go back to [apps like Facebook’s] servers but there’s no oﬃcial understanding what the triggers for that are. Overall, we counted over 1000 triggers for Facebook alone that get activated periodically.

Sarah Jamie Lewis on Value of Data “ Lost in the debate about privacy are the very real day-to-day battles that we all face. Employees searching for new jobs without telling their boss, a partner considering proposing to their partner, choosing what information to reveal on a dating profile. The list is endless.

Web Performance State Of Privacy 2019 01 — You own copyright, but transfer all rights over. 02 — Services can use data in any way they want. 03 — Services can pass your data to any aﬃliates. 04 — Aﬃliates can use your data in any way they want, too. 05 — Services keep your searches and deleted messages. 06 — Searches & messages are most valuable for targeted ads. 07 — By default, data is collected even if you don’t use an app. 08 — Private messages, photos and videos are rarely private. 09 — Trackers know more about you than your friends or family. 10 — Set up a disposable email and think twice before sharing.

↬ Directive 95/46/EC of the European Parliament, https://eur-lex.europa.eu/legal-content/en/TXT/?uri=CELEX%3A31995L0046

GDPR Guidelines — Dr. Ann Cavoukian (1990) GDPR Protects Personal Data “ Data refers to genetic data, biometric data, location data and online identifiers — IP addresses, mobile device IDs, browser fingerprints, RFID tags, MAC addresses, cookies, telemetry, user account IDs, any other data which identifies a natural person.

GDPR Guidelines — Dr. Ann Cavoukian (1990) Privacy By Design “ Privacy efforts have to be proactive, not reactive. Treat privacy as a default setting, embed it into design early on, and keep it visible and transparent. That also means storing data securely.

GDPR Guidelines — via Dr. Ann Cavoukian (1990) Privacy By Design 01 — Privacy and security are default features. 02 — Coding standards must be preventive. 03 — Avoid unsafe modules, in APIs and 3rd-parties. 04 — No consent required for core functionality. 05 — No unnecessary data may be collected by default. 06 — Unnecessary data may be collected with user’s consent. 07 — Customers can revoke or edit consent any time. 08 — Customers can download and delete their data. 09 — Customers have the right to be forgotten, irrevocably. 10 — Common-sense safeguards for data protection/privacy.

↬ Data Privacy, https://dataprivacy.foxrothschild.com/2019/10/articles/european-union/gdpr/german-privacy-regulators-flooded

↬ Active consent and the case of Planet49 | CJEU | GDPR & ePR, https://www.cookiebot.com/en/active-consent-and-the-case-of-planet49/

↬ EUR-LEX, https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX%3A52017PC0010

↬ ePrivacy Regulation (EU), https://en.wikipedia.org/wiki/EPrivacy_Regulation_(European_Union)

↬ Finland eyes ePrivacy agreement, https://iapp.org/news/a/finland-eyes-eprivacy-agreement-before-years-end/

Cookie Consent Prompts Summary 01 — Many users feel that rejection is not really an option. 02 — Usually, cookie consents are accepted or dismissed. 03 — Buttons are more obvious than “dismissing” a notice. 04 — Allow users to adjust privacy settings (later, too). 05 — Group cookies into categories and provide presets. 06 — Explain what’s necessary for the site to function. 07 — Don’t block out the entire page with a cookie consent. 08 — Allow customers to allow or reject all quickly. 09 — The position of the cookie notice doesn’t matter.

Privacy Patterns Healthy Business Metrics Mix Increase! Conversion rate. Measure! Sales and marketing costs. Reduce! Time to repeat purchase. Reduce! Customer support inquiries. Improve! Customer happiness. Reduce! Confusing encounters per visit. Reduce! Time to first share. Reduce! Negative encounters per visit. Reduce! Time to first purchase. Reduce! Total cost and ratio of returns. Reduce! Time to first upgrade. Reduce! Ratio of negative reviews. Improve! Custom perf metrics. Reduce! “Reporting as spam” signal. Increase! Life-time value. Increase! “Turn-around” score.

↬ Justifying perf improvement using Google Analytics, Sia Kamalegos

Web Performance Privacy 01 — The dimensions of tracking are unimaginable. 02 — Legislation is stepping in to bring it into order. 03 — Extensions (e.g. ad blockers) impact memory, CPU. 04 — Ask only what you need to know, and not more. 05 — Always provide a way out: no binary input. 06 — “Just-in-time” explanations matter. 07 — Ask for permissions only if you are likely to get them. 08 — Measure hidden costs and a holistic mix of metrics. 09 — The web needs a clean-up; we need to re-establish trust.

Breaking Out Of The Box Summary 01 — Embedding a story can boost engagement a lot. 02 — We can make users think a little to capture attention. 03 — Usability + accessibility first, add friction later. 04 — Pick a boring element, make it interesting. 05 — Seek pain points — focus on tackling them first. 06 — Your style maters; design needs experimentation. 07 — A/B tests help reach local max; A/Z global maxima. 08 — No design is bad or good; the context decides it.

Vitaly Friedman
@smashingmag

1 / 402

Generic web layouts have become somewhat of a misnomer in conversations circling around web design these days. As creatives, we’re bored and slightly annoyed by how predictable and uninspired most web experiences have become. How do we break out of predictable and boring designs without breaking the usability and functionality of our experiences? In this talk, Vitaly Friedman will shed some light into a strategy of how to bring personality back to web design, and how we can make our experiences more humane while also having a higher ROI. Beware: you might not be able to unlearn what you’ll learn in this session. Bonus: you’ll see some slightly dirty examples of things being done out there, so bring along some pragmatism to this talk.

Bringing Personality Back To The Web

Link for this presentation:

HTML code for embedding:

Share on social media: