Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2017-09-050 komment

Apróságok, melyek rendkívül sokat számítanak a weboldaladnál

Egy weboldal készítése vagy redesignja során – miközben próbálod átlátni, megtervezni az egészet – könnyű elfeledkezni olyan kisebb jelentőségűnek tűnő webdesign elemről, mint a mikrointerakciók és a microcopy. Ezek gyakran apróságoknak tűnnek, és hát vannak “fontosabb dolgok” is, pedig a jó és a rossz felhasználói élmény között a különbséget nagyon sokszor ezeknek részletes kidolgozása jelenti.

Vizuális visszajelzések: a mikrointerakciók

Amikor egy egész weboldal koncepcióján dolgozunk, nagyon könnyű elfeledkezni arról, hogy a megfelelő használhatóság érdekében mindenképpen vizuális visszajelzéseket kell adnunk az embereknek. Azon a weboldalon, ahol nincsenek visszajelzések, nem beszélhetünk megfelelő interakcióról. Ez olyan, mint amikor beszélsz valakihez, ő pedig csak néz rád üveges tekintettel. Nem sokra mentek, igaz? Ugyanez a helyzet a weboldalak esetében is.

Ha hiányoznak a visszajelzések, az megzavarja a felhasználókat. Ilyenkor nem érzik azt, hogy a kezükben lenne az irányítás. A visszajelzések mutatják az embereknek, hogy

  • a weboldal észlelt egy felhasználói cselekvést,
  • majd láthatóan és érthetően kommunikálja az interakció eredményét.

Mivel a valós életben a gombok, tárgyak, eszközök valamiként reagálnak a hozzájuk kapcsolódó cselekvésünkre, így ezt várják el az emberek a weben is. Szükség van rájuk azért is, hogy tájékoztasd őket a cselekvésük eredményéről, vagy hogy éppen közöld velük, hogy mi a jelenlegi helyzetük, hol járnak például egy folyamatban. Célszerű a gyakori és kis horderejű cselekvéseknél visszafogott visszajelzéseket alkalmazni, míg a ritkább és fontosabb lépéseknél szembetűnőbb reakciókat mutatni.

A mikrointerakciók fő feladata, hogy javítsák a felhasználói élményt. Fontos visszajelzéseket adnak a felhasználóknak, érthetőbbé tesznek funkciókat, ráadásul szórakoztatják is őket. De pontosan miről is van szó, hogyan tervezd meg, illetve tökéletesítsd a weboldaladon a mikrointerakciókat?

Mik azok a mikrointerakciók?

A mikrointerakciók a weboldalaknak ma már egyre inkább alapvető részeivé válnak, ezek nélkül laposnak és unalmasnak tűnnek. Sokan ugyanakkor úgy gondolnak rájuk, mint valamiféle varázslatos összetevőre, melyek meglepik, lenyűgözik a felhasználókat, szórakoztatja és elkötelezi őket. Ennek megfelelően általában megtervezni sem könnyű őket.

A mikrointerakciók szinte észrevétlenül vannak jelen az életünkben. Nap, mint nap találkozhatsz velük a weben, például, amikor lájkolsz a Facebookon, változtatsz egy beállításon egy oldalon, értékelsz egy terméket, végrehajtasz egy online keresést, stb. Egy fontos csavarnak számítanak az online élmény gépezetében. A mikrointerakciók visszatükrözik azt, ahogy az emberek csinálnak valamit a való életben, és ez az, ami annyira hatékonnyá teszi őket.

Egy designernek a mikrointerakciók tervezése során az a feladata, hogy készítsen valami emberit, ami azt üzeni a felhasználónak, hogy sikeresen végrehajtott egy feladatot, egyben könnyebbé teszi az életét. Erre azonban nem kell felhívni a felhasználó figyelmét. A tervezőnek olyan designt kell készítenie, mely mindenféle környezetben működik, ugyanakkor nem szükséges hozzá semmiféle magyarázat vagy használati utasítás. A mikrointerakciók tervezésénél tulajdonképpen a tökéletes pillanatot kell megalkotnia.

