Forbedre 404 Page Design

Hvis en besøkende får se standard 404 feilsiden, er det fare for at de ikke vil henge lenge for å se hva annet nettstedet ditt tilbyr. En egendefinert 404-side, en innbydende og nyttig, vil oppmuntre de besøkende til å se nærmere på nettstedet ditt i stedet for å drive utenfor andre steder.

Forhåndsvis bilde fra Tuts + 404-siden.


Vårt mål: Å forbedre standard 404-siden!


Hva er galt med en rettferdig 404-side?

Det enkle svaret er mye. En 404-side som bare sier "Side ikke funnet", er ikke nyttig for den besøkende i det hele tatt - å legge til en lenke som sier "Return to Homepage", hjelper egentlig heller ikke.

Mangelen på en anstendig 404-side svekker brukeropplevelsen. Brukere som prøver å finne en side på nettstedet ditt, men får url feil, eller sendes der med en ødelagt link, vil være pålagt å gå tilbake til hjemmesiden og prøve igjen. Hvis de fortsatt ikke kan finne det de lette etter, kan de ende opp med å bli frustrert og forlate nettstedet ditt. I en ideell verden vil brukere ikke bli konfrontert med feil i det hele tatt, men 404-siden gir oss i det minste muligheten til å be om unnskyldning og hjelpe brukerne med å finne det de lette etter. En tilfreds bruker er mer sannsynlig å returnere i fremtiden.

Enda verre enn en dårlig 404 side er den totale mangelen på en. Brukeren har da ingen anelse om hva som skjer i det hele tatt, og det vil ikke engang være en link tilbake til hjemmesiden. Mangelen på en 404-side vil gjøre nettstedet ditt ser uprofesjonelt og vil bare oppfordre besøkende til å forlate.

Dette er et eksempel på en dårlig 404-side. Den ene innløsende funksjonen er hjemmesiden lenken, og det ser ikke så bra ut heller. Hvis din 404 side ser slik ut, trenger den forbedring!


Rom for forbedring

En stor del kan gjøres for å forbedre 404-siden fra oven.

Nøkkelfaktoren for en 404 feilside er å gjøre det enkelt og forståelig for brukeren. Gjør det klart at siden de lette etter, ikke eksisterer (det hjelper med å bruke språk som er lett å forstå og sjargong gratis). Prøv å forklare hvorfor den ikke eksisterer, har siden flyttet? Oppgi hva problemet kan være, på en vennlig og innbydende måte.

Beklager, partner. Siden du ba om, er ikke i vår database. Du har kanskje fulgt en dårlig ekstern lenke, eller feil-skrevet en nettadresse. - En liste Apart 404-side

Ikke gjør 404-opplevelsen til en stor, dårlig prøvelse. Gjør det til en vennlig, positiv opplevelse!


Tips 1: Oppretthold designkonsekvens

Det er viktig at designen på 404-siden din holder seg til resten av nettstedet ditt. Dette inkluderer din logo, navigasjon, fargevalg osv. Å ha en 404-side som er helt uavhengig av resten av nettstedet ditt, kan få brukeren til å føle seg som om de har blitt angitt - ved å opprettholde ditt merke, vil 404-opplevelsen ikke føles som et slikt drama. Brukeren vil fortsatt føle seg involvert med nettstedet.

De av dere som har spilt med kvidens Bootstrap, vil gjenkjenne deres kjente merkevarebygging, selv på 404-siden.


Tips 2: Gjør det så nyttig som mulig

Som vi fortsatt nevner, må en 404 side være svært nyttig for brukeren. Det er mange måter å oppnå dette på, men noen av de beste funksjonene en 404 kan ha er:

  • Et søkeskjema
    Å ha et søkeskjema på 404-siden din, sørger for at brukeren føler seg tilbøyelig til å fortsette å søke det de lette etter - og dermed forbli på nettstedet ditt.
  • En lenke tilbake til hjemmesiden
    Dette er nøkkelen til en 404-side, men hvis du har beholdt nettstedets design og navigasjon, vil dette ikke være et problem, siden det allerede burde være en link i navigasjonen din.
  • Vis en liste over populære sider
    Spill oddsen. Kanskje var brukeren på jakt etter en av dine mer populære sider, i så fall ville det være nyttig å se en liste over dem for rask referanse.
  • En kobling til ditt nettstedkart
    Å gi en lenke til sitemapet ditt (forutsatt at det er nyttig og lett å forstå også) kan være nyttig. På den måten kan en bruker bla gjennom alt på nettstedet ditt og forhåpentligvis finne det de lette etter. Et søkeskjema håndterer dette mye bedre, men en sitemap-link er fortsatt en god sikkerhetskopi. Alternativt kan 404-siden din inneholde en del av sitemapet ditt. Hvis dette er det du velger, må du huske å holde nettstedets tema og design intakt.
  • Har problemsspesifikke feil sider
    Hvis en bruker blir brakt til din side på grunn av for eksempel et mislyktes brukernavnssøk eller feil formdatainngang, må du gjøre denne feilskjermen like nyttig. Gi enkle måter å søke på nytt eller vise relaterte sider.
  • Rapporter en ødelagt link
    Å ha en enkel måte for en bruker å rapportere en ødelagt lenke er også nyttig - spesielt for deg! Dette kan være i form av en knapp som sender den ødelagte linkadressen til deg, eller et enkelt e-postskjema.

