Málo predajov? Skontrolujte si prístupnosť a použiteľnosť vášho webu!

Stalo sa vám niekedy, že ste z webstránky odišli skôr, ako ste našli, čo ste hľadali? Že ste v nejakom e-shope nenakúpili, pretože ste nevedeli rýchlo objednať produkt? Že ste hľadali cenník dopravy a nebol ani v Obchodných podmienkach? …mali ste „šťastie“ na weby so zlou použiteľnosťou.
Pravdepodobne ste sa už aspoň raz v živote stretli so stránkou, keď ste žmúrili a nevedeli rozlúštiť malé biele písmo na sivom pozadí? Tak to ste mali pre zmenu „šťastie“ na neprístupný web. Použiteľnosť a prístupnosť webu je významná vlastnosť – ukážeme si v článku prečo – ale nie všetci si to uvedomujú.

Vzťah medzi týmito dvoma pojmami môžeme veľmi zjednodušene vysvetliť takto: Prístupný web si môže prezerať ktokoľvek bez ohľadu na jeho zdravotný stav alebo technické vybavenie. Na použiteľnom webe ľahko nájdete informácie a bez problémov si objednáte produkt či vyplníte formulár. Zlepšením prístupnosti webu môžete zvýšiť aj jeho použiteľnosť.

Prečo musí byť web prístupný?

Dobrou prístupnosťou webu myslíte aj na používateľov so slabším zrakom, nevidiacich, farboslepých, dyslektikov, nepočujúcich, ľudí s obmedzenou pohyblivosťou horných končatín, jednoducho je prístupný pre každého. Bez ohľadu na to, či mu stránku predčítava čítačka stránok, alebo na ovládanie nemôže používať počítačovú myš. Hendikep, aj keď dočasný, má napríklad aj užívateľ, ktorý si práve zabudol okuliare, alebo si prehliada vaše webstránky v zlých svetelných podmienkach. Hendikep má aj človek, ktorý si prezerá stránky v staršom koncovom zariadení, v staršej verzii prehliadača, alebo má iný operačný systém. A nie, to nie je jeho problém.

Do takto popísanej skupiny spadá až 20 % používateľov, čo teda určite nie je zanedbateľné číslo. Medzi ďalších „hendikepovaných“ používateľov, na ktorých tiež musíme myslieť, patria aj roboty vyhľadávačov – ak nebudú vedieť vašu stránku prečítať, nebudú ju ponúkať vo výsledkoch vyhľadávania. Preto nie je prekvapujúce, že veľa z pravidiel prístupnosti priamo súvisí s optimalizáciou pre vyhľadávače (SEO).

Najvýraznejšou autoritou v tomto odvetví je konzorcium W3C (World Wide Web Consortium) – medzinárodná komunita, ktorá navrhuje, upravuje a publikuje odporúčania prístupnosti webových stránok. Slovenské štandardy prístupnosti vychádzajú práve z odporúčaní konzorcia W3C a pre webstránky verejnej správy je dodržiavanie týchto pravidiel povinné. Sú upresnené v prílohe č. 1 Výnosu Ministerstva financií Slovenskej republiky o štandardoch pre informačné systémy verejnej správy (PDF, zdroj: informatizácia.sk). Žiaľ, prax ukazuje, že na viacerých postoch v štátnej správe kompetentní o tom ani netušia.

Pravidlá prístupnosti webových stránok

Pravidiel prístupnosti je spolu štrnásť a každé z nich je ešte rozpísané v niekoľkých bodoch. Aby ste si vedeli lepšie predstaviť, čo všetko spadá pod dobrú prístupnosť webstránky a ako tomu rozumieť, uvedieme niekoľko príkladov:

