Dark Patterns Et Autres Design NoNos Pour Mobile

Le Web mobile est en plein essor en ce moment, ce qui signifie que les concepteurs Web passent beaucoup de temps à tenter de convaincre cette catégorie particulière d'utilisateurs. Une façon de ne pas faire ça? Motifs sombres. Bien que votre entreprise puisse engranger des gains superficiels et à court terme, rien de bon n'en résultera à long terme.

Quand il s’agit de gagner de l’argent, certaines entreprises feront tout ce qui est en leur pouvoir pour amener les gens dans leur établissement. Mais ce genre de tactique d’entreprise fonctionne-t-il même? Vous pourriez être en mesure d’attirer une bonne quantité de trafic (et même de réaliser des ventes grâce à cette stratégie trompeuse), mais nous a permis d’examiner la situation dans son ensemble . Si les niveaux de trafic ne sont pas soutenus et que vous gérez plus de remboursements que de ventes, l’approche a été un échec total. Je soupçonne que cela se produira avec beaucoup de personnes qui tentent d’utiliser la supercherie pour stimuler les affaires, dans le monde réel comme dans l’espace numérique.

Nous allons parler de ce qu'est un motif sombre, regarder des exemples bien connus et ensuite expliquer pourquoi ils sont toujours une mauvaise idée – même si votre client essaie de vous convaincre du contraire.

Quels sont les motifs sombres?

La phrase a été inventée par Harry Brignull un spécialiste de la recherche sur l'UX. Selon Brignull:

«Les motifs sombres sont des astuces utilisées dans les sites Web et les applications qui vous permettent d’acheter ou de vous inscrire à des choses que vous ne vouliez pas.»

pire Dark Patterns :

Comme vous pouvez le voir ici, Brignull a défini l'un des types de motifs sombres utilisés sur le Web. Cet exemple spécifique provient de l’utilisation par Microsoft d’une fenêtre contextuelle qui ne se comporte pas comme il se doit. Je vais expliquer pourquoi ce problème était si grave pour les utilisateurs de Microsoft.

Comment les motifs sombres sont-ils utilisés dans la conception Web?

Au total, Brignull classe les motifs sombres en 12 catégories. Je vais inclure chacun d’entre eux – ainsi que certains des miens – dans le guide suivant:

1. Bait and Switch

Cela se produit lorsqu'un utilisateur suppose qu'une réaction spécifique aura lieu lors de l'engagement avec un site Web. Généralement, ceci est basé sur les attentes définies par le reste du Web. Dans le cas d'un appât et d'une commutation, une réponse indésirable est le résultat.

Microsoft a utilisé cette tactique il y a quelques années alors qu'elle essayait d'inciter les utilisateurs à effectuer la mise à jour recommandée. Windows 10. (C'est l'image ci-dessus du site Web de Brignull.) Les utilisateurs ont affirmé que, lorsqu'ils sortent de la fenêtre contextuelle, leurs systèmes sont automatiquement mis à jour sans consentement. Le "X" aurait dû indiquer que l’utilisateur ne voulait pas continuer, mais il a fait le contraire.

Maintenant, voici le truc. Le logiciel doit être mis à jour pour que les systèmes continuent à fonctionner rapidement et en toute sécurité. Toutefois, si vous incitez les utilisateurs à entreprendre une mise à jour dont ils ne veulent pas ou qu’ils ne sont pas préparés, vous risquez d’être lourd de conséquences en cas de problème. Par exemple, cette femme a gagné 10 000 $ en raison des dommages causés par la mise à jour de Windows.

Ces types de motifs sombres ne conduisent pas toujours à des conséquences destructrices. Parfois, ils perturbent vraiment l’expérience utilisateur.

Par exemple, je consultais le site join.me alors que je recherchais des solutions de partage d’écran avec mes clients. En parcourant les options de tarification, le widget de contact situé en bas de l'écran s'ouvre dans cette fenêtre contextuelle:

Je n’avais pas besoin d’aide à ce moment-là, alors j’ai cliqué sur le «X» dans le coin droit de la fenêtre contextuelle. Cependant, c'est ce que j'ai vu:

