Ecco i nostri nemici.<\/p>\n
Interfacce Utente Non Intuitive<\/h2>\n
Questi sono i dark pattern pi\u00f9 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.<\/p>\n
“Installa la Nostra App!”<\/h3>\n
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:<\/p>\n
- \n
- 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\u00e9 eravate l\u00ec, quindi tornate all’avviso originale e ricominciate.<\/li>\n
- Un microscopico link “continua nel web mobile” per eseguire l’azione.<\/li>\n<\/ol>\n
![\"No,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/install-app-dark-pattern.png\")
No, grazie – non ho bisogno della vostra app!<\/figcaption><\/figure>\n Forse l’app \u00e8 fantastica e ci sono stati spesi milioni, ma \u00e8 raro trovarne una con pi\u00f9 funzionalit\u00e0 del sito web. Naturalmente, un’app pu\u00f2 raccogliere pi\u00f9 dati personali di un sistema web, quindi ha una promozione pi\u00f9 invadente.<\/p>\n
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\u00f9 efficace offrire l’app quando l’utente sta gi\u00e0 seguendo il sito da un po’?<\/p>\n
“Vorresti Ricevere Notifiche?”<\/h3>\n
Semplicemente: No.<\/p>\n
![\"Qualcuno](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/push-notification-dark-pattern.png\")
Qualcuno ha mai cliccato su “Consenti”?<\/figcaption><\/figure>\n Le iscrizioni alle newsletter, le notifiche push<\/a> basate sul web, i widget “chattiamo”<\/a> e le richieste di sondaggio<\/a> potrebbero<\/em> essere utili, ma le loro implementazioni sono universalmente orribili.<\/p>\n
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 \u00e8 rilevante, se \u00e8 buono, o se si tratta di un sito che potreste visitare frequentemente. Non deve sorprendere che la maggior parte delle persone clicca su “No”.<\/p>\n
Non c’\u00e8 niente di male nell’offrire notifiche o newsletter, ma \u00e8 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. \u00c8 meno invadente, meno distraente e ha pi\u00f9 probabilit\u00e0 di successo.<\/p>\n
Infine, non chiedete agli utenti di iscriversi ad una newsletter quando cliccano su un link nella newsletter! Li allontaner\u00e0 pi\u00f9 velocemente.<\/p>\n
Navigazione Bizzarra<\/h3>\n
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<\/a> sono strani e illogici.<\/p>\n
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.<\/p>\n
Scroll-Jacking non Necessario<\/h3>\n
Mostrare animazioni o aggiornare le voci di menu attive quando la pagina scorre pu\u00f2 essere un’esperienza coinvolgente. \u00c8 meno utile quando:<\/p>\n
- \n
- Abuso di animazioni. Animare troppi elementi distrae l’utente – evidenziare ogni elemento significa non portare nulla all’attenzione dell’utente. \u00c8 meglio utilizzare qualche effetto sottile per aiutare a focalizzarsi sui messaggi importanti.<\/li>\n
- 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.<\/li>\n<\/ol>\n
L’animazione pu\u00f2 anche causare malessere e vertigini, quindi valutate l’utilizzo della media query CSS
prefers-reduced-motion<\/code> per disabilitare gli effetti.<\/p>\nPer 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.<\/p>\n
Articoli Multi-pagina Non Necessari<\/h3>\n
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\u00e0 di pubblicit\u00e0 e impressioni di pagina.<\/p>\n
Chiedere ai web marketer di fermare questo modo di fare \u00e8 inutile, ma forse ci ripenseranno se gli sviluppatori educheranno le persone a non soccombere a questa assurdit\u00e0!<\/p>\n
Marketing Manipolativo<\/h2>\n
Il web \u00e8 il pi\u00f9 grande mercato del mondo, con la capacit\u00e0 di vendere un’infinita variet\u00e0 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.<\/p>\n
Difficolt\u00e0 di Iscrizione<\/h3>\n
La cancellazione dalle notifiche o dalle newsletter dovrebbe essere semplice come l’iscrizione, se non addirittura pi\u00f9 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’\u00e8 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.<\/p>\n
Annunci Mascherati<\/h3>\n
Gli annunci pubblicitari sono sovrautilizzati su molti siti, ma ecco gli esempi peggiori:<\/p>\n
- \n
- Assomigliare ad un menu o ad un’opzione;<\/li>\n
- Fingere di essere una notizia o un articolo informativo del sito di origine; o<\/li>\n
- Mostrare controlli UI come un grande pulsante “DOWNLOAD” in una pagina su un prodotto software.<\/li>\n<\/ol>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/disguised-ad-dark-pattern.png\")
Un annuncio su un sito di download, che porta lontano dal download vero e proprio.<\/figcaption><\/figure>\n 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\u00f2 aumentare le entrate pubblicitarie, ma quegli utenti torneranno?<\/p>\n
Aggiunta Automatica di Prodotti ai Carrelli della Spesa<\/h3>\n
Vedere una lista di prodotti correlati o raccomandati pu\u00f2 essere utile. Aggiungerli al carrello dell’utente senza il suo consenso \u00e8 un’altra questione. Quante persone lo troveranno utile?<\/p>\n
- \n
- Nel migliore dei casi, una piccola parte degli utenti noter\u00e0 l’elemento extra e decider\u00e0 di tenerlo.<\/li>\n
- Una percentuale maggiore lo rimuover\u00e0.<\/li>\n
- Alcuni non lo noteranno fino alla consegna, poi si lamenteranno e chiederanno un rimborso.<\/li>\n<\/ul>\n
Queste attivit\u00e0 aumentano le vendite a spese del supporto clienti, della buona volont\u00e0 e degli acquisti di ritorno in corso. Occuparsi dei reclami e dei rimborsi pu\u00f2 compensare in negativo qualsiasi aumento a breve termine della redditivit\u00e0.<\/p>\n
Costi di Acquisto Nascosti<\/h3>\n
Non \u00e8 piacevole passare il tempo a scegliere un prodotto, iscriversi, inserire i dati di consegna e le informazioni di pagamento per scoprire che il prezzo \u00e8 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”.<\/p>\n
I prezzi dovrebbero essere chiari e onesti altrimenti i clienti perderanno fiducia nel servizio di ecommerce<\/a>. Quando i costi di consegna variano significativamente, chiedete all’utente di inserire il proprio paese o codice postale prima di impegnarsi nell’acquisto.<\/p>\n
Scarsit\u00e0 Artificiale delle Scorte e Timer di Disponibilit\u00e0<\/h3>\n
\u00c8 utile sapere quando un articolo \u00e8 in magazzino, ma alcuni siti di ecommerce compromettono la credibilit\u00e0. Pi\u00f9 informazioni danno, meno credibili diventano:<\/p>\n
“COMPRA ORA! 2 articoli in magazzino, 15 sono stati acquistati negli ultimi 3 minuti e 597 persone stanno visualizzando questa pagina”<\/em><\/p><\/blockquote>\n
Queste tattiche ad alta pressione diventano pi\u00f9 sospette se applicate ad articoli digitali o di alto valore come automobili e vacanze.<\/p>\n
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?<\/p>\n
Opt-Out Shaming<\/h3>\n
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:<\/p>\n
- \n
- “No – non voglio la consegna gratuita illimitata”<\/li>\n
- “No – non mi interessa la situazione degli animali pelosi in via di estinzione”<\/li>\n
- “No – voglio vedere il pianeta bruciare”<\/li>\n<\/ul>\n
Questa pratica funziona? Forse. Ma stabilisce una relazione onesta con il cliente e aumenta la fiducia nel sito?<\/p>\n
Cancellazioni dei Cookie Difficoltose<\/h3>\n
Il regolamento generale sulla protezione dei dati dell’UE (GDPR)<\/a> richiede ai siti di mostrare un avviso di rinuncia per cookie non necessari e tecnologie di tracciamento simili. \u00c8 imperfetta, ma la legge \u00e8 dettata da buone intenzioni ed \u00e8 valida in tutta Europa. Altri paesi possono avere regole simili, anche se di solito sono meno severe.<\/p>\n
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:<\/p>\n
- \n
- guadare pagine\/tabelle in gergo prima di trovare le opzioni;<\/li>\n
- cliccare su decine di caselle di controllo anche se questo viola le regole del GDPR; e<\/li>\n
- aspettare fino a un minuto mentre “salvano le vostre preferenze” (in cosa?).<\/li>\n<\/ul>\n
Questo pu\u00f2 convincere alcuni utenti a premere “accetta tutto”, anche se altri abbandoneranno il sito o passeranno alla modalit\u00e0 di lettura per nascondere l’avviso sui cookie. Nel migliore dei casi, rendere difficile la rinuncia d\u00e0 l’impressione che il sito abbia qualcosa da nascondere. Nel peggiore dei casi, questo modello oscuro \u00e8 ai margini della legalit\u00e0 e potrebbe portare a multe o all’aumento delle spese legali.<\/p>\n
![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/cookie-options.png\")
Questo dialogo continua e continua e continua…<\/figcaption><\/figure>\n Tecnologia Terribile<\/h2>\n
Tecnologie come l’HTML sono nativamente usabili, accessibili e retrocompatibili. Ci vuole uno sforzo speciale per rinunciare a questi vantaggi.<\/p>\n
Bloccare la Funzionalit\u00e0 del Browser<\/h3>\n
Il pulsante indietro \u00e8 stato il pi\u00f9 grande contributo del web alle interfacce utente. \u00c8 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.<\/p>\n
Non ci sono ragioni tecniche per bloccare la funzionalit\u00e0 del browser. Tentare di aggirare i controlli \u00e8 un problema di design che confonde gli utenti e rende un sistema web meno utilizzabile.<\/p>\n
Altri problemi da evitare:<\/p>\n
- \n
- Non disabilitare i menu del clic destro o del tocco prolungato.<\/li>\n
- Non disabilitare la copia o aggiungere altro testo “utile”.<\/li>\n
- Non bloccare il bookmarking nella tua Single Page App non aggiornando l’URL.<\/li>\n<\/ol>\n
Ma il peggiore di tutti questi problemi \u00e8 il prossimo della lista.<\/p>\n
Disabilitare l’Incolla sui campi password<\/h3>\n
Non c’\u00e8 nessun motivo per disabilitare l’incolla. Disabilitare l’incolla su un campo password \u00e8 odioso, ma troverete questa restrizione su grandi siti – dovrebbero saperlo bene. L’ho visto nei siti delle maggiori banche internazionali.<\/p>\n
La pratica \u00e8 probabilmente implementata per dubbi motivi di sicurezza. Se l’utente non pu\u00f2 incollare, \u00e8 logico che non pu\u00f2 riutilizzare una password di un altro sito. Sfortunatamente, questo impedisce anche di utilizzare un’applicazione di gestione delle password<\/a>. Non \u00e8 pi\u00f9 possibile generare stringhe altamente sicure, lunghe, casuali e poco pratiche da digitare.<\/p>\n
Inoltre, gli sviluppatori possono disabilitare le restrizioni all’incolla con qualche ritocco ai DevTool. Gli altri farebbero fatica, ed \u00e8 pi\u00f9 probabile che usino password deboli. Non disabilitate mai l’incolla: comporta meno lavoro per voi e migliora la sicurezza del sistema.<\/p>\n
Sciocche Restrizioni sulle Password<\/h3>\n
“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 ;”<\/em><\/p><\/blockquote>\n
Non c’\u00e8 nessuna ragione per implementare rigide restrizioni sulle password. Chiedetevi:<\/p>\n
- \n
- Il sistema sta memorizzando la password come testo semplice in un database piuttosto che sottoporla ad hashing?<\/li>\n
- Un esperto di sicurezza ha suggerito di impedire alle persone di utilizzare password facili come password<\/em>, qwerty<\/em> o 123456<\/em>? Questo \u00e8 vero, ma impedisce anche alle persone di utilizzare password pi\u00f9 complesse e fornisce un modello pratico per il cracking brute-force.<\/li>\n<\/ol>\n
Una sola regola impone password forti: una lunghezza minima. Ogni carattere in pi\u00f9 aumenta esponenzialmente la complessit\u00e0 e i tempi di cracking.<\/p>\n
Salto del Contenuto Mobile<\/h3>\n
Leggere un contenuto su uno smartphone pu\u00f2 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\u00f9. 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.<\/p>\n
Il salto di contenuto si verifica quando un’immagine o un iframe (normalmente una pubblicit\u00e0) si carica sopra il punto di scorrimento della finestra. Una volta che il contenuto \u00e8 stato caricato, il browser pu\u00f2 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.<\/p>\n
L’indice Cumulative Layout Shift (CLS)<\/a> 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<\/a>:<\/p>\n
- \n
- Aggiungete attributi di larghezza e altezza agli elementi HTML
img<\/code> eiframe<\/code> oppure usate la propriet\u00e0 CSSaspect-ratio<\/code> per riservare spazio nella pagina prima<\/em> che l’elemento venga caricato.<\/li>\n- Impostate le dimensioni degli elementi container che racchiudono le risorse che si caricano pi\u00f9 lentamente come gli annunci, le immagini e i widget dei social media.<\/li>\n
- Richiedete immagini pi\u00f9 grandi il prima possibile e valutate l’utilizzo di link di precaricamento nel vostro
head<\/code> HTML.<\/li>\n- Ottimizzate l’uso dei font web e utilizzate fallback di dimensioni simili per minimizzare gli spostamenti del layout.<\/li>\n
- 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.<\/li>\n
- Usate il contenimento CSS per ottimizzare il rendering dei blocchi di contenuto. Pu\u00f2 essere possibile definire elementi che non influiscono sul dimensionamento o sulla posizione degli altri.<\/li>\n<\/ul>\n
Quando il Social Sign-On \u00c8 Orribile<\/h3>\n
Tecnologie come OAuth<\/a> permettono agli utenti di registrarsi rapidamente su un sito utilizzando un altro account come Google, Facebook, Twitter, LinkedIn o Github. Implementata correttamente, questa \u00e8 una soluzione pratica che permette un processo di registrazione pi\u00f9 semplice, fa risparmiare tempo e porta a maggiori conversioni.<\/p>\n
Se implementato male, un sito vi chieder\u00e0 successivamente di inserire la vostra email, i dati personali e anche una password “per i loro archivi”<\/p>\n
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.<\/p>\n
Scarse Prestazioni Web<\/h3>\n
Secondo HTTP Archive<\/a>, 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\u00f9 di 2MB di dati ed emette 1.3g di CO\u00b2 nell’atmosfera (vedi il Website Carbon Calculator<\/a>). Questa \u00e8 una media – molti siti fanno anche peggio.<\/p>\n
Nessuno si prefigge di creare un sito lento, ma l’aggiunta di funzioni spesso compromette le prestazioni. Dato che \u00e8 possibile creare un clone di Quake giocabile in 13Kb<\/a>, ci si deve chiedere perch\u00e9 due paragrafi di marketing in una pagina “Chi siamo” richiedano un download 154 volte maggiore!<\/p>\n
Affrontare le prestazioni richiede una combinazione di tecniche<\/a>, ma dovete ricordare un solo punto chiave: non inviate tanta roba!<\/p>\n
Subdoli Widget dei Social Media<\/h3>\n
- Aggiungete attributi di larghezza e altezza agli elementi HTML
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/captcha-buses.jpg\")