Dark Pattern: Sveliamo il Lato Oscuro del Web

Amiamo il web. Avremmo tutti dovuto cercare un altro lavoro se non fosse stato per l’incredibile invenzione di Sir Tim Berners Lee! Nonostante la nostra passione, però, il web può essere un posto alquanto sgradevole.

I dark pattern possono essere involontari. Un marketer o uno sviluppatore può aver pensato di fare la cosa giusta ma non ha apprezzato i problemi e i lati negativi di qualcosa che ha implementato. I peggiori dark pattern sono intenzionali. Una pagina vi spinge a fare qualcosa che non avevate intenzione di fare perché l’UI o le parole manipolano le vostre azioni. Gli utenti sono sempre più attenti alle tecniche più dubbie, ma qualcuno, da qualche parte, non riuscirà a capire di essere stato ingannato finché non sarà troppo tardi.

Se usato bene, il web può far risparmiare tempo, spostamenti ed energia. D’altra parte, i dark pattern sprecano milioni di ore di lavoro e di kilowatt. Non svergogneremo nessun sito in particolare (si sa quali sono), ma illustreremo miglioramenti e soluzioni alternative dove possibile.

Ecco i nostri nemici.

Interfacce Utente Non Intuitive

Questi sono i dark pattern più frequenti. Ci vuole tempo e attenzione per creare una grande esperienza utente… e potete rovinare tutto il vostro lavoro in un attimo con questi invadenti dark pattern.

“Installa la Nostra App!”

Alcuni siti e social network vi spingono ad installare la loro applicazione – normalmente quando si fa clic su un avviso ricavuto via email relativo ad un nuovo post o follower. Il link si apre in una pagina web con due pulsanti:

1. Un enorme pulsante “Usa la nostra app”. Cliccandoci sopra, sarete portati all’AppStore, dove dovete approvare, scaricare, installare e poi lanciare l’applicazione nativa del sito (presumendo che sia supportata dal vostro telefono). Dovete poi accedere, sbagliare la password, richiedere un reset, aprire il link, creare una nuova password e accedere al sistema. Probabilmente avete dimenticato perché eravate lì, quindi tornate all’avviso originale e ricominciate.
2. Un microscopico link “continua nel web mobile” per eseguire l’azione.

Forse l’app è fantastica e ci sono stati spesi milioni, ma è raro trovarne una con più funzionalità del sito web. Naturalmente, un’app può raccogliere più dati personali di un sistema web, quindi ha una promozione più invadente.

Potete promuovete un’app con tutti i mezzi, ma se lo fate all’inizio di ogni interazione infastidite gli utenti. Alcuni installeranno l’app per fermare l’assillo, ma altri se ne andranno. Non sarebbe più efficace offrire l’app quando l’utente sta già seguendo il sito da un po’?

“Vorresti Ricevere Notifiche?”

Semplicemente: No.

Le iscrizioni alle newsletter, le notifiche push basate sul web, i widget “chattiamo” e le richieste di sondaggio potrebbero essere utili, ma le loro implementazioni sono universalmente orribili.

I siti spesso vi chiedono di iscrivervi nel momento in cui accedete per la prima volta dopo una ricerca sul web. A quel punto non avete idea se il contenuto è rilevante, se è buono, o se si tratta di un sito che potreste visitare frequentemente. Non deve sorprendere che la maggior parte delle persone clicca su “No”.

Non c’è niente di male nell’offrire notifiche o newsletter, ma è meglio assicurarsi prima che un utente sia interessato al sito. Magari mostrate un prompt alla fine dell’articolo o dopo che i lettori lo hanno visitato un paio di volte. È meno invadente, meno distraente e ha più probabilità di successo.

Infine, non chiedete agli utenti di iscriversi ad una newsletter quando cliccano su un link nella newsletter! Li allontanerà più velocemente.

Navigazione Bizzarra

Le barre di intestazione e i menu a discesa possono essere noiosi, ma la gente li comprende. Non vogliamo fermare l’evoluzione dell’UI e l’inventiva del design, ma alcuni controlli di navigazione sono strani e illogici.

Riconsiderate bene il vostro design se avete bisogno di sollecitare gli utenti con tooltip “clicca qui” o altri metodi di aiuto. Le buone UI non hanno bisogno di spiegazioni.

Scroll-Jacking non Necessario

Mostrare animazioni o aggiornare le voci di menu attive quando la pagina scorre può essere un’esperienza coinvolgente. È meno utile quando:

