Funkčná webstránka predstavuje dôležitý nástroj vášho podnikania. Obzvlášť v prípade, ak je váš predmet podnikania e-shop.
Perfektný web v dnešnom svete predstavuje umenie. Je to ako maľba v múzeu, ktorú si denne prezerajú tisícky návštevníkov. V online svete je kritikom každý, nedostatky si ľudia ľahko zapamätajú a k vášmu dielu sa už nemusia vrátiť. Ak po vystavení zistíte, že niečo nie je v poriadku, zásahy si môžu vyžiadať nežiadané stiahnutie.
Vybudovanie samotného webu je samo o sebe veľmi náročné. O stupienok vyššie je samotné dolaďovanie. Ako sa vraví, diabol sa nachádza v detailoch. Preto sme sa rozhodli spísať tento ultimátny checklist, v ktorom nájdete všetko potrebné, čo je treba skontrolovať pred spustením webu.
Checklist pred spustením e-shopu je rozdelený z nasledovných hľadísk:
- programovanie
- funkčnosť webu
- marketing
- UX
- ostatné.
Programovanie
Kvalitný HTML kód
Štruktúrované dáta pre Google – pri výsledkoch vyhľadávania umožňujú „Rich Snippets“ lepší pohľad na web. Hodí sa v prípade, ak váš e-shop obsahuje recenzie alebo udalosti.
Validný HTML – dôležité v prípade potenciálnych chýb v indexoch vyhľadávača. Zlá validácia HTML nepoškoďuje umiestnenie vo vyhľadávači, môže mať však vplyv na štruktúrované dáta.
Správny <title> a <meta description> – ide o prvé informácie o e-shope, ktoré používateľ pri vyhľadávaní vidí. Taktiež ovplyvňuje umiestnenie vo vyhľadávaní.
Správny <meta viewport> – slúži na správne zobrazovanie responzívneho webu v mobilných prehliadačoch.
Správna osnova nadpisov – správne veľkosti a používanie nadpisov uľahčuje Google indexovať stránku a ľahšiu orientáciu používateľom.
Obsah bez gramatických chýb – zlepšuje prehľadnosť webu. Zbytočné chyby odrádzajú používateľov od aktivity.
Platné odkazy z webu – má dopad na pozíciu vo vyhľadávaní. Stačí použiť jednoduchý nástroj W3 Link Checker.
Prístupnosť webstránky
Hlavný obsah a navigácia sú dostupné bez Javascriptu – dôležité pre indexovanie vo vyhľadávačoch. Vyskúšajte vypnutím Javascriptu v Developer Tools.
Kontrola s Web Accessibility Checker – služba WCAG prejde cez web a upozorní na možné štandardné chyby.
Pridanie oblasti WAI-ARIA – táto oblasť šetrí zrakovo postihnutým ľuďom množstvo času.
Fungujúce ovládanie tabulátorom – je to ekvivalent prechádzanie stránky bez myši. Ocenia to pokročilí používatelia a zrakovo postihnutí ľudia.
Formuláre majú správne typy inputov – <input type=“email“> uľahčuje zadávanie obsahu na mobilných zariadeniach.
Vývojárske súbory nie sú na produkcii – hlavné adresáre ako node_modules/, .git/, poprípade celý obsah databázy.
Správne nastavenie hlavičky zo serveru – využite službu Redbot.org, ktorá správne vysvetlí nastavenie vašeho serveru.
Správne nastavenie bezpečnostnej hlavičky – využite službu SecurityHeaders.io, ktorá vykoná základný audit časti serverovej hlavičky, s ktorou uľahčíte rôzne typy útokov.
Kvalitný CSS a Javascript kód
Kód dodržuje konvenciu – vytvorená dokumentácia uľahčuje predávanie a zdieľanie kódu ďalej, a taktiež jeho komentovanie. Kód sa takto dá v prípade nutnosti ľahšie upraviť a taktiež ho vie používať programátor, ktorý ho nevytvoril.
Kvalita kódu – kód je pred použitým potrebné nechať automaticky skontrolovať kvôli častým chybám alebo problematickým konštrukciám.
Otestovaný kód – CSS a Javascript je dobré pred použitím otestovať.
Optimalizovaný kód – optimalizovaný kód neobsahuje zbytočné dáta navyše a je minimalizovaný.
README.md – tu je popísané vybudovanie, inštalácia a podobne.
Webové prehliadače a ich kompatibilita
Úplne zobrazenie vo všetkých prehliadačoch a zariadeniach – väčšina prehliadačov sa medzi sebou veľmi neodlišuje, je ich však veľmi veľa. Využite nástroj Browserstack.
Dostupnosť pre staršie prehliadače – netreba podceňovať. V starších prehliadačoch je dôležité, aby bol hlavný obsah čitateľný a mal dostupnú navigáciu.
Tlačená verzia stránky – dôležité je zabezpečiť vypnutie tlače nepotrebných častí.
Funkčnosť webu
Skontrolujte si, či vám správne funguje nasledovné:
- napojený sklad/ERP
- účtovníctvo
- CRM
- zobrazené všetky produkty a ich kategórie
- zobrazené ceny
- zobrazená dostupnosť na sklade
- zobrazený dátum dodania
- zobrazený strom kategórii v menu
- zobrazené atribúty a parametre produktov
- radenie produktov podľa parametrov
- filtrácia produktov podľa parametrov
- stránkovanie produktov
- interné vyhľadávanie
- vloženie produktu do košíku
- priechod košíkom
- zapamätanie košíka pri odchode používateľa
- otestované formuláre v košíku na chyba a útoky
- odoslanie objednávky
- platobné metódy
- metódy prepravy
- odoslaný email s potvrdením objednávky
- objednávka pripísaná do interných systémov
- štítkovanie produktov (zľava, najviac predávaný, posledných 5 kusov atď.)
- nastavenie zliav a stimulov v CMS
- uplatnenie zliav a stimulov v objednávke
- správne zobrazovaný font, riadkovanie a odsadenie
- správna hláška cookie
- aktuálne VOP
- aktuálne kontakty
- správne fungovanie vkladania nových produktov
- ošetrenie vypredaných alebo ukončených produktov
- možnosť editovať obsah na produkte alebo jeho zatriedenie
- fungujúci Heuréka widget (ak ho používate)
- monitorovanie dostupnosti webu 24/7
- neverejne dostupná administrácia
- neindexovaná administrácia
- fungujúce prihlásenie používateľa
- fungujú zákaznícke vstupy ako sú hodnotenia alebo recenzie
- prenesená databáza objednávok
- prenesená databáza zákazníkov
- vyriešená ochrana pred robotmi a spamom.
SEO
Skontrolujte si, z hľadiska SEO máte správne:
- vygenerované všetky stránky
- texty kategórii produktov
- dobre parametrické kombinácie kategórii
- texty produktov
- vygenerovaný ALT na všetkých obrázkoch
- skryté stránky sa nezobrazujú v navigácii
- žiadne duplicitné stránky
- radenie v kategóriách je ošetrené voči duplicitám
- skontrolovaný tag meta robots
- web prejdený crawlerom
- poznačené všetky zmeny URL
- párový zoznam všetkých meniacich sa URL zo starých na nové redirecty
- prehľadanie všetkého HTML na „nofollow“, „noindex“
- skontrolovanie všetkých presmerovaní
- minimálne jedna hlavná sitemapa v robots.txt
- sitemapa pre obrázky
- sitemapa pre videá
- korektne nasadené všetky mikrodata
- zmysluplné názvy médií ako sú obrázky, PDF, zvuk alebo videá
- neindexované stránky nie sú v sitemape
- vygenerované automatické interné odkazy
- prenesené ručne riadenie interné odkazy spolu s ich zoznamom
- existujúci zoznam všetkých aktuálnych URL adries v starom webe
- záloha pred štartovnej verzii HTACCESS
- minimálne 1 mesiac chovanie robotov v logu
- sledovanie indexizácie pre vyrovnanie po spustení
- sledovanie viditeľnosti na otázky pre zrovnanie pred spustením
- pripravený súbor alebo značku pre reautorizáciu GSC
- vyriešená predštartovná a poštartovná záloha.
Marketing
Webová analytika
Skontrolujte si, či vám správne funguje nasledovné:
- nasadené meracie kódy pre traffic,
- nasadené meranie objednávok,
- nasadené remarketingové kódy a pixely,
- nasadené konverzné kódy pre PPC,
- vylúčený vlastnú IP,
- nasadené upozornenia pre zásadné poklesy v kanáloch (traffic, revenue),
- sledujete korektný priechod košíkom,
- meriate interné vyhľadávanie
- pridanie a konfigurácia Google Analytics
- registrácia v search console.
PPC
Skontrolujte si, či vám správne funguje nasledovné:
- vygenerovaný Google PLA feed
- pripravené skripty na landing na 404 z inzercie
- sledovanie skóra kvality pre porovnanie po spustení
- pre prípad zmeny URL pripravené zmenené inzeráty a sitelinky
- v prípade zmeny logiky webu pripravené nové definície publik
- vyriešené nové zostavy pre nové stránky
- vygenerovaný heuréka feed (dobrovoľné).
Sociálne média
Skontrolujte si, či vám správne funguje nasledovné:
- vytvorený a vyplnený Facebook profil
- umiestnenie a fungovanie widgetu pre Facebook a ďalšie sociálne média na webe
- nastavený Facebook Open Graph, poprípade Twitter Cards.
UX
Celkové UX
Zobrazené výhody alebo slogan – odlíšte sa od ostatných. Ukážte ľuďom kto ste, čo robíte a hlavne prečo to robíte.
Košík, cena a počet položiek – urobte tieto tlačidlá výrazné, veľké a kontrastné.
Vyhľadávanie – nastavte našeptávač, rátajte s preklepmi a ponúkajte kategórie a hľadanie v konkrétnych umiestneniach a výsledkoch.
Navigácia – vytvorte navigáciu, ktorú pochopí aj malé dieťa.
Jazyk a mena – v prípade ak predávate aj do zahraničia, umožnite nastaviť oboje prostredníctvom geo-ip umiestnenia alebo nastavenia operačného systému.
Prihlásenie a registrácia – zapamätané prihlásenie pri každej návšteve webu zákazníka.
Bonusy zdarma – pokiaľ ponúkate napr. poštovné, vložte ho tak, aby to bolo vidieť. Zvyšujete tak šancu predaja.
Kontakt – umožnite ľuďom zavolať vám. Zaobstarajte si online chat. Ak máte predajňu, vložte svoje otváracie hodiny a umiestnite na web Google mapu.
Pätička webu – na každej stránke zobrazte v pätičke webu dopravu, platbu, reklamáciu, súkromie, obchodné podmienky a taktiež odkaz na desktop/mobilnú verziu.
Dôveryhodnosť – vložte na web referencie zákazníkov, logá partnerov, platobné karty, certifikáciu, ocenenia od heuréky, spôsob dopravy atď.
Newsletter – pokiaľ máte pravidelný newsletter, ponúknite zákazníkom za poskytnutie emailu zľavu alebo inú akciu.
Domovská stránka
Šírka sortimentu – zobrazte hlavné kategórie, obľúbené produkty, logá značiek alebo návštevnosť produktov. Príliš veľmi to však nepreháňajte.
Prototypovosť – ľudia sú už zvyknutí na určitý štandard eshopov, tak im ponúknite to, čo očakávajú.
Vizuálna hierarchia – musí byť jednoduchá, prehľadná a graficky čistá.
Kategórie
Zobrazenie produktov – zobrazte produkty v tabuľke alebo riadkovom zobrazení.
Náhľad – zobrazte veľký náhľad s cenou, hodnotením, dostupnosťou, poprípade možnosťou kúpiť.
Radenie – uveďte minimálne 4 možnosti: cena, predajnosť, relevancia, hodnotenie používateľov.
Filtrácia – filtrujte výsledky podľa podkategórii alebo vlastnosti produktov. Zobrazte koľko produktov ostáva pri použití filtrov a zobrazte ich nad nápisom produktov.
Pomocník s výberom – dajte ľuďom možnosť si vybrať aj inak, než prostredníctvom filtrácie.
Najpredávanejšie – zobrazte najpredávanejšie produkty a dajte tipy na top produkty v podkategóriach.
Stránkovanie – zvyčajne sa používa tlačidlo nahrať ďalších X kusov, nefunguje to však na mobilných zariadeniach.
Produkt
Názov – jasný, zrozumiteľný s použitím kľúčových slov.
Fotky – veľké fotky zo všetkých uhlov s možnosťou priblíženia.
Video – v prípade dostupnosti určite zobraziť.
Hodnotenie – za počtom hviezdičiek umiestnite počet hodnotení.
Dostupnosť – koľko kusov je na sklade a za ako rýchlo sa dostane domov (aj v prípade ak nie je na sklade).
Varianty – farebnosť, veľkosť a podobne.
Množstvo – zobrazte obmedzené množstvo kusov na sklade, vedie to k impulzívnejšiemu nákupu.
Popis produktu – dajte si záležať, aby výhody daného produktu ako je predĺžená garancia alebo odolnosť bolo poriadne vidieť. Ďalej uveďte krátky popis.
Recenzie – zobrazte recenzia ostatných používateľov a ich spokojnosť s produktom.
Wishlist + strážny pes – umožnite zákazníkom ponechať si kúpu na neskôr alebo strážiť určitý parameter ako je zníženie ceny, dostupnosť alebo variantu produktu.
Upsell a cross-sell – umožnite zákazníkom vybrať si lepšie verzie, odporúčané produkty a ich príslušenstvo.
Zdieľanie – maximálne 2 sociálne siete. Pokiaľ produkt nikto nezdieľal, nezobrazujte nulu.
Košík
Registrácia – nenúťte používateľov registrovať sa pred nákupom, zbytočne ich zdržujete a nemusia tak dokončiť svoju objednávku.
Konečná cena – zobrazte cenu produktu spolu s cenou poštovným. Neistá cena vedie k odchodu.
Náhľad produktov – zobrazte fotky, počet kusov, jednotkové ceny, DPH, poštovné a možnosť odobrať z košíka.
Doručenie – zobrazte presný dátum doručenia spolu s cenou dopravy.
Upsell (iba na mobile) – zobrazte doporučené produkty v mobile. Tu to ľuďom nevadí.
Tlačidlá – jasne zobrazte ľuďom kam majú smerovať.
Uložiť na neskôr – dajte možnosť dokončiť nákup inokedy. Nezabudnite upozorniť e-mailom.
Zľavové kódy – toto príliš nezvýrazňujte, inak ľudia začnú googliť zľavové kódy.
Možnosť platenia – dovoľte zákazníkom zaplatiť podľa ich uváženia.
Objednávkový proces
Zbavte sa nadbytočného – žiadna navigácia, žiadna pätička. Jediná možnosť tlačidlo k nasledujúcemu kroku. Bez možnosti kliknúť naspäť alebo na logo.
Objednávka bez registrácia – ako bolo spomenuté, nezdržujte ľudí zbytočnou registráciou.
Poradie krokov – najčastejšie používaný formát je Košík > Doprava a adresa > Platba > Súhrn > Poďakovanie. Keep it simple. Umožnite ľuďom vrátiť sa a nechať údaje zapamätané.
Pokrok – ukážte používateľovi koľko krokov mu ostáva v objednávke. Pri zložitejších zobrazujte, koľko času ostáva pre dokončenie alebo zobrazte percentá.
Online podpora – môže aj nemusí byť
Viditeľný obsah košíku – zobrazte obsah košíku viditeľne v každom kroku
Formuláre – pýtajte sa iba to, čo skutočne musíte. Veľkosť poľa odpovedá vyplneným údajom. Meňte font v závislosti od typu obsahu.
Ďakovná stránka – poďakujte a informujte, čo bude nasledovať. Poskytnite možnosť založiť si účet, zdieľania na sociálnych sieťach alebo prihlásenia k newsletteru.
Ostatné
Grafika podporuje Retina disple – obyčajná grafika nebude na Retina displejoch vyzerať rovnako dobre.
Šablóny pre chybové stránky 404 a 50x – preddefinované verzie sú nedostačujúce.
Rýchlosť načítania – optimalizujte rýchlosť načítania pomocou Pagespeed Insight Tester a WebpageTest.org.
Vyriešený SSL certifikát – SSL certifikát je v dnešnej dobe nutnosť. Pokiaľ ste neprešli na https, Google vás môže vo vyhľadávaní umiestniť nižšie.
Záver
Skontrolovať checklist pred spustením e-shopu, či všetko správne funguje tak ako má, môže byť rovnako frustrujúce, ako samostatná tvorba. Je to však posledný krok, ktorý je nutné dokončiť ešte predtým, než svoj web dostanete von medzi ľudí. Lepšie natrafiť na chybu ešte predtým, kým nie je neskoro.
Zdroje:
http://www.ilincev.com/ux-checklist-eshop
http://www.lukaspitra.cz/checklist-kontroly-pred-spustenim-webu/
http://www.vzhurudolu.cz/prirucka/checklist
