Pozerám na web



Posledný mesiac som sa s prestávkami venoval knihe z roku 2010 od nášho kamoša Jakoba, ktorá sa volá "Eyetracking Web Usability", v preklade "Sledovanie oka použiteľnosti webov". Dáva môj preklad zmysel? Nie. Ale kniha samotná mi poskytla zaujímavý prehľad o tom, ako sa menili weby s postupnou adaptáciou výskumov podobných štúdií. V tomto článku zhrniem terminológiu eyetrackingu a aj nejaké svoje naivné úvahy o všeličom možnom, čo som v knihe objavil.

Eyetracking je metóda pozorovania chovania ľudí pri používaní nejakého digitálneho produktu sledovaním pohybu ich očí. Slúži na to zaujímavá super drahá technológia (Tobii stojí niekoľko tisíc eur), ktorá vyzerá ako okuliare, alebo ako zdvojená webkamera. V súčasnosti existujú aj menej spoľahlivé, ale oveľa lacnejšie varianty, ako napríklad The Eye Tribe, alebo Gazepoint.

Existuje niekoľko štúdií, ktoré dokazujú vysokú mieru súvisu medzi pohybom kurzoru a pohľadu oka. Takýto názor prirodzene presadzujú firmy, ktoré ponúkajú zaznamenávanie pohybov kurzoru myši (Clicktale, Mouseflow a pod.). Niektoré hovoria až o 88% korelácií (2001), niektoré o 42,2% (2007) a niektoré ešte menej (2008). Skúsenosť však dokazuje, že to, kde sa oko stretáva s kurzorom je len vtedy, keď ide používateľ na niečo kliknúť. Napokon to môže každý posúdiť aj sám: nachádza sa teraz kurzor myši nad touto vetou?



V eyetrackingu sa používa hŕba ťažkých termínov, ale najdôležitejšie sú tieto dva: fixácie a sakády. Fixácia je zastavenie pohybu oka na nejakom mieste a sakáda je pohyb smerom k tomuto miestu. Na videu (vyššie) je vidno, ako rýchlo sa to všetko deje. Fixácie sú kruhy, ktoré sa zväčšujú v závislosti od času a čiary medzi nimi sú sakády.



Všeobecne je dobré, ak sú sakády čo najkratšie a fixácie čo najbližšie pri sebe. Čiže ak sa na nejakom mieste eyetrackingu vykreslí čosi ako oblak, znamená to, že sa pozornosť používateľa upriamuje na toto miesto. Ak sa vykreslí pavučina, je to zlé a znamená to, že je zmätený a takéto miesto stále hľadá.

Zmysel eyetrackingu

Vykonať eyetracking pre potreby UX dizajnu je častokrát prehnané a pre samotný dizajn stránok nie veľmi potrebné.


Marketéri môžu zistiť, že sa niekto na ich animované reklamy nepozerá, tvorcovia obsahu môžu zistiť, že ľudia nevenujú pozornosť ich generickým "stock" obrázkom, ale samotní UX dizajnéri môžu vďaka eyetrackingu zistiť:
  • kde ľudia štandardne očakávajú elementy rozhrania (vyhľadávanie, menu, osobné menu, logo...), na to existujú prieskumy a dá sa od nich odpichnúť (napr. De-facto štandardy od H.Adkisson a odporúčam aj jej viac "grafickú" stránku). A takto odsledovali Nielsenovci (2010), kde sa ľudia pozerajú najčastejšie:

  • či je dávkovanie obsahu na (dlhých) stránkach správne a udržiava záujem a pozornosť návštevníkov
  • či rozloženie elementov nie je náročné na skenovanie (príliš veľa sakád)
  • ako sú prehliadané nadpisy, prehliadaná grafika, tlačidlá a pod.
  • aké je skutočné poradie vnímania elementov na stránke
Posledný bod je asi najdôležitejší pre UX dizajn. Toto sa viem dozvedieť jedine z veľmi, VEĽMI podrobne spracovaného používateľského testovania alebo z eyetrackingu.

