Bringing Personality Back To The Web

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

Slide 1

Slide 1

Bringing Personality Back To The Web webclerks @ Vienna, Austria Vitaly Friedman, November 25, 2019

Slide 2

Slide 2

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

Slide 3

Slide 3

Bringing Personality Back To The Web webclerks @ Vienna, Austria Vitaly Friedman, November 25, 2019

Slide 4

Slide 4

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

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

Slide 8

Slide 8

Breaking Out Of The Box 01 Personality

Slide 9

Slide 9

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

Slide 10

Slide 10

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

Slide 11

Slide 11

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

Slide 12

Slide 12

Slide 13

Slide 13

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

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

Slide 17

Slide 17

Slide 18

Slide 18

“ 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

Slide 19

Slide 19

Slide 20

Slide 20

Slide 21

Slide 21

“ 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

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

Slide 29

Slide 29

Slide 30

Slide 30

Breaking Out Of The Box 02 Friction

Slide 31

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

Slide 34

Slide 34

Slide 35

Slide 35

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

Slide 36

Slide 36

Slide 37

Slide 37

Slide 38

Slide 38

Slide 39

Slide 39

Slide 40

Slide 40

Slide 41

Slide 41

Slide 42

Slide 42

Slide 43

Slide 43

Slide 44

Slide 44

Slide 45

Slide 45

Slide 46

Slide 46

Slide 47

Slide 47

Slide 48

Slide 48

Slide 49

Slide 49

Slide 50

Slide 50

Slide 51

Slide 51

Slide 52

Slide 52

Slide 53

Slide 53

Slide 54

Slide 54

Slide 55

Slide 55

Slide 56

Slide 56

Slide 57

Slide 57

Slide 58

Slide 58

Slide 59

Slide 59

Slide 60

Slide 60

Slide 61

Slide 61

Slide 62

Slide 62

Slide 63

Slide 63

Breaking Out Of The Box 03 Make Boring Interesting

Slide 64

Slide 64

Slide 65

Slide 65

Slide 66

Slide 66

Slide 67

Slide 67

Slide 68

Slide 68

Slide 69

Slide 69

Slide 70

Slide 70

Slide 71

Slide 71

Slide 72

Slide 72

Slide 73

Slide 73

Slide 74

Slide 74

Slide 75

Slide 75

Slide 76

Slide 76

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

Slide 77

Slide 77

Slide 78

Slide 78

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

Slide 79

Slide 79

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

Slide 80

Slide 80

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

Slide 81

Slide 81

Breaking Out Of The Box 04 Signature

Slide 82

Slide 82

Slide 83

Slide 83

Slide 84

Slide 84

Slide 85

Slide 85

Slide 86

Slide 86

Slide 87

Slide 87

Slide 88

Slide 88

Slide 89

Slide 89

Slide 90

Slide 90

Slide 91

Slide 91

Slide 92

Slide 92

Slide 93

Slide 93

Slide 94

Slide 94

Slide 95

Slide 95

Slide 96

Slide 96

Slide 97

Slide 97

Slide 98

Slide 98

Slide 99

Slide 99

Slide 100

Slide 100

Slide 101

Slide 101

Slide 102

Slide 102

Slide 103

Slide 103

Slide 104

Slide 104

Slide 105

Slide 105

Slide 106

Slide 106

Slide 107

Slide 107

Slide 108

Slide 108

Slide 109

Slide 109

Slide 110

Slide 110

Slide 111

Slide 111

Slide 112

Slide 112

Slide 113

Slide 113

Slide 114

Slide 114

Slide 115

Slide 115

Slide 116

Slide 116

Slide 117

Slide 117

Breaking Out Of The Box 05 Focus

Slide 118

Slide 118

Slide 119

Slide 119

Slide 120

Slide 120

Histogram to display details

Slide 121

Slide 121

Slide 122

Slide 122

Slide 123

Slide 123

Slide 124

Slide 124

Slide 125

Slide 125

Slide 126

Slide 126

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

Slide 127

Slide 127

Slide 128

Slide 128

Slide 129

Slide 129

Slide 130

Slide 130

Slide 131

Slide 131

Slide 132

Slide 132

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

Slide 133

Slide 133

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

Slide 134

Slide 134

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

Slide 135

Slide 135

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

Slide 136

Slide 136

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

Slide 137

Slide 137

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

Slide 138

Slide 138

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

Slide 139

Slide 139

Slide 140

Slide 140

Slide 141

Slide 141

Slide 142

Slide 142

Slide 143

Slide 143

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.

Slide 144

Slide 144

Slide 145

Slide 145

Slide 146