Rapporter ødelagte koblinger på NYT

Tips 3: Vær vennlig og forståelig

Ikke anta at brukerne vet hva en 404 feil er. Du må forklare hva problemet er på en enkel, vennlig og forståelig måte. På den måten vil en bruker ikke føle seg forvirret av jargonget ditt. Det er bedre å si noe som "Oops! Vi kunne ikke finne siden du lette etter.", Enn å bare angi fakta, som "404 Feil: Siden ikke funnet".

Som bruker, som du helst vil se?

Apartmenthomeliving's 404 Page er ganske morsomt og uformelt. Best av alt, (selv om det ikke er synlig på bildet) forblir sidedesignet konsistent med nettstedets merkevarebygging, og det er mange koblinger for å oppmuntre de besøkende til å holde seg.


Tips 4: En minimalistisk design fungerer også ...

Å ha en minimalistisk, grunnleggende 404 feil side design kan fortsatt være effektiv.

Hvis du har et stort nettsted, for eksempel Google, med mange mange mulige relaterte sider, så er en 404-side med ting som sitemap-linker, populære sidelister eller et søkeskjema ikke særlig praktisk, og mest sannsynlig vil det ikke hjelpe brukeren mye uansett.

Googles 404-side er veldig minimalistisk, men fungerer bra. Det er fortsatt en link tilbake til hjemmesiden (Google-logoen), og den er skrevet på en vennlig og forståelig måte. Den fine tegningen bidrar også til å skape en avslappet og rolig atmosfære.

Selv om dette synes å gå imot alt som er sagt så langt, hvis det bare er for upraktisk å ha en avansert 404-side, så er en enkel, vennlig en like god.


Tips 5: Hold det uformelt

En god 404 side kan også være uformell, og til og med morsom.

Å skape en 404-side som er morsom og minneverdig, kan ha stor innvirkning på å holde besøkende på nettstedet. Også, hvis du har en spesielt morsom eller morsom 404-side som holder i folks sinn, kan de ende opp med å fortelle sine venner slik at folk med vilje søker etter det! Det var sikkert tilfelle med Githubs 404-side:


Sjekk ut den nyskapende bruken av parallaxbevegelse på Githubs 404-side

Github er forsiktig med å opprettholde de nyttige aspektene ved en 404-side, selv om de lyser humøret med humor.

Blizzard Entertainment 404-siden - definitivt morsomt, men fortsatt holder linkene for hjelpsomhet nederst, og (i noen henseender) samme nettsteddesign.

Ta en titt på denne videoen, funnet på nosh.com, og viser at det er god plass for humor (og etter produksjon!)

BuySellAds tar en lignende (men mindre arbeidsintensiv) humoristisk video tilnærming til siden deres.


Søkeresultater og 404 sider

Din splitter nye, godt utformede og nyttige tilpassede 404-side kan se bra ut og utføre perfekt, men det er akkurat den typen ting du ikke vil vises i søkeresultatene dine. Det er to måter å sikre at 404-siden din ikke kommer opp i søkeresultatene:

  • Pass på at webserveren returnerer en riktig, korrekt 404 HTTP-statuskode når en manglende side blir bedt om, så søkemotoren vil ignorere den.
  • Legg din 404-side til din robots.txt fil.

Den andre av disse to metodene kan også brukes til å stoppe søkemotorer fra å finne noen sider du ikke vil at de skal se - for eksempel 404-siden, dine back-end-PHP-filer (for eksempel påloggingsfunksjoner) og mer. Bare legg til nettadressen til robots.txt fil og last opp den til serveren din:

 Tillat: /404.html

Bruke 404-siden din

Det er veldig bra å ha en fin ny egendefinert 404-side som er nyttig for seerne, men det er åpenbart veldig viktig å sørge for at den faktisk brukes. For å sikre at serveren omdirigerer brukerne til 404-siden din (i stedet for bare å bruke standard), må du konfigurere .htaccess-filen din.

Konfigurering av .htaccess-filen for egendefinert 404-retning er ekstremt lett. For det første, finn .htaccess-filen på serveren din (den burde allerede være der, men hvis ikke, kan du bare lage en ny fil med det navnet) og åpne det. Legg til følgende linje med kode:

ErrorDocument 404 /404.php

Pass på at stien og filutvidelsen sammenfaller med 404-filen. Hvis filen skulle bli navngitt 404-error.html, og ble plassert i en "feil" -katalog, ville du endre koden slik:

ErrorDocument 404 /error/404-error.html

Nettlesere vil nå bli sendt til 404-siden din i tilfelle en 404-feil. Det er så enkelt!


Konklusjon

Så, nå vet vi at i stedet for standarden, kjedelig og unhelpful nettleser standard 404 side, er det i vår interesse å bruke tid på å skape våre egne 404 sider. Hvis de gjøres riktig, vil de bidra til å holde besøkende på nettstedet og i siste instans redusere studsene.


Ytterligere ressurser

  • Slik oppretter du en enkel 404 feil side for WordPress-temaer på Wptuts+
  • 30 av nettets kuleste 404 sider på Creative Bloq