J'ai été surpris de voir cette page car je n'avais absolument pas demandé de «démarrer une conversation». Ensuite, une fois que j'ai réalisé ce que cette fenêtre contextuelle tentait de faire, j'ai immédiatement voulu sortir. Mais la façon de faire est dans le coin supérieur gauche, ce qui m'a fait perdre un peu de temps car le «X» du pop-up original se trouvait en haut à droite.

Toute l'expérience du live le chat n'a probablement pas consommé plus de cinq secondes de mon temps, mais c'était quand même discutable. J'ai essayé de prendre une mesure qui disait: «Non merci», mais j'ai été forcé de m'engager . C'est comme être dans un restaurant et demander au serveur de vous apporter un menu de desserts ou un plateau, même si vous leur avez explicitement dit que cela ne vous intéressait pas.

Si vous voulez ennuyer vos visiteurs et leur prouver utilisez ce motif sombre.

Lecture recommandée : Les pop-ups mobiles meurent-ils? Sont-ils même à sauver?

2. Confirmshaming

La confirmation était très populaire dans les fenêtres contextuelles il y a environ un an ou deux. Les utilisateurs verraient la fenêtre pop-up et disposeraient de deux options:

• L'option positive les encouragerait à évoluer vers une conversion;
• L'option négative leur ferait honte d'avoir fait un mauvais choix en ne le faisant pas.

vous trouverez encore un certain nombre de sites Web, bien qu’il y ait beaucoup moins de sites Web de nos jours avec de nombreux concepteurs qui évitent les pop-ups sur mobile .

Social Media Examiner utilise toujours cette fenêtre pop-up double-CTA sur son site mobile:

Personnellement, je ne pense pas que la honte dans cette fenêtre pop-up soit aussi mauvaise que celle que j’ai vue. Vous connaissez ceux dont je parle. Le CTA positif dit quelque chose comme: «Oui, je veux doubler mon chiffre d’affaires cette année!» L’autre dit quelque chose comme «Non, je veux que mon entreprise tombe en panne!»

utiliser les craintes des consommateurs pour leur donner un sens. Mais est-ce vraiment ce qui se passe ici? Bien que je sois sûr que cette stratégie fonctionne sur certains utilisateurs, je ne sais pas si la plupart des gens tomberaient dans le piège.

Je suggérerais ici de rester à l’abri des visiteurs . Si vous voulez utiliser la méthode double-CTA, optez pour quelque chose comme boutons fantômes . Cette stratégie vise à vous donner le même résultat: inciter les visiteurs à cliquer et / ou convertir. Cependant, il le fait avec une persuasion subtile. En d'autres termes:

• Ce bouton grand et coloré mérite votre attention;
• Ce bouton dépourvu de vie est là (si vous le voulez), mais nous sommes heureux si vous voulez l'ignorer complètement.

3. Annonces déguisées

En règle générale, il est évident qu’une annonce – même une annonce native placée à un contenu intermédiaire – est disponible à des fins promotionnelles. Cependant, lorsqu'une annonce ne peut pas être clairement distinguée en tant que telle, cela peut poser problème aux visiteurs.

Si vous suivez ce qui se passe dans le monde du marketing d'influence sur les médias sociaux, vous reconnaîtrez peut-être ce problème avec Instagram. Fondamentalement, voici ce qui se passait (et est toujours en train de se produire):

• Les utilisateurs qui font la promotion de produits ou de contenu sous forme de publicité ou de parrainage sont censés déclarer la promotion comme telle. C'est parce qu'ils sont payés pour leurs efforts et ce n'est pas une véritable recommandation de leur part.
• Lorsque les influenceurs ne parviennent pas à annoncer que ces avenants sont des placements payés de marques, les utilisateurs peuvent être trompés en achetant parce qu'ils pensaient que c'était une recommandation valable. Et c'est un problème majeur.

Selon le FTC :