1. Abuso di animazioni. Animare troppi elementi distrae l’utente – evidenziare ogni elemento significa non portare nulla all’attenzione dell’utente. È meglio utilizzare qualche effetto sottile per aiutare a focalizzarsi sui messaggi importanti.
2. Interruzione del contesto. Lo scorrimento non dovrebbe portare ad azioni inaspettate come la scomparsa del contenuto, finestre di dialogo modali, invio di moduli, reindirizzamenti ad altre pagine, ecc.

L’animazione può anche causare malessere e vertigini, quindi valutate l’utilizzo della media query CSS prefers-reduced-motion per disabilitare gli effetti.

Per favore smettete di creare pagine a scorrimento infinito! I link ai contenuti correlati sono utili, ma il caricamento automatico di contenuti casuali senza il consenso dell’utente spreca banda. Rende difficile l’inserimento di segnalibri nelle pagine e impossibile raggiungere i dettagli di contatto e altre informazioni presenti nel footer della pagina.

Articoli Multi-pagina Non Necessari

Abbiamo tutti visto “articoli” che contengono un paragrafo di testo seguito da un link alla pagina successiva. Queste pagine sono generalmente un’esca per i link senza un contenuto sostanziale – ma non lo scoprirete fino a quando non vi sarete fatti largo tra una quantità di pubblicità e impressioni di pagina.

Chiedere ai web marketer di fermare questo modo di fare è inutile, ma forse ci ripenseranno se gli sviluppatori educheranno le persone a non soccombere a questa assurdità!

Marketing Manipolativo

Il web è il più grande mercato del mondo, con la capacità di vendere un’infinita varietà di prodotti fisici e digitali. Gli utenti torneranno ancora e ancora… a meno che voi non decidiate di ricorrere a schemi oscuri per incrementare le vendite.

Difficoltà di Iscrizione

La cancellazione dalle notifiche o dalle newsletter dovrebbe essere semplice come l’iscrizione, se non addirittura più semplice. Chiedere agli utenti di saltare gli ostacoli che si frappongono alla cancellazione della propria iscrizione porta irritazione e perdita di fiducia nel sito. Non c’è nessuna ragione plausibile per richiedere agli utenti di inviare via fax il loro certificato di nascita originale, tre prove di indirizzo e le ultime cartelle cliniche.

Annunci Mascherati

Gli annunci pubblicitari sono sovrautilizzati su molti siti, ma ecco gli esempi peggiori:

1. Assomigliare ad un menu o ad un’opzione;
2. Fingere di essere una notizia o un articolo informativo del sito di origine; o
3. Mostrare controlli UI come un grande pulsante “DOWNLOAD” in una pagina su un prodotto software.

I siti non possono sempre determinare il design degli annunci, ma ne controllano il posizionamento. Mettere gli annunci in posizioni prominenti per confondere le persone può aumentare le entrate pubblicitarie, ma quegli utenti torneranno?

Aggiunta Automatica di Prodotti ai Carrelli della Spesa

Vedere una lista di prodotti correlati o raccomandati può essere utile. Aggiungerli al carrello dell’utente senza il suo consenso è un’altra questione. Quante persone lo troveranno utile?

• Nel migliore dei casi, una piccola parte degli utenti noterà l’elemento extra e deciderà di tenerlo.
• Una percentuale maggiore lo rimuoverà.
• Alcuni non lo noteranno fino alla consegna, poi si lamenteranno e chiederanno un rimborso.

Queste attività aumentano le vendite a spese del supporto clienti, della buona volontà e degli acquisti di ritorno in corso. Occuparsi dei reclami e dei rimborsi può compensare in negativo qualsiasi aumento a breve termine della redditività.

Costi di Acquisto Nascosti

Non è piacevole passare il tempo a scegliere un prodotto, iscriversi, inserire i dati di consegna e le informazioni di pagamento per scoprire che il prezzo è aumentato rispetto ai siti concorrenti. La pagina di riepilogo ora mostra i costi nascosti come la consegna, l’assicurazione, la movimentazione e i costi “speriamo che non te ne accorga”.

I prezzi dovrebbero essere chiari e onesti altrimenti i clienti perderanno fiducia nel servizio di ecommerce. Quando i costi di consegna variano significativamente, chiedete all’utente di inserire il proprio paese o codice postale prima di impegnarsi nell’acquisto.

Scarsità Artificiale delle Scorte e Timer di Disponibilità

