Kto sme
Všetky články
Vyberte sekciu
Vyberte sekciu
Programovanie

Kurz tvorby chybových stránok 404

WebdizajnWebdizajn8/24/20218/24/2021

Stránka 404 by mala viac ako sa iba ospravedlniť za nesprávnu navigáciu na vašom webe. Ak chcete zvýšiť pravdepodobnosť, že sa ľudia vrátia na vaše stránky aj napriek vzniknutým nepríjemnostiam, mali by ste sa snažiť o úpravu tejto stránky. Ako na to? A ako to vlastne všetko sledovať a zabezpečiť, aby sa znížila miera, do akej sa chybová stránka ľuďom zobrazuje? To všetko sa dozviete v dnešnom článku.

Mnoho ľudí omieľa frázu: „Nejde o cieľ. Dôležitá je cesta.“ Títo ľudia hovoria pravdu - až kým nenarazia na prekážku.

Zlé odbočenie alebo zlá navigácia môžu niekoho obrať o hodiny cesty. Keď ste na misii, tak tie hodiny, počas ktorých sa snažíte nájsť to, čo hľadáte, by mohli pokaziť celý zážitok.

Nie vždy sa to musí skončiť katastrofou. Môže nastať príjemnejší scenár: zle odbočíte, ale po zastavení na neďalekej benzínovej stanici odchádzate s viac ako presným smerom do konečného cieľa. Podarilo sa vám tiež získať zadarmo zmrzlinový kornútok od milej staršej pani pracujúcej za registračnou pokladňou čerpacej stanice, pretože videla, že ste sa stratili ... a chcela vás rozveseliť.

Návštevníci webových stránok môžu častokrát zaradiť spiatočku. Nie vždy je to ich chyba. Mohli napísať nesprávnu adresu URL (bežné) alebo kliknúť na nefunkčný odkaz (naša chyba). Nech už sú dôvody akékoľvek, teraz ste zmiatli ľudí, ktorí chceli nejakým spôsobom interagovať s vaším webom, ale príliš sa im v tom nedarí. Môžete ich naviesť späť tam, kam ste chceli, aby po celú dobu šli, alebo ich môžete nechať frustrovaných a stratených. Potrebujú sa otočiť? Vystúpili zlým východom? Iba vy im to môžete povedať a najlepšie to urobíte prostredníctvom chybovej stránky 404.

Chybová stránka vašej webovej stránke 404 môže poskytnúť ktorýkoľvek z týchto scenárov, pokiaľ ide o nasmerovanie vašich návštevníkov na cestu zákazníkov. Nevýrazná stránka 404 dráždi vašich návštevníkov a umožňuje tak vašej konkurencii, aby vás o nich pripravila so svojimi lepšími stránkami. Nevýrazná stránka 404 má nudné posolstvo s minimálnymi vizuálnymi prvkami. Môže obsahovať iba nadpis v nudnom fonte: „Táto stránka neexistuje.“ To je ako keby sa vás vaši používatelia webu opýtali na cestu a vy ste im nepovedali nič iné ako „Nuž, to, čo hľadáte, tu nie je. Veľa štastia." Nič viac.

black, boring text about a 404 page on a white background

Aj značky, ktoré majú zdanlivo dômyselný branding, môžu zanedbať stránku 404!

Bohužiaľ, aj niektoré z najlepších svetových značiek používajú takéto stránky 404. Žiadna navigácia. Žiadny zaujímavý text. Nič, čo by odrážalo posolstvo ich značky. Návštevníci sú z tejto interakcie sklamaní ešte viac ako predtým.

Existuje však stránky 404, ktoré dokážu zaujať. Tieto stránky namiesto bieleho pozadia a nudného textu štandardnej chybovej stránke 404 využívajú príležitosť prehovoriť s používateľmi osobnejším tónom. Naraziť na skvelo spracovanú chybovú stránku je podobné, ako dostať nečakaný darček od priateľského človeka. Kvalitne spracované stránky 404 môžu presmerovať návštevníkov vašich web stránok mimo zmätok, ktorý ste im spôsobili, zlepšiť im náladu a nasmerovať ich na užitočnejšie stránky vášho webu.