Problémy

V literatúre o eyetrackingu rozoberajú veľa druhov odsledovateľných problémov. Vybral som niektoré z nich:
  • Elementy, ktoré pútajú pozornosť v nesprávny čas sa volajú "falošné stopy" (angl. miscues). Sú to presne tie všelijaké odkazy zobrazené v nesprávnom čase, všetky zbytočne zvýrazňované texty, všetko, čo zaujme, keď nemá.
  • Vizuálny smog - komplikované stránky strašia na webe ešte stále a aj keď je to všetkým dávno jasné, že:
Jednoduché stránky podporujú zvedavosť a mieru objaveného obsahu.


  • Popletené priority - nejaká časť stránky je príliš výrazná a ľudia preto hľadajú všetky podstatné informácie práve na tomto mieste ignorujúc zbytok. To sa stáva na stránkach s obsahom usporiadaným do dvoch (a viac) rovnocenných stĺpcov. Prípadne s novodobými dlhými stránkami, ktorých jedna zložka je "interaktívna" a ostatné nie. Nielsen a Pernice uvádzajú príklad navigácie napravo, kde si ľudia takto centrálnu funkciu vôbec nevšímajú kvôli obsahu na ľavej strane. 
  • Príliš dobré, aby to bola pravda - ľudia prehliadnu požadovaný obsah, lebo podcenia kvalitu stránky. Je to presný opak problému pri popletených prioritách.
  • Preskakovanie obrázkov - Tak napríklad v dnešnej dobe dizajnéri radi používajú ikonky aj tam, kde to nie je nutné, plýtvajú priestorom používaním zbytočných obrázkov. Najviac zbytočné sú obrázky na korporátnych weboch. 
Generické obrázky v obsahu a obrázky, ktoré sú súčasťou navigácie sú jednoducho ignorované a sú len na príťaž. 


Vďaka takémuto umiestneniu generického "stock" obrázku na portáli slovensko.sk sa sekundárna navigácia takmer úplne stratí aj napriek tomu, že je napísaná NAOZAJ veľkým písmom.


  • Horúci zemiak (z angl. hot potato) - kedysi dávno som spomínal to, ako si ľudia vytvárajú príbehy o veciach a udržiavajú si ich v hlave ako najvyššiu pravdu o fungovaní produktu. Pri skenovaní stránky používatelia vyhodnotili, že na nejakom mieste sa nachádza v tej chvíli nepotrebný obsah. Rýchlo zablúdili zrakom kdesi inam, bez toho, aby skúmali tento obsah dôkladnejšie. Takéto správanie - rýchle zablúdenie na neužitočný obsah, ktorý v momente odhodíme, sa volá horúci zemiak.
  • Miznúca navigácia - keď sa navigácia "transformuje", prípadne mení miesto. Pre používateľa je to vždy návrat na začiatok a opätovné spoznávanie stránky. Pekný príklad z ibm.com:

Najlepšia navigácia je taká, o ktorej na vieme, kde je, a preto ju ignorujeme. 


  • Hybnosť - t.j., keď nechcem použiť nejakú užitočnú funkciu len preto, lebo už mám daný iný smer, ktorý viem, že funguje. Toto je všeobecný problém s použiteľnosťou produktu a nielen problém eyetrackingu.
  • Reklamná slepota - ignorovaný obsah len preto, lebo pripomína reklamu. Vo všeobecnosti, červený text s rámčekom, veľké nadpisy tučným písmom, príliš pútavé tlačidlá, pohyblivé obrázky a podobne. Od čias tohto výskumu sa o tomto fenoméne písalo veľa.

Médiá

Médiá a reklama sú asi najzaujímavejšie časti celého eyetrackingu. Eyetrackingové štúdie neskúmajú, či je dobré, alebo zlé, že sa ľudia na nejaké obrázky pozerajú, skôr rieši, prečo sú niektoré obrázky viac príťažlivé, ako iné. Trochu mi to prekážalo, lebo často to riešili na miestach, kde prítomnosť obrázkov bola len formálna a nie veľmi užitočná.