Mikrointerakciók vesznek körül bennünket: egy villanykapcsolótól a közösségi média oldalak lájk gombjának megnyomásáig. Ezekre többnyire az jellemző, hogy a felhasználóknak már nem kell gondolkodniuk azon, miként is működnek. Legalábbis addig, amíg megfelelően működnek. A mikrointerakciók feladata az, hogy különböző dolgok végrehajtásában segítsenek. Például közvetítsenek egy állapotot, visszajelzést adjanak, megmutassák egy cselekedet eredményét, segítsenek a felhasználónak kezelni valamit. Mikor találkozhatsz mikorinterakciókkal?

  • Valaminek a ki és bekapcsolásakor.
  • Hozzászóláskor, bármilyen digitális felületen.
  • Egy beállítás módosításánál.
  • Egy üzenet megtekintésekor.
  • A kijelző lecsúsztatása során, amikor frissíteni akarod a kijelző tartalmát.
  • Bármilyen egyszerű feladat végrehajtásakor.
  • Eszközökhöz való kapcsolódásnál.
  • Egy fotó vagy videó megosztása vagy kedvelése esetén.
mikrointerakcio

(Forrás: https://dribbble.com/shots/1456699-Liking-Interaction-GIF)

Talán már ezekből a példákból is látszik, hogy a mikorinterakciók célja a felhasználók életének megkönnyítése. Intuitívan használhatónak, emberinek és reszponzívnak kell lenniük. Alapvetően úgy kell gondolnod a mikrointerakciókra, melyek egyetlen feladat végrehajtására jönnek létre. És itt fontos az, hogy valóban egyetlen feladatról legyen szó. A mikrointerakciók olyan feladatokat hajthatnak végre, mint az

  • azonnali visszajelzés, melynek révén visszaadják az irányítást a felhasználóknak,
  • finoman vezetik az embereket,
  • jutalmazóbbá teszik a felhasználói élményt,
  • javítanak a weboldali navigáción,
  • könnyebbé teszik azt, hogy a felhasználók interakcióba lépjenek a weboldallal,
  • bátorítják a megosztást, kommetelést, lájkolást,
  • könnyebbé teszik a jelzések, üzenetek megtekintését.

Minden ilyen interakció-típus egy emberközpontú designon keresztül vezeti a felhasználót. Az eszközök adott pillanatban még emberközelibbé tételének koncepciója a kulcs a használhatósághoz.

Mikrointerakciók a gyakorlatban

Google a material designról készült sorvezetőjében alaposan belemélyedt a mikrointerakciók hatékony megtervezésébe. A reszponzív interakciókról azt írják, hogy azoknak bátorítani kell a felhasználókat egy alkalmazás mélyebb felfedezésében azzal, hogy időszerű, logikus, de lenyűgöző reakcióval válaszol a felhasználó cselekedetére.

Az interakciók lehetnek elgondolkodtatók, akár meglepők is, de soha nem zavaróak. A Google iránymutatásában – különösen az autentikus mozgásról írt részben – segít vizuálisan is megmutatni, hogy mitől lesz egy animáció életszerű. Ez azért lényeges, mert a mikrointerakciók szinte minden esetben valamilyen animáción alapulnak.

A lényeg az, hogy ezek a pillanatok legyenek majdhogynem észrevehetetlenek és teljes mértékben funkcionálisnak. A részletekre nagyon oda kell figyelni, gondosan meg kell tervezni őket. Át kell gondolni, hogy az emberek miként fogják használni ezeket, a weboldaladat vagy az eszközt, amin megjelenik, és a részletek megtervezése során vissza kell tükrözni a használt gondolkodási sablonokat.

A részletek fontossága

Mivel a mikrointerakciók egyik jellegzetessége, hogy szinte észrevétlenek, ezért sokszor még a designerek sem nagyon figyelnek azok részleteire. Pedig a részletek fontosságát nem lehet túlhangsúlyozni. A részletek azok, melyek miatt a felhasználók szeretni vagy éppen utálni fognak egy weboldalt. Az egyszerű és lenyűgöző használhatóság az, ami miatt kiválasztunk egy ébresztőórát vagy egy időjárás-appot a telefonunkra. Amit persze valakinek meg kellett terveznie.

Amikor egy mikrointerakció megtervezéséről van szó, néhány dolgot érdemes figyelembe venni:

  • A mikrointerakcióknak többszöri használat után is működniük kell, nem idegesíthetik a felhasználót.
  • Be kell tartani az egyszerűségi szabályokat: egyszerű típus, egyszerű nyelv, egyszerű színek, egyszerű design.
  • Minden mikrointerakciónak legyen emberi hangja: a szövegeknek olyanoknak kell lennie, ahogy az emberek beszélnek.
  • Dobd fel a mikrointerakciót valami animációval, de ne vidd túlzásba!
  • A mikrointerakció legyen vizuális harmóniában a weboldal többi elemével.
  • Nem kell túlbonyolítani, az ugyanis a halálát jelentheti.
  • Minden részletet gondolj végig alaposan!

Egy mikrointerakció megtervezésén múlhat, hogy a felhasználók végrehajtanak-e egy cselekvést a weboldaladon, meghoznak-e egy döntést, vagy pedig otthagyják az egészet.

Hogyan tedd hatásossá?

Mielőtt belevágnál a mikrointerakciók megtervezésébe, végig kell gondolnod, hogy milyen feladat végrehajtására hozod létre őket, illetve, hogy mikor kell megjelenniük a legjobb hatás elérése érdekében. Amikor nekiállsz a tervezésnek, az alábbi dolgokat fontold meg:

  • Legyen gyors: a felhasználók arra számítanak, hogy a mikrointerakciók azonnaliak, vagyis 0,1 másodpercen belül aktiválódnak. Ha ennél hosszabbra nyúlik az idő, akkor már elkülönül a kiváltó akciótól, és zavarni fogja a felhasználókat.
  • Legyen egyszerű: a bonyolult és túlságosan összetett animációkat felejtsd el, és maradj összhangban a felhasználói várakozásokkal! Ne adj neki több részletességet, mint amennyi feltétlenül szükséges ahhoz, hogy átadja az üzenetet a felhasználónak!
  • Legyen könnyen használható: a mikrointerakcióknak a természetes emberi viselkedést kell imitálniuk. Mindig gondod át, hogy hol hibázhatnak a felhasználók, és hogyan előzheted ezt meg!
  • Legyen animált: az animációk nem csak jól néznek ki, hanem a felhasználói élményt is képesek javítani. Ugyanakkor fontos, hogy a látvány nem mehet a hatékonyság és a használhatóság rovására.
  • Maradjon meg az egyensúly: a kontraszt jó eszköz, hogy kiemelj egy folyamatot vagy akciót. Ugyanakkor, ha túl erős ez a kontraszt, az csak megzavarja az embereket. Bizonyosodj meg arról, hogy a mikrointerakciók designja összhangban van a weboldal designjával, kiegészíti azt.

A mikrointerakciók tehát apró dolgok egy weboldalon, mégis jelentős a hatásuk: a weboldal sikere vagy bukása is múlhat a megfelelő tervezésen és kivitelezésen. Érdemes használni őket, mert ezáltal jelentős mértékben javítható a felhasználói élmény a weboldalon.

Mi az a microcopy? Mikor és hogyan használd?

Elsőre talán azt gondolod, hogy szót sem érdemel az a néhány rövid szó, esetleg egy-egy mondatnyi szöveg itt-ott a weboldaladon. Vagyis a microcopy. Minek ezzel egyáltalán foglalkozni? Pedig fontos része a weboldaladnak és a felhasználói élménynek. Igen, a microcopy a webdesign része, és erőteljes hatása van a felhasználói élményre. Csakúgy, mint sok már apróságnak a weboldaladon.

A microcopy azon része a weboldalnak, amit szinte észre sem lehet venni. De ugye már hallottad párszor, hogy a jó design láthatatlan? Ilyen a mikroszöveg is, ha jól van megírva. Ezek szavak, rövid mondatok a weboldaladon, melyek ugyanolyan fontosak, mint a logód vagy a szlogened, hiszen a márkád, a céged kommunikációjának a részét képezik.

A Usabilla egyik bejegyzésének definíciója szerint tulajdonképpen minden rövid szöveg egy szoftverben, egy applikációban vagy egy weboldalon, mely

utasítja vagy irányítja a felhasználót bizonyos műveletek végrehajtása során, az egy microcopy.

Ezek a szavak, mondatok szinte észrevétlenül ágyazódnak bele a weboldalba, mégis jelentős hatásuk van a felhasználói élményre.

A microcopy tehát bármennyire is apró részlet a weboldaladon, rendkívül fontos szerepet tölt be. Lehet, hogy nem egy feliratkozásnál vagy egy keresőmezőnél, de például egy hibaüzenetnél talán Téged is fel tud idegesíteni egy rosszul megfogalmazott szöveg. Nyilván maga a hiba megtörténte is zavar, de sokszor a micrcopy miatt lesz igazán dühítő. Ilyenkor már csak egy lépés, hogy kattints a jobb felső sarokban az X-re.

A mikroszövegek révén megmutathatod azt is, hogy valódi, élő emberek állnak egy-egy weboldal mögött, a megfelelő megfogalmazások révén barátságosabbá teheted velük a felhasználói felületet. Márpedig minél emberibbnek tűnik a weboldalad, annál jobban megbíznak benne a felhasználók.

Nagyon fontos például hibaüzeneteknél a barátságos és segítőkész megszólalás. Hiszen annak, ahogy a hibákat kommunikálod, óriási hatása van arra, hogy az embereknek milyen benyomásai keletkeznek a weboldaladról, alkalmazásodról vagy termékedről. Egy rosszul megfogalmazott hibaüzenet csalódást kelthet, míg egy ügyesen megfogalmazott szöveg a kibontakozó csalódást akár egy örömteli, vagy legalábbis elviselhető pillanattá változtathatja. Ehhez csak az kell, hogy emberi hangon fogalmazd meg, amit mondani akarsz, és az megfelelően illeszkedjen a közönséged hangneméhez.

Amit fontos megérteni a microcopynál, hogy a környezettől függenek. Ezért képesek mondjuk adott pillanatban az aggódó felhasználókat megnyugtatni. Például, amikor a látogatók feliratkoznak valamire a weboldaladon, információkat osztanak meg magukról, tehát egy számukra nagy horderejű cselekvést hajtanak végre. Gondolj csak a Mailchimp vicces mikroszövegeire, melyek egy-egy stresszes, kritikus pillanatot kifejezetten vidámmá tudnak alakítani.

Mikor kell használnod?

Erre számtalan lehetőség kínálkozik egy weboldaladon. A leggyakoribb, amikor a mikroszöveg segítségével akarod rávenni a felhasználót egy cselekvés végrehajtására, esetleg megerősítesz egy üzenetet. A microcopy hasznos az emberek számára, mert például végigvezeti őket egy regisztrációs oldalon, vagy elmagyarázza nekik, hogy miért kell kitölteniük egy-egy mezőt.

Ha sikerül jó szövegeket készítened, akkor az hatással van a weboldaladra és a cégedre. Ha világosan el tudod magyarázni az embereknek, hogy mit, miért és hogyan töltsenek ki egy űrlapon, akkor a hibátlan kitöltés és egy jó call to action hatására javulni fog a konverziós arányod.

Ráadásul, ha valahol probléma van a weboldaladon, nem hozza a konverziókat, akadályokba ütköznek a felhasználók – amiről egy használhatósági teszt ad információkat -, akkor a microcopyval egészen finoman vissza tudod vezetni őket a helyes útra, és ráveheted őket arra, hogy megtegyék a számodra fontos cselekedetet.

Hogyan írj jó mikroszövegeket?

Mivel szövegekről van szó, a lehetőségek száma végtelen. A megfogalmazásuk elsősorban attól függ, hogy milyen a márkád, mert annak hangvételéhez kell igazodnod. De íme, néhány tipp:

Ismerd meg a felhasználóidat!

Próbáld megérteni a weboldalad látogatóit, próbálj velük összhangba kerülni! Ehhez tudnod kell, hogy mit gondolnak, mit éreznek, mire van szükségük egy adott pillanatban. Mint a UX esetében mindig, itt is az empátia a kulcs. Azt kell megmutatnod nekik, hogy velük vagy.

Az egyik megoldás, ha teszteled a weboldalad, és közben figyelsz arra, hogy a felhasználók milyen szavakat használnak. Azokat a kifejezéseket kellene alkalmaznod, melyek a szájukból elhangzanak a weboldalad használata közben, akkor, mikor körülírják azokat a cselekedeteket, melyeket végrehajtanak.

Igazodj a márkádhoz!

Amellett, hogy rendkívül fontos megértened a felhasználóidat, szintén lényeges az is, hogy tisztában legyél a márkád identitásával és stílusával. Hiszen nem meglepni akarod az embereket. Győződj meg arról, hogy a szövegeid stílusa és a hangneme összhangban áll a weboldalad többi részével, és ezáltal a felhasználói élmény teljesen akadálytalanná válik.

Ne félj megmutatni a személyiséged!

Lehet, hogy meglepő, de a mikroszövegeket is ki lehet használni arra, hogy egy kis vidámságot csempéssz az emberek életébe, amikor a weboldaladat használják. Ezzel megmutathatod a márkád, a céged egyedi stílusát is, valamint emberibbé is teheted ezáltal, így közelebb hozva a felhasználókhoz.

Ugyanakkor azt sem szabad a vicceskedés közben elfelejteni, hogy a mikroszövegeknek fontos funkciójuk van a weboldalad legfontosabb részeinél. Vagyis nem szabad feladni egy-két tréfa kedvéért a lehető legvilágosabb és legtömörebb megfogalmazásokat. Nem árt, ha az emberek arcára mosolyt csalsz, azonban arról sem szabad megfeledkezned, hogy mi a végső célod.

Bátorítsd őket!

Tereld az embereket a jó irányba, akár egy feliratkozásról, akár már egy vásárlásról van szó! Próbáld megnyugtatni őket azzal kapcsolatban, hogy a lehető legjobb dolgot teszik éppen. Ugyanez vonatkozik arra is, amikor a felhasználó egy hibát követ el. A mikroszövegeddel kell segítened neki abban, hogy kijavítsa ezt a hibát.

Alakíts ki egy belső stílus-útmutatót!

És persze mindig tartsd be az abban foglaltakat! A microcopy éppen annyira a márkád része, mint a céged neve, vagy a szlogened. Kulcsfontosságú a következetes hangnem. Gyűjtsd össze a megfelelő igéket, melyeket aztán előveszel, amikor szükség van rájuk a weboldaladon! Szedd össze azokat az interakciókat is, amikor a márkád számára előnyös lehet a humor használata vagy az egyéniséged megmutatása! Például egy vicc sokkal jobban illik egy jutalmazó üzenethez vagy egy megerősítéshez, mint egy iránymutatáshoz egy űrlapnál vagy a weboldal navigációjánál.

A microcopy egy típusa: a hibaüzenet

Egyetlen rendszer sem működik hiba nélkül. A hiba lehet a felhasználóé vagy a rendszeré, de mindkét esetben fontos a hibák megfelelő kezelése, mivel ez a felhasználói élmény részét képezi. Minden hibaüzenetnek három eleme van: 

  1. A világos szöveges üzenet. 
  2. A megfelelő elhelyezés.  
  3. A jó vizuális design. 

A hibaüzenetek jó lehetőséget jelentenek a felhasználói élmény fokozására, általuk is megmutathatod a márkád és annak személyiségét. A hibaüzenetek minden vonatkozásának szentelj kellő figyelmet: a nyelvezetnek, az elhelyezésnek és a vizuális megjelenésnek is. 

Hogyan fogalmazd meg a hibaüzenetet? 

1. A hibaüzenetnek mindig könnyen érhetőnek kell lennie 

A hibaüzenetnek mindig világosan meg kell határoznia a problémát, miért következett be a hiba, és mit lehet tenni az adott a helyzetben. Mindig gondolj úgy a hibaüzentre, mint egy beszélgetésre a felhasználóval! Ezért úgy is kell hangzania, mintha közvetlenül embereknek mondanád. Persze mindenki máshogy fejezi ki magát úgyhogy arra azért figyelj, hogy legyen udvarias, érthető, barátságos és szakszöveg-mentes a megfogalmazás.

2. A hibaüzenetnek segítőkésznek kell lennie 

Az nem elég, ha csak azt írod, hogy valami probléma következett be. Meg kell magyaráznod a felhasználóknak, hogy miként tudják korrigálni a hibát olyan gyorsan és egyszerűen, ahogy az csak lehetséges. Tehát nem elegendő, ha jelzed a hibát, hanem meg kell mutatnod a lehetséges megoldásokat, amivel gyorsan korrigálni lehet!

3. A hibaüzenetnek konkrétan a helyzetre kell vonatkoznia 

Nagyon gyakran előfordul, hogy weboldalak egyetlen hibaüzenetet használnak minden hiba esetében. Például, ha nem töltöd ki az e-mail cím mezőt, akkor azt jelzi Neked a rendszer, hogy “írj be egy érvényes e-mail címet”. Ez rendben van. De ha mondjuk kihagyod az @ jelet az e-mailcímedből, akkor is ugyanezt mondja: “írj be egy érvényes e-mail címet”. De ilyenkor nem biztos, hogy észreveszed, hol a hiba. 

A példaként már sokszor felhozott Mailchimp ezt úgy oldja meg, hogy 3 hibaüzenetet használ az e-mail bevitelnél. Az első akkor jelenik meg, ha a beviteli mező üres marad. A második és a harmadik akkor, ha hiányzik belőle a @ és a “.” jel. A lényeg tehát, hogy a felhasználónak konkrét, az adott hibára vonatkozó üzenetet kell megjelenítenie, nem egy általánosat, bár tény, hogy számodra az utóbbi nyilván kényelmesebb.

4. A hibaüzenet legyen udvarias! 

Ne hibáztasd a felhasználókat, ha valamit elrontottak a weboldalad használata közben! Legyél velük kedves, hogy jól érezzék magukat a weboldaladon. Ez egy jó lehetőség arra is, hogy használd a “márkád hangját”, és személyességet vigyél a hibaüzenetekbe is. 

5. Használd a humort, ha az adott helyzetben megfelelő 

A vicces megfogalmazásokkal azonban bánj óvatosan! Mindig tartsd szem előtt, hogy a hibaüzenetnek elsősorban informatívnak és a segítőkésznek kell lennie. Ha ez megvan, akkor bevetheted a humort is a felhasználói élmény javítása érdekében, de csak akkor, ha alkalmas az adott helyzetben. 

Hol és hogyan jelenítsd meg a hibaüzeneteket? 

A jó hibaüzenet akkor jelenik meg, amikor szükség van rá. Kerüld el a hiba-összefoglalásokat egy-egy oldal alján! A konkrét hibára vonatkozó hibaüzenet mindig azon elem mellett jelenjen meg, melyhez kapcsolódik. 

A hibaüzenetednek jól láthatónak kell lennie. Használj kontrasztos szöveget és háttérszínt, így a felhasználók könnyen észreveszi és elolvassa! Hagyományosan a piros színt használjuk a hibaüzeneteknél, de olykor a sárga vagy a narancssárga is bevethető, mert egyesek szerint a piros túlságosan nagy stresszt okoz a felhasználóknak. 

Bármelyiket is alkalmazod, mindig győződj meg arról, hogy a szöveged olvasható és a kontraszt révén kellően kiemelkedik a háttérből. Ne felejts el egy kapcsolódó ikont is megjeleníteni, mely többek között azoknak az embereknek segít, akiknek gondjuk van a színek látásával. 

Mint látható, az ördög a részletekben rejlik. Ilyen részlet a microcopy is, melynek megfogalmazása jelentős különbséget jelenthet akkor, amikor a felhasználói élményről van szó a weboldaladon. Összességében pedig elmondható, hogy egy weboldal tervezése során a legapróbb részletekre is figyelni kell, hiszen mint látható, rendkívüli fontosságuk lehet. És az apró részletek esetében tulajdonképpen nem is apró részletekről van szó, hiszen ezek jelentik magát a designt.

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.