Zoberme si napríklad Amazon. Na Dni Amazonu 2018 sa Amazon dozvedel z prvej ruky dôležitosť prepracovanej stránky 404. Iste, kupujúci boli stále frustrovaní, keď narazili na stránku 404. Viete si však predstaviť, o koľko viac by podráždení kupujúci boli, ak by stránka 404 vyzerala chladne a vôbec im nepomohla?

Bez ohľadu na to, akým tónom chcete prehovoriť alebo aký web dizajn chcete použiť alebo aký text napísať, skvelá stránka 404 sa stará predovšetkým o jednu vec: Ukľudňuje návštevníkov webu keď nenájdu to, čo potrebujú - hoci len na okamih - nasmeruje ich tam, kam potrebujú.

Aj keď sa stránky 404 veľmi líši, zdá sa, že tie najlepšie z nich robia minimálne dve veci dobre:

  • Podporujú celkovú značku a zasielanie správ spoločnosti;
  • Pomocou prehľadnej navigácie a podpory môžu úspešne presmerovať návštevníkov webových stránok na iné stránky.

Tématicky existuje niekoľko spôsobov, ako dosiahnuť „dokonalú“ stránku 404:

1. Vylaďte celkový tón

Ak obsah nie je silnou stránkou vašej značky, môže to byť o niečo ťažšie. Ak ste však už našli svoj tón pre správy vašej značky a pochopili, čo vaši zákazníci potrebujú, môžete veľmi rýchlo vymyslieť, ako ich môžete nečakane prekvapiť. Návštevníci budú sklamaní, keď sa dostanú na vašu stránku 404; nedostávajú to, čo chceli. Vaša nová web stránka 404 je príležitosťou ukázať, že vaša značka má za svojím marketingom ľudí, nie robotické, chladné a automatizované správy, ktoré používa konkurencia. Stručne povedané, dajte im viac než len správu „táto stránka nie je k dispozícii“ a jej varianty.

Bez ohľadu na tón, dobrá stránka 404 funguje kúzelne. Najlepší iluzionisti často uznávajú, že sú kúzelníci; nepredstierajú, že sú niečím, čím nie sú. Stránka 404 je na začiatku chybovou stránkou; kópia a vizuál to často odrážajú. A následne, ako každý správny kúzelník, aj dobrá 404 stránka odvedie pozornosť od problému a nasmeruje ju úplne inde. Spravidla sa to deje pomocou dobre sformulovaného textu, ktorý je zladený s vizuálnymi prvkami.

Tu sú niektoré témy / nálady, ktoré môžete na úspešnej stránke 404 využiť, aby ste uspeli.


Spravte si srandu

Vtip (dokonca aj banálny) dokáže zázraky, pretože zmierni nepríjemnosti. Pokiaľ však vaša značka nie je postavená na hrubom humore, je najlepšie robiť subtilnejšie vtipy, skôr lichotivým spôsobom, ako príliš zjavným a hrubým humorom. Tento príklad od spoločnosti Modcloth vytvára krátku slovnú hračku, ale zároveň udržuje ľahkú náladu.

Light pink background with dark pink text saying Oops! You were lookin' for love on all the wrong pages

Táto stránka 4040 je pohotová a v súlade so zvyškom zábavnej nálady tejto značky.


Buďte chytrý

Nemusí to byť úplne vtipné, ale je to niečo, čo si získa pozornosť návštevníkov takmer okamžite po príchode na vašu stránku. Môže to byť trochu drzé a neočakávané. Táto stránka 404 od spoločnosti Blizzard Entertainment odvádza skvelú prácu pri zmene nálady návštevníka, a to vizuálnym tónom, ale aj svojím textom.

Broken and cracked screen with copy that says Grats. You broke it.

Sarkazmus sa dobre vypláca na stránke herného giganta.


Buďte priateľský

Hlavným príkladom by bola stránka 404 spoločnosti LEGO Shop, ktorá pôsobí veľmi priateľsky. Prívetivosť môže vychádzať z príjemného webdizajnu alebo hrejivého textu. Nakoniec to všetko musí pôsobiť dojmom „Ach jaj, je nám to skutočne ľúto. Pokúsme sa to napraviť.“

Ak značka vašej spoločnosti vyniká v oblasti služieb zákazníkom a starostlivosti o zákazníka, možno by bolo najvhodnejšie využiť tón ozajstného priateľského vzťahu.

smiling LEGO figure behind a LEGO block with a computer


