Váš web je nepou­ži­teľný. Čo s tým?

Visibility: Júlia Micháleková, Matej Orovan / 6. august 2014 / Tools a produktivita

Téma web­di­zajn a pou­ži­teľ­nosť je nesmierne roz­siahla. Náj­dete k nej mnoho kníh a člán­kov na inter­nete. Ak chcete začať, jed­no­značne odpo­rú­čame knihu Web­de­sign: Nenúťte uži­va­tele pře­mýš­let!. Ide síce o star­šiu pub­li­ká­ciu, čo sa odráža hlavne na pou­ži­tom dizajne, ale aj tak v nej náj­dete veľa uži­toč­ných rád, ktoré pla­tia dodnes. Názov knihy je záro­veň hlav­nou zása­dou pri tvorbe dizajnu webu. Nenúťte ľudí pre­mýš­ľať!

Keď nav­ští­vime stránku, ktorá je správne navr­hnutá, prvá vec, ktorá nám napadne je, čo máme robiť. Zlá stránka vyvolá otáz­niky. Kde som? Kam mám klik­núť? Prečo to takto pome­no­vali?
Každý otáz­nik zvy­šuje pra­covné zaťa­že­nie a odvá­dza našu pozor­nosť od rie­še­nia prob­lému.

Ak pôj­dete opač­ným sme­rom, pred­behne vás kon­ku­ren­cia

Veľa ľudí a firiem začína od konca. Naj­skôr inves­tujú svoj čas, úsi­lie a peniaze do kam­paní, ktoré majú na web pri­niesť náv­štev­nosť. Potom ale zis­tia, že náv­štev­níci odchá­dzajú bez vyko­na­nia poža­do­va­nej akcie. Až vtedy sa začnú zamýš­lať, kde sa stala chyba. Preto by ste pred spus­te­ním akých­koľ­vek online mar­ke­tin­go­vých akti­vít mali naj­skôr „porie­šiť” svoj web.

Tak­tiež treba mať na pamäti, že kon­ku­ren­cia je od vás na inter­nete vzdia­lená len jedno klik­nu­tie. Ak náv­štev­níka zne­chu­títe nepre­hľad­ným webom, na kto­rom nevie, čo má robiť, veľmi rýchlo a jed­no­du­cho zamieri inde.

Musíme si tiež uve­do­miť, že…

…ľudia stránky nečí­tajú, ľudia ich pre­hlia­dajú. Uží­va­te­lia vidia vašu stránku podobne, ako keď obchá­dzajú bill­bo­ard pri rých­losti 100 km/h.

1_billboard

Pri načí­taní stránky len pre­ze­rajú a hľa­dajú niečo, čo je zau­jí­mavé alebo sa aspoň pri­bližne podobá tomu, čo oča­ká­vajú. Ako­náhle nájdu odkaz, ktorý im aspoň čias­točne vyho­vuje, kliknú naň. Preto musí byť stránka maxi­málne pre­hľadná a intu­itívna.

Zvyk je železná košeľa

Väč­šina ľudí chce, aby bola ich stránka iná, výni­močná, zapa­mä­ta­teľná. Sú však určité prvky na webe, na ktoré sme zvyk­nutí. Ako­náhle ich tam nenáj­deme, ostá­vame zmä­tení a zamýš­ľame sa:

  • Prečo nie je logo v ľavom hor­nom rohu?
  • Prečo nie je hlavné menu vo vrch­nej časti webu?
  • Prečo sa hla­vička webu (logo, hlavné menu, vyhľa­dá­va­nie) neopa­kujú na všet­kých strán­kach webu? Keď sa pre­klik­nem do inej sek­cie, som vôbec ešte na tom istom webe? Ako to spo­znám?
  • Prečo neviem na stránke vyhľa­dá­vať?
  • Prečo stránky nemajú nad­pisy? Ako spo­znám, o čom stránka je?
2_otazky

