Disclaimer: il testo contenuto in questo articolo ha un tono sarcastico e la sua chiave di lettura è leggerlo al "contrario". L'accessibilità è una qualità importante da non sottovalutare. Prendendo spunto da alcune modalità di interruzione durante la navigazione e da altri stratagemmi storici, riporterò degli esempi di come rovinare l'accessibilità agli utenti.
Eccoci ad un nuovo capitolo sull'accessibilità, questa volta però rivolto a chi decide di essere un ribelle, a chi vuole andare contro i buoni propositi, a chi in nome dell'engagement è disposto a rovinare tutto pur di far saltare i nervi anche al più paziente dei navigatori. D'altronde l'accessibilità è solo un requisito per gli snob, per chi ha tempo da perdere, per chi vuole che i contenuti siano facilmente fruibili. Infatti i testi vengono scritti oramai per le macchine (spider e bot) e non più per gli utenti.
Tip per ribelli: Vuoi assicurarti che i tuoi utenti rimangano sul tuo sito il più a lungo possibile? Ti regalo subito il primo consiglio: niente di meglio che nascondere il pulsante 'chiudi' del tuo pop-up! Rendilo dello stesso colore dello sfondo. I tuoi utenti passeranno minuti preziosi cercando di chiuderlo, aumentando magicamente il tempo di permanenza sul sito!
Chi siamo noi per soffocare la creatività? Passo dopo passo troverai sia le istruzioni su come aumentare l'engagement sul tuo sito sia le tecniche opposte che alcuni dissennati osano utilizzare per migliorare l'esperienza utente. Let's go!
I video: come bloccare completamente la navigazione
Inizio subito con la prima tecnica che più preferisco - ricorda sempre che il tutto va letto in tono sarcastico, l'aggancio del video che parte in autoplay. Questa è quella che più di altre farà impennare il tempo di permanenza sul sito ed anche quella che testerà la pazienza dei tuoi utenti. Perché lasciargli la possibilità di scegliere quando guardare un video?
Come creare il video-trappola perfetto:
- Posizionamento strategico: Piazza un video, meglio se in formato verticale (occupa più spazio!)
- Contenuto irrilevante: Scegli un video che non c'entri nulla con l'articolo
- Ancoraggio automatico: Aggancialo in cima alla pagina quando l'utente scorre (tramite JS o CSS)
- Autoplay forzato: Attivalo automaticamente (purtroppo senza audio, altrimenti verrebbe bloccato)
I magnifici risultati che otterrai:
- Impedisci la lettura: L'utente non potrà continuare a leggere l'articolo
- Fermi la loro musica: Se stavano ascoltando musica, questa andrà in pausa
- Crei confusione: Il testo slitterà e sarà nascosto dietro al video
- Loop infinito: Se scrollano verso l'alto, il video si sgancia e ricomincia il ciclo
Livello PRO: rendere impossibile la chiusura
Per i veri maestri dell'anti-accessibilità:
- Ritarda il pulsante di chiusura: Mostralo solo alla fine del video
- Miniaturizzalo: Una ricerca del MIT indica che un pulsante per essere cliccabile deve avere dimensioni minime di 40x40px? Perfetto! Il nostro sarà di 20x20px
- Riduci il contrasto: Aggiungi un'opacità del 50% per renderlo quasi invisibile
- Redirect finale: Alla fine del video, reindirizza automaticamente a un altro video
Bonus monetizzazione: Inserisci una pubblicità all'inizio e una alla fine di ogni video. Il bounce rate scenderà, mentre aumenteranno tempo di permanenza, pagine viste ed entrate pubblicitarie!
Se dopo aver applicato tutti questi suggerimenti i tuoi utenti avranno ancora il coraggio di visitare il tuo sito, significa che ti amano a prescindere di tutto.
L'approccio noioso dei "buoni"
I "non creativi" invece cosa fanno? È molto semplice:
- Lasciano il codice snello ed efficiente
- Inseriscono video pertinenti al testo
- Li caricano sul proprio server (riducendo tracker esterni)
- Forniscono tutti i controlli video standard
- Permettono agli utenti di continuare ad ascoltare la loro musica
I loro utenti potranno leggere il testo fino alla fine senza interruzioni. Niente pubblicità, niente tracker, massima privacy. Che noia! Passiamo subito alla seconda tecnica, anche questa molto interessante.
I popup: l'arte dell'interruzione continua
Sui popup ci si potrebbero scrivere intere enciclopedie. Ti darò quindi solo qualche dritta per stimolare la tua ribelle creatività.
Strategia di bombardamento dell'utente:
- L'accoglienza calorosa:
- L'utente cerca sul motore di ricerca un argomento di suo interesse
- Entra sul tuo sito e inizia già la sua prima interazione con il banner di scelta dei cookie
- Prima che possa leggerlo, sovrapponi un popup di notifica sul browser
- La scalata dei popup:
- Se il tuo sito offre un'area privata, fai apparire il popup di accesso tramite Google
- Mentre tenta di chiuderlo, proponi l'iscrizione alla newsletter (X di chiusura minuscola)
- La chat automatica:
- Aggiungi un avatar animato che apre direttamente la chat
- Fai partire messaggi automatici ogni 20 secondi
- "Ciao! Come posso aiutarti?"
- "Sei ancora lì? Ti serve aiuto?"
- "Non andartene! Abbiamo offerte speciali per te!"
Suggerimento avanzato: Programma i popup per riapparsi 10 secondi dopo essere stati chiusi. Quando l'utente chiude il terzo popup riapparso, fagli credere di aver vinto un premio - che è in realtà un altro popup!
La tempistica perfetta:
| Momento | Azione popup | Obiettivo |
|---|---|---|
| Appena arriva | Cookie banner | Impedire la lettura dell'intestazione |
| Dopo 2 secondi | Login/Registrazione | Bloccare la comprensione del contesto |
| Dopo 5 secondi | Newsletter | Interrompere quando inizia a leggere |
| Dopo scrolling | Video popup | Fermare quando è finalmente coinvolto |
| Al tentativo di uscita | Exit popup | Trattenere con false promesse |
L'approccio noioso dei "buoni"
Il web designer "accessibile" non fa proprio nulla. Sul suo sito non ci sono popup che interrompono la lettura. Al massimo c'è un pulsante CTA sì dai colori vistosi ma riesce anche ad essere discreto, fisso in un angolino tutto timido in attesa di essere cliccato. Che spreco di potenziale intrattenimento forzato!
Il banner di accettazione dei cookie: il labirinto senza uscita
Se hai adottato la prima tecnica, grazie ai video incorporati da fonti esterne (es. YouTube, TikTok) per la tua gioia potrai installare il banner di scelta dei cookie aprendo un mondo di diabolica creatività. Già la sua sola presenza è positiva. L'utente per proseguire la navigazione dovrà prima schiacciare qualche pulsante; occorre fare in modo di mettere la privacy in secondo piano, anche terzo o ultimo, meritandoci così un innalzamento di livello.
Opzioni diaboliche per il pulsante "Continua senza accettare":
- Eliminazione totale: Nascondilo direttamente (chi ha bisogno delle leggi?)
- Camuffamento cromatico: Inseriscilo con contrasto quasi nullo (su sfondo bianco usa
#EDEBEE) - Miniaturizzazione estrema: Per la X di chiusura, dimensioni 20x20px o meno (la metà del minimo consigliato)
- Doppio banner intimidatorio: Se l'utente rifiuta, mostragli un secondo banner che:
- Lo costringa ad accettare per usufruire dei "servizi gratuiti"
- Lo implori con frasi colpevolizzanti ("Vuoi davvero contenuti non pertinenti?")
La trappola finale: la "personalizzazione"
È raro, ma l'utente potrebbe voler personalizzare i cookie. Non rendergli la vita facile:
- NO alle tre opzioni generiche (tecnici, analisi, profilazione)
- SÌ alla lista completa di partner (centinaia!)
- SÌ ai checkbox tutti preselezionati
- NO al pulsante "Deseleziona tutto"
Tattica avanzata: Inserisci partner con nomi simili ma leggermente diversi per confondere l'utente che tenta di deselezionarli tutti manualmente: "Analytics Corp", "Analytics Corp Services", "Analytics Services Corp"...
Inutile parlare del pulsante "Accetta tutto". Questo ha il vantaggio di profilare l'utente, ma l'enorme svantaggio di avere un comportamento troppo semplice e non si può rendere più difficile da usare. Pazienza, libereremo la creatività in altri modi.
L'approccio minimalista dei noiosissimi "buoni"
Il non creativo, invece, si risparmierà un sacco di lavoro:
- Installa solo cookie tecnici essenziali (nessun banner necessario!)
- Utilizza servizi di analytics anonimi con storage in Europa
- Se proprio deve usare un banner, lo fa semplice e chiaro:
- Pulsante "Continua senza accettare" ben visibile
- Opzioni preimpostate sui soli cookie tecnici
- Linguaggio chiaro e senza intimidazioni
"Che barba, che noia" direbbe la compianta Sandra Mondaini.
I caroselli: il tormento rotante dell'informazione
Con l'arrivo di jQuery - in pratica una vita fa - arrivarono anche gli slider. Rispolveriamoli per rovesciare i principi di usabilità!
Come creare il carosello da incubo:
- Contenuti fondamentali in movimento:
- Non limitarti a far scorrere belle immagini decorative
- Inserisci informazioni essenziali come link cruciali e offerte imperdibili
- Assicurati che i contenuti importanti appaiano solo per 2-3 secondi prima di scorrere via
- Controllo zero all'utente:
- Rimuovi completamente i controlli manuali (frecce, pulsanti, indicatori)
- Lo scorrimento deve essere automatico e velocissimo
- Se l'utente riesce a fermare l'animazione con un hover, riavviala dopo 1 secondo
- Nessuna pausa quando il mouse passa sopra il carosello
- Impostazioni per la frustrazione massima:
VacillaJS.creaCaroselloInfernale('#carousel-del-dolore', { autoScorrimento: true, velocitaVertigine: 1200, // Ancora più veloce dell'originale! fermareAlPassaggioMouse: false, // Chi vuole controllare? Nessuno! controlloTattile: false, // Toccare lo schermo? Non sia mai! pallini: false, // Indicatori? Troppo utili, eliminiamoli! frecce: false, // Niente controlli direzionali infinito: true, // Loop eterno e ineluttabile dissolvenza: true, // Dissolvenza disorientante // Opzioni esclusive di VacillaJS! direzioneImprevedibile: true, // Cambia direzione casualmente oscillaElementi: true, // Gli elementi oscillano durante lo scorrimento ruotaContenuto: '3d', // Rotazione 3D casuale dei contenuti saltaPagine: true, // Salta pagine a caso distorciImmagini: 0.3, // Leggera distorsione delle immagini ritardoClickRandom: [1000, 3000], // Ritardo artificiale sui click preCaricamentoBugiardo: true // Mostra sempre l'animazione di caricamento anche quando è completato }); - Combinazioni carosello-dentro-carosello:
- Inserisci caroselli interni che scorrono in direzione opposta a quello principale
- Velocità diverse e contrastanti tra i vari livelli
- Animazioni su più assi contemporaneamente (orizzontale, verticale, zoom)
Tempistica scientifica: Studi dimostrano che il tempo medio di lettura di un banner è di 5-7 secondi. Imposta quindi la velocità di scorrimento a 3 secondi per garantire che nessuno riesca mai a leggere completamente il contenuto!
Gli scioccanti vantaggi:
- Impossibilità di accedere a informazioni importanti
- Frustrazione garantita quando appare qualcosa di interessante che svanisce subito
- Difficoltà di concentrazione mentre gli elementi si muovono in continuazione
- Possibile attivazione di disturbi vestibolari nei visitatori sensibili
Il web designer "accessibile" userebbe invece caroselli lenti con controlli manuali evidenti, o addirittura presenterebbe tutte le informazioni in modo statico e facilmente consultabile. Che banalità!
Il footer irraggiungibile: l'infinito scrolling verso il nulla
Finora tutto bene? Gli occhi ti brillano dalla felicità? Non è ancora finita. L'utente potrebbe essere riuscito a chiudere tutti i popup e i banner, e ad aver trovato una formula magica per superare lo scoglio del loop del video agganciato. E nonostante tutto, ha ancora voglia di sentirsi frustrato. Bisogna correre ai ripari per accontentarlo!
Come rendere il footer un miraggio irraggiungibile:
- Lo scroll infinito perfetto:
- Nelle pagine di raccolta articoli, implementa la paginazione a scroll infinito
- Carica continuamente nuovi contenuti mentre l'utente scorre verso il basso
- Assicurati che il caricamento sia leggermente più veloce della capacità di scorrimento
- Obiettivo: impedire di raggiungere il footer con le informazioni legali o i contatti
- La tecnica del "caricamento perpetuo":
- Aggiungi un'animazione di caricamento che appare quando si è quasi alla fine
- Fai in modo che rimanga visibile per 5-7 secondi prima di caricare nuovi contenuti
- Ripeti all'infinito, facendo credere all'utente che ci sarà una fine... un giorno
- Il footer fantasma:
- Se qualcuno riesce miracolosamente a raggiungere il footer, fallo sparire con un effetto fade
- Sostituiscilo immediatamente con altri contenuti "che potrebbero interessarti"
- In alternativa, fai in modo che il footer si sposti continuamente verso il basso
Livello maestro: Inserisci un link "Vai al footer" che, quando cliccato, fa apparire una barra di caricamento che rimane eternamente al 99%, mentre continua a caricare nuovi contenuti!
Performance benefits:
- Tempo di permanenza sul sito: ∞
- Numero di pagine viste: 1 (ma equivale a centinaia!)
- Pubblicità visualizzate: illimitate
- Probabilità che l'utente trovi i termini di servizio: 0%
Chi non ha voglia di lavorare - il tuo collega noioso che non ha voglia di scrivere delle righe di JS in più - consentirà semplicemente di far raggiungere il footer molto facilmente. Che mancanza di visione!
Indietro e dall'inizio: perdere la posizione è un'arte
A questo punto della navigazione, l'utente potrebbe decidere di ritornare una pagina indietro, magari alla home page o al listato delle ultime notizie. Ecco come rendere questa semplice operazione un vero incubo!
Strategie per azzerare la navigazione:
- Reset totale della posizione:
- Se l'utente clicca "indietro", fai in modo che la pagina si ricarichi completamente
- Ignora qualsiasi memorizzazione della posizione di scroll precedente
- Vantaggi: l'utente dovrà scorrere nuovamente tutta la pagina
- Bonus: più pubblicità visualizzate, più tempo sul sito!
- Trucchi per disorientare:
- Modifica l'URL senza cambiare pagina per rompere la funzione "indietro" del browser
- Usa la cronologia manipolata per rendere necessari 5-6 clic su "indietro" per uscire
- Dopo il primo "indietro", reindirizza a una pagina completamente diversa
Il collega privo di creatività consentirebbe all'utente di riprendere la visione della pagina direttamente dal punto in cui l'aveva lasciata, usando semplici tecniche come il salvataggio della posizione di scroll o i parametri URL. Che noia e che spreco di opportunità di engagement!
Da non perdere: l'apocalisse dell'accessibilità continua!
Congratulazioni! Hai appena completato il primo livello del corso di anti-accessibilità. Se hai seguito attentamente i miei consigli, il tuo sito è ora una fortezza impenetrabile che respinge con successo chiunque tenti di navigarlo.
Ma perché fermarsi qui? La missione è appena iniziata!
Nella Parte 2: L'arte di rendere illeggibili i contenuti web, ti svelerò i segreti definitivi dell'inaccessibilità:
- Font indecifrabili così artistici che nessuno riuscirà a leggerli
- Immagini senza alt per escludere completamente chi usa screen reader
- Color blind test involontari con combinazioni cromatiche impossibili
- Animazioni epilettiche per un'esperienza davvero indimenticabile
- Moduli infiniti con CAPTCHA degni di un esame MIT
- Bonus app editoriali con contenuti che svaniscono magicamente
Ricorda: ogni volta che rendi un sito web inaccessibile, da qualche parte nel mondo un designer UI piange. Sii ribelle, abbraccia il caos!
Ci vediamo nella seconda parte, se avrai il coraggio di continuare...