• Ku všetkým netextovým prvkom sa poskytuje textový ekvivalent. – Čiže obrázky, videá a zvuk musia mať aj nejakú textovú formu. Pri obrázkoch preto vyplňte „Alt“ atribút – popíšte niekoľkými slovami, čo je vidno na obrázku. Pre videá a zvukové stopy sprístupnite titulky, alebo prepis nahrávky.
• Informácie prezentované pomocou farieb musia byť prístupné a zrozumiteľné aj bez farieb. – Ľudia s daltonizmom nemusia buď rozoznávať farby vôbec, alebo majú problém s rozlišovaním farieb v určitej časti farebného spektra.
• Na vyjadrenie štruktúry dokumentu sa používajú prvky hlavičky a používajú sa vhodne podľa ich špecifikácie. – Nadpisy a podnadpisy na stránke definujte pomocou značiek H1, H2, H3… Na jednej stránke je vždy len jeden hlavný H1 nadpis. Dbajte na správnu hierarchiu nadpisov.
• Cieľ každého odkazu sa jasne identifikuje a je odlíšený od ostatného textu. – Ľudia s čítačkou obrazovky môžu pri hľadaní správnej stránky preskakovať z odkazu na odkaz pomocou klávesnice. Preto musí mať odkaz jasný cieľ. Ak im totiž čítačka niekoľkokrát za sebou prečíta „Kliknite sem“ alebo „Tu“, ako majú vedieť, kam kliknúť? Okrem toho je odkaz väčšinou aj farebne odlíšený, ale hlavne je podčiarknutý (vzhľadom na predchádzajúce pravidlo). A naopak, dávajte pozor, aby ste v texte na webe nepodčiarkovali nič, čo nie je odkaz. Prečítajte si viac o tom, ako správne tvoriť odkazy na stránke.
• Navigačné a obsahové informácie sú zreteľne oddelené. – Ak máte veľký web, vytvorte hierarchicky usporiadaný zoznam – mapu stránok („Site map“). Odkazujte na ňu v pätičke každej podstránky.
• Webová stránka poskytuje informáciu o svojej pozícii v hierarchii webového sídla. – Každá stránka obsahuje odkaz na vyššiu úroveň v hierarchii a odkaz na hlavnú stránku (tzv. breadcrumbs).
• Úvodná webová stránka jednoznačne popisuje zmysel a účel webového sídla. – Na úvodnej stránke je uvedený názov a cieľ stránky a je jasné, ktorej organizácii alebo inštitúcii webové sídlo patrí, teda kto je správcom obsahu.

Tu je kompletnejší prehľad pravidiel:

Ako si môžem skontrolovať prístupnosť?

Začnite tým, či ste dodržali základné zásady SEO, čiže napríklad či máte zrozumiteľnú URL adresu, vyplnené „Meta Title“ stránky, či správne používate nadpisy a podnadpisy na členenie rozsiahlejšieho textu, či sú texty odkazov jasné. Skontrolujte si, či majú všetky obrázky s výpovednou hodnotou vyplnený „alt“ text. (Na tento účel vám skvele poslúži napríklad Web Developer Toolbar pre prehliadač Firefox alebo Chrome, ktorý má okrem toho ešte mnoho ďalších užitočných funkcií.) Ak máte na stránke videá, doplňte ich prepis. Nezabudnite na dostatočný kontrast farieb písma a pozadia.

Prečo musí byť web použiteľný?

Použiteľnosť znamená, že na nájdenie a získanie potrebných informácii na nejakom webe nemusíte vynaložiť neprimerane veľké úsilie. Na použiteľných webstránkach sa viete ľahko orientovať, rýchlo pochopiť ich usporiadanie a môžete ich jednoducho ovládať. Prístupnosť sa sústredila hlavne na hendikepovaných používateľov, no použiteľnosť sa týka všetkých a nevenuje sa individuálne žiadnej konkrétnej skupine používateľov.