V nasle­du­jú­cej časti článku popí­šeme jed­not­livé zásady pri tvorbe dizajnu webu, ktoré by ste mali z hľa­diska pou­ži­teľ­nosti dodr­žia­vať. Samoz­rejme, aj v tomto prí­pade platí, že nič nie je abso­lútne. Ak vo vše­obec­nosti platí, že logo by malo byť vľavo hore, ale vám sa viac hodí do stredu, dajte ho tam. Otes­tujte to, skúste, čo to spraví.

1. Budujte si dôve­ry­hod­nosť

Dôve­ry­hod­nosť si značka buduje tým, že má kva­litné pro­dukty, posky­tuje kva­litné služby a stará sa o svo­jich zákaz­ní­kov. Ako to všetko doká­žete uká­zať novým náv­štev­ní­kom webu, ktorí o vás nikdy pred­tým nepo­čuli?

Exis­tujú určité prvky na webe, ktoré v náv­štev­ní­koch vyvo­lá­vajú pocit dôvery (hlavne pokiaľ ide o e-shop):

Kon­taktné infor­má­cie na okam­žite vidi­teľ­nom mieste. Ide­álne v hor­nej lište (hea­der). Pod kon­takt­nými údajmi mys­líme pre­dov­šet­kým e-mail a tele­fónne číslo. Tu odpo­rú­čame uviesť aj čas, kedy ho môžu ľudia pou­ží­vať.

kontakt

Okrem kon­takt­ných úda­jov exis­tuje ešte jeden spô­sob, ako ľuďom uká­zať, že ste tu pre nich. A to pro­stred­níc­tvom live chatu. Pozor! Apli­kujte ho na stránku len vtedy, ak na dotazy sku­točne bude nie­kto odpo­ve­dať.

3_live_chat

Aj zdan­livé malič­kosti veľa­krát roz­ho­dujú o tom, či vám náv­štev­níci budú dôve­ro­vať alebo nie. „Vodít­kom” k tomu, že ste spo­ľah­livý (a sku­toční ;)), môžu byť foto­gra­fie pries­to­rov na stránke Kon­takt.

fotky-pobociek1

My, ľudia, milu­jeme vyjad­ro­vať svoj názor a tiež sa radi necháme viesť názo­rom ostat­ných uží­va­te­ľov. Preto obzvlášť dobre rea­gu­jeme na mož­nosť hod­no­tiť ponú­kané pro­dukty a služby.

4_hodnotenia

Ruka v ruke s hod­no­te­niami od zákaz­ní­kov idú aj refe­ren­cie. Aby pôso­bili dôve­ry­hodne, mali by okrem citátu obsa­ho­vať aj fotku kli­enta (reálnu fotku, reál­neho kli­enta – hlavne žiadna foto­banka).

referencie

Ďal­šia vec, ktorá našep­káva, že ide o kva­litný e-shop, sú rôz­ne­cer­ti­fi­káty a oce­ne­nia. Naprí­klad:

5_certifikaty

2. Exis­tuje doko­nalá home­page?

Odpo­veď znie: nie. Aspoň nie jedna uni­ver­zálna pre všetky weby. Exis­tuje však pár zásad, ktoré by sa mali dodr­žia­vať.

Pove­dzte ľuďom, čo od nich poža­du­jete. Jasne! Ak je cie­ľom vašich strá­nok, aby ľudia vypl­nili for­mu­lár, tak je to prvá vec, ktorú by na home­page mali uvi­dieť. Mali by ste na index umiest­niť buď samotný for­mu­lár (ak je jed­no­du­chý), alebo call-to-action prvok, ktorý k nemu vedie.

Práve index je naji­de­ál­nej­šie miesto, kde môžete (priam až musíte) odko­mu­ni­ko­vať vaše kon­ku­renčné výhody. Tie by mali byť stručné, jasné a ide­álne gra­ficky zná­zor­nené pomo­cou ikon.

konkurencne vyhody

