Čo ponúkame
Ako pracujeme
Naša tvorba
Objednajte si
Prečítajte si
Kontaktujte nás

Použiteľnosť web stránky. 5 vecí, na ktoré si dať pozor.

Vaša web stránka by mala byť použiteľná pre každého používateľa internetu. Nemali by ste zabúdať na používateľov s pomalým pripojením, používateľov pristupujúcich prostredníctvom smartfónu, či dokonca používateľov so zrakovým postihnutím. V tomto článku si popíšem 5 základných praktík, na ktoré sa často zabúda.

23.07.2018

1. Mobilná verzia web stránky

V dnešnej dobe, keď smarfón je už samozrejmosťou, desktopová verzia web stránky nie je postačujúca a prichádza povinnosť vytvorenia mobilnej verzie webu. V čase písania článku bola priemerná návštevnosť toho webu z mobilných zariadení viac ako 30%. Mobilná verzia by mala obsahovať všetky dôležité informácie, ktoré sa nachádzajú na desktopovej verzii webu. Mobilný užívateľ by nemal byť o nič ukrátený.

Taktiež treba myslieť na množstvo dát, ktoré sa pri načítaní web stránky spotrebuje. Mobilná verzia by mala byť čo možno najmenšia. Zbytočné obrázky ako napríklad pozadie treba odstrániť. Rovnako ako aj všetky elementy, ktoré nenesú žiadnu informáciu, by mali byť odstránené. Tieto zmeny pozitívne ovplyvnia aj rýchlosť načítania.

Mobilná verzia by mala byť prehľadná a jednoduchá na používanie. Treba brať do úvahy aj veľkosť prstov používateľ a veľkosť obrazovky smartfónu. Tlačidlá by mali mať výšku aspoň 48 pixelov, aby boli pohodlné na použitie. Ovládacie prvky by mali byť v dosahu palca. Dole v pravom rohu, pretože ak držíte mobil v pravej ruke, ľavý horný roh pravdepodobne nedočiahnete.


2. Rýchlosť načítavania

Rýchlosti načítavania sme sa venovali v samostatnom článku, ale v skratke si o nej povieme aj tu. Väčšina návštevníkov očakáva, že za web stránka načíta do 2 sekúnd. Ak načítavanie trvá viac ako 3,5 sekundy, veľké percento návštevníkov web stránku opustí.

Používajte optimalizované obrázky. Obrázky vždy skomprimujte a používajte veľkosti, ktoré zapadnú do web stránky. Tým sa myslí, aby nebol použitý 16 mega pixelový obrázok ako ikona o veľkosti 2x2 cm.

Minifikujte css a javascript. Najlepšie ak všetky tieto súbory zjednotíte do jedného. Získate tým rýchlejšie načítanie web stránky a ušetríte množstvo prenesených dát.

Snažte sa všetky javascripty načítavať až na konci html kódu. Nie na začiatku v hlavičke. Javascript totiž blokuje renderovanie web stránky.


3. Selekcia obsahu

Veľké množstvo návštevníkov z web stránky odchádza v priebehu prvých dvoch sekúnd. To je čas za ktorý musíte návštevníka zaujať vašim obsahom. Všetok potrebný obsah by sa mal nachádzať nad zalomením strany. Inými slovami, aby návštevník nemusel scrollovať nadol.

Neumiestňujte na web stránku nepotrebné informácie. Vyberte iba to dôležité. Menej dôležité informácie môžete umiestniť na spodok stránky, prípadne ich zobraziť menšie. Dôležitosť informácií je individuálna pre každý typ webovej stránky.

Zoberme si príklad z obchodu s potravinami. Ceny sú obrovským písmom a názov produktu zostáva v úzadí. Naopak v obchode s luxusnými hodinkami je názov väčší a cena často ani nie je zobrazená alebo je veľmi malým písmom. Pretože ich cieľová skupina sú ľudia, ktorým na cene veľmi nezáleží. Podobný princíp by ste mali využiť aj na svojej web stránke prípadne eshope.  Sústreďte sa na informácie, ktoré sú dôležité pre vašu cieľovú skupinu.


4. Farba a kontrast

Pri tvorbe web stránky by sme nemali zabúdať ani na ľudí so zrakovým postihnutím (farbosleposťou), ktorí tvora takmer 10% populácie. Predovšetkým sa jedná o kontrast medzi farbou textu a farbou pozadia. Hodnota kontrastu je vyjadriteľná číslom od 0 (biely text na bielom pozadí) po 21 (čierne na bielom).

Pri bežnom texte by táto hodnota nemala byť menšia ako 7. Pri nadpisoch a tučnom (bold) písme by hodnota kontrastu nemala klesnúť pod 5. Hodnota menšia ako 3 (napríklad žltá na bielej) je už ťažko čitateľná aj pre používateľov s dokonalým zrakom. Hodnotu kontrastu si môžete zmerať na webe color contrast checker. Stačí zadať iba farbu textu a farbu pozadia.

Taktiež sa neodporúča, aby farba niesla informácie. Napríklad kalendár na rezervačnej web stránke. Chcete si rezervovať pobyt pri mori. Otvoríte kalendár a obsadenosť je v ňom vyjadrená farbami ako biela, žltá, oranžová a červená. Medzi týmito farbami je tak nízky kontrast, že je ťažké danú obsadenosť vyčítať. Preto sa odporúča buď použiť farby s vysokým vzájomným kontrastom alebo použiť symboly namiesto farieb.


5. Písmo a text

Ďalším dôležitým elementom dobrej web stránky je správne zvolený typ písma a formátovania textu. Pri súvislom texte napríklad pri článkoch alebo blogoch sa odporúča použiť pätkové písmo. Pätky pri tomto písme vytvoria vizuálny dojem vodorovných čiar a užívateľ sa tak pri čítaní nestratí medzi riadkami (pozrite si akúkoľvek knihu. Všetky texty budú pätkové). Bezpätkové písmo sa naopak odporúča používať pri krátkych textoch ako sú napríklad nadpisy alebo krátke popisy v eshope. Taktiež nie je vhodné na jednej web stránke kombinovať viac ako 3 typy písma.

Okrem typu písma je pri blogu odporúčané používať vhodnú členitosť textu. Text by mal byť rozdelený do menších odstavcov (ideálne 3-4 riadky, alebo 100 slov), aby sa v ňom dalo lepšie orientovať. Dĺžka riadku by nemala presiahnuť 80 znakov. Ak máte blog na celú šírku obrazovky, je vhodnejšie text rozdeliť do 2 stĺpcov.

Viac informácií o použiteľnosti nájdete na webe w3.org.

Autor článku

Mgr. Michal Sejč

Project Manager & Backend Developer

Michal sa v našej spoločnosti venuje Backendu. Práve on sa stará o to, aby Vaša web stránka alebo aplikácia fungovala rýchlo a bezchybne. Vyštudoval UK MATFYZ v Bratislave. Zúčastnil sa stáže v spoločnosti Huawei v Pekingu a Honkongu. Následne pracoval na chode aplikácie medzinárodnej banky.

Odoberať newsletter

Táto stránka používa súbory cookies, ktoré nám umožňujú identifikovať zlepšenia našich služieb. Viac informácií