“S'il existe un“ lien matériel ”entre un endosseur et un annonceur – en d'autres termes, un lien susceptible d'affecter le poids ou la crédibilité que les consommateurs approuvent – cette connexion doit être clairement et clairement divulguée, à moins que cela ne ressorte déjà du contexte de la communication. »

Il devrait en être de même pour les publicités sur site, mais il y a eu pas de véritable régulation de ceci jusqu'à présent. Cela dit, nous reconnaissons certaines publicités déguisées pour ce qu'elles sont: motifs sombres .

Un exemple que je veux partager vient de Voyages et loisirs :

En lisant un article sur les meilleurs endroits où expérimenter les couleurs de l’automne aux États-Unis, je suis devenu fasciné par les images incluses.

Plus bas, j'ai rencontré cette image – ou ce que pensait que était une image.

Une fois la page complètement chargée (ce qui a pris plus de quelques secondes), j'ai réalisé que c'était une vidéo. À ce stade, quelques pensées me traversèrent l'esprit:

• Est-ce que j'ai défilé trop loin? Pourquoi les vacances d'été aux Bermudes figurent-elles sur une liste de feuillages d'automne?

J'ai décidé de continuer à faire défiler le texte au format identique pour que les Bermudes puissent voir ce qui se passait. est venu ensuite, puis j'ai noté une note au-dessous de lire "De l'Office de tourisme des Bermudes":

Une fois que je suis passé l'annonce vidéo native qui ressemblait exactement au reste de la page, j'ai pu lire le reste de l'article. Mais cela laissait un mauvais goût dans ma bouche.

J'avais entrepris de voir des images sympas et de prendre quelques conseils pour les voyages à l’automne, mais j’ai été trompé. Bien que le motif sombre ne m'ait eu que temporairement, il a quand même perturbé l'expérience et m'a fait me demander quelles autres tromperies abondaient . Que se passe-t-il si toutes les idées de cet article ou de ce site proviennent uniquement de sponsors et non de voyages valant la peine d'être pris?

Si vous laissez vos visiteurs se demander s'ils peuvent faire confiance à votre site, mauvais chemin, mon ami.

4. Continuité forcée

Ce type de configuration sombre se produit lorsque quelqu'un s'inscrit pour un essai «gratuit», mais doit partager des informations de carte de crédit pendant le processus d'admission. Puis, à la fin de la période d'essai, leur carte de crédit est débitée sans avertissement.

Pour les utilisateurs qui ne font pas attention à ce genre de choses et supposent que les marques n'en profiteront pas, cette forme de ne pas aller bien. En plus de perdre la confiance et les affaires de ces utilisateurs, votre entreprise pourrait être pénalisée si une société émettrice de cartes de crédit ou un bureau local s’impliquait.

En ce qui concerne le design, il faut encore en savoir plus sur le concepteur. C'est parce que vous pouvez utiliser différentes stratégies de conception et mises en page pour indiquer aux clients potentiels les détails révélateurs des paiements automatisés et autres.

Je vais utiliser join.me pour mon prochain exemple

Sur la page de tarification de join.me, vous rencontrerez trois plans, chacun associé à un coût. Ce n'est en fait pas jusqu'à ce que vous trouviez le CTA beaucoup plus petit et non surligné que vous pouvez explorer plus sur ce qui vient avec chaque plan:

Pour les utilisateurs découvrant ce CTA, ils pourront explorer les fonctionnalités de chaque plan dans cette fenêtre contextuelle détaillée:

J'ai été très heureux de découvrir que join.me a un plan gratuit. Cependant, pour y accéder, vous devez vous inscrire au plan PRO. C'est ce qui est inclus dans la version d'évaluation:

Une fois que vous avez envoyé vos informations d’utilisateur et d’achat, vous avez alors accès à une version d’essai gratuite de 14 jours. Si vous choisissez de ne pas utiliser PRO, vous pourrez alors accéder au plan gratuit que join.me ne publie pas facilement.