Takisto, pokiaľ ponú­kate služby a pro­dukty, pri kto­rých nemusí byť z prvého pohľadu úplne jasné o čo ide, je nutné to už na úvod­nej stránke vysvet­liť. Prí­padne môžete zobra­ziť celý pro­ces ponú­ka­nej služby. Ide­álne opäť pomo­cou gra­fic­kých ikon, videí alebo ich kom­bi­ná­ciou.

ako to funguje

Obľú­be­ným prv­kom na weboch sa stali sli­dery. Otázne však je, pre koho? Určite nie pre prie­mer­ného uží­va­teľa. Z tes­to­vaní pou­ži­teľ­nosti totiž jed­no­značne vyšlo, že väč­šina ľudí klikne len na prvý ban­ner v sli­deri a ostatné igno­ruje. Nám sa to potvr­dilo pri A/B tes­to­vaní VISI­BI­LITY webu. Preto už na našej home­page sli­der nenáj­dete. Miesto neho máme ban­ner s mož­nos­ťou pri­hlá­siť sa do news­let­tera.

Inter­net je o tom, aby ľuďom posky­to­val infor­má­cie rýchlo a jed­no­du­cho. Preto je jasné, že väč­šina ľudí jed­no­du­cho nebude čakať na to, aby sa pre­kli­kol jeden ban­ner za druhý.
Ak už trváte na využí­vaní sli­de­rov (máte v ňom spo­me­nuté vaše výhody, akcie, pro­dukty alebo call-to-action), mali by ste uží­va­te­ľom dať vidi­teľnú mož­nosť pre­kli­ká­vať sa jed­not­li­vými ban­nermi. Ide­álne tak, aby dopredu videli, čo sa na nasle­du­jú­cich ban­ne­roch nachá­dza. Vyhnite sa nič neho­vo­ria­cim „bod­kám”. Napr:

slider1

Ak to teda zhr­nieme: o dob­rej home­page hovo­ríme vtedy, keď si nový náv­štev­ník vie okam­žite odpo­ve­dať na 4 základné otázky.
6_stranka

3. Call-to-action prvky a odkazy

Pra­cujte s call-to-action prv­kami. Musia byť na webe vidi­teľné a jasne kli­ka­teľné. Nenútťe uží­va­teľa, aby musel pre­mýš­ľať nad tým, či je niečo kli­ka­teľný but­ton, alebo nie.

amazon2-

- Môžem klik­núť? Jed­no­značne áno.

button wrong

- Mám klik­núť? Hmmm…nie som si taký istý.

Jed­nou z čas­tých chýb bývajú nadš­tan­dardné alebo nevý­razné odkazy. Práve podoba odka­zov je hlboko zako­re­nený zvyk. Text, ktorý je pod­čiark­nutý, skrátka väč­šina ľudí pova­žuje za odkaz. Čiže, ak chcete upo­zor­niť na to, že je v texte aktívny hyper­link, pod­čiark­nite ho a dajte ho inou far­bou, prí­padne bol­dom. Naopak, ak text pod­čiark­nete a nebude to pre­klik, ľudí tým môžete zmiasť.

odkaz1

4. Vyhľa­dá­va­nie

Každá stránka (snáď okrem úplne jed­no­du­chých webov s pia­timi pod­strán­kami) by mala mať vyhľa­dá­va­nie. Čím roz­siah­lejší a kom­pli­ko­va­nejší ser­ver je, tým by malo byť vyhľa­dá­va­nie sofis­ti­ko­va­nej­šie.

Práve rýchle vyhľa­dá­va­nie vám pomáha nájsť, čo potre­bu­jete. Prob­lém nastáva, keď pred­tým, ako začnete vyhľa­dá­vať pro­dukt, musíte hľa­dať vyhľa­dá­va­nie. Preto by malo byť na vidi­teľ­nom mieste.

V rámci tvorby dizajnu máte mnoho pries­toru byť kre­a­tívny. Tu ho ale nehľa­dajte. Ľudia sú zvyk­nutí na nasle­du­júci vzo­rec: vyhľa­dá­va­cie okno + napravo od neho tla­čidlo, v kto­rom je napí­sané „Hľadať”,„Hľadaj”, prí­padne „Vyhľa­dá­va­nie” alebo aspoň ikona lupy jasne ozna­čená ako tla­čidlo.

