404-sivu – Parhaat käytännöt ja suunnitteluinspiraatiota
Jos et vielä tunne termiä, 404-virhesivu on sivu, jonka tehtävänä on ilmoittaa käyttäjälle, että linkki, jota hän on yrittänyt käyttää, on rikki tai sitä ei ole olemassa. Sanomattakin on selvää, että 404-virhesivutuloksen saaminen ärsyttää jokaista sen kokevaa käyttäjää.
Jotta tämä tapahtuma olisi käyttäjien siedettävämpi, monet web-sivujen suunnittelijat ovat ryhtyneet räätälöimään 404-virhesivuaan niin, että se näyttää "hauskemmalta" ja ainutlaatuisemmalta. Yleensä he tekevät tämän käyttämällä huumoria, nokkeluutta ja muotoilua, joka sisältää luovaa omaperäisyyttä sivulleen.
Jos sinulla on myös suunnitelma suunnitella oma 404-sivusi tällä tavalla, jo tehtyjen räätälöityjen 404-sivujen esimerkkien katsominen voi toimia sinulle mukavana inspiraationa. Siksi olemme päättäneet jakaa luettelon nokkelista ja ainutlaatuisista 404-virhesivuesimerkeistä, jotka voivat auttaa sinua luomisen aikana.
Miltä 404-virhesivun pitäisi näyttää
Ensin mainitaan joitakin ominaisuuksia, jotka mielestämme mukautetulla 404-virhesivulla pitäisi olla. Monet vaikutusvaltaiset verkkosivustot ovat itse asiassa soveltaneet joitain näistä strategioista.
1 Sen tulee vastata verkkosivustosi yleistä tyyliä
Jos kysyt meiltä, tämän pitäisi olla turhaa. On niin monia WordPress-teemoja, jotka on erityisesti tehty sopimaan tietyn yritystyypin tunnelmaan tai sivuston mainostamien palveluiden tai tuotteiden luonteeseen. Siksi on luonnollista, että muokkaat 404-sivusi ulkoasua sekä verkkosivustosi mallin että verkkosivustosi yleisteeman mukaan. Jos olet esimerkiksi ravintolasivusto, joka on erikoistunut fine dining -ruokailuun, olisi hyvä sisällyttää 404-virhesivullesi kuva hienolta näyttävästä ateriasta sekä sen nimi. Näin vierailijasi eivät ainakaan unohda, että tarjoat hyvää ruokaa, huolimatta heillä tällä hetkellä kohtaamista haitoista. Kiitos monien ilmaisten varastosivustojen ja lukuisten vektorikuvia sisältävien resurssien ansiostavoit parantaa 404-virhesivusi ulkoasua tarpeidesi mukaan.
2 Sen pitäisi sisältää jonkinlainen anteeksipyyntö
404-virhesivun ponnahdusikkuna ei ole vain ärsyttävää, se on myös jotain, mitä ei olisi pitänyt alun perin tapahtua. Tästä syystä on aina hyvä idea sisällyttää virhesivullesi jonkinlainen anteeksipyyntö, jossa painotat olevasi jollain tavalla todella pahoillasi käyttäjän vaivasta.
3 404-virhesivulla tulisi olla hakupalkki
Tämä voi olla myös hyvä käytäntö. Jos lisäät hakupalkin 404-virhesivullesi, se voi saada käyttäjät pysymään verkkosivustollasi jatkaakseen tutkimista.
4 Harkitse linkin lisäämistä
Kuten hakupalkki, hyödyllinen linkki voi tuottaa enemmän hyötyä kuin haittaa. Tämä voi olla mikä tahansa tärkeänä pitämäsi linkki, kuten blogisi, yhteystietosivusi tai jopa kotisivusi. Lisäksi linkin lisääminen WordPressiin on erittäin helppoa.
5 Kevennä sitä huumorilla
Mainitsimme jo huumorin aiemmin. Olipa se sitten nokkelaa, itseään tuhoavaa tai pelkkää outoa, huumorin käyttäminen tällaisissa tilanteissa voi todellakin parantaa mielialaa tai vierailijaasi. Kuka tietää, rento ja komediallinen lähestymistapasi voi jopa johtaa siihen, että heillä on positiivisempi kuva brändistäsi yleisesti.
Lyhyesti sanottuna, jos sinulla on hyvä idea nokkelasta linjasta, joka voi mennä 404-virhesivullesi, älä epäröi lisätä sitä, sillä monet ovat tervetulleita humoreskille asenteille. Ja vaikka kävijät eivät pidä sitä hauskana, on aina parempi pitää asiat rennosti kuin olla konemaisia .
Voit myös määrittää uudelleenohjauksen 404-virhesivullesi. Jos esimerkiksi tapahtuu virhe, sivusi voidaan vain ohjata etusivullesi. Tämä ei kuitenkaan ole paras ratkaisu, koska jos kotisivullasi on jotain vikaa, olet palannut alkuun.
Mutta ennen kuin sukeltat parhaisiin valmistamiimme esimerkkeihin, käytä hetki muistisi virkistämiseen 404-sivun rakentamisesta WordPressissä:
Virhe 404 -sivun inspiraatiovalinnamme
Nyt kun tiedät, mitkä elementit voivat tehdä hyvän 404-virhesivun, tarjoamme sinulle myös esimerkkejä 404-virhesivuista, jotka ovat kiinnittäneet huomiomme huumorintajullaan ja suunnittelunsa kokonaisvaikutuksella.
Toivottavasti tämän 404-virhesivun ulkonäkö ei kuvaa sitä, kuinka reagoit, kun kohtaat tämän ongelman. Pixar on päättänyt lisätä Sadness-nimisen hahmon suositusta vuoden 2015 Inside Out -kuvasta viestillä, joka neuvoo sinua olemaan ottamatta tällaisia asioita liian henkilökohtaisesti. Emme voineet olla enempää samaa mieltä.
Uuden brändi-identiteetin ja designin lanseerauksen jälkeen Mailchimp on muuttanut myös virhesivunsa ulkoasua. Sähköpostiuutiskirjepalveluihin erikoistunut verkkosivusto on päättänyt sisällyttää epätavanomaisen kuvan aasista, jonka pää on haudattu syvälle kuoppaan, mikä osoittaa, että se on etsinyt sivuston jokaisesta rakosta, eikä sivua yksinkertaisesti löydy. No, on ilmeistä, että aasi todella yritti parhaansa löytääkseen tuon sivun sinulle, joten ei todellakaan ole mitään syytä turhautua siihen.
Tämä ammattimaiseen valokuvaukseen perustuva verkkosivusto on erikoistunut muotokuvien kuvaamiseen vastasyntyneistä vauvoista, häistä ja muista perheisiin liittyvistä tapahtumista. Joten on vain sopivaa, että he ovat päättäneet sisällyttää 404-sivulleen kuvan tahriintuneesta taaperosta, joka raivoaa. Vaikka kuvasta käy ilmi, että lapsi on päätynyt syömään kakkua, teksti viittaa hienovaraisesti siihen, että etsimäsi sivu on myös syöty. Mutta kuinka voit suuttua itkevälle lapselle? Se oli vain utelias ja päätyi ahmimaan sivusi vahingossa!
Blizzard Entertainmentin 404 sivun suunnittelussa on käänne. Rikkoutuneen ikkunan ja vääristyneen valikon (joka muuten toimii edelleen) lisäksi on viesti, joka syyttää käyttäjää virheestä. He olivat hieman rohkeita lähestymisessään, koska tämä on ehdottomasti muutos tavallisiin anteeksipyyntöihin, jotka yleensä ponnaavat virhesivuille. Se on kuitenkin edelleen ainutlaatuinen ja virkistävä, joten se varmasti saa ainakin joitain ihmisiä huvittumaan tästä odottamattomasta pöydän käänteestä.
Angry Birdsin antagonistin näkeminen täysin kukistetun tämän pelin virallisen verkkosivuston näytöllä vain siksi, että sivua ei löydy, voi todellakin lohduttaa sitä katselevaan henkilöön. Loppujen lopuksi se ei ole kukaan muu kuin Bad Piggy, joka voi liittyä onnettomuuteen.
Flywheel on yritys, joka on erikoistunut auttamaan kehittäjiä ja suunnittelijoita WordPress-sivustojen rakentamisessa. Heidän 404-sivunsa on luonteeltaan yksinkertaistettu, mutta sisältää muutamia kiinnostavia web-suunnitteluelementtejä. Siellä on "tämä todella paskaa!" viesti, joka on itse asiassa näppärä sanapeli, kun otetaan huomioon, että numero nolla on itse asiassa animoitu musta aukko, joka on imenyt sisäänsä kannettavan tietokoneen, jonka sivu on rikki.
Jokainen hyvä UX-suunnittelija ymmärtää, että vaikka keskityt ratkaisemaan ensin käyttäjän suurimmat ongelmat, sinun on myös mukauduttava, kun ne menevät käsikirjoituksen ulkopuolelle. Siksi carwow’n vaatimattomat ihmiset loivat mahtavan 404-sivun, joka sisältää kilpa-ajopelin, kun sivut eivät lataudu suunnitellusti.
Brittihuumori on usein ominaista, ettei se ota itseään liian vakavasti. Yrityksen omistajat ovat itse brittejä, joten tässä tilanteessa he itse asiassa tunkeutuvat itseensä. He ovat tehneet sen piirtämällä kaksi hienoa hahmoa, jotka ovat syvästi uppoaneet keskusteluun sivusta, joka ei toimi. Koko ajan he neuvovat käyttäjää siitä, mitä hänen pitäisi tehdä seuraavaksi käyttämällä brittiläisiä lauseita, jotka kuulostavat tässä yhteydessä suorastaan koomisilta.
Henkilökohtaisesti menetimme sen, kun he kutsuivat sivua "Neljasataa ja neljänneksi virheviestiksi" ja kun he kommentoivat, että "heidän web-hovimestari korjaa heidän virheensä umpikujassa".
Slack on yhteistyöalusta, joka auttaa yrityksiä ja yrityksiä työskentelemään yhdessä ja etenemään. Mutta jos päädyt heidän 404-sivulleen, pidä itseäsi todella eksyksissä. Heidän virhesivullaan on kaunis animaatio, joka myös liikkuu, jos vedät hiiren osoitinta näytön poikki. Vaikka se on visuaalisesti kiinnostava, tämä on esimerkki sivusta, joka ei liity mitenkään verkkosivuston sisältöön, mutta joka silti tekee tehtävänsä hyvin.
Inspiroidu ja valmistaudu kokeilemaan
Kuuluisten tuotemerkkien käyttämien huolellisesti luotujen 404 sivun esimerkkien lisäksi on monia muita upeita malleja, joihin voit kääntyä. Nämä ovat suosikkejamme, jotka ovat kokeneiden taiteilijoiden suunnittelemia kiinnittäen huomiota kaikkiin yksityiskohtiin.
Lena Zaytsevan suunnittelema malli on loistava esimerkki interaktiivisesta, epätyypillisestä 404-virhesivun asettelusta. Minimaalinen, mutta tehokas se yhdistää valkoisen ja keltaisen värin animoituihin teksteihin. Web-sivuston nimessä olevat sanat on erotettu toisistaan "404". Samanaikaisesti pääviestisi ja paluupainike ilmestyvät sivun alareunaan. Tämä ratkaisu sopii erinomaisesti ärtyisälle verkkosivustolle ja luoville markkinarakoille.
Vaikka tämä 404-sivu saattaa aluksi vaikuttaa yksinkertaiselta, se on hyvä esimerkki siitä, kuinka yksinkertaisuus voi olla tehokasta. Hallitseva sininen värisävy ja älykäs 3D-kuvitus osoittavat, että alkuperäiset, epäperinteiset 404-sivut voivat tehdä todellisen eron. Jos haluat online-esityksen erottuvan joukosta, tämä voi olla oikea valinta.
404-virhesivut saavat meidät enimmäkseen tuntemaan, että olemme eksyneet avaruuteen. Tähän metaforaan perustuva tämä 404-sivuesimerkki on tehokas tapa ohjata verkkosivuston vierailijat kotisivulle. Ihana grafiikka ja litteät elementit ovat tämän mallin pääpaino. Jos haluat 404-sivun, joka on pieni taideteos ja joka sopii täydellisesti mihin tahansa luovaan verkkosivustoon, älä epäröi kokeilla tätä asettelua.
Caroline Leen suunnittelema rohkea 404 sivun asettelu sopii loistavasti kaikille, jotka pitävät retrosta, monivärisestä tyylistä. Tämän mallin tunnelma tuo mieleen pioneerivideopelit ja vanhan hyvän television aikakauden. Sekoitus kirkkaita värejä, kuten vaaleanpunainen, keltainen, sininen ja vihreä, sekä eri kokoiset muodot sopivat mihin tahansa suunnittelu- tai pelistudioon.
Jos on yksi sana, joka kuvaa tätä asettelua, se olisi keltainen! Amerikkalaisen pop-taiteen estetiikasta inspiroima 404-esimerkki yhdistää kaksi keltaisen sävyä, ikonisia pisteitä ja raitoja. JOS haluat tuoda taidetta tälle sivulle, tämä on oikea tapa.
Yksinkertaisuus joskus niin paljon tarjottavaa. Tämä malli on paras todiste. Vasemmalla puolella on kuva kitaristista, jolla on kitara, jonka kieli on katkennut. Tämän kuvan vahva symboliikka sopii täydellisesti 404-virhesivun kontekstiin. Toisella puolella on yksinkertainen viesti, jossa on Palaa takaisin -painike.
Jo olemassa olevien 404-virhesivujen katsominen voi olla hauskaa, mutta niiden tekeminen voi olla täysin erilainen tarina. Se vaatii myös nokkeluutta, luovuutta ja hieman ennakkoluulotonta toimiakseen. Toivomme kuitenkin, että jotkut ehdotuksemme auttavat sinua saamaan hyvän etumatkan.