A gyors működés illúziója

Várakozol, mindig valamire várakozol. Vársz az üzletben a pénztárnál, vársz a metróban, vársz a dugóban, vársz a bankban, vársz az ismerősödre, de ez még mind hagyján. Vársz a operációs rendszered frissítési menetére, az appok telepítésére, az oldalak betöltésére, a bankkártyás fizetésed feldolgozására. Szeretnéd függetleníteni magad az időtől, mint ahogy mindenki más is. Viszont amíg ez nem megy, addig várnod kell. Vajon meddig bírsz várni? Mitől függ, milyen hosszúnak érzed a várakozást? Lehet ezt befolyásolni? Ezekre a kérdésekre kerestem válaszokat.

Az idő fogalmával meg sem próbálkozom, sokakat izgat, számtalan értelmezéssel állt már elő megannyi bölcs ember. Hozzám Saiid kissé módosított szavai állnak a legközelebb, illetve Wittgensteiné:

Nincs idő, nincs fizika se, csak lendülünk a semmibe pic.twitter.com/cW0WlQzZXJ
— Kolozsi István (@kolboid) 2016. november 27.

A kérdések megválaszolásához számodra bőven elég lesz megismerni az idő érzékelését, méghozzá pszichológiai szempontból.

A pszichológiai idő

Az idő múlásának érzékelése felettébb szubjektív. Arról szól, hogy az ember hogyan tapasztalja, és emlékszik az eseményekre. Gyakorlatilag egy illúzió. Esetünkben, két esemény között észlelt és érzékelt időintervallum a fontos, ami mindenkinél más és más lehet.

Az idő érzékelése erősen függ az adott egyén aktuális érzelmi állapotától, korától, kulturális elfogultságaitól, szomatikus markereitől, közvetlen környezetétől, a kontextustól, azaz relatív:

„Tartsd a kezed egy percig a forró kályhán, meglátod, egy órának fogod érezni. Beszélgess egy csinos nővel egy órát, mintha csak egy perc lenne. Na, ez a relativitás.”
– Albert Einstein

Manipuláció

Meglepően könnyedén lehet manipulálni az emberek idő érzékelését, ami felvet etikai kérdéseket is. Tehát kérlek, kizárólag úgy és akkor alkalmazd ezen ismereteket, amikor azok egyben az emberek érdekét is szolgálják.

Nagyszerű példák a fizikai valóságból az időmúlás érzetének manipulációjára: a liftekben elhelyezett tükrök, a pletykalapok és könyvek a várótermekben. Ugyanígy az ún. „placebo button”-ök, avagy placebo gombok alkalmazása kereszteződésekben. Egyáltalán nincs hatásuk, viszont mi emberek ezerrel nyomkodjuk ezeket, ugyanis szeretjük, ha kezünkben van az irányítás, legalábbis a kontroll érzete. Ezek a tevékenységek kizökkentenek, lefoglalnak minket, már nem is várakozunk, mint ahogy a következő klasszikus példa és történet is mutatja.

A houstoni repülőtéren rengeteg utas panaszkodott arra, hogy a csomagjaikra sokat kellett várniuk, lassú volt a szolgáltatás. Mint kiderült a klienseknek 1 percet kellett sétálniuk a poggyász kiadó helyhez, majd ott 7 percet várniuk a csomagjuk megérkezésére.

Érdekes megoldással oldották fel a helyzetet. Messzebbre tették az érkezési kaput, és átirányították a csomagokat egy távolabbi poggyász kiadó helyre. Az utasoknak most már 6 percet kellett sétálniuk és mindössze 2 percet várniuk. Ezzel a húzással nullára redukálták a panaszok számát.

Várakozás

Felhasználói élmény tervezésekor különösen fontos a várakozással eltöltött idővel, annak észlelésével is foglalkozni. Azt ugyebár nem kell külön kiemelni, hogy mennyire fontos az ember számára az azonnali visszajelzés. A háttérrendszert, a megjelenítő réteget a fejlesztők optimalizálják és a lehető leggyorsabbra faragják, de ahogy a fentiekből is láthatod, nem csak a tényleges (fizikailag mért idő) sebesség számít, sokkal fontosabb, hogy milyen gyorsnak észlelik azt az emberek és az, hogy erre később hogyan emlékeznek.

