Skontrolujte prístupnosť vášho webu. Zvládne to aj dieťa?

Skontrolujte prístupnosť vášho webu. Zvládne to aj dieťa?
21.06.2018

Čo urobí návštevník keď príde na váš web? Začíta sa, kochá sa, kliká, surfuje…..zostane na ňom, alebo sa iba poobzerá a zdupká? Pozrite sa na váš web očami návštevníka! Privíta vás rýchlym načítaním a užívateľsky príjemným prostredím? Pomôže nájsť čo potrebujete?  

Pozrite sa čo potrebuje váš web preto, aby zaútočil na pohodlnosť a zmysly jeho návštevníkov.

 

Na základe mnohých analýz užívateľskej prístupnosti webstránok známej pod skratkou UX (User experience) si teraz môžete skontrolovať váš web z pohľadu používateľa a inšpirovať sa pre jeho vylepšenie.

 

1. Rýchlosť načítania stránok

 

Synonymom dnešnej doby je práve slovo rýchlosť. Úvodná stránka webu, alebo ktorákoľvek podstránka si nemôže dovoliť byť lenivá. Rýchlosť načítania stránky si môžete otestovať na stránke https://gtmetrix.com.

GT metrics - kontrola rýchlosti načítania stránky

Priemerná doba načítania stránky je 6,5s. Ste lepší, alebo horší ako priemer?

Rýchlosť načítania mobilnej verzie stránky si môžete otestovať Google nástrojom: https://testmysite.withgoogle.com/intl/en-gb

Rýchlosť načítania mobilnej verzie webu

Ako ovplyvňuje rýchlosť načítania webu používateľské správanie si môžete prečítať v  článku: 5 faktov, ako dnes používame internet. Ako sa tomu Google prispôsobil. A prečo sa vôbec o to zaujímať.

 

2. Kompatibilita s modernými zobrazovacími technológiami

 

Už  30% Slovákov pristupuje na internet cez mobilný telefón. Prispôsobenie webstránky pre mobilné zariadenia je už samozrejmosťou. Všetky navigačné tlačidlá (menu, tlačidlá, košík v eshope) by mali mať dostatočnú veľkosť pre to, aby sa dali ovládať prstom (priemerná veľkosť dotykovej časti ukazováka  je 57x57px). Keď sa váš web načíta v mobile musí byť kompletne čitateľný bez toho, aby ho bolo nutné  prstami “rozťahovať”, zväčšovať, alebo posúvať do bokov. Jediné správne skrolovanie webu v mobile je smerom dole potiahnutím prsta.

Skontrolujte si váš web v mobile, ale aj v tablete. Sledujte ako rýchlo sa vám načíta a pokúste sa nájsť článok, kontakt, alebo nakúpiť bez toho, aby ste sa stratili, či zamotali. Spočítajte si na koľko kliknutí nájdete konkrétny tovar a odošlete objednávku. Poproste kamaráta aby to isté urobil on a spýtajte sa ho, či sa mu nakupovalo pohodlne.

 

3. Identifikácia cieľa, predmetu, alebo obsahu

 

Láska na prvý pohľad. To je presná definícia odpovede, ktorú hľadáme. Návštevník webstránky potrebuje do niekoľkých milisekúnd pochopiť čo na webe nájde.  Ak návštevník hľadá bicykle, mal by vidieť bicykel. Ak hľadá pletaciu priadzu, tak by mal okamžite zbadať klbko vlny.   

Vyvarujte sa dlhého súvislého textu bez obrázka. Obrázok by mal identifikovať obsah článku, popisu produktu, alebo služby, ale najmä nesmie chýbať na úvodnej stránke webu.

 

4. Optické ťažisko stránky

 

Pri otvorení stránky nám zrak padá najskôr do ľavého horného rohu obrazovky a následne očami preletíme stránku po uhlopriečke do jej pravého dolného rohu.  Pomedzi tento sken sa oko návštevníka pozastaví alebo oprie o to, čo na stránke najviac opticky “vytŕča”.

V ideálnom prípade je to tlačidlo s výzvou k akcii. Farebne výrazné, dostatočne veľké, správne umiestnené. Na úvodnej stránke webu, to môže byť tlačidlo “Kontaktujte nás” alebo “Prejdite do katalógu produktov”, či “ Navštívte našu predajňu”.  Na podstránke služby by nemal chýbať dotazník s tlačidlom “Objednajte si konzultáciu”, “Dohodnite si obhliadku” – alebo len tlačidlo s presmerovaním na kontakt (kde je kontaktný formulár).

Ak zmenšíte váš web na najmenšie zobrazenie ako môžete (podržaním klávesy Ctrl a rolovaním myšou), v zmenšenom obraze sa zleje dizajn s textami a vystúpi iba optické ťažisko stránky. Ak to nie je aktívny prvok, ale napríklad časť obrázka pozadia webu (čo pre konverziu vôbec nie je podstatné), je potrebné opraviť dizajn stránky.

Príklad: zmenšená podstránka produktu eshopu – správne opticky vystupuje obrázok produktu (tmavá farba obrázka) a tlačidlo “Pridať do košíka”:

 