Poznatky o médiách:
  • Pozeranie sa medzi nohy - ľudia to robia inštinktívne, lebo zisťujú, či sa dá s jedincom páriť. Medzi nohy sa ale viac pozerajú muži.
A potom ešte sú tu psy, ktorým sa všetci radi pozerajú na genitálie.



  • Radšej živé ako ilustrácie - ilustrácie sú menej uveriteľné a často ignorované. Dokonca, ak ľudia plnili nejakú úlohu, ilustrácie im len zavadzali. V súčasnosti je ilustrácia najnovší "boom", lebo sa estetikou hodí k minimalistickému dizajnovému prejavu a ľahšie sa animuje. Hodil by sa na to výskum, či sa niečo zmenilo na výsledkoch od Nielsenovcov... Treba tiež dodať, že usmievajúci sa pekní ľudia pozerajúci sa uprene do objektívu pútajú pozornosť stále. Je to kvôli nášmu detektoru pohľadov, ktorý nám bol pribalený v základnej výbave.
  • Ilustrácie sú vhodné najmä na popis fungovania, schémy ukazujúce, ako produkt používať a návody. A tam by to malo skončiť. Dobrý príklad je websupport.sk, ktorého nová identita nepozná nič iné, čo je trochu zväzujúce: Takéto pekné ilustrácie sa často "strácajú" pri skenovaní stránky.

  • Ecommerce obrázky - produkt dôkladne vystrihnutý na bielom pozadí dopadol v prieskume najlepšie, ostré obrázky a čo najväčší rozmer ukážky produktu na stránke detailu. Nemá zmysel ukazovať obrázky na stránkach kategórií, iba ak kategórie výrazne rozlišujú tovar podľa tvaru. A tak sa stane, že Alza má zbytočne veľa obrázkov pri navigácií a Agem túto chybičku pri redizajne odkopíruje...

  • Screenshoty v reálnej veľkosti - je docela otrava vidieť screenshot aplikácie na prezentačnej stránke, ale nevedieť prečítať, čo sa tam deje.
  • Animácia - štúdia uvádza, že používatelia trávili čas čakaním na to, keď skončí. Ak bola animácia nekonečná, tak mali smolu. Pozreli si ju niekoľkokrát zbytočne. Animácie výrazne ovplyvňujú koncentráciu a používatelia boli vyvedení z miery a robili chyby v nasledujúcich úlohách.
  • Automaticky spúšťané video a rozprávajúce hlavy - nikdy. Výnimkou sú služby na ukladanie a šírenie videa, prípadne sú očakávania UX nastavené len na sledovanie videa.
Nedávno sme testovali polohu obrázku pri voľbe balíka služieb (výber ceny). Poloha obrázku bola jedna z viacerých zmien, ktorá mala vysoký vplyv na rast konverzií. Išlo o rozmazanú fotku fotografa mieriaceho objektívom na jeden z preferovaných plánov. Súvisí to s Gestaltovým pravidlom kontinuity a vizuálnou váhou obrázku. Tu, malá schémka:



Príťažlivosť niektorých častí webových stránok sa dá ľahko predpovedať vďaka magnetickosti. Je to ich schopnosť uchmatnúť pozornosť človeka a je jednou z najžiadanejších vlastností pri tvorbe rôznych digitálnych reklám.

Magnetické elementy

Sú to:

Elementy rozhrania: interaktívne súčasti stránok.
  • odrážkový zoznam ako tento (v HTML: <ul>)
  • rozbaľovacia ponuka (v HTML: <select>)
  • prázdne polia formulárov (v HTML: <input>)