A legfontosabbak, amit tudnod kell a jelen idő átéléséről:

minél eseménytelenebb, annál hosszabbnak tűnik
minél tartalmasabb, annál rövidebbnek tűnik
ami emocionálisan pozitív, rövidebbnek hat
ami emocionálisan negatív, hosszabbnak érződik
egy kívánatos esemény várakozási ideje meghosszabbodik
egy nem kívánatos esemény várakozási ideje lerövidül

A várakozási idő két részre bontható: az aktív és a passzív szakaszra. Amikor passzívak vagyunk, akkor lassan telik az idő. Ha ez nem lenne elég, az emberek átlagban ~36%-kal túlértékelik a várakozási időt passzív fázisban. Tehát, az a feladat, hogy csökkentsd a passzív fázist és növeld az aktív fázist. Másképpen fogalmazva:

„Tervezőként mindent meg kell tenned azért, hogy az embereket aktív fázisban tartsd, amíg várakoznak.”

Hogyan?

Mielőtt végigmegyek a lehetőségeken, előbb ismerkedj meg az emberi észlelési képességek, vonatkozó három fő időkorlátjával.

Sebesség érzékelése az idő függvényében

100ms az az időkorlát, amely alatt mindent folyamatosnak érzékelünk,
100–1000ms (1mp) között már érzékeljük a késleltetett reakciót,
8 250 ms (8,25mp) ~~10 000ms (10mp)~~ a figyelem fenntartásának időkorlátja.

Az utóbbi érték, vagyis a figyelem időtartama időközben (2015) 10 másodpercről lecsökkent mindössze 8,25 másodpercre. Mielőtt azt gondolnád, hogy húúú mennyire nem tudunk koncentrálni, akkor azért jelzem, hogy azt az időtartamot értik ez alatt, amíg fókuszálunk valami meglepőre és be is fogadjuk azt. Akkor most már következhetnek a tényleges megoldások.

1. Azonnali tartalom

Utáljuk bámulni a semmit, mert az ürességre, a bizonytalanságra emlékeztet minket. Korábban a böngészők úgy működtek, hogy amikor kattintottál egy linken, akkor egyből kaptál egy fehér képernyőt addig, amíg a kívánt tartalom be nem töltődött. Ezt a viselkedést változtatták meg úgy, hogy kattintáskor megmarad a korábbi tartalom, és ha betöltődött az új oldal, akkor jeleníti meg azt a böngésző. Így az emberek nagyságrendekkel gyorsabbnak érzik a betöltést, ráadásul addig le tudják foglalni magukat az előttük lévő anyaggal. Mint mindennek, ennek a megoldásnak is megvan a maga hátránya. A böngészők ugyan a tab elején, vagy a bal alsó sarokban jelzik, hogy elindult egy folyamat, de ezt általában nem veszik észre az emberek.

A lényeg, hogy lehetőleg mutass egyből tartalmat!

Progresszív kép megjelenítés

A klasszikus, de nem túl szép, mégis hasznos fogás, a JPEG képformátum progresszív módja. Ekkor tüstént látod a képet szörnyen rossz minőségben, és ahogy töltődnek le az adatok, úgy alakul, élesedik ki a kép.

Számos website (pl. a pinterest) a kép mögötti hátteret kiszínezni a kép meghatározó színére, és akkor jeleníti meg a képet, ha az teljesen betöltődött.

Talán a legelegánsabb megoldást alkalmazza a medium. Két képpel dolgozik. Az első letöltésre kerülő kép egy roppant lebutított és ennek megfelelően kicsi méretű kép, amit blur() effekttel szétken, így csak a kép érzete marad meg. Majd mikor betöltötte a nagy méretű képet, akkor áttűnéssel kiélesedik a kép. Szép és szemrevaló.

Progresszív tartalom megjelenítés

Hasonlóan a medium trükkjéhez, lehet és érdemes élned egyéb szöveges tartalmak esetén is a helykitöltő elemek használatával. Példának okáért a Facebook és a Slack is alkalmazza, ahogy a következő képen is látszik. Lényege, hogy a háttérben kicsi finoman pulzáló háttérkép jelenik meg, ami imitálja a végleges szöveges, képi tartalmat. Ez nyomban megjelenik és utána töltődik a helyébe a tényleges anyag. Ezzel a fortéllyal is gyorsabb sebesség érzetet lehet elérni az emberekben.