Cet exemple s'écarte légèrement du point mentionné ci-dessus. Ou du moins j'espère que c'est le cas. Comme je n’ai pas acheté de version de join.me, je ne peux pas vous dire si ce site se recharge automatiquement après l’essai sans avertissement. Cela dit, la manière dont le plan gratuit est mentionné et la manière dont les utilisateurs peuvent l’obtenir me portent à croire qu’il sera difficile d’annuler le plan PRO avant la fin de l’essai.

5. Friend Spam

La connexion à des sites Web et à des applications avec des comptes de médias sociaux ou Google est une pratique courante de nos jours. Néanmoins, les entreprises qui utilisent votre liste d’amis pour spammer vos contacts ne le sont pas (espérons-le).

Cela dit, une grande marque a été déclarée coupable et doit maintenant payer 13 millions de dollars comme un résultat : LinkedIn.

Il semble que LinkedIn a utilisé les listes de contacts de ses utilisateurs à des fins de gain personnel. Fondamentalement, il a offert une fonctionnalité «ajouter une connexion» sur son site Web au début des années 2010. Cela a permis aux utilisateurs de se connecter rapidement avec des personnes qu'ils connaissaient ou, plutôt, de leur envoyer un message et de leur demander de se connecter sur LinkedIn.

Alors que le service semble assez juste (après tout,

Ce qui aurait dû être un simple e-mail qui disait: «Hé, untel veut se connecter avec vous sur LinkedIn» a été transformé en un certain nombre de des e-mails à ces contacts. Le harcèlement injustifié n’était pas nécessairement le problème. Le plus gros problème était que LinkedIn avait conçu ces e-mails de manière à donner l'impression de provenir directement de la connaissance connue.

Cela vous montre que votre plateforme n'a pas beaucoup de succès. est. Si vous abusez de la confiance de vos utilisateurs pour votre propre bénéfice, il y aura une réaction majeure . Une poursuite de 13 millions de dollars est certainement une conséquence grave, mais même la simple perte de clients devrait suffire à vous dissuader de suivre ce modèle sombre.

6. Coûts Cachés

Celui-ci est explicite. Vous faites des achats en ligne, vous êtes satisfait des articles que vous avez ajoutés à votre panier et vous décidez finalement de passer à la caisse lorsque vous découvrez des coûts que vous ignoriez.

Même si vous ne croyez peut-être pas Peu importe que vous, en tant que designer, ayez un coup de main, je vous invite à regarder cet exemple sombre de Southwest Airlines :

Alors que je cherchais un vol aller-retour entre Albany, New York et Atlanta, en Géorgie, on m'a présenté différentes options de tarification. Le moment de la journée, le nombre de escales et ainsi de suite ont eu une incidence sur le montant que je devrais payer pour chaque étape de mon voyage.

Cependant, ce à quoi je ne m'attendais pas, c’était que le prix total affiché avant la validation serait différent de ce que je pensais. Comme vous pouvez le voir ici, cette dernière page ne montre même plus les prix des différentes étapes du voyage.

C'est alors que j'ai réalisé qu'il y avait de minuscules «taxes et frais inclus» et «Afficher la ventilation des tarifs» sous la ligne Total. Lorsque je les ai développés, j'ai rencontré ceci:

En matière de voyages et d’accueil, il est normal d’attendre des frais pour des bagages à main, des frais de villégiature, etc. Cependant, ce n’était pas ce que je m'attendais à voir et il n’y a pas eu de réelle mention de ce que j’ai fait lors de la sélection de mes vols plus tôt. Ce qui est pire, Beaucoup de ces accusations ne sont même pas expliquées .

Maintenant, il existe des sites de voyage qui traitent ce genre de choses de manière honorable. Cependant, je suppose que beaucoup d'entre eux préfèrent suivre la route de Southwest Airlines pour manipuler le design et la typographie de manière à ne pas voir les frais supplémentaires.

Lectures recommandées : How Mobile Web Le design affecte la recherche locale (et que faire à ce sujet)

7. Instructions erronées

La mauvaise orientation sur un site Web n’est pas différente de celle d’un magicien. Le site Web attire votre attention sur une chose tout en faisant quelque chose de trompeur ailleurs .

Les formulaires d'inscription pour les publications en ligne en sont un bon exemple. Vous voyez généralement cela quand un magazine appartient à une marque beaucoup plus grande. D'autres magazines de l'éditeur sont ensuite promus lors du processus d'inscription. Et ce n'est généralement rien de plus qu'une case à cocher pré-cochée au bas du formulaire vous demandant si vous souhaitez également vous abonner à leurs bulletins d'information ou abonnements.

Par exemple, voici le formulaire d'inscription Eater :

Ce n’est pas si étrange que le formulaire se trouve en haut de la page. Ou, du moins, ce ne serait pas le cas si c'était le seul abonnement proposé.

Mais lorsque vous défilez, vous pouvez voir que la newsletter Today est automatiquement cochée:

Ce serait bien, sauf que j'étais sur le site Web d'Eater Philly. Je ne voulais pas de nouvelles génériques sur Eater. Je voulais des nouvelles concernant spécifiquement la région des États-Unis où je vis. Je ne sais pas non plus si j'étais trop fou pour une newsletter quotidienne.

Si je devais descendre encore plus loin sur la page, je Découvrez plus d'options de newsletter:

Heureusement, aucun de ces éléments n'a été vérifié en mon nom, mais il est toujours étrange que toutes ces options soient placées sous le formulaire, y compris la sélection de la ville:

En masquant les cases à cocher et en en sélectionnant une pour vos utilisateurs, vous les mettez en position de recevoir des messages qu’ils ne seront probablement pas heureux de recevoir. Lorsqu'ils se désabonnent de ces courriels et en expliquent la raison, par exemple «Je ne me suis jamais inscrit à ces communications». Ce n’est pas bien.

8. Comparaison des prix

Pour de nombreux utilisateurs, les sites Web mobiles sont visités à des fins de recherche. Avoir accès à plusieurs appareils pour effectuer simultanément des recherches avec un appareil ou prendre un appareil en charge pour compléter l'expérience de magasinage est un avantage que beaucoup de consommateurs apprécient beaucoup.

Cependant, si vous empêchez les utilisateurs de comparer facilement prix sur votre site, c'est probablement que vous cache quelque chose .

Avec l'exemple de Southwest Airlines que j'ai mentionné ci-dessus, le site m'a empêché de suivre les prix individuels de chaque étape de mon voyage. C'était pénible car il fallait que je les écrive quelque part pour que je puisse ne pas dépasser mon budget à la fin.

Alors, il y a cette compagnie aérienne qui ne veut tout simplement pas révéler les prix: British Airways .

Comme vous pouvez le voir ici, vous pouvez parcourir les temps de vol et les options d'escale sur British Airways. Alors que vous pouvez comparer les temps et le nombre d'arrêts les uns contre les autres, les prix ne sont pas révélés avant que vous ne sélectionniez un voyage.

Cela rend l'expérience de réserver un vol par British Airways incroyablement ennuyeuse. Bien que les prix puissent être comparés, il faut un certain nombre de va-et-vient pour recueillir cette information . Et, les chances sont bonnes que si vous appuyez sur le bouton «Retour» du navigateur, cela réinitialisera les données et vous devrez ressaisir toutes vos informations de voyage depuis le début.

site mobile informer les visiteurs que les prix ne sont pas révélés à ce stade, l'appel à le faire est un mauvais choix de la part de British Airways.

9. Privacy Zuckering

Voici le principe de base de ce modèle sombre: lorsqu'un design ou un élément de contenu n'indique pas clairement que le partage de données est facultatif ou ne constitue pas une solution facile, cela serait un cas

Je suis sûr que Mark Zuckerberg ne serait pas très heureux de savoir que Brignull a nommé celui-ci après lui, mais Facebook est connu pour qui incite les utilisateurs à donner plus d'informations qu'ils ne le devaient – c'est pourquoi celui-ci porte bien son nom.

Un exemple que je rencontre souvent ne se produit pas sur Facebook. Au lieu de cela, c’est un problème que je rencontre sur BuzzFeed alors que je prends une pause d’écriture. Voici ce qui se passe:

Mon cerveau commence à faire mal et je me retrouve à devoir faire une rapide distraction. Je vais au salon, m'assieds sur mon canapé et sort mon téléphone. Je vais immédiatement dans la section du questionnaire de BuzzFeed. Ils sont amusants et je sais que je peux les surmonter rapidement. Comme celui-ci sur les films:

Je commence le quiz et je lis rapidement la question en regardant les graphiques amusants et en choisissant ma réponse. C'est une activité géniale qui m'aide à me réinitialiser.

Jusqu'à ce que cela arrive:

Ceci est une question sans rapport que BuzzFeed a intégrée à mon questionnaire. Il se produit généralement à deux ou trois pas de la page. Cet exemple n’a aucun rapport avec le quiz que je prenais, alors j’ai pu le repérer tout de suite. Mais parfois, ils font un très bon travail en fusionnant les sujets pour que je leur permette de leur fournir une réponse révélatrice.

Quand votre dessin incorpore des éléments interactifs supplémentaires qui n'ont pas besoin d'être utilisés avec vous devriez laisser les utilisateurs savoir que c'est le cas. Ce n'est pas seulement une perte de temps, en particulier pour les utilisateurs mobiles, mais cela distrait le reste de l'expérience.

10. Roach Motel

Le produit breveté «Roach Motel» de Black Flag est un produit qui attire les blattes et autres insectes nuisibles dans une situation collante qui est alors très difficile à éliminer. C'est exactement ce que font certains sites Web.

Dans certains cas, un motel Roach se produit lorsqu'un site Web ou une application rend extrêmement difficile la suppression d'un compte ou la désinscription d'une liste. Vous le constaterez le plus souvent lors d’essais gratuits de produits SaaS.

Dans d’autres cas, il pourrait s’agir d’une page d’atterrissage dans laquelle un visiteur est tombé, mais il ne peut plus utiliser la navigation du site. Au lieu de cela, les utilisateurs doivent utiliser le bouton Précédent du navigateur, ce qui peut être pénible s'il réinitialise un travail entré avant cette page de renvoi.

Ensuite, il y a des motels de gardiennage comme le Wells Fargo Center website:

La première page du formulaire d'achat de billet est correcte. Vous indiquez la fourchette de prix dans laquelle vous souhaitez que vos billets tombent, puis vous choisissez le nombre dont vous avez besoin. Cela semble assez simple.

Ce qui est étrange, cependant, c'est qu'il dit maintenant «Ajouter au panier». Je suppose que je pourrai choisir mes sièges spécifiques à ce moment-là.

En revanche, le Wells Fargo Center choisit automatiquement mes billets et les ajoute au panier. Je n'avais aucun mot à dire sur les sièges que je voulais. Au lieu de cela, les billets les plus chers pour 1 250 $ ont été ajoutés à mon panier.

À ce stade, je décide de revenir en arrière et d’essayer de trouver de meilleures places. Lorsque je clique sur «changer de siège», cela me ramène à la page originale où je ne peux faire que des choix vagues quant à l'endroit où je veux m'asseoir et au montant que je veux payer. L'icône de la corbeille ci-dessous fait la même chose, sauf qu'elle efface complètement les tickets dans mon panier. Quoi qu'il en soit, Je me sens impuissant car je n'ai aucun contrôle sur l'expérience .

Dans un dernier effort, j'ai pensé passer à l'étape suivante pour voir si j'avais plus de contrôle là-bas. J'ai cliqué sur «détails des coûts», j'ai vu les frais et mises à niveau associés (ce à quoi je ne m'attendais pas) et j'ai réalisé que je ne pouvais que «passer à la caisse»:

Centre Wells Fargo ) ( Grand aperçu )

J'ai finalement décidé de ne pas acheter ces billets parce que je n'avais aucun contrôle sur le processus et à quel point je me sentais coincé une fois à l'intérieur.

pour eux. Offrez-leur un moyen simple de revenir sur leurs traces et de revenir en arrière s’ils ne sont pas satisfaits. Et, si on peut l’aider, donnez-leur plus de contrôle sur les choix et les personnalisations qu’ils font. Il est déjà assez difficile de convertir les utilisateurs de téléphones mobiles . Pour cette raison, ne les désactivez pas complètement.

11. Se glisser dans le panier

Les utilisateurs peuvent généralement trouver un article inattendu dans leur panier de deux manières. Le premier est que le site Web l'ajoute automatiquement. La seconde est par le site Web incitant l'utilisateur à l'ajouter lui-même en plaçant une case à cocher ou une autre option supplémentaire dans un endroit où quelque chose d'autre devrait se trouver.

Exemple: le Central Park Zoo .

Le formulaire d'achat de billets est assez simple. Il suffit de choisir les billets pour les visiteurs du zoo.

Faites votre choix et faites défiler pour faire l'achat.

Pour les utilisateurs mobiles pressés, ils pourraient même ne pas lire le bouton qui apparaît. C'est gros, gras et apparaît directement sous la forme. Pourquoi ne pas cliquer dessus?

