59
DARK PATTERNS Clément Hardoüin 17 octobre 2014 La contre-attaque du pire

Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

Embed Size (px)

DESCRIPTION

Dans une galaxie lointaine, d’obscures forces sont à l’œuvre pour créer des stratégies perverses piégeant les internautes. Nous explorerons en détail et à travers de nombreux exemples ces techniques qui ont pris le nom de « Dark patterns ». Que ce soit dans l’e-commerce, dans les sites web, dans la publicité, une multitude de méthodes -toutes moins recommandables les unes que les autres- sont élaborées afin d’induire l’utilisateur final en erreur afin de maximiser les profits ou de biaiser les statistiques. Quelles sont les motivations qui poussent les entreprises à duper leurs utilisateurs ? Quelles sont les conséquences que cela induit ? Que peut faire l’utilisateur pour éviter les pièges et se rebeller contre ces pratiques ?

Citation preview

Page 1: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

DARK PATTERNS

Clément Hardoüin

17 octobre 2014

La contre-attaque du pire

Page 2: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

Dans le web depuis + de 10 ans,

à différents postes :

chef de projet,

responsable de production,

et maintenant lead dev front* chez

Suivez-moi sur Twitter @fastclemmy

Page 3: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)
Page 4: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

Dark pattern :n.m. procédé visant à

tromper l’utilisateur ou

le client afin de

maximiser son profit.

Synonymes : ‘duperie’, ‘escroquerie’, ‘arnaque’

Page 5: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

‘ Don’t be evil ’

Page 6: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

#lol

Page 7: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

Des dark patterns partout

traduction du schéma de darkpatterns.org

Page 8: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

#lol

Page 9: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

e-commercePour rentabiliser son site

Exemples

Page 10: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

rueducommerce.com

Bonus #lol

Page 11: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

rueducommerce.com

imposeBonus #lol

Page 12: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

ryanair.com

« Choisissez votre pays de résidence » qui entraîne des frais d’assurance

supplémentaires.

Bonus #lol

Page 13: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

jetstar.com

Des options payantes

sélectionnées par défaut :

via @designspoke

Bonus #lol

Page 14: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

hotwire.com

La réduction indiquée n’est pas

celle de l’hôtel mais un différentiel

moyen par rapport à des « hôtels

environnants » de même catégorie

sur des sites concurrents (non

publiés).

via @laurieskelly

Page 15: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

via @goetter

voyages-sncf.com

Le prix le plus bas n’est pas celui que vous croyez…

Page 16: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

via @arstechnicaashleymadison.com

Le retour de la ligne

de flottaison…

Page 17: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

publicitéPour faire cliquer sur sa

Exemples

Page 18: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

les « habillages »

Tout l’espace

blanc à gauche et

à droite de la zone

de contenu est

cliquable

Page 19: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

l’auto-rechargement

Même site, il se

recharge

automatiquement,

permettant

étonnamment

d’augmenter le

nombre de pages

vues ?

Bonus #lol

Page 20: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

les boutons de téléchargement

Grand jeu :

devinez quel est le

bouton

« Téléchargement »

qui correspond à

l’action que vous

en attendez.

Page 21: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

les boutons « fermer »

Malin !

via @angelcreative

Page 22: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

les boutons « fermer »

A chaque démarrage de

l’application Programme TV, le

bouton fermer apparaît

aléatoirement dans un des coins

de l’écran et non toujours en

haut à droite…

Page 23: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

le « panier garni » Bonus #lol

Page 24: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

d’informationPour rentabiliser son site

Exemples

Page 25: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

lemonde.fr

En fait,

je voulais juste

lire un article.

Page 26: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

slate.com

La faute à qui ?

Page 27: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

bostonglobe.com

Note pour plus

tard, utiliser une

fenêtre de

navigation privée.

Page 28: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

applicationPour rentabiliser son

Exemples

Page 29: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

Dungeon Keeper iOS/Android

Le ‘free-to-play’ jusqu’à la nausée