Integrujte interaktivitu

Ľudia radi klikajú na veci, najmä ak interagujú so stránkou 404 v počítači. A ak interagujú s vašim webovým serverom, o to lepšie! Jedným z najlepších príkladov interaktivity na stránke 404 je server Kualo. Poskytovateľ hostingu stránok vylepšil svoju stránku 404 na tému Space Invaders, doplnenú o možnosť zarobiť si ďalšie body. Ešte pôsobivejšie je, že Kualo skutočne ponúka zľavy na svojom hostingu za určité body, ktoré používatelia dosiahnu.

dark background with small ships aligned to spell the word KUALO

Vďaka tejto hernej téme Kualo sa používatelia radi vracajú na stránku 404, aby nazbierali viac bodov.


Podnecujte k premýšľaniu

Áno, vaše stránky 404 môžu byť dokonca vzdelávacie! Stránka 404 môže ponúkať zdroje a odkazy na ďalšie užitočné miesta na vašom webe. Je to neočakávané rozptýlenie, ktoré môže hostí ľahko zabaviť ďalšími informáciami. National Public Radio (NPR) to robí mimoriadne dobre. Poskytujú súbor možností s jednou hlavnou podobnosťou: príbehy sú o veciach, ktoré tiež zmizli.

White background with pictures of Amelia Earhart, Watergate hotel, and Jimmy Hoffa referencing articles about lost things


Aktuálna / založená na popkultúre

Túto tému používajte opatrne, pretože existuje veľká šanca, že budete musieť pravidelne meniť svoju stránku 404, ak chcete, aby bola aktuálna. Popkultára sa rýchlo mení; Ak si nedáte pozor, strávite priveľa času vývojom stránky 404, ktorá bude za dva týždne irelevantná. (A to je zásadný hriech pre každú organizáciu s cieľovým trhom mileniálov alebo mladších.) Nižšie uvedená stránka Spotify 404 nedávno prešla inováciou, aby držala krok s trendmi. Pred rýchlym uvedením diela „Kanye West“ „808 and Heartbreak“ obsahovala stránka 404 text piesne „Sorry“ od Justina Biebera.

pink background with record player spinning


2. Vytvorte vizuálne prvky zodpovedajúce danému tónu

Keď získate predstavu o správnom tóne svojej stránky 404, vizuály sú ďalším dôležitým krokom v tomto procese. Vizuály sú často prvým prvkom 404 stránky, ktorú si ľudia všimnú - a teda je to prvá reprezentácia požadovaného tónu tejto stránky.

Statický vizuál pomáha zdôrazniť textovú správu stránky. Pridanie odľahčenej animácie môže často spolupracovať s textom na rozšírení správy alebo tónu. Napríklad stránka 404 spoločnosti Imgur privádza svoje ilustrácie k životu tým, že oči jej postáv sledujú kurzor návštevníka.

portraits of animals with googly eyes on a red wall

Interaktivita s vizuálnymi prvkami dáva ľuďom príležitosť robiť to, čo frustrovaní používatelia internetu radi robia - kliknúť na všetko a pokúsiť sa tak dosiahnuť niečo užitočné.


3. Vylaďte navigačné možnosti

Viete, akým tónom má znieť vaše podnikanie. Získali ste predstavu o vizuále, ktoré by ste mali použiť na vyjadrenie tohto tónu. Návštevníci vášho webu si budú myslieť, že je to super a zábavné - ale iba na chvíľu. Váš web ich musí stále nasmerovať k tomu, čo hľadali. Prehľadná navigácia je ďalším dôležitým krokom k nasmerovaniu vašich stratených návštevníkov webových stránok k ich cieľom. Stránka 404, ktorá je síce roztomilá, ale nemá dobrý navigačný webový dizajn, je ako ten milý starý muž, ktorý je láskavý, ale dáva vám najhoršie možné rady.

Po vytvorení dobrého prvého dojmu so stránkou 404 by mal byť ďalším okamžitým krokom čo najrýchlejšie dostať zákazníkov z tejto stránky a dostať ich na stránku, na ktorej chceli pôvodne byť. Vždy by mali dostať jasné pokyny, kam ďalej majú pokračovať.