Cependant, en y regardant de plus près, le bouton CTA appelle «Oui, ajoutez 5 $ à ma commande». Maintenant, quelqu'un qui lit rapidement pourrait lire cela comme "Oui, Ajouter à ma commande" en pensant qu'il fait référence aux tickets.

Ce n'est que lorsque l'utilisateur mobile fait un autre coup sur son téléphone qu'il voit le bouton de paiement actuel: 19659185] Check-out du zoo de Central Park CTA « />

En tant qu'utilisateurs, nous sommes formés pour comprendre comment les éléments Web communs agissent. A contact form follows a simple formula:

• Fill out the pertinent details.
• Click the button to complete the purchase.

It’s an easy 1-2 punch to execute as a web designer. However, when you throw something in your users’ pathway that resembles a button, you’re very likely to trip them up in the process. Or you’ll find a lot of angry visitors who unknowingly added and paid extra money because of the confusing way the form was designed.

12. Trick Questions

This one happens a lot with things like exit-intent pop-ups. By using language that is confusing or incorrectly written (like a double negative), the site is able to keep visitors put until they realize their mistake in understanding the question.

Tricky messaging can also be used to drive up costs. Here is what I experienced when trying to order flowers from 1-800-Flowers:

I was pretty happy with this floral arrangement and thought the large would be nice for my friend’s table. As I scrolled down, I saw this checkbox for “FREE Shipping.” I didn’t bother to click on the “i” icon since I figured, “What more do I need to know about free shipping and no service charges? Sounds like a good deal to me.”

