Vyskakovačky



Moja prvá práca na plný úväzok bola v Accenture. Jednou zo zábaviek, ktoré som tam mal, bolo snažiť sa naučiť kolegov, ako nesprávne vyslovovať rôzne technické anglické výrazy. Mojím najobľúbenejším bol "pop-up", ktorý som vyslovoval "púp ap". Anglicky by to bol "poop-up" a preklad, bohužiaľ aj chvalabohu (©Gašpi), neponúknem. Tajne som dúfal, že to raz niekto omylom šplechne pri mítingu s klientom. Nepamätám si, či sa to stalo alebo nie, ale pamätám si na tú našu otrasnú aplikáciu, ktorá mala týchto poop-upov viac, ako bolo vhodné. V tomto blogposte budem používať plytký sarkazmus a budem sa rozčuľovať nad nespravodlivými vyskakovačkami, vyskakovacími UI prvkami.

Múdrosť: Pop-up je tzv. bezmodálne okno. Opakom bezmodálneho okna je, prekvapivo - modálne okno. A prečo sa vôbec týmito vyskakovačkami zaoberám? Posledné 2 mesiace som zbieral modálne a rôzne vyskakovacie elementy zo všetkých stránok, ktoré som navštívil. Je to zbierka cez 200 (ne-)úspešných pokusov, z ktorých som vybral niekoľko na ukážku. Poďme si predtým ale trochu poteoretizovať:

Bezmodálne okno



Bezmodálne okno nevyžaduje žiadnu interakciu na pokračovanie v pôvodnom okne. Bezmodálnym oknom je napríklad nové okno prehliadača. Alebo vyhľadávací panel v aplikáciách. Alebo poop-up.
Ak chce používateľ nové okno na webe, vie ako ho vytvoriť a ak nie, pravdepodobne viacero okien ani nepotrebuje.


Modálne okno



Modálne okno spustí určitý stav, alebo mód (odtiaľ ten názov), ktorý štandardne vyžaduje, aby s ním používateľ niečo urobil pred tým, ako môže pokračovať. Tento mód môže byť zviazaný s aplikáciou alebo s dokumentom aplikácie.




Vyskakovacie okná v aplikáciách

V mobilných aplikáciách sú všetky okná modálne, často v podobe "popovers":



Pre desktopové aplikácie vyzerajú často ako rozhranie platformy (vzhľad okraju okna a nástroje, angl. "chrome" sa nedajú zmeniť). Preto je jednoduché ich zatvoriť.
V aplikáciách sa vyskytujú nielen popovers, ale ešte aj "tooltips". Rozdiel medzi nimi je asi len v dĺžke obsahu a spôsobe, akým sa vyvolávajú. Tooltip je zvyčajne krátky a vyvolá sa pri prejdení kurzorom (po krátkej pauze). Popover je dlhší a objavuje a schováva sa kliknutím. Zriedkavo obsahuje aj nejaké interakčné prvky. Facebook často testuje popovers pre nové príspevky. Na jednu vec si treba dať pozor:
Netreba sa spoliehať na tooltips, ani popovers: ikona, tlačidlo, odkaz majú byť jasné každému aj bez použitia ďalšieho vysvetlenia.

Vyskakovacie okná v prehliadačoch

Vyskakujúce okná na webe sú to, kde začína zábava. Modálne okná môžu mať akýkoľvek vzhľad a neexistuje konzistentný spôsob, ako sa zatvárajú. Použitie vyskakovačiek v prehliadačoch je často prehnané a snahou by malo byť tomu predísť, aby sa dali neskôr použiť na miestach, kde je to naozaj žiadané. Tuto je zoznam použití, ktoré nie sú veľmi vhodné pre kvalitné UX:

1. Prieskum spokojnosti