Slack és a dummy content, placeholder betöltés közben

Zene, videó lejátszásánál előtárolás

A YouTube-tól, a Vimeoig, a SoundCloudon át minden médialejátszó először egy kis részét tölti le az audio, vagy videó tartalomnak és nyomban elkezdi a lejátszást, amint az lehetséges. Ez a buffering, ugyebár.

Hajtás fölötti rész betöltése elsőként

„Above the fold”. A Google PageSpeed Insights is figyelmeztet erre és pontokat von le, ha nem megfelelő a megoldás. A lényege, hogy a website első nézetében látható tartalomhoz tartozó JavaScript és CSS stílusoknak (head szekcióba direkten bemásolva) függetlennek kell lennie az oldal egyéb részeitől, hogy minél hamarabb meg tudja jeleníteni azt a böngésző.

Ha webfontot használsz, akkor mindig, de mindig legyen megadva a CSS deklarációban websafe font is, hogy azonnal megjelenjen a szöveg, és ne kelljen várni az egyedi betűtípus letöltésére.

Lépcsőzetes betöltés (staggered, lazy loading)

Lényege, hogy darabokban töltöd be az oldal részeit. Először a legfontosabb elemeket, majd szakaszonként a többit. SEO szempontból problémás lehet ennek a használata, arról nem beszélve, hogy erősen támaszkodik JavaScript használatára, ami akadálymentességi kérdéseket is felvet. Szóval nagy körültekintéssel érdemes alkalmazni.

2. Munka a háttérben

Hihetetlen milyen kevesen használják, pedig a prefetch megoldást a Safarin kívül minden böngésző támogatja. Lényege, hogy a háttérben már elkezded a munkát még mielőtt a felhasználó elindítaná az interakciót.

Böngészővel betöltöd előre a tartalmat

Adott oldalnál, vagy analitikára, vagy a tipikus útvonalnak megfelelő oldalt előre megadod a böngésző fejlécében, és betölteted vele a háttérben, így mire a felhasználó kattint azonnal megjelenik a kívánt tartalom.

Számtalan olyan esetet lehet felsorolni, amikor biztosra mehetsz.
Ilyen például egy bejelentkezési űrlap. Amíg a felhasználó az email jelszó párost pötyögi be, a háttérben előre be lehet tölteni a szükséges elemeket, amit belépés után kell megjeleníteni. Ugyanígy előre betöltheted egy webshop vásárlási folyamatában a következő oldalhoz szükséges elemeket. Kevesen használják, de miért?

Van még egy okos JavaScriptes megoldás is, ami annyit tesz, hogy mikor egy gomb, vagy link közelébe kerül a felhasználó kurzora (nyilván csak desktopon érdekes), akkor elkezdi a háttérben betölteni a szükséges tartalmat. Vagyis feltételezheted, hogy a felhasználó rá is fog kattintani az adott elemre.

Feltöltés a háttérben

Nagyszerű példa az instagram képfeltöltési megoldása, ugyanis amíg a kép leírását adod meg, illetve taggeled a posztod, addig ő már vígan tolja fel a képet a szerverre. Mire odajutsz, hogy megnyomd a feltöltés gombot, általában már véget is ért a feltöltés.

3. A figyelem lekötése

Okosan használd a forgó, pörgő, pulzáló betöltést jelző ikont (spinner). Lehetőleg kerüld a teljes képernyős leszürkítést és felület blokkolást. Pontosan azért, mert így lehetőséget sem adsz a felhasználónak, hogy lefoglalja magát, amíg várnia kell.

Értékes tartalom

Rövidítsd le a várakozási időt azzal, hogy értékes és hasznos tartalmat adsz az embereknek: tippek, idézetek stb. Azaz ezáltal növelheted az aktív fázist. Jó magyar példa erre a Mozi24 mobil app, ami minden indításkor ad egy, a mozi világával kapcsolatos érdekes információ morzsát.

Ha tudod, hogy előreláthatólag akár sokáig is tarthat a betöltés (azaz nem tudod pontosan meddig), akkor jó megoldás lehet, ha egy szöveg cserélődésével operálsz. Az egyik appban ezt a megoldást használjuk:

Vizuális illúziók

Vizuális trükkök alkalmazásával is lekötheted a figyelmet, ami sok esetben elég ahhoz, hogy megváltoztasd az idő érzékelését.

Nem csak látványosak az animációk, melyek átvezetnek egyik képernyőről a másikra, hanem azok lekötik az ember figyelmét arra a kis időre, amíg várakozik. Ezzel értékes másodperceket lehet nyerni, és aktív fázisban tartani a felhasználót.

Csak érdekességként említem meg, hogy létezik egy időbeli illúzió, amit úgy hívnak, hogy Chronostasis. Jó példa rá az úgynevezett „The Stopped Clock illusion” (megállított óra illúzió). A szemünket időnként gyorsan átmozgatjuk egyik tárgyról a másikra (ez a szakkád). Ilyenkor az agyban elmosódott kép jelenik meg, amit az agy nagyvonalúan töröl és behelyettesíti azzal a képpel, amire fixált a szem. Ezért van az, ha hirtelen ránézel egy óra másodperc mutatójára, akkor hosszabbnak tűnik az első másodperc, mint az utána következők. Naponta az ilyen szakkádok miatt kb. 40 percet töröl az agyad. Kipróbálhatod magad is egy tükör előtt állva. Nézd a jobb szemed, majd ugorj át a bal szemedre. Sosem fogod a szemeid mozgását észlelni. Ha viszont valaki melletted áll és figyel, ő látja a szemmozgásod. Próbáld ki! ;)

Próbaként készítettem a következő primitív animációt, amit megmutattam néhány embernek (kis minta, 16 ember), hogy nézze végig, majd mondja meg mennyi ideig tartott az animáció. Átlagban 7,55 másodpercet becsültek, az egyébként 10 másodpercig futó animáció hosszára. :) Nyilván ez csak nagyobb kijelzőkön (desktop) működik, mert kell egy minimális szög a szemmozgáshoz.

Pillanat

Végül egy másik vizuális illúzió példa a letöltési sáv (progress bar) animálása. Egyszerűen azzal, hogy a sáv pulzál, gyorsabbnak érezzük a folyamatot, mint egyszínű változatban. Ezt az illúziót fokozhatod azzal, ha ellenkező irányba mozgó bordázatszerű mintát teszel a sávba. Ha ezt mind együtt alkalmazod, akkor az emberek majd 11%-kal gyorsabbnak érzik a folyamatot. Ha ezt megfejeled egy szinuszos gyorsulással (easing in), akkor rátehetsz még egy lapáttal. Íme a videó Chris Harrison kutatásáról.

4. A jövő megmutatása

Időnként pontosan tudod, hogy mennyi ideig fog tartani a procedúra, és ha ez kellőképpen hosszú (5 másodpercnél tovább tart), akkor bátran írd ki a felhasználónak egy visszaszámlálóval egyetemben. Mutasd nekik, hol járnak. Az őszinteséget díjazzák az emberek, és a megadott ideig nyugodtan tudnak mást csinálni. Ezt tényleg csak akkor alkalmazd, ha biztos vagy az időpontban, mert nagyon fel lehet dühíteni az embereket azzal, ha megáll az óra, vagy a százalék. Ugye ismerős neked is a régi Windows Update, ami 99%-on megállt vagy egy fél órára?

Feladatok elvégzése később

Az instagram majd minden funkciója (like, követés, komment), de a twitter követés gombja is azonnal mutatja, hogy sikeresen végrehajtotta a kívánt feladatot függetlenül attól, hogy az tényleg megtörtént, vagy sem. Elindítja a háttérben a műveletet, vagy ha épp nincs internet, akkor majd később el fogja. Ezzel is óvatosan kell bánnod, egyrészt mert megtéveszted az embereket, másrészt pedig kizárólag NEM kritikus funkció esetén szabad használni.

Végszó

Megpróbáltam összegyűjteni az összes praktikát, ami szóba jöhet, ennek ellenére biztos vagyok benne, hogy vannak még apró trükkök, ezért arra kérlek, hogy kommentben írd meg, ha tudsz ilyet.

„Az idő csak úgy létezik, mint azoknak az eseményeknek az eredménye, amelyek benne történnek."
– Martin Heidegger

kolboid blog