Slide 146

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

Slide 147

Slide 147

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

Slide 148

Slide 148

Slide 149

Slide 149

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

Slide 150

Slide 150

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

Slide 151

Slide 151

Slide 152

Slide 152

Slide 153

Slide 153

Slide 154

Slide 154

Slide 155

Slide 155

U T c f J

Slide 156

Slide 156

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”.

Slide 157

Slide 157

U s m 1 J

Slide 158

Slide 158

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”.

Slide 159

Slide 159

A t T o J

Slide 160

Slide 160

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”.

Slide 161

Slide 161

Slide 162

Slide 162

L o b c J

Slide 163

Slide 163

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”.

Slide 164

Slide 164

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

Slide 165

Slide 165

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

Slide 166

Slide 166

Slide 167

Slide 167

Slide 168

Slide 168

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).

Slide 169

Slide 169

Slide 170

Slide 170

Slide 171

Slide 171

Slide 172

Slide 172

Slide 173

Slide 173

Slide 174

Slide 174

Slide 175

Slide 175

Slide 176

Slide 176

N fi fi a p f

Slide 177

Slide 177

Slide 178

Slide 178

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.

Slide 179

Slide 179

Slide 180

Slide 180

Slide 181

Slide 181

Slide 182

Slide 182

Slide 183

Slide 183

Slide 184

Slide 184

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

Slide 185

Slide 185

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 difficult distorted texts with 99.8% accuracy while humans with 33%. The Verge, Josh Dzieza

Slide 186

Slide 186

Slide 187

Slide 187

Slide 188

Slide 188

Slide 189

Slide 189

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.

Slide 190

Slide 190

Slide 191

Slide 191

Slide 192

Slide 192

Slide 193

Slide 193

Slide 194

Slide 194

Slide 195

Slide 195

U T c f J

Slide 196

Slide 196

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”.

Slide 197

Slide 197

U s m 1 J

Slide 198

Slide 198

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”.

Slide 199

Slide 199

A t T o J

Slide 200

Slide 200

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”.

Slide 201

Slide 201

Slide 202

Slide 202

L o b c J

Slide 203

Slide 203

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”.

Slide 204

Slide 204

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

Slide 205

Slide 205

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

Slide 206

Slide 206

L o b c J

Slide 207

Slide 207

L o b c J

Slide 208

Slide 208

L o b c J

Slide 209

Slide 209

L o b c J

Slide 210

Slide 210

J

Slide 211

Slide 211

Slide 212

Slide 212

Slide 213

Slide 213

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).

Slide 214

Slide 214

Slide 215

Slide 215

Slide 216

Slide 216

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

Slide 217

Slide 217

D i a i “ t

Slide 218

Slide 218

“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

Slide 219

Slide 219

D p m f c t

Slide 220

Slide 220

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.

Slide 221

Slide 221

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.

Slide 222

Slide 222

Slide 223

Slide 223

Slide 224

Slide 224

Slide 225

Slide 225

Slide 226

Slide 226

Slide 227

Slide 227

Slide 228

Slide 228

Slide 229

Slide 229

Slide 230

Slide 230

Slide 231

Slide 231

Slide 232

Slide 232

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.

Slide 233

Slide 233

Breaking Out Of The Box 06 Respect

Slide 234

Slide 234

Slide 235

Slide 235

Slide 236

Slide 236

Slide 237

Slide 237

Slide 238

Slide 238

Slide 239

Slide 239

Slide 240

Slide 240

Slide 241

Slide 241

Slide 242

Slide 242

Slide 243

Slide 243

Slide 244

Slide 244

Slide 245

Slide 245

Slide 246

Slide 246

Slide 247

Slide 247

Slide 248

Slide 248

Slide 249

Slide 249

Slide 250

Slide 250

Slide 251

Slide 251

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.

Slide 252

Slide 252

Slide 253

Slide 253

Slide 254

Slide 254

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.

Slide 255

Slide 255

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.

Slide 256

Slide 256

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.

Slide 257

Slide 257

Slide 258

Slide 258

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…

Slide 259

Slide 259

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.

Slide 260

Slide 260

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.

Slide 261

Slide 261

Slide 262

Slide 262

Slide 263

Slide 263

Slide 264

Slide 264

Slide 265

Slide 265

Slide 266

Slide 266

Slide 267

Slide 267

Slide 268

Slide 268

Slide 269

Slide 269

Slide 270

Slide 270

Slide 271

Slide 271

Slide 272

Slide 272

Slide 273

Slide 273

Slide 274

Slide 274

Slide 275

Slide 275

Slide 276

Slide 276

Slide 277

Slide 277