Väčšinou ide o zber kvalitatívnych dát (spokojnosť, NPS - Net Promoter Score). Nezískam lepšie informácie pozorovaním používateľov, alebo analýzou súčasných dát? Neviem odpovede na spomenuté otázky získať iným spôsobom? A ako tieto dáta využijem v budúcnosti? Ak je tento formulár použitý ako merateľná jednotka pre ďalšie zlepšenia služby, neviem kvalitu otestovať inak? Napríklad mierou úspešnosti plnenia úloh, časom stráveným na splnenie úloh, spokojnosť (SUM) pri záverečnom interview, konverzia, zisk a pod. Zbieranie kvalitatívnych dát cez formuláre je jednoduché, ale...
Sú dáta z týchto prieskumov naozaj tak potrebné, aby sme všetkých obťažovali ich vypĺňaním?





Namiesto toho vymyslím možnosť na zanechanie spätnej väzby kedykoľvek - nielen vtedy, keď im vyskočí otravné okno. Štatistickú dôveryhodnosť získam, až keď prieskum vyplnia tisícky ľudí. Ak však k tomu dôjde, pripravím túto službu tak, aby nebola tortúrou pre odvážlivcov, čo sa do nej pustia:
  • okno zobrazím po dlhšom čase, po niekoľkých zmysluplných interakciách na stránke, nie hneď po príchode
  • ponúknem odmenu (motivácia nemusí byť výlučne extrinsická), najlepšie hneď na začiatku
  • naznačím, že ktorá akcia je preferovaná a koľko ľudí ju už splnilo (pre biznis stránky sú to logá firiem)
  • uvediem, ako dlho to potrvá
  • ak je formulár krátky (jedna, až dve otázky), jednoducho ich zobrazím hneď
  • obsah formuláru je krátky, výstižný a je ho vidno naraz (žiadne progresívne odhaľovanie polí)
  • pre potreby konverzie môžeme uviesť negatívum ignorovania tohto prieskumu ("nie, nechcem pomôcť zlepšiť túto službu", podobne ako dell.com, viď 3.)
  • toto okno nesmie vyzerať ako reklama, ale vizuálne ladí s dizajnom stránky a nesmeruje na externú službu (nie tak, ako na refresher.sk, viď 4.)


2. Prihláste sa na odber noviniek

Toto "peklíčko" sa objavuje najmä na blogoch. Dokonca aj na tom našom firemnom. Oh, tá otrava! Nie zriedkavo sa prihlásenie na odber nachádza nielen vo vyskakovacom okne, ale aj niekoľkokrát na samotnej stránke. Rozumiem tejto na biznis orientovanej motivácií: email je stále najúspešnejším nástrojom marketingu. Čitatelia to tak nevidia, chcú len prijímať kvalitný obsah a nepoznajú na to vhodnejšie technológie (RSS).



Predísť vyskakovačke sa dá napríklad zakomponovaním prihlásenia na odber noviniek niekde v rámci obsahu (na koniec, na začiatok, alebo do bočných panelov). Uistil som sa, že sa na stránke už nenachádzajú ďalšie zbytočné rozptýlenia, ktoré by mohli odpútavať pozornosť od prihlásenia do odberu (bezmodálne vyskakovacie prvky)? Ak je odber noviniek tým hlavným biznis cieľom (€ za nového odberateľa), spravil som všetko, aby obsah samotný vyzýval pre túto akciu?

Keď vyskakovacie okno, tak sa aspoň snažím odstrániť stres z tejto úlohy:
  • uvediem frekvenciu a formát obsahu mailov - ak ide o blog, resp. periodikum, nie je to nutné
  • dám si pozor na konzistentnosť - "prihlásiť na odber noviniek" (do zoznamu odberateľov) vs. "prihlásiť sa" (do systému), výzva v nadpise má odkazovať na výzvu do akcie (angl. CTA). Je dôležité, aby čitateľ nepochyboval o tom, kam sa vlastne prihlasuje (napr.: že to nie je tvorba účtu na stránke)
  • ak sa dá, skúsim obsah mailov ukázať vopred
  • reálna tvár pomáha v dôveryhodnosti (6.), bonusový úsmev (5.) a pohľad do objektívu zvyšujú magnetickosť
  • vyplnené políčko dočasným/poradným (angl. placeholder) textom je na príťaž, nechávam ho prázdne