Zákazníci sú čoraz náročnejší, a pred tým, než sa rozhodnú pre kúpu u vás, porovnajú si najprv ponuky u konkurencie. Stačí, že web konkurencie je oveľa jednoduchší na používanie, ľahšie nájdu čo hľadajú a vy prídete o potenciálneho zákazníka. Určite sa stalo už aj vám, že ste zablúdili na nejaký web, nevedeli ste sa vôbec zorientovať, ani kam kliknúť a jednoducho ste stratili nervy a klikli na nasledujúci odkaz vo výsledkoch vyhľadávania. Takéto správanie zvyšuje vašu mieru odchodov (bounce rate). Slabá použiteľnosť stránky znižuje aj vašu dôveryhodnosť. Preto ju netreba podceňovať – použiteľnosť webu môže naozaj zásadne ovplyvniť aj vaše predaje.

Aby sa potenciálnym zákazníkom na vašej stránke páčilo, mali by ste sa zamyslieť nad týmito piatimi kritériami – ľahkosť učenia (ako rýchlo sa používateľ, ktorý je u vás prvýkrát, naučí používať stránku), efektívnosť používania (ako rýchlo vie používateľ dosiahnuť nejaký cieľ, napríklad nájsť informáciu, vyplniť formulár, objednať tovar…), jednoduché zapamätanie (ako rýchlo si používateľ zapamätá kroky, ktoré ho doviedli do určitého cieľa), zachytenie chýb (zaistiť malú chybovosť, a ak sa aj nejaká chyba stane, aby používateľ vedel, čo má robiť) a celková spokojnosť (ako je používateľ spokojný s postupnosťou jednotlivých krokov a celkovo s používaním vášho webu).

Ako zvýšiť použiteľnosť webu?

Prístupnosť a použiteľnosť sa do určitej miery prelínajú. Preto dodržaním niektorých pravidiel prístupnosti pomôžete aj použiteľnosti. Napríklad pravidlá prístupnosti odporúčajú jasne definovať hlavný nadpis a podnadpisy, aby sa nie dobre vidiaci používateľ mohol v texte presúvať len po nadpisoch, a rýchlejšie tak nájsť požadovanú informáciu. Bežný užívateľ bez zrakového postihnutia však robí úplne to isté. Napríklad, ak by ste sa v tomto článku chceli dočítať viac iba o použiteľnosti, prescrollovali by ste článok očami zhora dolu a zastavili by ste jednoducho až na podnadpise „Prečo musí byť web použiteľný?“.

To isté platí aj pre niektoré z príkladov prístupnosti, ktoré sme uvádzali vyššie – napríklad vytvorenie mapy stránok pre jednoduchšiu orientáciu, na hlavnej stránke jasne popísaný zmysel a účel webu, z každej stránky musí byť odkaz na stránku vyššie v hierarchii a na hlavnú stránku, vizuálne odlíšenie textov odkazov od ostatného textu, každej stránke definovať príslušný titulok vystihujúci obsah stránky,…

Aj keď platí, že použiteľnosť sa zvýši, ak dodržíte všetky pravidlá prístupnosti, naopak to platiť nemusí. Predstavte si napríklad menu na stránke, v ktorom sa podkategórie vyrolujú automaticky po prejdení myšou ponad názov hlavnej kategórie. Poviete si, skvelé, stačí iba raz kliknúť, určite tým zvýšim použiteľnosť môjho webu. No napríklad pre nevidiaceho používateľa je toto absolútne neprístupné menu, keďže si ho nemá ako pozrieť.

Ďalší spôsob, ako pomôcť použiteľnosti, je zbytočne neopakovať informácie, vysvetliť skratky a odborné výrazy, ktorým používatelia nemusia rozumieť. Taktiež pomáha používať dobre čitateľné písmo, graficky oddeľovať myšlienkové celky a vyberať kombinácie farieb, ktoré lahodia oku.