Slide 278

Slide 278

Slide 279

Slide 279

Slide 280

Slide 280

Slide 281

Slide 281

Slide 282

Slide 282

Slide 283

Slide 283

Slide 284

Slide 284

Slide 285

Slide 285

Slide 286

Slide 286

Slide 287

Slide 287

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!”

Slide 288

Slide 288

Slide 289

Slide 289

Slide 290

Slide 290

Slide 291

Slide 291

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

Slide 292

Slide 292

Slide 293

Slide 293

Slide 294

Slide 294

Slide 295

Slide 295

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 official understanding what the triggers for that are. Overall, we counted over 1000 triggers for Facebook alone that get activated periodically.

Slide 296

Slide 296

Subconscious influence as a service

Slide 297

Slide 297

Slide 298

Slide 298

Slide 299

Slide 299

Slide 300

Slide 300

Slide 301

Slide 301

Slide 302

Slide 302

Slide 303

Slide 303

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!”

Slide 304

Slide 304

Slide 305

Slide 305

Slide 306

Slide 306

Slide 307

Slide 307

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.

Slide 308

Slide 308

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 affiliates. 04 — Affiliates 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.

Slide 309

Slide 309

Slide 310

Slide 310

Slide 311

Slide 311

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

Slide 312

Slide 312

↬ GDPR-Info.eu, https://gdpr-info.eu/

Slide 313

Slide 313

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.

Slide 314

Slide 314

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.

Slide 315

Slide 315

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.

Slide 316

Slide 316

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.

Slide 317

Slide 317

Slide 318

Slide 318

Slide 319

Slide 319

Slide 320

Slide 320

Slide 321

Slide 321

Slide 322

Slide 322

Slide 323

Slide 323

Slide 324

Slide 324

Slide 325

Slide 325

Slide 326

Slide 326

Slide 327

Slide 327

Slide 328

Slide 328

Slide 329

Slide 329

Slide 330

Slide 330

Slide 331

Slide 331

Slide 332

Slide 332

Slide 333

Slide 333

Slide 334

Slide 334

Slide 335

Slide 335

Slide 336

Slide 336

Slide 337

Slide 337

Slide 338

Slide 338

Slide 339

Slide 339

Slide 340

Slide 340

Slide 341

Slide 341

Slide 342

Slide 342

Slide 343

Slide 343

Slide 344

Slide 344

Slide 345

Slide 345

Slide 346

Slide 346

Slide 347

Slide 347

Slide 348

Slide 348

Slide 349

Slide 349

Slide 350

Slide 350

Slide 351

Slide 351

Slide 352

Slide 352

Slide 353

Slide 353

Slide 354

Slide 354

Slide 355

Slide 355

Slide 356

Slide 356

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

Slide 357

Slide 357

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

Slide 358

Slide 358

Slide 359

Slide 359

Slide 360

Slide 360

Slide 361

Slide 361

Slide 362

Slide 362

Slide 363

Slide 363

Slide 364

Slide 364

Slide 365

Slide 365

Slide 366

Slide 366

Slide 367

Slide 367

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

Slide 368

Slide 368

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

Slide 369

Slide 369

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

Slide 370

Slide 370

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

Slide 371

Slide 371

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

Slide 372

Slide 372

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

Slide 373

Slide 373

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

Slide 374

Slide 374

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

Slide 375

Slide 375

Slide 376

Slide 376

Slide 377

Slide 377

Slide 378

Slide 378

Slide 379

Slide 379

Slide 380

Slide 380

Slide 381

Slide 381

Slide 382

Slide 382

Slide 383

Slide 383

Slide 384

Slide 384

Slide 385

Slide 385

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.

Slide 386

Slide 386

Slide 387

Slide 387

Slide 388

Slide 388

Slide 389

Slide 389

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.

Slide 390

Slide 390

↬ Justifying perf improvement using Google Analytics, Sia Kamalegos

Slide 391

Slide 391

↬ Justifying perf improvement using Google Analytics, Sia Kamalegos

Slide 392

Slide 392

↬ Justifying perf improvement using Google Analytics, Sia Kamalegos

Slide 393

Slide 393

↬ Justifying perf improvement using Google Analytics, Sia Kamalegos

Slide 394

Slide 394

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.

Slide 395

Slide 395

Breaking Out Of The Box Wrapping Up

Slide 396

Slide 396

Breaking Out Of The Box Wrapping Up

Slide 397

Slide 397

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.

Slide 398

Slide 398

Slide 399

Slide 399

Slide 400

Slide 400

Slide 401

Slide 401

Slide 402

Slide 402

Meow! @smashingmag