È utile sapere quando un articolo è in magazzino, ma alcuni siti di ecommerce compromettono la credibilità. Più informazioni danno, meno credibili diventano:

“COMPRA ORA! 2 articoli in magazzino, 15 sono stati acquistati negli ultimi 3 minuti e 597 persone stanno visualizzando questa pagina”

Queste tattiche ad alta pressione diventano più sospette se applicate ad articoli digitali o di alto valore come automobili e vacanze.

Gli utenti si rendono presto conto che questi messaggi sono inutili quando gli articoli rimangono in magazzino per molti giorni. Continueranno con il loro acquisto quando i messaggi di marketing del sito non sono affidabili?

Opt-Out Shaming

Anche grandi aziende di ecommerce indulgono in stupide tecniche di shaming. Presentano una domanda d’iscrizione seguita da un grande pulsante “Accetto” e un piccolo link di rinuncia come:

• “No – non voglio la consegna gratuita illimitata”
• “No – non mi interessa la situazione degli animali pelosi in via di estinzione”
• “No – voglio vedere il pianeta bruciare”

Questa pratica funziona? Forse. Ma stabilisce una relazione onesta con il cliente e aumenta la fiducia nel sito?

Cancellazioni dei Cookie Difficoltose

Il regolamento generale sulla protezione dei dati dell’UE (GDPR) richiede ai siti di mostrare un avviso di rinuncia per cookie non necessari e tecnologie di tracciamento simili. È imperfetta, ma la legge è dettata da buone intenzioni ed è valida in tutta Europa. Altri paesi possono avere regole simili, anche se di solito sono meno severe.

La maggior parte degli utenti si accorderanno e andranno avanti senza pensarci (il che vanifica in parte lo scopo della legislazione). La rinuncia dovrebbe essere altrettanto semplice, eppure alcuni siti vi richiedono di:

• guadare pagine/tabelle in gergo prima di trovare le opzioni;
• cliccare su decine di caselle di controllo anche se questo viola le regole del GDPR; e
• aspettare fino a un minuto mentre “salvano le vostre preferenze” (in cosa?).

Questo può convincere alcuni utenti a premere “accetta tutto”, anche se altri abbandoneranno il sito o passeranno alla modalità di lettura per nascondere l’avviso sui cookie. Nel migliore dei casi, rendere difficile la rinuncia dà l’impressione che il sito abbia qualcosa da nascondere. Nel peggiore dei casi, questo modello oscuro è ai margini della legalità e potrebbe portare a multe o all’aumento delle spese legali.

Tecnologia Terribile

Tecnologie come l’HTML sono nativamente usabili, accessibili e retrocompatibili. Ci vuole uno sforzo speciale per rinunciare a questi vantaggi.

Bloccare la Funzionalità del Browser

Il pulsante indietro è stato il più grande contributo del web alle interfacce utente. È pratico e compreso da chiunque abbia una minima esperienza tecnica. Eppure i siti lo rovinano aprendo nuove finestre/tabs, facendo scadere la pagina precedente o dicendo agli utenti di non utilizzare i controlli del browser.

Non ci sono ragioni tecniche per bloccare la funzionalità del browser. Tentare di aggirare i controlli è un problema di design che confonde gli utenti e rende un sistema web meno utilizzabile.

Altri problemi da evitare:

1. Non disabilitare i menu del clic destro o del tocco prolungato.
2. Non disabilitare la copia o aggiungere altro testo “utile”.
3. Non bloccare il bookmarking nella tua Single Page App non aggiornando l’URL.

Ma il peggiore di tutti questi problemi è il prossimo della lista.

Disabilitare l’Incolla sui campi password

Non c’è nessun motivo per disabilitare l’incolla. Disabilitare l’incolla su un campo password è odioso, ma troverete questa restrizione su grandi siti – dovrebbero saperlo bene. L’ho visto nei siti delle maggiori banche internazionali.

La pratica è probabilmente implementata per dubbi motivi di sicurezza. Se l’utente non può incollare, è logico che non può riutilizzare una password di un altro sito. Sfortunatamente, questo impedisce anche di utilizzare un’applicazione di gestione delle password. Non è più possibile generare stringhe altamente sicure, lunghe, casuali e poco pratiche da digitare.

Inoltre, gli sviluppatori possono disabilitare le restrizioni all’incolla con qualche ritocco ai DevTool. Gli altri farebbero fatica, ed è più probabile che usino password deboli. Non disabilitate mai l’incolla: comporta meno lavoro per voi e migliora la sicurezza del sistema.