Nezabudnite na správne presmerovanie adresy zrušených stránok na novú stránku. Definujte vhodne „Error 404“ stránku (teda „Stránka nenájdená“), na ktorú sa používateľ dostane, ak klikne na zrušenú adresu, ktorú ste zabudli presmerovať, alebo ak klikne na chybný odkaz či nesprávne napíše adresu stránky. Túto stránku môžete graficky zladiť so zvyškom vášho webu a s vašou značkou, aby bolo jasné, že síce sa niečo nepodarilo, ale stále sa jedná o váš web.

Užitočné je pridať, resp. odporučiť nejaký ďalší krok, aby používateľ stránku jednoducho nezavrel len preto, že nevedel, čo má robiť. Ponúknite mu riešenie napríklad v podobe odkazu na hlavnú stránku, vyhľadávacie pole (veď niečo hľadal, no nenašiel), alebo zoznam najpopulárnejších odkazov. Ak máte členitú ponuku možných pokračovaní v hlavičke, alebo päte stránky v podobe menu, nie je to nevyhnutné.
Good idea?

Ako otestovať použiteľnosť webstránky?

Váš nový web vždy najprv otestujte na niekoľkých používateľoch. Stačí, že poprosíte váš tím alebo vašich známych, aby si stránky trošku preklikali a splnili nejakú úlohu – napríklad našli vaše kontaktné informácie, vyplnili formulár, objednali produkt a podobne. Pri hodnotení použiteľnosti sa pýtajte vašich testerov na otázky o piatich aspektoch použiteľnosti webu:

• Ľahkosť učenia – Ako rýchlo sa po prvej návšteve naučili používať stránku a orientovať sa na nej?
• Efektívnosť používania – Ako rýchlo sa im podarilo dosiahnuť cieľ návštevy? (Našli na vás kontakt? Dá sa vás kontaktovať aj priamo na stránke? Vedia, kde sa nachádzate? Ako ľahko alebo ťažko sa im orientovalo v katalógu produktov? Vedia si objednať produkt?)
• Jednoduché zapamätanie – Ako ľahko (alebo ťažko) si pri ďalšej návšteve spomenuli na postupnosť krokov na dosiahnutie daného cieľa?
• Zachytenie chýb – Koľko a aké chyby spravili pri hľadaní určitej informácie? Ako veľmi závažné sú tieto chyby? Ako rýchlo vedeli chybu napraviť a vrátiť sa na „správnu cestu“? Našli nejaké iné chyby na stránke, ktoré vznikli aj napriek správnemu používaniu?
• Celková spokojnosť – Ako sa im páči váš web? Je prehľadný? Páčia sa im farby? Je písmo dobre čitateľné? Stránky sa im rýchlo načítavajú? Ruší ich niečo pri prehliadaní?

Zobrazenie webu na mobilnom zariadení

Pri hodnotení použiteľnosti webstránky sa treba zamyslieť aj nad tým, či bude prístupná a dobre ovládateľná aj z mobilného zariadenia. Čoraz viac používateľov si prehliada webové stránky na mobile či tablete. Ako vidno na grafe nižšie, približne 50 % zariadení, z ktorých si ľudia prezerali webové stránky, boli mobilné telefóny (zelenou).

Samozrejme, preferencie používaných zariadení sa líšia podľa produktov, a tiež súvisia s tým, akú konkrétnu cieľovú skupinu sa snažíte osloviť. Presnejšie údaje o tom, z akého zariadenia prišli návštevníci na vašu stránku, viete zistiť pomocou nástroja Google Analytics. Možno vám z analýzy dát vyplynie, že konverzie z mobilného telefónu sú oveľa nižšie. No to môže znamenať iba toľko, že z mobilného zariadenia k vám návštevníci chodia vo fáze hľadania a rozhodovania, a samotnú kúpu potom buď zo zvyku alebo kvôli väčšej istote zrealizujú cez počítač.

