Pagine 404 creative: esempi da cui prendere spunto (e la mia)

Nessuno ricorda la pagina 404 di un sito di cui si è dimenticato tutto il resto. Eppure è uno dei pochi momenti in cui il visitatore si ferma, perplesso, e guarda davvero quello che c'è sullo schermo. Per questo alcuni siti ne hanno fatto un piccolo biglietto da visita: un'illustrazione, una battuta, a volte un gioco.

In questo articolo ti mostro alcuni esempi noti di 404 ben riuscite, ti spiego che cosa le rende tali e come farne una senza perdere visitatori. E ti faccio vedere la mia: provala qui, c'è un gioco.

Perché una 404 merita di essere curata

Un errore 404 è il momento in cui il sito deve "deludere" il visitatore: la pagina che cercava non c'è. È una piccola frizione, e come tutte le frizioni può far uscire o far restare. Una pagina nuda, con una scritta grigia e nessun link, dice che il sito non si è preoccupato di te. Una pagina curata dice il contrario: il sito ti aspettava anche qui.

Non è solo una questione di simpatia. Una buona 404 fa un lavoro pratico: spiega cosa è successo, evita il senso di colpa del visitatore e gli offre subito dove andare. La parte creativa serve a rendere tutto questo più piacevole, non a sostituirlo.

Se vuoi la parte tecnica (codici di stato, reindirizzamenti, SEO), la trovi in errori 404: cosa sono, perché contano e come gestirli. Qui parliamo di design.

Alcuni esempi da cui prendere spunto

Le rassegne di pagine 404 ricorrono spesso agli stessi nomi. Ecco alcuni degli esempi più citati, così come li descrivono le fonti. Le pagine di errore cambiano nel tempo: prima di dare per buono un esempio, aprilo e guardalo con i tuoi occhi.

• Lego. Un omino Lego con un'espressione preoccupata e un gioco di parole: il tono è quello del brand, giocoso, e l'errore diventa un'occasione per ricordare con che marchio si ha a che fare.
• Pixar. La pagina usa un personaggio di Inside Out, Tristezza, e suggerisce che la pagina sia stata persa nella memoria a lungo termine. È un esempio di come un riferimento che i fan riconoscono renda l'errore quasi un regalo.
• GitHub. Viene citata come prova che anche la semplicità, unita a un umorismo da sviluppatori, può bastare.
• Mantra Labs. Un astronauta animato che galleggia verso il numero 404, con un reindirizzamento automatico alla home dopo una decina di secondi.
• Dan Woodger. Il sito dell'illustratore mostra un hamburger sui pattini che regge un cartello di scuse: l'umorismo coerente con il suo lavoro.
• Novak Djokovic. La pagina chiede se stai cercando delle palline da tennis smarrite: un tema legato a chi è il titolare del sito.

Per altri esempi puoi sfogliare le rassegne di IONOS, UX Planet e Speckyboy.

Che cosa hanno in comune

Guardando questi esempi tornano sempre le stesse tre scelte.

• Il tema è del sito, non generico. Lego fa il Lego, Pixar fa Pixar, un tennista parla di tennis. Una battuta buona per tutti non fa ridere nessuno.
• L'errore non è colpa tua. Nessuno di questi esempi dice "hai sbagliato indirizzo". Il tono è sempre "è successo qualcosa, ti aiutiamo a ripartire".
• C'è sempre una via d'uscita. Anche la pagina più estrosa lascia un link o un pulsante per tornare indietro.

La mia 404: un videogioco

Sul mio sito ho scelto una strada più da sviluppatore: la pagina 404 è un piccolo videogioco, Bug Invaders. Chi sbaglia indirizzo non trova una scritta, ma un'invasione di bug da abbattere: ci si muove con le frecce, si spara con la barra spaziatrice, da telefono si trascina il dito. Ci sono punteggio, ondate, vite e un record.

Il tema è coerente con il mio mestiere, quello di chi i bug li combatte. E dà al visitatore smarrito qualcosa da fare mentre decide dove andare, invece di un vicolo cieco.

Sopra il gioco, però, ci sono le cose che contano davvero: un messaggio chiaro, i pulsanti per tornare alla home o vedere i servizi, e il menu del sito sempre visibile. Il gioco è il divertimento, non l'unica cosa che c'è.

Se vuoi vederla, apri la mia pagina 404. E se ti riesce di battere il record, mandami un messaggio.

Come progettare una 404 creativa che funzioni

Se vuoi farne una per il tuo sito, questa è la lista che seguo.

1. Lascia le basi. Messaggio chiaro, menu, pulsante per tornare alla home. Se il sito è grande, aggiungi una ricerca o i link alle pagine più utili.
2. Scegli un tono coerente. L'ironia va bene per un brand giocoso, non per ogni settore. Quando hai dubbi, resta sobrio e curato.
3. Non dare la colpa al visitatore. Meglio "questa pagina non c'è più" che "hai scritto male l'indirizzo".
4. Fai rispondere 404 davvero. Una pagina di errore che risponde 200 è una "soft 404" e confonde i motori di ricerca.
5. Tienila leggera. Immagini ottimizzate e, se c'è un gioco, caricato solo lì e solo nel browser. Una 404 non deve rallentare il resto del sito.
6. Pensa a tastiera e telefono. Un gioco o un'animazione devono potersi ignorare senza perdere i pulsanti per proseguire.
7. Controllala ogni tanto. Una pagina 404 che si rompe senza che nessuno se ne accorga è peggio di una banale.

Gli errori più comuni

• Una 404 che non è una 404: risponde 200 oppure reindirizza tutto alla home.
• Un disegno carino senza link per proseguire.
• Una battuta che non c'entra niente con il sito.
• Animazioni pesanti che rallentano il caricamento.
• Un testo che dà la colpa a chi ha cliccato.

Perché affidarlo a me

Programmo dal 1999, con più di 300 progetti consegnati e circa 30 agenzie come sviluppatore esterno. Quando costruisco un sito curo anche i dettagli che non si vedono a prima vista, come le pagine di errore, i messaggi e i percorsi di uscita, perché è lì che si capisce quanto un sito è stato pensato fino in fondo.

Se vuoi un sito dove anche l'errore è fatto bene, scrivimi: una chiacchierata di circa 20 minuti, senza impegno, e poi una proposta scritta e gratuita. Il servizio è in siti web che portano clienti.