vyhladavanie

Vyhnite sa rôz­nym iným pome­no­va­niam typu „Rýchle vyhľa­dá­va­nie”, „Chcem nájsť” a pod. Toto v ľuďoch vyvo­láva zby­točné otázky.

V prí­pade e-sho­pov je ide­álne pra­co­vať s našep­ká­vačmi (auto­sug­gest alebo auto­com­plete).

autocomplete

5. Texty: SEO vs. uží­va­teľ

Čo sa týka tex­tov na webe, z uží­va­teľ­ského hľa­diska platí: čím menej, tým lep­šie (samoz­rejme, pokiaľ neho­vo­ríme o špe­ci­fic­kom obsahu ako blog­post, popis pro­duktu a pod.). Inými slo­vami škr­tajte, škr­tajte, škr­tajte. Čo v texte nevy­hnutne nemusí byť, to tam nedá­vajte. Vyhnite sa najmä nič neho­vo­ria­cim prí­ho­vo­rom na home­page typu „Vítame vás na našich strán­kach a pevne veríme, že bla blaa blaaa…”.

Určite v tejto chvíli mno­hým z vás napadlo, že toto je abos­lútne v roz­pore s on-page SEO zása­dami. Áno, tento kon­flikt, či robiť web pre uží­va­teľa, alebo pre vyhľa­dá­vač, rieši asi každý, kto sa zaoberá opti­ma­li­zá­ciou. Výcho­disko môže byť v spre­hľad­není textu.

Naprí­klad, na našom webe náj­dete služby VISI­BI­LITY pomerne pod­robne roz­pí­sané. Google teda vidí, že na webe je množ­sto ori­gi­nál­neho textu. Aby to však náv­štev­ník nemu­sel celé čítať a záro­veň pocho­pil, čo sme chceli pove­dať, je text čle­nený na malé odstavce. Každý z nich má svoj nad­pis a navyše aj ikonku. Čiže ľahko pocho­píte obsah a pointu textu, aj keď si ho len rýchlo pre­beh­nete.

text

Ďal­šia chyba, ktorú často robíme v tex­toch, je pou­ží­va­nie:

  • odo­bor­ných výra­zov (Mys­líte si, že to vyzerá profi, no v sku­toč­nosti to ľudí mätie.),
  • pre­hna­ných mar­ke­tin­go­vých výra­zov,
  • firem­ných ter­mi­no­ló­gií,
  • neštan­dard­ných skra­tiek.

6. Regis­trá­cie a for­mu­láre

Jed­nou z naj­čas­tej­ších chýb, kto­rých sa na slo­ven­ských por­tá­loch dopúš­ťame, je povinná regis­trá­cia. Ak ste shop, dajte ľuďom mož­nosť u vás naku­po­vať aj bez regis­trá­cie.

Druhá veľmi podobná zále­ži­tosť sú for­mu­láre. Čím viac toho od ľudí chcete vedieť, tým je väč­šia prav­de­po­dob­nosť, že for­mu­lár nevy­pl­nia. Prí­padne v ňom uvedú klam­livé infor­má­cie, ktoré vám aj tak budú nanič.

Snažte sa zosta­vo­vať for­mu­láre tak, aby v nich bolo úplne mini­mum polí­čok a z nich úplne mini­mum povin­ných.

Situ­ácia, ktorú každý z nás zažil: Vypĺňam antis­pam (napr. Capt­chu) na konci for­mu­lára:

  • jeden­krát zle – nevadí, skú­sim znova :D,
  • dru­hý­krát zle – uf, no skú­sim ešte raz :),
  • tre­tí­krát zle – čo som fakt idiot, že neviem opí­sať text? :/
  • štvr­tý­krát zle – to čo sú za idi­otov, však to vypĺňam správne! ://
  • pia­ty­krát zle – kaš­lem na nich, idem preč!
