Utforma error 404-sidan för att underhålla

Rum 404 på Scandic Hotell

I boken Webbstrategi för alla så ges ett antal tips på hur man utformar sin Error 404-sida för att den ska vara användbar och nyttig. Något som man däremot inte har plats med i en tryckt bok är att lista en massa exempel på hur dessa sidor kan tänkas se ut.

Dessa sifferserier är något man stöter på med jämna mellanrum. 404, 410 och siffror på 500-nånting. Alla är så kallade statuskoder från webbprotokollet HTTP, du vet det där som är i början på adresser på webben.

Vid min senaste resa till Stockholm fick jag rumsnummer 404. Döm om min nördiga förvåning när jag kommer fram på våning fyra och dörren finns där, dessutom fanns det ett rum bakom dörren 🙂

Roliga error 404-sidor

Boken Webbstrategi för alla visar bland annat hur Spotify har en söt maskot som avledningsmanöver och lindring av besökarens eventuella frustration, men i denna bloggpost tänkte jag visa ett gäng till med underhållande 404-sidor.

Se dessa som inspiration och fundera på vad du kan göra med din egen error 404-sida. Tyvärr kräver fortfarande många 404-sidor att man har Adobe Flash installerat, det är inte jättesmart då allt färre har det och att det definitivt inte fungerar för de som får 404 på sin mobiltelefon. En annan rätt vanlig blunder är att man missat att göra 404-sidan responsiv, så ibland är den både kul och givande om man nu surfar med webbläsaren i fullskärm. Men vem gör väl det?

Tekniksajter

Github

404 hos Github.com

Github är tjänsten där praktiskt taget alla öppen källkod-projekt huserar numera. Ibland döps projekten om och då landar man på denna 404-sida. Är inte riktigt säker på om de har någon egen Star Wars-referens med farkosten och det sandiga landskapet. Hur som helst så är det snyggt kodat med parallax skrollning när man rör muspekare över bilden.

Google Sök

404 på Googles sökmotor

Google har en robot som tycks ha monterat ner sig själv.

Airbnb tappar glassen

404 hos Airbnb

Airbnb gör den lilla ansträngningen och stoppar åtminstone in en bild så det händer något på deras error 404-sida.

CSS-tricks visar bakomliggande CSS-kod

404 hos css-tricks.com visar CSS-kod

Lite som att det gått hål på HTML-kodens känsliga duk och CSS-koden tittar fram.

Dropbox gör en variant av sin logga

404 hos Dropbox visar en omöjlig ram

Det är så man får ont i huvudet när man ser såna där skisser med omöjliga vinklar. Kreativt.

Tableau har hittat bigfoot

404 hos Tableau bevisar att bigfoot finns

Visualiseringsföretaget Tableau har hittat bigfoot i sin visualisering, det borde väl vara bevis på att de finns?

Sitevision skämtar med gnällbältet 🙂

404 hos Sitevision - CMS-företaget från Örebro

Jag är själv emigrerad från Örebro, den stad där Sitevision är stationerade. För dig som inte förstår gnällbältare så kan trääligt översättas till en mix mellan tråkigt och beklagansvärt. Och som alla vet har ju närkingar rykte om sig att gnälla mycket 🙂

Snyggt designad 404 hur som helst, av Petter Knutsson.

Livsmedel

ICA slår sönder en dator

404 hos ICA visar en frustrerad anställd som eldar upp en skärm

Som en variation på de vanliga klippen om folk som i ilska och frustration slår sönder sina datorer och skärmar så kan man se en ICA-anställd gå loss på en skärm ute på lagret. Basebollträ och inte minst trucken får jobbet gjort.

Onlinepizza har en magsjuk pizzabagare?

404 hos onlinepizza visar en ångerfull pizzabagare

Onlinepizza har i alla fall försökt, men jag kan inte riktigt tolka bilden de lagt som bakgrund. Det finns säkert de som tycker det är kul, men för min del påminner det mest om att pizzabagaren plötsligen blir sjuk.

Recept.se

404 hos recept.se

”Det du sökte har vi inte tillagat ännu” är ju ett fiffigt och kontextuellt sätt att säga att sidan inte finns.

Offentlig sektor

