Come puoi trasformare la pagina 404 in un contenuto di valore per il tuo sito web? Ecco i nostri consigli+ 30 ottime pagine 404 da cui prendere spunto.
Cosa troverai in questo articolo:
Come creare una pagina 404 personalizzata
Ogni pagina del tuo sito web è importante e dovrebbe essere curata in ogni dettaglio. E la pagina errore 404 non fa eccezione!
La pagina 404 viene mostrata alle persone che tentano di accedere quando si verifica un errore 404 not found, cioè quando una pagina o un’altra risorsa del tuo sito non è raggiungibile per uno di questi motivi:
- è stata rimossa o spostata;
- c’è stato un errore di digitazione dell’indirizzo (URL) nella barra di ricerca;
- il link che dovrebbe aprire la risorsa è corrotto e non funziona.
Per approfondire: Come risolvere l’errore 404 sul tuo sito web
Parliamo un po’ di come costruire al meglio la tua pagina errore. Se invece vuoi vedere subito 30 esempi di ottime pagine 404 vai direttamente qui.
Perché dovresti avere una pagina 404 personalizzata
Quando si genera una pagina 404 a causa di un errore 404 not found accade più o meno questo:
- Se il tuo sito è costruito in codice puro il server mostra una schermata generica che segnala l’errore;
- Se il tuo sito è in WordPress (oppure Drupal o Joomla) verrà invece mostrata all’utente una pagina 404 standard, solitamente in linea con il tema del sito web, ma poco elaborata e funzionale.
A cosa serve una pagina 404 personalizzata: su misura, originale e creativa
Hai ottenuto un clic ma la il tuo sito web è in stato di errore e mostra all’utente una pagina o un contenuto inesistente cioè qualcosa di completamente inutile: uno stop poco gradito che di solito fa scappare le persone.
Offrire un messaggio di errore o aggiungere al sito una pagina preimpostata del tema di WordPress che indica lo stato 404 è una pessima soluzione che nella maggior parte dei casi crea frustrazione e una pessima esperienza di navigazione.
Puoi fare di meglio!
Se si verifica un errore not found, cogli l’occasione per mostrare una pagina 404 personalizzata: gradevole e ricca di contenuti utili che possano incoraggiare a continuare a navigare il tuo sito.
Aiuta il tuo cliente a capire cosa succede e incoraggialo a riprendere la navigazione delle tue pagine web
I tuoi potenziali clienti apprezzeranno la tua chiarezza se comunichi loro che c’è un errore, in modo onesto e garbato. E se cogli l’occasione per creare un messaggio originale certamente si ricorderanno di te!
Anche Google nelle sue linee guida per l’ottimizzazione SEO dei siti web incoraggia l’uso di pagine 404 personalizzate e a misura di utente.
Come creare un’ottima pagina 404 personalizzata in 5 passaggi
- Prima di tutto una pagine 404 utile
- Non indicizzare la pagina 404
- Costruisci una pagina 404 coerente con il resto del sito
- Trasforma la tua pagina 404 in uno strumento di marketing
- Personalizza le tue pagine 404 con il copywriting
1. Prima di tutto una pagina 404 utile
Qualcuno ti sta offrendo la sua attenzione e ha scelto di visitare il tuo sito web. Se qualcosa non va dovresti spiegare in modo chiaro cosa succede e come puoi rimediare.
Il primo scopo di una pagina errore 404 personalizzata è quello di essere utile, cioè di comunicare in maniera chiara che si è verificato un errore 404 e mostrare percorsi alternativi per uscire dal vicolo cieco:
- Comunica chiaramente l’intento della pagina: segnala l’errore e le sue possibili cause;
- invita il tuo potenziale cliente di a riprendere il cammino: inserisci non solo un link per tornare alla home ma anche collegamenti ad altre risorse utili: spiega come contattare il servizio assistenza o aggiungi una barra di ricerca.
- Non creare un redirect automatico alla home page (o ad un’altra pagina del sito)! L’utente deve capire che c’è un errore 404 che stai tentando di risolvere oppure che il file che cerca non può essere trovato.
Quella di mostrare la home page in automatico al posto della pagina 404 è una pratica ancora abbastanza diffusa, sebbene Google sconsigli vivamente di usare in questo modo il redirect 301 (reindirizzamento automatico).
Se rinvii in automatico alla home l’utente non riesce a capire perché invece di vedere quello che cerca si ritrova ai blocchi di partenza. Personalmente, mi innervosisco quando mi succede di incappare in questa sorta strategia del “nulla è successo”.
Suggerisci un percorso alternativo riducendo la frustrazione di una strada senza uscita e trattieni l’utente sul tuo sito.
2. Non indicizzare la pagina 404
Anche se personalizzi la tua pagina 404 in modo da renderla utile, comunicativa e magari anche divertente non dovresti mai permetterne l’indicizzazione, per evitare che sia inserita nel database di Google e quindi mostrata fra i risultati di ricerca.
Per evitare che le pagine 404 vengano indicizzate assicurati che il tuo server restituisca un codice di stato HTTP 404 quando vengono richieste pagine momentaneamente mancanti o quando ci sono link non funzionanti.
Le pagine che non torneranno ad essere più disponibili dovrebbero invece essere segnalate con il corrispondente stato di errore http 410 gone.
Per approfondire : Come gestire al meglio l’errore 404 su tuo sito web
3. Costruisci una pagina 404 coerente con il resto del sito
La pagina errore 404 dovrebbe essere in linea con il design e co gli elementi e funzionali del tuo sito web.
Quanto alla grafica: può distinguersi totalmente oppure essere coerente con resto del sito e con il prodotto o servizio che offri. Queste scelta deve essere valutata con consapevolezza oppure rischi di disorientare l’utente senza raggiungere l’effetto sperato.
Non usare una pagina 404 completamente diversa dal resto del sito o che non sia in linea con l’estetica e le funzionalità delle tue pagine web
a meno che non si tratti di qualcosa che hai scelto di fare per sorprendere e stupire e quindi con una certa consapevolezza.
4. Trasforma la tua pagina 404 in uno strumento di marketing
Il primo scopo di una pagina 404 personalizzata è quello di trattenere l’utente sul tuo sito web. Ma puoi fare anche molto di più: puoi agganciare emotivamente le persone o promuovere i tuoi servizi e prodotti migliori mettendoli in evidenza.
Tutto quello che è utile a questo scopo può funzionare!
- coinvolgi emotivamente l’utente e fai in modo che si ricordi di te
- fallo sorridere, riflettere o diverti con una battuta
- fai vedere quello che sai fare o come riesci a comunicare usando una frase speciale o informale
Quali sono le tue ultime novità? E i post più letti del tuo blog? Puoi usare lo spazio della pagina 404 per suggerire una nuova strada per riprendere la navigazione o per mettere in evidenza il meglio di quello che offri.
5. Personalizza le tue pagine 404 con il copywriting
Sfrutta il potere delle parole!
Non sono sempre necessari virtuosismi grafici per creare una pagina errore 404 personalizzata di forte impatto.
Il modo in cui ti esprimi sulla tua pagina errore 404 conta moltissimo e la dice lunga sul tipo di rapporto che intendi stabilire con il tuo interlocutore, che poi, senza girarci in torno, è un potenziale cliente.
Devi dire le parole giuste per recuperare un rapporto che stava andando in malora. Puoi impostare la tua comunicazione verbale in molti modi diversi, anche sfruttando il potere di un tono poco formale ed emotivamente coinvolgente:
- assumiti la colpa del problema: evita formule generiche, banali o scontate e costruisci un messaggio piacevole per scusati e invitare l’utente a restare;
- fai una battuta per sdrammatizzare e avverti l’utente che ha sbagliato rotta o che la strada è senza uscita. In questo caso dovrai essere particolarmente cauto e brillante per non creare fastidio;
- non essere troppo formale;
- crea un copy che sappia colpire uscendo dagli schemi. Offri un messaggio inaspettato!
Puoi creare engagement e sorpredere le persone con un’immagine divertente o un’animazione originale ma anche “solo” o soprattutto con le parole.
Fra gli esempi di pagine 404 che sto per mostrarti ce ne sono alcune che giocano sul testo, con frasi e parole particolarmente azzeccate. Ma prima un riassunto di quello che ci siamo detti nei paragrafi precedenti:
Come creare una pagina 404 personalizzata (infografica)
30 esempi di pagina errore 404 da cui prendere spunto
Ti mostro una raccolta di pagine errore 404 che hanno fatto di necessità virtù, capaci di stupire e convincere. Sono molto diverse fra loro per grafica, modo di comunicare e struttura.
Ecco le 30 pagine errore 404 che ho scelto per te:
- Istock
- Medium
- Mailchimp
- Magento
- Airbnb
- Cocacola
- Cern
- DC
- Hubspot
- Harrods
- Lush
- Marvel
- Mulino Bianco
- Netflix
- Pennamontata
- Adidas
- Harry Potter
- Barilla
- Disney
- Lavazza
- Red Bull
- NASA
- Pixar
- Rummo
- Starbuks
- HBO
- Jackdaniels
- Etsy
- Ebay
- Elf on the shelf
1. Istock
La pagina 404 di Istock comunica chiaramente che c’è un problema e suggerisce un paio di alternative per uscire dal vicolo cieco. Colloquiale ed efficace!
2. Medium
Ecco un esempio di pagina errore tutta giocata sulle parole che non sonio solo ottimo testo scritto dal copywriting brillante, ma diventano anche elemento grafico.
Uso delle forme, scelta dei caratteri tipografici e ripartizione fra spazio piene e spazio vuoto: tutto funziona alla perfezione.
3. Mailchimp
La pagina 404 di Mailchimp è un ottimo esempio di come si possa sfruttare un copy fresco e leggero per colpire l’utente e farlo sentire considerato.
4. Magento
Utile e sobria la pagina di Magento che segnala in maniera ordinata ed efficace l’errore 404.
I box posti nella parte inferiore della schermata suggeriscono in modo intuitivo delle strade alternative da percorrere per riprendere la navigazione.
5. Airbnb
Ecco un esempio di pagina 404 ordinata, fresca ed efficace che mette in primo piano un elemento grafico colorata e attira lo sguardo sulle parole.
Molte (troppe) pagine 404 personalizzate esclamano “Oops!” e seguendo questa strada si può rischiare di proporre una comunicazione omologata e banale. Ma in questo caso la scelta funziona.
6. Coca cola
Coca-Cola propone un messaggio simpatico e poco formale.
Anche in questo caso la grafica è leggera e c’è un buon equilibrio fra testo e immagini, spazi pieni e spazi vuoti.
7. Cern
Una possibile strada per mostrare l’errore 404 è inserire nella pagina un’immagine che l’utente non si aspetta. Questa pagina dall’effetto wow contiene anche un link per riprendere la navigazione del sito.
8. DC
Per il sito che rappresenta un’azienda o comunque un’ attività creativa è importante mostrare una grafica che sappia sbalordire. Possibilmente qualcosa di graficamente in linea con quanto gli utenti si aspettano o amano.
Anche se non sei DC o un colosso dei fumetti puoi ispirarti a questo esempio di pagina 404 se ti occupi di grafica, sei un disegnatore o hai fatto della creatività la tua professione.
9. Hubspot
10 e lode per Hubspot che costruisce la sua pagina a regola d’arte: comunicativa, informale ma il linea con la grafica del sito e anche con il tone of voice del brand.
10. Harrods
Harrods offre un esempio di pagina 404 semplice con un tono formale, abbastanza efficace. Bella ed elegante la grafica di fondo. E c’è tutto quello che serve per riprendere la navigazione.
11. Lush
Questo è l’esempio di una pagina 404 asciutta e utile con tanti redirect a risorse alternative. L’insieme è molto ben costruito e organizzato per non disperdere l’attenzione dell’utente.
Basta un colpo d’occhio per tornare al sito.. senza troppi giri di parole.
12. Marvel
Se non sei Marvel ma promuovi nel tuo sito qualcosa di creativo puoi mostrare qualcosa di quello che sai fare. Questa pagina404 ha anche la particolarità di proporre diverse grafiche, a rotazione. Tanto che vorresti sbagliare di proposito a digitare l’indirizzo URL per poterle vedere tutte (Confesso, io l’ho fatto!).
13. Mulino Bianco
Un messaggio simpatico che valorizza la brand identity per la pagina 404 di Mulino Bianco che gioca su parole come “briciole” e suggerimenti “buoni” (da mangiare o da navigare?).
14. Netflix
Messaggio forse un po’ freddo per la pagina 404 di Netflix, ma l’immagine di fondo fa tutto il resto. Ottima l’idea di sfruttare una foto come sfondo, una strada che si può percorrere quando un disegno simpatico o una grafica informale non è adatta al tono di voce all’azienda.
15. Pennamontata
Simpatica e utile. In questo esempio di pagina 404 Pennamontata ci mette la faccia: stupisce e convince.
16. Adidas
Ho visto tante pagine 404 con immagini molto divertenti e particolari che però ho dimenticato.
Invece questa di Adidas mi è rimasta in mente per una semplice frase: “Never stop trying”, non smettere mai di provare! Mi ha ispirato e anche convinto a riprendere la navigazione. E non solo.
17. Harry Potter
Ti sei perso? Direi di si ma tutti qui aspettano. Non ti sembra il caso di rimediare, Harry Potter?
18. Barilla
A me è venuta fame. L’obiettivo di questa pagina 404 è stato centrato!
19. Disney
Comunicare l’errore 404 affibbiando la colpa all’utente è sempre una scelta da fare con cautela.
Se vuoi scegliere questa strada fai come Disney: stempera l’atmosfera con una battuta simpatica ma dal tono gentile.
20. Lavazza
Un messaggio simpatico e una tazza di caffè fumante per la pagina 404 di Lavazza. Non ti senti già pronto a riprendere la navigazione del sito?
21. Red Bull
Mi piace il messaggio della 404 di Redbull e anche l’idea di inserire un filmato che trattenga l’utente sul sito.
22. NASA
Il messaggio della pagina 404 della Nasa, è decisamente il linea con il sito web e molto originale: non puoi andare nello spazio ma puoi tornare alla home page.
23. Pixar
Ecco una fra le pagine 404 più famose, quella di Pixar, che usa uno dei suoi personaggi e un messaggio divertente per comunicarci che qualcosa non va.
24. Rummo
Bellissimo esempio questa 404 di Rummo. Puoi creare qualcosa di simile e giocare sul tuo prodotto migliore e inserirlo in modo insolito e originale nella tua pagine errore 404.
25. Starbuks
Sturbucks usa un’immagine particolare e riconoscibile per suggerire che quello che ti aspetti non c’è… ma può tornare disponibile se ordini un buon caffè.
Unica pecca di questa pagina è forse la parte testuale: i dettagli per riprendere la navigazione non sono leggibili perché i font sono troppo piccoli e privi di enfasi.
26. HBO
HBO propone una pagina 404 utile e pulita nel design. Apprezzo particolarmente la ripartizione degli spazi e anche i box in evidenza. Il copywriting è ben strutturato e tutt’altro che banale.
27. Jack Daniels
Un messaggio amichevole che crea empatia, in linea con il marchio e con l’atmosfera dell’immagine. Ottimo esempio di pagina 404!
28. Etsy
Misurata nel copywriting e ordinata nella grafica. Etsy offre un esempio di pagina 404 garbata e utile.
29. Ebay
Un mix perfetto di immagini e copy per la pagina errore 404 di Ebay che mette in risalto risorse alternative e comunica amichevolmente con l’utente, mostrando interesse e disponibilità.
30. Elf on the shelf
Utile, ricca di contenuto e divertente la pagina 404 di Elf on the shelf. Totalmente in linea con il brand e in grado di affascinare grandi e piccini. Chi non vorrebbe riprendere la strada per il Polo Nord?
Sono in chiusura. Ti va di dirmi quale fra queste pagine ti piace di più? Ne hai viste altre che mi vuoi suggerire? Lascia un commento.
Vuoi una pagina 404 personalizzata per il tuo sito web?