Napríklad stránka 404 spoločnosti Shutterstock ponúka tri odlišné možnosti. Návštevníci sa môžu vrátiť na predchádzajúcu stránku, čo je užitočné, ak kliknú na nesprávny odkaz. Môžu sa vrátiť na domovskú stránku, aby vo svojej navigácii opäť vykonali tvrdý reštart, alebo možno prišli z vyhľadávacieho nástroja a našli nefunkčný odkaz, ale nie sú pripravení úplne odíjsť z webstránky a chcú sa trocha rozhliadnuť. Poslednou možnosťou je nahlásenie problému. Ak niekto prehľadáva váš web už niekoľko minút a má predstavu o tom, čo hľadá, môže nahlásiť, že našiel problém. Prinajmenšom to zapojí vašich návštevníkov webu do interakcie s vašou spoločnosťou a váš vývojový tím dostane spätnú väzbu o prístupnosti vášho webu.

Little girl with mouth open wearing glasses

Okrem prehľadnej navigácie môžu tieto ďalšie prvky v navigácii stránky 404 ešte viac pomôcť vašim návštevníkom:

  • Chatboti / živý chat: Chatboti sú často vnímaní jedným z dvoch spôsobov. Používateľom sa zdajú neuveriteľne nepríjemní alebo relatívne nápomocní. Roboty, ktoré sa objavia v priebehu prvej sekundy od pristátia na stránke, sú často dôvodom, kvôli ktorému návštevníci úplne opustia web, pretože chatbot je rušivý. Váš web však môže používať chatbotov jednoduchým pridaním možnosti „Začť chat“. 
  • Panely vyhľadávania: Tento prvok dokáže s webmi s veľkým objemom stránok a informácií zázraky. Vyhľadávací panel môže tiež ponúknuť odpovede na bežné otázky alebo presmerovať na často kladené otázky.

A ešte jedna poznámka na záver - uistite sa, že tieto navigačné taktiky sú rovnako efektívne na mobilných zariadeniach aj na stolných počítačoch. S vašou stránkou 404 zaobchádzajte ako s ostatnými stránkami. Aby bola úspešná, interakcia na nej musí prebiehať hladko, hlavne u používateľov v mobilnom svete a dodržiavať zásady pre UX webdizajn.

Aj keď je vzhľad vašej stránky 404 kritický, v ideálnom prípade nikdy nechcete, aby ju niekto našiel na vašom webe. Poznanie najbežnejších chýb 404 na vašom webe by vám mohlo poskytnúť informácie o tom, ako jej zobrazovanie minimalizovať.


Ako sledovať udalostí 404 pomocou služby Google Analytics

Čo potrebujete na začatie sledovania

Vložený špeciálny kód bude hlásiť udalostí 404 v službe Google Analytics. Aby ste mohli využívať výhody tohto tutoriálu, musíte tam mať zriadený účet. Potrebujete tiež prístup k šablóne 404 svojho webu a (to je dôležité) stránka 404 musí zachovávať štruktúru URL adresy kliknutej alebo zadanej stránky. To znamená, že vaše 404 udalostí nemôžu presmerovať iba na vašu stránku 404. Šablónu 404 musíte dynamicky zobrazovať s presnou adresou URL, ktorá spôsobuje chybu. Väčšina služieb webového servera (napríklad Apache) vám to umožňuje pomocou rôznych pravidiel prepisovania.

Screenshots of tracking a 404 error


Meranie chýb 404 s Google Analytics

V službe Google Analytics je sledovanie explicitných chýb 404 rýchle a jednoduché. Stačí sa ubezpečiť, že je váš hlavný skript sledovania Google Analytics na mieste, a potom na svoju chybovú stránku / šablónu 404 pridať patričný kód.

Budete musieť vymeniť ID svojho konkrétneho účtu Google Analytics. Skript funguje tak, že do služby Google Analytics odošle „udalosť“. Kategória je „404 Odozva“, kde akcia pomocou JavaScript kódu predá adresu URL, ktorá spôsobí chybu, a štítok pomocou kódu JavaScript predá predchádzajúcu adresu URL, na ktorej sa používateľ nachádzal. Všetky tieto údaje potom umožňujú zistiť, ktoré adresy URL spôsobujú 404 udalostí a kde ľudia pristupujú k týmto adresám URL.


Sledovanie chýb 404 pomocou Google Tag Manager