3. Rôzne veci zadarmo

Predpokladám, že veci zadarmo pramenia z veľmi dômyselného obsahového marketingu. Lebo veľmi odborný "whitepaper", alebo úžasne transparentná prípadová štúdia, zaručene fungujúci návod, kniha receptov a podobne sa nedá zobraziť na webe, ale je ich potrebné stiahnuť ako PDF. A je nutné pri tom zanechať email. Platia tu rovnaké princípy, ako pri prihlásení sa na odber noviniek.


4. Lajknite! Zdieľajte!

Toto okno sa objavuje na stránke väčšinou pred zobrazením obsahu samotnej stránky. Presne vtedy, keď má každý záujem povedať, že tento obsah sa mu páči. Ani nie; otázkou zostáva, kedy je ten správny čas? V modálnom okne? Nikdy. Ak predsa, tak:
  • Tlačidlo "like" by malo byť uvedené zaujímavým copywritingom, v závislosti na tóne, akým firma komunikuje (7.). Príklad z red.org (8.) je veľmi autoritatívny, čo je v prípade neziskovej organizácie veľmi dobrý postup.

  • Neukážem ho po príchode na stránku (ako chillin.sk, viď 9.), ale po tom, ako vykonám nejakú úlohu, ktorá stojí za to zdieľať. Napríklad zakúpením lístku na konferenciu, ako na Eventbrite (10.).

5. Vytvorte si u nás účet

Vytvorenie účtu je veľmi cieľavedomá aktivita, súčasťou tzv. "vyčerpávajúceho prehľadávania" (Nielsen, Pernice, 2009). Znamená to, že používateľa zaujíma jeho účet, len keď ho potrebuje, alebo ak v ňom vidí hodnotu (stratím svoje dáta, ak sa nezaregistrujem?). Bude v rýchlosti skenovať UI, dovtedy, kým sa mu to nepodarí. A podľa eye-trackingových štúdií začne v hornom pravom rohu. Použitie modálneho okna je v tomto prípade náplasťou za úbohú informačnú architektúru a nesprávne nastavená biznis hodnota vytvorenia účtu (€ za každý nový účet) a vizuálnu prezentáciu (UI).



Ak však aj napriek tomu k modálnemu oknu na prihlasovanie dôjde, skúsim zredukovať škody takto:
  • ukážem prihlasovací formulár v minimálnej možnej forme (len políčko na email, nie ako Shutterfly, viď 12.) a s výzvou na akciu v znefunkčnenom stave do momentu, kým bude formulár úspešne zvalidovaný (nie ako Spiceworks, viď 11.)
  • sociálny dôkaz - ukážem, koľko ľudí už tak urobilo


  • Zvolím menej služieb na vytvorenie účtu a potom ponúknem možnosť prepojiť účty, ako prevencia chyby so zabudnutím na to, že už mám existujúci účet a záťaž rozhodovania sa
  • Zredukujem rozptyľujúce prvky (sociálne médiá, zbytočný marketingový balast)
  • Možnosť zavrieť okno, prípadne ignorovať ho bude veľmi prominentná (nie ako príklad Yummly, viď 14.) a vzhľadom uistím používateľa, že ide o modálne okno (nie ako UrbanOutfitters, viď 13.)

6. Reklama / Výzva do akcie

Sú to všetky okná vyzývajúce na kúpu produktov, na prezeranie ďalšieho obsahu na stránke, virtuálne rozhovory s odborníkmi cez "chat", odporúčaný obsah vyskakujúci zo všetkých strán webu a podobne, ktoré sa zobrazia nečakane z nenazdania. A zdá sa, že nikdy nie v správny čas.