Sciocche Restrizioni sulle Password

“La tua password deve essere compresa tra 8 e 12 caratteri e richiede almeno un carattere maiuscolo, un numero e un simbolo – ma per favore non usare ` ‘ ” / o ;”

Non c’è nessuna ragione per implementare rigide restrizioni sulle password. Chiedetevi:

1. Il sistema sta memorizzando la password come testo semplice in un database piuttosto che sottoporla ad hashing?
2. Un esperto di sicurezza ha suggerito di impedire alle persone di utilizzare password facili come password, qwerty o 123456? Questo è vero, ma impedisce anche alle persone di utilizzare password più complesse e fornisce un modello pratico per il cracking brute-force.

Una sola regola impone password forti: una lunghezza minima. Ogni carattere in più aumenta esponenzialmente la complessità e i tempi di cracking.

Salto del Contenuto Mobile

Leggere un contenuto su uno smartphone può essere un’esperienza frustrante. Siete immersi nella lettura di un articolo quando il contenuto salta fuori dallo schermo e perdete il punto dove eravate. Poi passate diversi secondi a scorrere freneticamente su e giù. O peggio, farete clic su un link o su un pulsante nel momento in cui si muove, e si verifica un’azione inaspettata. Alcuni lettori perderanno il loro slancio, si arrenderanno e se ne andranno prima che voi possiate convertirli in clienti.

Il salto di contenuto si verifica quando un’immagine o un iframe (normalmente una pubblicità) si carica sopra il punto di scorrimento della finestra. Una volta che il contenuto è stato caricato, il browser può determinarne le dimensioni e posizionarlo sulla pagina. Pertanto, un’immagine di 500px di altezza (mostrata a grandezza naturale) spinge il contenuto in basso di 500px.

L’indice Cumulative Layout Shift (CLS) di Google misura i salti di contenuto e penalizza i siti di conseguenza. Questo era un problema complesso, ma ora sono disponibili diverse soluzioni tecniche:

• Aggiungete attributi di larghezza e altezza agli elementi HTML img e iframe oppure usate la proprietà CSS aspect-ratio per riservare spazio nella pagina prima che l’elemento venga caricato.
• Impostate le dimensioni degli elementi container che racchiudono le risorse che si caricano più lentamente come gli annunci, le immagini e i widget dei social media.
• Richiedete immagini più grandi il prima possibile e valutate l’utilizzo di link di precaricamento nel vostro head HTML.
• Ottimizzate l’uso dei font web e utilizzate fallback di dimensioni simili per minimizzare gli spostamenti del layout.
• Evitate di inserire elementi verso la parte superiore della pagina a meno che non si tratti di un aggiornamento del DOM innescato a seguito di un’azione dell’utente come un clic.
• Usate il contenimento CSS per ottimizzare il rendering dei blocchi di contenuto. Può essere possibile definire elementi che non influiscono sul dimensionamento o sulla posizione degli altri.

Quando il Social Sign-On È Orribile

Tecnologie come OAuth permettono agli utenti di registrarsi rapidamente su un sito utilizzando un altro account come Google, Facebook, Twitter, LinkedIn o Github. Implementata correttamente, questa è una soluzione pratica che permette un processo di registrazione più semplice, fa risparmiare tempo e porta a maggiori conversioni.

Se implementato male, un sito vi chiederà successivamente di inserire la vostra email, i dati personali e anche una password “per i loro archivi”

Non tutti i provider passeranno le informazioni dell’utente, quindi evitate OAuth se il vostro sito richiede questi dati per funzionare. OAuth non dovrebbe mai diventare un passaggio inutile che rallenta la procedura di registrazione.

Scarse Prestazioni Web

Secondo HTTP Archive, in media una pagina web impiega sette secondi per caricarsi su un dispositivo desktop e venti secondi su mobile. La visualizzazione di una singola pagina fa 70 richieste HTTP, scarica più di 2MB di dati ed emette 1.3g di CO² nell’atmosfera (vedi il Website Carbon Calculator). Questa è una media – molti siti fanno anche peggio.

Nessuno si prefigge di creare un sito lento, ma l’aggiunta di funzioni spesso compromette le prestazioni. Dato che è possibile creare un clone di Quake giocabile in 13Kb, ci si deve chiedere perché due paragrafi di marketing in una pagina “Chi siamo” richiedano un download 154 volte maggiore!

Affrontare le prestazioni richiede una combinazione di tecniche, ma dovete ricordare un solo punto chiave: non inviate tanta roba!

Subdoli Widget dei Social Media

I widget dei social media come i pulsanti “Mi piace” sembrano innocenti ma:

1. Ognuno di essi aggiunge centinaia di kilobyte di codice JavaScript che ha un impatto sulle prestazioni della pagina.
2. Il codice è un rischio per la sicurezza perché viene eseguito con gli stessi permessi del codice JavaScript del sito.
3. I widget implementano il tracciamento dell’utente anche quando non sono attivati. Questo potrebbe portare a problemi legali in alcuni territori.
4. Quasi nessuno li usa: sarete fortunati a vedere l’1% di coinvolgimento degli utenti.

I widget sono anche inutili. La maggior parte dei siti di social media forniscono link standard che mantengono la condivisione senza alcun rischio per le prestazioni, la sicurezza o la privacy, ad es.

• Email mailto:?subject=[title]&body=[url]
• Facebook https://www.facebook.com/sharer.php?u=[url]
• Twitter https://twitter.com/share?url=[url]&text=[title]
• LinkedIn https://www.linkedin.com/shareArticle?url=[url]&title=[title]
• Reddit https://reddit.com/submit?url=[url]&title=[title]

Dove [url] è l’URL della pagina corrente e [title] è il titolo principale. Un link standard <a> funziona bene, ma potete migliorarlo per aprire la pagina in una finestra pop-up se volete che si comportino in modo identico ai pulsanti standard.

I CAPTCHA

CAPTCHA è l’abbreviazione di Completely Automated Public Turing test to tell Computers and Humans Apart. Permettono di impedire ai bot o ad altre macchine di accedere ai sistemi web. Spesso vi viene chiesto di inserire il testo mostrato in un’immagine indecifrabile o di cliccare su quadrati che contengono biciclette. (Una bicicletta montata su una macchina conta? E quel triciclo? C’è una bicicletta dietro quel muro?)

I CAPTCHA hanno tre problemi fondamentali:

1. Sono volutamente difficili per gli esseri umani non disabili con una vista perfetta. Come dovrebbero cavarsela coloro che hanno problemi di vista o di altro tipo?
2. Devono diventare più complessi man mano che i bot e le tecniche di IA migliorano.
3. Mettono l’onere della sicurezza dell’accesso a carico degli utenti – non sui proprietari del sito o sugli sviluppatori, che sono i beneficiari principali.

I CAPTCHA sono eccessivi per la maggior parte dei siti web. Potreste considerare opzioni alternative ai CAPTCHA che richiedono minore sforzo umano:

• I campi honeypot nascosti bloccano l’invio del modulo quando i bot aggiungono dati.
• Verificate che gli eventi della tastiera come input o keydown siano attivati in modo appropriato.
• Controllate il tempo necessario per completare e inviare un modulo – l’attività dei bot è spesso istantanea.
• Create una procedura di invio in due fasi che chieda all’utente di confermare i suoi dati o faccia una domanda aggiuntiva prima di inviare.

Queste fermeranno la maggior parte dei bot. È possibile bypassare qualsiasi soluzione tecnica, ma richiede un ulteriore sforzo di sviluppo specifico per il vostro sito. Pochi sviluppatori di bot si preoccupano quando ci sono migliaia di altri siti con vulnerabilità note.

Riepilogo

Il web è un posto fantastico, ma alcune pratiche dubbie possono rovinare questa percezione. Certo, potreste essere truffati ovunque, ma il web permette agli autori di raggiungere migliaia di persone con costi o sforzi ridotti. E quando le grandi aziende multimiliardarie usano i dark pattern in modo sconsiderato, è davvero vergognoso!

I siti usano i dark pattern perché funzionano. Ma è una soluzione a breve termine. I visitatori sono sempre più attenti alle tecniche nefaste e potrebbero non tornare più.

Fate la cosa giusta, costruite la fiducia nel vostro brand e manterrete i clienti senza dover ricorrere a dark pattern.

Avete delle considerazioni sui dark pattern in cui vi siete imbattuti? Scrivetele nella sezione dei commenti qui sotto!

Craig Buckler

Web developer freelance del Regno Unito, scrittore e divulgatore. È in giro da molto tempo e sproloquia su standard e prestazioni.

• Sito Web
• LinkedIn
• Twitter
• YouTube