7_captcha

Neho­vo­riac o tom, že podľa tes­tov pou­ži­teľ­nosti veľa ľudí odíde už pri dru­hom a tre­ťom pokuse, res­pek­tíve rad­šej skúsi kon­ku­ren­ciu, ktorá ponúka to isté.

Ponau­če­nie: Vyhnite sa zlo­ži­tému ove­ro­va­niu a antis­pamu ;)

7. Navi­gá­cia

Keď sa pohy­bu­jete na webe, ste vo svo­jej pod­state stra­tení, lebo nie ste vo fyzic­kom svete a nesto­jíte nohami na zemi. Webová navi­gá­cia nás sta­via na webe do pries­toru. Preto okrem základ­ného menu a kate­gó­rií pou­ží­vajte aj bre­adc­rumb navi­gá­ciu. Hodí sa hlavne na weby s hlb­šou štruk­tú­rou. Z hľa­diska pou­ži­teľ­nosti sa odpo­rúča dať poslednú položku bol­dom.

breadcrumbs1

Ako si ove­ríte, či máte dobrú navi­gá­ciu? Keby ste sa z ničoho nič ocitli hocikde na stránke, mali by ste byť schopní odpo­ve­dať na nasle­dovné otázky:

  • Na webe akej firmy sa nachá­dzate? (logo)
  • Na akej ste stránke? (názov stránky)
  • Aké sú hlavné sek­cie tohto webu? (hlavné menu)
  • Kde sa nachá­dzate v rámci celej webo­vej stránky? (bre­adc­rumb navi­gá­cia)
  • Akým spô­so­bom môžete vyhľa­dá­vať?

8. Pár ďal­ších rád pre shopy

Ak by sme mali písať o zása­dách pou­ži­teľ­nosti špe­ciálne pre e-shopy, bol by z toho člá­nok mini­málne taký dlhý ako tento. Preto v tejto chvíli len vyme­nu­jeme pár bodov, na ktoré si treba dať pozor.

  • Košík musí byť stále vidi­teľný bez scrol­lo­va­nia.
  • Pra­cujte s dopra­vou zadarmo. Neve­rili by ste, o koľko sú ľudia ochotní viac nakú­piť, pokiaľ majú pred očami vidinu dopravy zdarma.
  • Pove­dzte ľuďom, kedy im tovar doru­číte. Ide­álne napíšte deň v týždni aj dátum.
  • Pra­cujte s opus­te­ným koší­kom.

Stačí iba časť?

Možno si poviete, že keď dodr­žia­vate väč­šinu z týchto zásad, ale nie všetky, tak váš web bude dosta­točne pou­ži­teľný a nie je nutné inves­to­vať čas, úsi­lie a peniaze na opravu tých zvyš­ných.
Nemusí to byť ale pravda.

Náv­štev­ník oča­káva istú mieru nepo­hod­lia. Keď mu niečo nejde podľa jeho pred­stáv a nevie niečo nájsť. Môže to skú­šať ďalej a neodíde hneď preč.
Treba si však uve­do­miť:

  1. Každý náv­štev­ník je iný (nie­kto odíde už pri prvom skla­maní).
  2. Nie­ktorí náv­štev­níci, skôr ako prišli na vašu stránku, boli na inej, kde už nejaké to nepo­hod­lie zažili. Teraz im už stačí len kvapka, aby opus­tili aj tú vašu.

Aj preto odpo­rú­čame pou­ži­teľ­nosť tes­to­vať už na vývo­jo­vých ver­ziách vašej stránky, ide­álne už na wiref­ra­me­och a gra­fic­kých návrhoch.

Ďal­šie témy, ktoré úzko súvi­sia s dizaj­nom a pou­ži­teľ­nos­ťou sú typo­gra­fia a A/B tes­to­va­nie. O týchto sa viac dočí­tate v ďal­ších člán­koch, ktoré pri­budnú na našom webe.

Zdroj: visi­bi­lity

Pridať komentár (0)