Stále viac správcov webu sa rozhodlo prejsť na Google Tag Manager. Tento nástroj im dáva možnosť vložiť celý rad skriptov do jedného kontajnera. Je to obzvlášť užitočné, ak máte veľa sledovacích skriptov od niekoľkých poskytovateľov. Ak chcete začať sledovať 404 s pomocou Správcu značiek, najskôr začnite vytvorením premennej nazvanej „Premenná názvu stránky“. Tento typ premennej je premenná „JavaScript“ a názov premennej je „document.title“:

Page title variable, screenshots of tracking a 404 error

V zásade vytvárame premennú, ktorá kontroluje zadaný názov stránky. Takto skontrolujeme, či sme na stránke 404.

Potom vytvorte „Spúšťač“ s názvom „Spúšťač názvu stránky 404“. Typ je „Zobrazenie stránky“ a spúšťač sa spustí, keď „Premenná názvu stránky“ obsahuje „404 - Stránka sa nenašla“ alebo akýkoľvek iný názov vašej stránky 404, ktorý sa zobrazí v prehliadači.

Page title trigger, Screenshots of tracking a 404 error

Nakoniec budete musieť vytvoriť „značku“ s názvom „404 značka udalosti“. Typ značky je Všeobecná analytika“ a obsahuje nasledujúce komponenty:

404 event tagging, screenshots of tracking a 404 error

Premenná, spúšťač a značka slúžia na prenos relevantných údajov priamo do služby Google Analytics.


Hlásenie udalostí 404

Bez ohľadu na metódu sledovania (či už prostredníctvom Tag Manager alebo priamych event beacons), by vaše prehľady mali byť rovnaké v rámci služby Google Analytics. V časti „Správanie“ sa zobrazí položka s názvom „Udalosti“. Tu uvidíte všetky hlásenia 404 udalostí. „Akcia udalosti“ a „Označenie udalosti“ vám poskytnú príslušné údaje o tom, aké adresy URL spôsobujú chyby 404, a ich sprostredkujúci zdroj.

Screenshots of tracking a 404 error

Keď to budete mať zavedené, môžete pravidelne monitorovať chyby 404 a robiť potrebné kroky na minimalizáciu ich výskytu. Takto optimalizujete svoje zdroje a poskytnete najlepší UX zážitok používateľa, pričom udržujete konverzie a interakciu na vysokej miere.

Samozrejme, keď nemáte dostatočné skúsenosti s úpravami scriptov a nastavovaní meraní, obráťte sa na nás a radi vám pomôžeme.


Čo robiť s výsledkami služby Google Analytics

Teraz, keď viete, ako sledovať tieto chyby 404, čo ďalej? Kľúčové je pri sledovaní 404 chýb hľadať vzory, ktoré vedú k týmto chybám. Údaje by vám mali pomôcť určiť zámer používateľa a poskytnúť vám informácie o tom, čo vaši používatelia chcú. V ideálnom prípade uvidíte trendy v tom, čo privádza ľudí na vašu stránku 404, a tieto znalosti môžete použiť na zodpovedajúcu úpravu svojho webu.

Ak návštevníci vášho webu zakopávajú pri hľadaní stránky, využite príležitosť a vytvorte obsah, ktorý vyplní túto dieru. Takto ľudia dostanú niečo, čo na vašom webe predtým ešte nevideli.

404 udalostiam by sa dalo vyhnúť vylepšením webového dizajnu vášho webu. Zaistite, aby navigácia na vašich stránkach bola prehľadná a aby nasmerovala používateľov na logické koncové body. Oprava môže byť dokonca veľmi jednoduchá - zmena popisu na stránke, aby používateľ získal jasnejší obraz.


Spojiť všetko dokopy

Tón, obrázky a navigácia - tieto tri prvky môžu premeniť ktorúkoľvek stránku 404 z mŕtvej stránky na príjemnú zastávku pre návštevníkov vašich webových stránok. A hoci nechcete, aby tam zostali navždy, môžete ich predtým, ako ich pošlete na ďalšiu cestu, ubezpečiť, že s vami sa budú cítiť príjemne. Pravidelným sledovaním chýb 404 môžete zmierniť niektoré priepasti na vašej stránke, do ktorých používatelia občas padnú. Byť proaktívny a reaktívny s chybami 404 zlepšuje v konečnom dôsledku cestu a cieľ návštevníkov vašich webových stránok.

Ďalšie články