After clicking the box, this message about the Celebrations Passport appeared, but I didn’t bother to pay attention to it. Once the box was checked, I quickly moved on to enter my zip code; I wanted those flowers delivered ASAP.

As I continued to select a delivery date, this upsell screen appeared on my phone. I considered it briefly and decided I don’t need any of these add-ons. I couldn’t find an “X” button, so I clicked “Continue” and hoped that none of these items had been added to my purchase.

I finally arrived at my shopping cart and discovered that ‘12 Months of Passport’ had also been added to my cart. Thankfully, I screenshotted the process for the purpose of this article. Otherwise, I would’ve had no idea where the add-on came from. Granted, it ended up here because I didn’t read the details closely.

That said, when you lead with something like “FREE shipping”, how many customers do you think will take time to read any further? We all understand what that phrase means in most contexts. By not clearly stating that this was a 1-800-Flowers upgrade, many users are likely to select that box and end up with an unintended item at checkout.

In addition to Brignull’s list, I want to add a couple more dark patterns that I find especially perturbing on the mobile web and in mobile apps.

Recommended reading: What You Need To Know To Increase Mobile Checkout Conversions

13. Unnecessarily Deep Navigation

This reference to navigation doesn’t really pertain to the hamburger menu mobile visitors use on websites. Instead, I’m referring more to those websites that have blog posts and quizzes that span multiple pages.