Ikonické obrázky: Spomínané pár riadkov vyššie - ide o jednoducho pochopiteľné obrázky, ktoré na prvý pohľad prezradia svoj význam bez dlhého zamýšľania sa.
  • ak je na obrázku vidno väčšiu časť obnaženej kože (napr. nejaké polonahé batoľa), alebo ak tvár zaberá väčšiu časť obrázku
  • ak sa osoba na obrázku pozerá do objektívu, usmieva a je atraktívna
  • ak je objekt obrázku solitér (samostatne stojaci, osamelý), obrázok je ostrý a pozadie je jednoduché, prípadne menej výrazné (napr. rozmazané)
  • ak je objekt obrázku vystrihnutý na bielom pozadí
  • ak je obrázok nečakane originálny (napr. ak sa na stránke technickej podpory objaví kôň)
  • ak je obrázok priamo týkajúci sa obsahu (napr. na stránke o veľrybách obrázok vráskavca)
  • ak sa ľudia alebo zvieratá pozerajú na objekt obrázku, prípadne k objektu smeruje iný objekt

Reklamy

Magnetickosť sa dá využiť aj na reklamy. Treba si dať pozor najmä pri elementoch rozhrania (prázdne polia, tlačidlá, rozbaľovacie ponuky), aby nenastavili falošné očakávania. Ak kliknem na rozbaľovaciu ponuku a zistím, že to je reklama na poistenie, určite nebudem nakupovať. Aj keď...
Vedľa tlačidla sme umiestnili prázdne pole, ktoré nebolo vôbec potrebné a konverzia reklamy vzrástla.





Magnetickosť môže byť pri novodobom marketingu vcelku nepotrebná. Nový "boom" vo svete reklám, tzv. natívna reklama využíva práve Nielsenom a Pernice ilustrovanú vlastnosť:

Najlepšie funguje reklama, ktorá zodpovedá vizuálnemu štýlu stránky.



To je presne to, čo robí Facebook a Twitter so svojimi podporovanými príspevkami zobrazujúcimi sa medzi príspevkami našich kamarátov.



Predchádza sa tak reklamnej slepote a zároveň sa reklama stáva priateľská, lebo sa týka obsahu a je to interná reklama, takže je určite relevantná. Shoppie.sk to nerobí veľmi správne:



A rovnako nedobre aj hej.sk a takmer každý ďalší slovenský eshop.



Príklad dobrej reklamy, ktorá sleduje vizuál stránky je napríklad jetsetter.com, kde väčšiu časť obsahu nad zlomom stránky tvorí reklama. Tá je relevantná, prívetivá a vyzerá dôveryhodne.



To je síce pekné, keď manažujem internú reklamu, tam sa to ešte dá, ale čo tá externá?
  • text by mal byť mimo obrázku a bez pozadia
  • textové reklamy fungujú lepšie, ako tie obrazové a pohybujúce sa (65% je úplne ignorovaných pokiaľ majú obrázok podľa Pernice, 2010)
  • reklamy je najlepšie ukazovať, kým sa nejaká časť stránky načítava - prípadne ju ukázať pred samotným obsahom
Webdizajnéri experimentujú so všakovakými pokusmi s reklamami snažiac sa vyzdvihnúť jednu zo spomínaných vlastností. Reklama sa zobrazí po dočítaní obsahu tak, že vyskočí vpravo dole. Alebo sa zobrazí modálne okno. Alebo sa zobrazí reklama cez celú obrazovku, ktorú musíte preskočiť. Prípadne si musíte pozrieť niekoľko sekúnd z videa predtým, než sa pustí ďalšie. V každom prípade, vždy existuje viacej prívetivé riešenie pre ľudí.

Záver

Táto kniha poznačila svet internetu a vyvolala vo svojej dobe dosť kontroverziu: webdizajnéri začali cpať všetok reklamný obsah nad zlom stránky (angl. the fold), všetky bannerové reklamy majú tlačidlá a položila základy pre moderný obsahový a natívny digitálny marketing. Myšlienka, že weby treba testovať s používateľmi, ktorú chceli NNgroup dostať do povedomia svojou publikáciou sa obrátila proti nim a zmenila web na ešte menej použiteľnú zmesku. Určite túto knihu odporúčam aj napriek svojim trochu neaktuálnym grafickým príkladom (webdizajn z 2000 až 2005).


0 komentárov :

Zverejnenie komentára