Nebudem sa zaberať tým, či je niektoré, z týchto okien v rámci používateľských očakávaní - lebo to nie je ani jedno. Keď som donútený takéto okno navrhnúť aj napriek neuveriteľnému odporu a pod vplyvom vyhrážaní, overím si rovnaké zásady ako pri predošlých prípadoch, plus toto:
  • Reklama funguje dobre, ak dôverne kopíruje vzhľad stránky a nesnaží sa odlíšiť zmenou pozadia, prípadne rôznymi špeciálnymi bodkovanými rámami a pod.
  • Animácie príchodu okna pomôžu zvýrazniť promovaný obsah. Blikanie, odlesky, video hlavy a podobné falošné efekty nie.
  • Napokon najdôležitejšie:
Stránka sa nesmie snažiť byť príliš múdra s príliš jednoduchým riešením.



Naše správanie je zložité, preto ani riešenia zrejme nebudú jednoduché. Veľa týchto okien reaguje na nejaký predpoklad - pôvod návštevníka, dočítanie článku v nejakom čase, nedostatočná odpoveď na otázky, ktoré na stránke návštevníci hľadajú, záujem o iný produkt a pod. Často je to správny predpoklad, stavaný na dátach.
90% ľudí možno to spraví podľa štatistík, to ale neznamená, že tých zvyšných môžem nahnevať.



Ako tomu predísť, alebo znížiť škody?
  • Nesnažiť sa byť premúdrený, ale naznačiť, prečo sa tak deje.
  • Ak byť múdry, tak hlboko premyslieť logiku zobrazovania takéhoto okna a ponúknuť zadné dvierka, ak som predsa len nebol dostatočne precízny v nastavovaní podmienok zobrazenia.
  • Byť úprimný v tom, aké výhody to prinesie pre používateľa.

7. Kontaktné formuláre

Kontaktné formuláre vo vyskakovacích oknách sa rozmohli. Zaregistroval som ich na viacerých známych portáloch. Po stlačení odkazu na kontakt zobrazí (bez)modálne okno namiesto separátnej stránky. Úmysel bol zrejme udržanie návštevníkov na súčasnej stránke bez straty kontextu. Aj takéto okno sa dá vyriešiť správne, je ale nutné zabezpečiť niektoré veci:
  • Defenzívny dizajn - chybové hlásenia, prázdne stavy, tipy, ako vypĺňať formulár a pod. To je, napríklad, aby nenastalo viacnásobné (bez)modálne okno, alebo prekryté časti formuláru.
  • Výška formulára musí byť bez posúvania do 600px (kvôli zlomu stránky)
  • Ak omylom opustím okno, uložiť stav, aby bol dostupný hneď, ako sa vrátim. Ako to robí Twitter pri novom "tweete".

8. Upozornenia, oznámenia, chyby a pod.

Modálne okno s chybovým hlásením je antivzor (angl. antipattern) nútiaci používateľov k extra interakcií.



Existuje veľa spôsobov, ako správne riešiť chyby. Modálne okno ako chybové hlásenie je najhorší možný z nich (teda okrem neriešenia chybových hlásení vôbec): používateľ stratí prehľad, kde vlastne skončil, stratí "focus" (nastavený kurzor do políčka, ktoré vypĺňal) a musí si pamätať, čo mu chybové hlásenie povedalo po tom, ako ho zatvorí, prípadne...
Chybu smutne potvrdí tlačidlom "ok", ktoré v modálnom okne vysedáva a čaká na ďalšiu obeť.



Okná, ktoré nám vyskočia do tváre a napokon ani nepožadujú žiadnu akciu, sú len plytvaním času používateľov. Ako strýco Rosa vravieval:
Všetky okná, ktoré majú jediné tlačidlo - "ok" v dobrom UX dizajne nemajú miesto.