Page 30: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

Dungeon Keeper iOS/Android

Comment obtenir des évaluations 5* en 2 écrans.

Page 31: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

iPod

Back, back, back, STORE !

via @YS

Page 32: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

Bornes métro new-yorkais (MTA)

Charger 9$ et avoir

0,45$ « bonus »

=

3 x 2,5$

+

1,95$ restants sur la

carte, soit pas assez

pour le dernier trajet…

< Optimisation du solde

via @IQuantNY

Page 33: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

donnéePour collecter de la

Exemples

Page 34: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

Royal Mail

via @jakecausby

Bonus #lol

Optin et optout sur la

même page

Page 35: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

matmut.fr

La Matmut, elle s’assure

que tu sois bien opt-in…

via @geoffrey_crofte

Page 36: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

linkedin.com

Étape 2, un ascenseur caché personnalisé !

via @mark_nugent

Bonus #lol >

Étape 1 : un ascenseur personnalisé

Page 37: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

windows 8

Page 38: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

apple.com

via @simevidas

L’opt-in, mais version premium

Page 39: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

Apple iOS 5-

Nom de code : « La faille de

sécurité de San Andreas »

Page 40: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

#lol

Page 41: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

marketingLe dévoiement du

Analyse

Page 42: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

du permission marketing au dark pattern

Théorisé par Seth Godin

(à l’époque chez Yahoo!).

« Un dark pattern,

c’est obtenir la

permission de

l’utilisateur, mais

avec un pistolet

sur la tempe. »

Page 43: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

mesureLa dictature de la

Analyse

Page 44: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

NHS (agence de santé anglaise)

(ou comment augmenter artificiellement le taux de « prise en charge »)

La « Hello Nurse »,

chargée simplement

de dire bonjour.

Page 45: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

régulationUn problème de

Analyse

Page 46: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

des règles variées

Difficiles à gérer à l’échelon

international

Propices à l’utilisation des plus

permissives.

Page 47: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

pas vu, pas pris !

Page 48: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

#lol

Page 49: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

comment s’en prémunir ?

Vigilance

Évangélisation

Contre-attaque

Information

Mentions légales, offres « recommandées », options sélectionnées

Services clients, réseaux sociaux

Page 50: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

#lol

Page 51: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

HopeA new

Perspective

Page 52: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

Éducation, habitudes

Page 53: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

Name & shame

sdq

Page 54: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

« Toujours en mouvement est l'avenir. »

Page 55: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

le « fangating » sur Facebook

Clap de fin le

5 novembre !

Page 56: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

Des évolutions dans la législation

Directive européenne sur le commerce électronique transposée en Francedans la loi Hamon.

Page 57: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

A nous !

Méchants du côté obscur

Nous

Page 58: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

A nous !

Méchants du côté obscur

Nous

#merci

…des questions ?

Page 59: Dark Patterns : la contre-attaque du pire (ParisWeb 2014)

https://www.flickr.com/photos/hobby_blog/2985797658https://www.flickr.com/photos/kalexanderson/6699989495https://www.flickr.com/photos/jdhancock/6151250051https://www.flickr.com/photos/jdhancock/6206667510https://www.flickr.com/photos/blackzack00/10726150653https://www.flickr.com/photos/kalexanderson/7171589318https://www.flickr.com/photos/st3f4n/3752994778https://www.flickr.com/photos/kalexanderson/6874356751https://www.flickr.com/photos/jdhancock/3803857187https://www.flickr.com/photos/kalexanderson/6709759539https://www.flickr.com/photos/kalexanderson/7130927313https://www.flickr.com/photos/st3f4n/4286044406https://www.flickr.com/photos/chrisandholley/14139468943https://www.flickr.com/photos/st3f4n/3681491833https://www.flickr.com/photos/estherase/148699240https://www.flickr.com/photos/arthur-caranta/2634189202

Remerciements

Harry Brignull

Christelle Mozzati

Auteurs des photos en

Creative Commons :