Optické ťažisko stránky - eshop

5. Priorita usporiadania obsahu

 

Používatelia rolujú nižšie. Najmä v dotykovom telefóne je jednoduchšie rolovať ako triafať sa prstom na tlačidlo. Čitateľnosť stránky pod lomom obrazovky sa teda zlepšila. Ale netreba sa na to spoliehať.   

Hoci už netreba striktne uložiť všetko podstatné nad lom obrazovky, je dôležité dať si pozor na prioritu usporiadania prvkov. Najväčšia čitateľnosť obsahu je tesne nad a tesne pod lomom obrazovky.  To čo považujete za podstatné pre udržanie čitateľovej pozornosti umiestnite nad lom obrazovky. Pretože ak ho nezaujme prvá obrazovka – prečo by mal rolovať?

Lom obrazovky

Ideálne je, ak obrazovka nevyzerá že je ukončená – ak nad lomom trčí časť obsahu, ktorá pokračuje nižšie.

V prípade detailu produktu v eshope je to úplne iná situácia. Ak všetky podstatné informácie uložíte nad lom obrazovky, spolu s tlačidlom “Pridať do košíka” zrýchlite nákupnú cestu zákazníka.

 

6. Čitateľnosť

 

Zamerajte sa pri kontrole vášho webu aj na tieto aspekty:

  • Veľkosť písma (menu, navigačné prvky (napríklad tlačidlo “Späť”), články, popisy produktu….)
  • Rozdiel farby pozadia a písma (Google vie zhodnotiť farebný gradient písma, väčší rozdiel pomáha k optimalizácii stránok)
  • Odsadenie písma od ľavého okraja (články, nadpisy)
  • Čitateľnosť fontov v súvislom texte

Priemerný návštevník venuje otvorenej stránke asi 8,25 sekúnd pozornosti. Preto je dôležité umožniť mu čo najrýchlejšie prijímanie informácií.  Usporiadaním textu do blokov, obrázkami, ale vo veľkej miere aj čitateľnosťou písma. Čitateľnosť nie je iba otázkou bystrozrakosti návštevníka, ale rozhoduje o konverzii a pomáha pri optimalizácii pre vyhľadávače.

 

7. Navigácia

 

Návštevník stránkou potrebuje byť vedený na to, aby sa zmenil na potenciálneho zákazníka. Vedený navigáciou a  vhodne umiestnenými tlačidlami, po ktorých  - ako po kamienkoch preskacká až do cieľa.

Hlavná navigácia – menu – by mala byť umiestnená v zornom poli a na miestach, kde je očakávaná. Experimentálne umiestnenia (naspodku stránky, niekde vpravo dole…) môžu viesť k okamžitému opusteniu stránky. Podstránka Kontakt by mala byť na mieste kde je často očakávaná  -  na konci menu.

Pri prechádzaní podstránkami návštevník stále musí vedieť kde práve stojí. Aktuálna podstránka v menu by mala byť dizajnovo odlíšená (iná farba, tučné písmo....) od ostatných. Pri viacerých vnoreniach je dôležité mať na stránke drobčekovú navigáciu (Pathway), na ktorej návštevník vidí aj svoju cestu späť z vnorenia.

Drobčeková navigácia

Hyperlinky v texte sú navigačnými prvkami a preto by mali byť odlíšené od ostatného textu. Hoci sa v poslednej dobe upúšťa od ich podčiarknutia, nechať ju tou istou farbou, ale iba tučným písmom nie je dostačujúce. Najmä ak chceme, aby na ňu návštevník klikol.

A nakoniec, skontrolujte  vyhľadávanie na stránke. Ako rýchlo nájde vyhľadávač informáciu a či na kľúčové slová našiel naozaj adekvátny obsah? Vynikajúcou pomôckou, najmä v eshopoch je našepkávač (rozbaľuje možnosti už pri začatí písania), alebo opravovač preklepov (Mysleli ste…?)

 

Záver

UX eshop

Predstavte si váš web ako vašu predajňu. Ako vyzerá vstupný priestor? Čo uvidí zákazník ako prvé? Aké produkty dáte na stojan celkom vpredu? Kde umiestnite kancelársky stôl pre predajcu? Akými ukazovateľmi povediete zákazníka dozadu do predajne, kde sa dejú všetky predajné zázraky? Vyjde mu niekto v ústrety?

Cesta zákazníka vaším webom by mala byť príjemným hladkým zážitkom, bez zakopnutí a prekážok.  Každý detail je dôležitý. Nemusíte byť na slovo vzatým odborníkom v oblasti UX. V mnohých prípadoch stačí pozrieť na stránku z pozície človeka, ktorý ju nikdy ešte nevidel. Opustiť profesionálnu deformáciu, osobné postoje  a sedliackym rozumom zhodnotiť jej použiteľnosť.

Ak sa vám to nedarí, tak to nechajte na šťastenu. Prihláste sa do súťaže o SEO a UX analýzu a možno sa stanete víťazom tohto mesiaca. A na vašu stránku sa pozrú naši odborníci.