Ak argument trhu nestačí, máme pre vás ďalší dôvod, prečo určite musí byť váš web prispôsobený aj pre mobilné telefóny. Je ním – Google. Pri indexácii stránok kladie čoraz väčší dôraz na mobilnú verziu obsahu. Jednoducho povedané, stránky, ktoré sú dobre prispôsobené mobilným zariadeniam, sa budú umiestňovať vyššie vo výsledkoch vyhľadávania ako podobné stránky bez prispôsobenej mobilnej verzie.

To však neznamená, že máte pre váš web mať jednu „desktopovú“ webstránku pre počítač a jednu mobilnú stránku pre mobily a tablety. (Napríklad stránka www.alza.sk je pre prehliadanie na počítači a https://m.alza.sk/ je pre mobilné zariadenia.) Aj sám Google od tohto riešenia odrádza. Takéto dve verzie webu sa totiž správajú ako dve rozdielne stránky a môžu zmiasť nielen používateľa, ale aj internetové vyhľadávače. Oveľa jednoduchším riešením je zaistiť responzívny dizajn.

Responzívny dizajn

Responzívny dizajn webu zabezpečí, že sa stránky budú zobrazovať na každom zariadení a budú automaticky prispôsobené (veľkosťou, rozložením prvkov…) pre dané zariadenie. V praxi to (veľmi zjednodušene) funguje tak, že jeden HTML kód je pomocou kaskádových štýlov CSS prispôsobený pre každé zariadenie zvlášť, preto vám stačí len jedna verzia webu.

Ako zistím, či mám responzívny web? Jednoducho využite jeden z nástrojov, ktorý prispôsobí okno prehliadača veľkosti cieľového zariadenia. Napríklad Web Developer Toolbar, ktorý sme tu už spomínali, ponúka možnosť prezrieť si, ako vyzerajú vaše webstránky na mobile a na tablete (aj na šírku aj na výšku). Či je váš web vhodný pre zobrazenie na mobilnom telefóne, môžete rýchlo overiť aj pomocou „Mobile Friendly Test“, teda testu vhodnosti pre mobilné zariadenia.

Prístupnosť a použiteľnosť webových stránok v skratke

Prístupnosť webových stránok nevylučuje z ich používania žiadnu skupinu ľudí. Dodržiavanie štandardov prístupnosti webových stránok zabezpečí pohodlné ovládanie hendikepovaným používateľom. Tieto štandardy sú na Slovensku povinné pre weby štátnej správy a odporúčané pre všetky ostatné webové stránky.

Použiteľnosť webových stránok znamená, že používatelia sa vedia ľahko orientovať na stránke, vedia rýchlo dosiahnuť cieľ návštevy, pri opätovnej návšteve sa jednoducho rozpamätajú na správne používanie, pri prechádzaní webstránok nerobia zbytočné chyby a majú pozitívny zážitok z návštevy.

Prístupnosť a použiteľnosť spolu veľmi úzko súvisia. Ak dodržíte všetky body štandardov prístupnosti, zvýšite tiež použiteľnosť, čo sa následne môže pozitívne prejaviť aj na konverziách. Naopak to však platiť nemusí.

Ak by ste sa chceli v tejto oblasti ešte lepšie orientovať, kurz Pokročilé SEO – optimalizácia pre vyhľadávače II. je o problematike detailnejšie. V prvej časti kurzu, ktorá je detailne venovaná prístupnosti a použiteľnosti webových stránok, vám skúsený lektor určite bude vedieť odpovedať na akékoľvek otázky, ktoré vám pri čítaní tohoto článku napadli.
Len pre úplnosť – v ďalšej časti dňa sa kurz precízne venuje návrhu webstránky z pohľadu SEO (analýza kľúčových slov, ich klasifikácia, spätné odkazy atď.) a modelovým situáciám z praxe (napr. spomínaná chyba 404).

Už rozumiete tomu, čo je to prístupnosť a použiteľnosť webu. Skontrolujte si svoje stránky. Robia to raz za čas všetci úspešní internetoví predajcovia. Aby ich stránky nielen dobre vyzerali, ale aby aj predávali.