Na podobnom systéme funguje okno oznamujúce, že eshop, na ktorý som práve prišiel, konečne dováža tovar aj do Európy (17.). Na tom by nebolo nič zlé, ale do toho momentu ma trápilo najmä čo si kúpiť, nie ako to dopraviť. Jedinou ponúkanou akciou je známe a osamelé "ok", tentokrát ale s iným titulkom: pokračovať v nákupe. Jednoduché riešenie je ponúknuť možnosť zmeniť krajinu v hlavičke alebo päte stránky. Prípadne prvok, ktorý neprekryje ponúkaný tovar, tak ako výsuvná lišta (angl. tray) ako na Gilt.com (18.).


9. Sprievodca aplikáciou

Zo spomínaných príkladov asi najmenej škodný. Sú to tie malé okná, ktoré prekryjú aplikáciu, s užitočnými tipmi. Najmenej škodný je preto, lebo používateľ sa oboznamuje s aplikáciou krok po kroku. Chýba mu však kontrola. Aplikácia by mala sama naznačovať, ako pokračovať a nie ponúkať vopred nastavený postup ako jedinú alternatívu. Najjednoduchšie riešenie je zobrazovať tipy v čase, keď objaví funkciu sám (aj to veľmi opatrne!). Luke Wroblewski to nazýva "učenie sa v správnom čase" (angl. "just in time education").

10. Mediálne galérie

S obrázkami je to v skutku neutrálne riešenie (angl. "lightbox"). Jedinú nevýhodu vidím v nedostatočnej informácií, kde som pri prezeraní skončil v prípade chyby pošmyknutím (kliknem mimo modálne okno). S videom je to horšie, lebo ho budem musieť načítať znova a definitívne si nezapamätá stav, kde som skončil. A to je riadna otrava. Alternatívnym a oveľa lepším riešením je vnorená galéria, tak, ako to robí Google pri vyhľadávaní obrázkov, mediálna galéria ako separátna stránka alebo modálne okno na celú stránku.

11. Vyskakovacie okno pri úmysle opustiť stránku

Nádych, výdych.
Okej.
Poďme na to.

Predstava, že vojdem do obchodu a pri odchode na mňa bude na mňa čakať predavač a pýtať sa ma, či som naozaj tak hlúpy, že chcem odísť:
Naozaj si tak hlúpy, Julo? Naozaj?!
Pri vyskakovačkách vyžadujúcich nejakú špeciálnu akciu som spomínal, ako je nesprávne byť príliš múdry a predpokladať, že každý má vopred nalinajkované správanie. Toto okno je toho presný dôkaz. Nie každý chce opustiť stránku, keď pohne kurzorom smerom k riadku na URL adresu. Niektorí sa napríklad chcú len prepnúť na inú záložku. Niektorí môžu ísť zmeniť nastavenia prehliadača, prípadne minimalizovať okno. Vždy, keď na toto natrafím, mi je ľúto, že sa niekto musel prikloniť k takémuto úbohému riešeniu (akým žobranie o pozornosť určite je) kvôli nesprávnemu predpokladu, že každý opúšťa stránku so zlým pocitom (a tak nemajú čo stratiť).

Pozrime sa na majstra digitálneho marketingu Neil Patela a jeho Quicksprout.com, ako skvele to "zmákol" (19. a 20.).



A tak sa mi milo snaží vopchať do pozornosti svojimi rôznymi výhodami, ktoré sú: privátne, monštruózne, pre VIP, sú zadarmo a sú nové, zaručene fungujúce, instantné a tak podobne. Jediné, čo potrebuje je môj email, aby ma takto mohol otravovať ďalej a povedať mi do 3 mesiacov, ako som zlý v internete (21. a 22.).



Odporúčam navštíviť tieto stránky a prežiť pár neskutočných momentov, ktoré nikoho nenechajú chladným. A keď už sme pri tých zlých príkladoch...