Sahlgrenska Universitetssjukhuset

404 hos Sahlgrenska Universitetssjukhuset

Den här råkade jag veta om att den fanns. Som sig bör så fokuserar de på att göra sidan användbar och i linje med webbplatsens syfte, men kostar också på sig att slänga in en GIF för att pigga upp. De två personerna på GIFen är Sahlgrenskas två webbansvariga.

Stockholms Läns Landsting (SLL) har ett gråtande dokument

404 hos SLL - Stockholms Läns Landsting

SLL har även de fokuserat på användbarheten med sin felsida, men det hindrade dem inte från att ha ett animerat dokument som snyftar och fäller några tårar.

Linköpings Universitet ger matematiklektion

404 hos Linköpings Universitet

Att det går åt pipan när man dividerar med noll känner jag allt för väl till som avdankad programmerare, men det smarta med denna 404-sida är ju att den talar till målgruppen.

Amerikanska rymdorganisationen NASA

404 hos NASA

NASA menar att orsaken till att sidan har försvunnit är för att den är bakom händelsehorisonten. Säkert skitkul för den som kan mer fysik än undertecknad, men åtminstone lämpligt att prata om något de är bra på.

Delstaten Delaware skämtar om sitt namn

404 hos delstaten Delaware i USA

Säkert ett billigt trick och något de som bor där ofta hör, men det kan inte höra till vanligheterna att offentlig sektor skämtar på detta sätt – det kan ju av tråkmånsar uppfattas som oseriöst.

Övriga sajter

IMDB plockar fram lämpliga filmcitat

404 hos IMDB ger filmcitat

Filmtjänsten IMDB slänger fram ett citat från någon film på sin 404-sida. Nästan så man har svårt att sluta ladda om sidan för att se vilka citat de lyckas få ihop.

Hillary Clinton bjuder på sig själv

404 hos Hillary Clinton när hon inte lyckas dra sitt kort

Hillary Clintons kampanjsajt för presidentvalskampanjen visar en GIF när hon misslyckas med att dra sitt kort för att öppna en passerkontroll. Det ser ut att kunna vara en tunnelbana.

IKEA Sverige briljerar, men tråkar ut internationellt

På svenska delen av IKEAs webbplats är det en person som bokstavligen målat in sig i ett hörn. Kanske kunde de inte hitta något motsvarande bildligt till den internationella webbplatsen där man inte på något viss tycks ha någon ambition.

Svenska scouterna

404 hos svenska scouterna

Jag gissar att det är en räv på bild, med anspelning på en firefox (eldräv). Eller så har scouternas glädje att klä ut sig i djurdräkter helt enkelt bara fått en plats på deras webbplats.

Comedy Central plockar fram sina karaktärer

404 hos Comedy Central visar upp Southpark-figur

CC varierar vilka rollfigurer de tar fram så det är lätt hänt att klicka på refresh-knappen några gånger.

The New Yorker och labyrinten

404 hos The New Yorker

En råtta som kommit bort sig i en labyrint, ja, varför inte.

Amazon visar upp de anställdas hundar

404 hos Amazon visar upp de anställdas hundar

Amazon väljer att på sin error 404-sida visa upp en ny hund per tillfälle man landar på deras 404-sida. Dessa hundar ”jobbar” på Amazon och de förklarar också att det finns hundgodis och fontäner i lämplig höjd för hundar. Varför inte berätta om vilken bra arbetsplats de har och att man är välkommen att ta med sig sin fyrbenta vän till kontoret.

Dilbert visar hur chefen blir lurad att Internet är fullt

404 hos Dilbert.com

Lämpligt att ha en särskild serie för just error 404 på Dilbert.

Kilroy tar det säkra kortet och visar upp en kattunge

404 hos Kilroy visar en kattunge

Katter är bevisligen aldrig fel på webben, i alla fall om man ska tro allt material som laddats upp på Youtube. Kilroy rider på den vågen och avleder ens uppmärksamhet från 404-sidan till en söt liten kattunge.

Men som sagt, det är också viktigt att ens Error 404-sida är användbar och korrekt utformad. Det är ett av många ämnen i boken Webbstrategi för alla – som du kan köpa hos Intranätverk eller av Bokus.