In some cases, I’m sure this is done for the purposes of keeping load times on individual pages fast. However, a properly optimized server and a website with a solid caching mechanism shouldn’t have those sorts of problems, even with a page loaded with images. My guess? These websites create multiple pages for a single post for the purposes of superficially bolstering the number of page views they get.

A good example of this comes from MagiQuiz:

The image above shows what a typical quiz looks like from the MagiQuiz website. Engaging imagery, question and answers to choose from.

However, the image below is what the typical quiz interface looks like when you actually scroll through it. It’s littered with advertisements, distractingly breaking up the experience of the quiz on the page:

As if those in-line ads weren’t enough, users finally get to the bottom of the page to find this:

It’s not actually the bottom of the quiz at all. All of that scrolling and skipping past unrelated ads made the quiz take so long, and now there’s still more to do in order to reach the payoff. That sucks — if you ask me!

Unfortunately, quiz sites such as MagiQuiz aren’t the only ones that do this. Major publishers like Forbes are guilty of this as well, breaking up otherwise short stories (no more than 800 or 1,000 words) into multiple pages. If this were a way to conserve server bandwidth, that would make sense, but I’m guessing this dark pattern is used for mainly selfish reasons.

14. Made-You-Look Notifications

One final dark pattern I want to call out is the made-you-look notification. I usually see this sort of thing on mobile apps that claim that I have activity or communications to look at. Since I’m already active on those apps, it’s usually not a big deal to open them and see what all the fuss is about. Sure, it’s annoying to discover the notification was just to remind me to respond to someone, but it’s not a problem if I was going to be in there anyway.

Mobile websites, on the other hand, shouldn’t be making use of this dark pattern. If there’s no history of engagement, then visitors’ attention should not be drawn to something that won’t improve the experience.

1-800-Flowers, again, is guilty of using this particular dark pattern:

See how my inbox has a green number “1” hovering over it? It looks just like email reminders you’d get from Gmail or Outlook, right?

Here’s the problem with this: Before today, I’d never been to the 1-800-Flowers website nor do I have an account with them. Yet, my eye was drawn to that message sitting in my inbox. It’s just a gut reaction I have. When I see that someone has messaged me, it’s usually from a client that I want to get back to ASAP. It’s that sense of urgency that compels me to instantly click to find out what action is needed.

And, so, this is what I did:

I knew the message that appeared wouldn’t be of relevance to me even before I clicked it, but I needed to see what it said.

As you can imagine, I wasn’t too happy to see an unhelpful promotion like this waiting for me. It’s not even like 1-800-Flowers went to the trouble of promoting flowers for an upcoming occasion (like homecoming events or the approaching holiday season). They just wanted to distract me from what I set out to do in the first place.

Honestly, I’m not sure what 1-800-Flowers (and other brands that do this) hoped to gain from this dark pattern. When people come to a flower delivery site, they typically know what they’re there for. Let them take the user journey you’ve already so carefully planned it out for them and leave those urgent notifications for websites or apps that can share personalized content and messages with their users.

Wrapping Up

Okay, so what have we learned here? To begin with, dark patterns are a way to use design and content to trick users into taking an unintended action. Still, are they effective?

In all honesty, I’m going to guess that — initially — dark patterns work on many visitors. For companies that are only concerned with the superficial success of a website (i.e. visits, page views, and sales), then that may be a good thing.

For companies that understand that short-term gains in these areas can easily be outweighed by losses from refunds, low customer retention rates and lawsuits, dark patterns will ultimately prove not to be worth it.

Deceitful design tactics won’t get you anywhere good with your visitors. Not only does this deception hurt your ability to gain customer loyalty, but it hurts the overall user experience online.

Think about it: enough users get burned by a certain type of website (say, a SaaS tool that makes it difficult to cancel). So, now they comb through every field in the sign-up or check-out process because they’re nervous about being overcharged or sucked into a bad deal. Or they spend so much time digging through your site trying to find some hint that gives the jig away. At the end of the day, users just give up or avoid making those kinds of purchases online altogether.

The user experience should be fast and easy and take visitors on a straight and narrow path to conversion — not make them second-guess their decision to be there in the first place.

(ra, yk, il)