12. Najhoršie vyskakovacie okná

Gap.com ma privítal super komplikovaným modálnym oknom (23.), v ktorom mi povedali, že som na zlej stránke. Na tej ďalšej stránke (24.) ma privítalo ďalšie vyskakovacie okno, tentokrát so špeciálnymi požiadavkami:



Wisegeek občas poukáže na zaujímavý fakt aj s obrázkom (25. a 26.). A to všetko náhodne počas čítania obsahu na ich stránke.



Takéto chybové hlásenie je paráda (27.)! Skombinovaný s prevedením, kde sa modálne okno ani nezobrazí (28.), to musí byť úplná šupa!



Tak si to zhrňme

Vyskakovacie okná odporúčam použiť len v prípade, že je absolútne nutné vidieť ostatný obsah, pripadne registrovať kontext. Aj pre tie prípady je lepšie siahnuť už na bezmodálne okná v rámci prehliadača. Dobrým príkladom je písanie nového emailu s možnosťou kontroly predošlej komunikácie v Gmaili:



Na každý zo spomenutých 11 príkladov existuje alternatívne riešenie, ktoré môže predísť mnohým, najmä technickým, problémom s (bez)modálnym oknom súčasnosti:
  • nesprávne sa škáluje na rôznych displejoch (29. a 30.),
  • ukáže sa pri prvom načítaní stránky, keď obsah nemá šancu správne zarezonovať,
  • je nevhodné v rámci prístupnosti (angl. accessibility).
  • je náročné určiť, či ide o modálne okno (31.)


Problémy vyskakovacieho okna v rámci skúsenosti z vnímania služby:
  • objaví sa tomu istému používateľovi viackrát - na rôznych zariadeniach,
  • akonáhle ho raz navrhnem do dizajnu služby, že už niet cesty späť (je pravdepodobné v rámci zachovania konzistentnosti dizajnu, že sa objaví na ďalších miestach),
  • môže sa stať, že jedno modálne okno vyvolá iné modálne okno (používateľ stratí kontrolu a orientáciu)
  • je ťažké predpokladať, kedy je naň vhodný čas,
  • spôsobuje stavovú chybu (používateľ nevie, v akom stave je, príkladom je "CAPSLOCK"),
  • pozadie modálneho okna niekedy neslúži ako možnosť zatvorenia okna,
  • často vzhľadom pripomína reklamu, prípadne otravné prihlásenie na odber noviniek, alebo nepripomína modálne okno vôbec
  • používateľ má pocit, že musí vykonať jednu z ponúkaných možností na to, aby mohol pokračovať na zvyšný obsah stránky (a niekedy sa ani nedá inak pokračovať ako na BespokePost, viď 32.)



Určite sa za každú cenu vyhnem v budúcnosti oknu:
  • ktoré má jedinú možnosť: "ok",
  • ktoré vyruší hneď na začiatku práce s produktom
  • ktoré nemá možnosť zavrieť ho v hlavičke, alebo kliknutím na prekrytý obsah
  • ktoré zahŕňa viackrokovú úlohu,
  • ktoré používateľovi nijako nepomôže (reklama, "exit-intent pop-up"),
To, čo ma ale naviac hnevá, je že tieto okná fungujú a konvertujú návštevníkov na zákazníkov. Tento trend je na ústupe, ale ešte stále je natoľko silný, že ho vlastníci stránok implementujú. A ešte dlho potrvá, kým ho z internetu vymažeme, lebo ho budú nasledovať iné menšie služby atď. Poop-up je spať a tentokrát nepomôže zablokovať jednu JavaScript funkciu.

Keď informácie zlacnejú, pozornosť bude drahá. (James Gleick)





Zaujímavý postoj k tejto téme majú na stránke "Tab Closed, Didn't Read" a pobavila ma aj prednáška Brada Frosta na tému znečisteného internetu.


0 komentárov :

Zverejnenie komentára