Webshark Blog

Egy weboldal készítése során könnyű elfeledkezni olyan kisebb jelentőségűnek tűnő webdesign elemekről, mint a mikrointerakciók és a microcopy. Pedig fontosak. (Frissítés, 2021.02.02. – Most új tippekkel bővítettük ezt a fejezetet: Milyen legyen egy mikrointerakció?)

Ezek gyakran apróságoknak tűnnek, és hát vannak “lényegesebbnek tűnő dolgok” is, pedig a jó és a rossz felhasználói élmény között a különbséget nagyon sokszor a mikroszövegek és mikrointerakciók részletes kidolgozása jelenti.

I. 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.

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.

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.

Miért fontosak a mikrointerakciók?

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. Közéjük tartozik:

• a rendszerállapot kijelzése
• hiba-megelőzés
• márkakommunikáció

Az olyan hagyományos mikrointerakciós elemeknél, mint amilyen egy görgetősáv, nehéz hibázni. Ugyanakkor ezek modern megfelelőjénél – amikor a mobilkijelző lehúzására megjelenik egy frissítésre utaló jelzés – már könnyebb. Ezek az új mikrointerakciók nagyobb erőfeszítést és megfontolást igényelnek, ha valóban jól akarjuk megtervezni őket.

Persze a mikrointerakciók feladata azért több annál, hogy a felhasználó pusztán jól érezze magát. Hiszen, mint már jeleztük: mutatják a rendszer állapotát, hiba-megelőző funkciójuk van, és a márkát is közvetíteni tudják. A mikrointerakciók visszajelzést adnak a látogatóknak, informálják és cselekvésre késztetik őket. De lássuk egyenként!

Megmutatják a rendszer állapotát

A rendszer állapotának bármilyen kijelzése mikrointerakciónak tekinthető, mert természetes módon magában foglal egy kiváltót (vagy a felhasználó tesz valamit, vagy a rendszer állapota változik) és egy visszajelzést.

Ide tartoznak a különböző állapotjelzők, melyek az előrehaladás mértékét mutatják. Azzal nyugtatják meg a felhasználót, hogy jelzik neki: a rendszer dolgozik a megoldáson. Mutathatják a pontos hátralévő időt, valamint magukba foglalhatnak egy egyenes vagy kör alakú állapotjelzőt. Az ilyen jelzések fenntartják a felhasználó érdeklődését, amíg arra vár, hogy végre történjen valami.

De ide tartozik a készenlét jelzése is, ami azt mutatja, hogy a rendszer felhasználói beavatkozásra vár. A mikrointerakció itt azt kommunikálja, hogy további információra van szüksége, és ezzel arra bátorítja a felhasználót, hogy interakcióba lépjen a termékkel. Például az iOS-nél, amikor lenyomva tartasz egy alkalmazásikont a kezdőképernyőn, akkor a rendszer finoman megrázza az appokat. Ez a mozgást azt mondja, hogy a rendszer további cselekvésre vár. Például arra, hogy a bal felső sarokban megjelenő X-re kattintson, vagy áthúzza egy másik helyre az ikont).

Megelőzik a hibákat

Mindenki követ el hibákat, ami a digitális világban a legtöbbször azt jelenti, hogy valami olyasmire kattintunk, amire nem kellene. A rendszernek lehetővé kellene tenni, hogy egy ilyen cselekvés visszafordítható legyen. A mikrointerakció ilyen esetben tökéletes megoldás arra, hogy felhívja a figyelmet a cselekvés visszafordíthatóságára. Kommunikálja egy felületen lévő elem állapotát, és utal arra, hogy további interakció lehetséges.

A gap.com appjában például egy szívre kattintva lehet egy terméket kedvencnek jelölni. Ugyanakkor a szív ezután elkezd pulzálni, jelezve, hogy visszafordítható a cselekvés. Ha ismét rákattintunk a szívre, akkor szürkére változik. Mivel a pulzálás csak egy rövid ideig látható, ezért mikrointerakciónak tekinthető, és a pulzálás hatékonyabban jelzi a rendszer állapotában bekövetkezett változást, szemben egy statikusan pirossá váló szívvel.

Ugyanakkor a mikrointerakciók megakadályozhatják, hogy kétszer kelljen egy feladatot elvégezni. Például, amikor regisztrálni kell egy felhasználónevet és jelszót, akkor tájékoztathatnak arról, hogy a jelszó megfelel-e a követelményeknek. Így nem akkor derül ki, hogy új jelszót kell kitalálni, amikor rákattintunk a gombra. Ezáltal a mikrointerakció megelőzi azt, hogy kétszer kelljen beírnunk valamilyen jelszót.

Ilyen megoldás működik például az eBay oldalán, ahol a jelszó mező aktívvá válása esetén megjelenik, hogy milyen követelményeknek kell megfelelnie a jelszónak. Ahogy gépeled be a jelszót, ez a lista folyamatosan változik. Ha a mezőt anélkül hagyod el, hogy megfelelő lenne a jelszó, akkor egy piros hibaüzenetben figyelmeztet.

Kommunikálja a márkát

Ha a márkád vidám és színes, akkor a mikrointerakciók is lehetnek ilyenek, illetve fordítva. Ahogy a szövegeidnek van egy bizonyos hangneme, ugyanezt a hangnemet kell megtartani a mikrointerakcióknál is. Nagyon sok cég erősen függ a vizuális jelzésektől, melyeket a felhasználók felé közvetítenek.

De ugyanígy egy hang is lehet erős jelzés. Egy mikrointerakció nem csak vizuális lehet, hanem hangalapú is. Tehát például az Xbox One jelzi a felhasználónak hanggal és látvánnyal is, ha bekapcsolták. A hang és a vizuális jelzés eltér a kikapcsolásétól.

A lényeg tehát, hogy a jól megtervezett mikrointerakciók jelentős hatással vannak a felhasználói élményre. Egy olyan eszközt adnak a kezünkbe, melynek segítségével hatékonyan kommunikálhatunk a felhasználókkal. Visszajelzést adnak a rendszer állapotáról, valamint segítenek megelőzni a hibákat. Ráadásul gazdagítják a márka-kommunikációt, mely akár arról is meggyőzheti az embereket, hogy inkább a Te termékedet válasszák a konkurenciáéval szemben.

De a gyakorlatban hogyan tervezd meg, illetve tökéletesítsd a weboldaladon a mikrointerakciókat?

Mikrointerakciók a gyakorlatban

A 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.

Milyen legyen egy mikrointerakció?

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.

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.

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!

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. Mikrointerakciók tervezése során az alábbi alapelvek lebegjenek a szemed előtt:

• 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, de ne ess túlzásba: 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. Néha elegendő egy szinte észrevehetetlen kis mozgás, nem kell mindjárt robbannia a kijelzőn. Ha túl lendületes a mozgás, akkor zavaróvá válhat, és már rontja a felhasználói élményt. Ahogy például itt is látod, ha rákattintasz a hamburger ikonra, és a két vonalból egy X lesz.
• 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.
• Legyen harmóniában a tartalommal: mikrointerakciót nem buborékban kell tervezni, és nem veheti el a show-t a tartalomról. A mikrointerakciónak mindig a tartalmat kell szolgálnia, abba kell beleilleszkednie.
• Legyen szórakoztató: ez azt jelenti, hogy ragadja meg a felhasználó tekintetét, és ha lehetséges, akkor élvezze is, hogy találkozott a mikrointerakcióval. Ez a weboldal megmutatja, hogy milyenek az igazán játékos mikrointerakció. De elég az is, ha a Facebook like-gombjához közelítesz és választhatsz a felsorakozó lehetőségek közül: bármilyen fölé mész az egérrel, nagyobbá is válik a mozgó, érzelmet kifejező szmájli.
• Nézzen ki és érződjön valóságosnak: ez azt jelenti, hogy ha megérint a felhasználó egy gombot, akkor adott esetben kaphat akár valamilyen tapintási élményt is. Ez lehet akár egy rezgés, egy hang, ami összeköti a digitális felületet a valósággal, hogy ne csak a kijelző felületén jelenjen meg a mikrointerakció, hanem része legyen a valós világnak.

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.

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

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. Microcopynak nevezünk minden rövid utasítást, címkét, navigációt, javaslatot, hibaüzenetet, call to actiont, melyek segítenek a felhasználókat a weboldalad vagy applikációd használatában.

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. Fontos részei a weboldaladnak és a felhasználói élménynek. Szinte észrevétlenül ágyazódnak bele a weboldalba, mégis jelentős a hatásuk. Igen, a microcopy a webdesign része, és hatással van a felhasználói élményre.

A mikroszövegek segítenek a felhasználók irányításában, és mikroszöveget lát azt megelőzően is a látogató, mielőtt rákattintana a megrendelés gombra. Ennek ellenére sokan nem fordítanak rá kellő figyelmet a webdesign-folyamat során. Ilyenkor marad a CTA-nál a „kattints ide” szöveg, és kész. Pedig a jó microcopy segít megtartani a látogatókat és javítani a konverziós arányt. Ez pedig minden weboldaltulajdonosnak fontos kell, hogy legyen.

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ügg. Ezért képesek a mikroszövegek 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.

Három kommunikációs szabály, amit vegyél figyelembe a mikroszövegek írásakor!

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. A szavak és a vizuális elemek megfelelő kombinációja a kulcs ahhoz, hogy kommunikálni tudj a felhasználókkal és segítsd őket a céljaik elérésében. Ehhez érdemes figyelembe venni 3 kommunikációs elvet:

1. A szövegeid akkor is kommunikálnak, ha nem foglalkozol velük

Nem tudod megtenni azt, ha van egy weboldalad, hogy ne kommunikálj. Még ha semmit sem mondasz, azzal is kifejezel valamit. Vagyis egy dolgot tehetsz: megfontolod, megtervezed a kommunikációd. A microcopy az, ahogy a terméked kommunikál: válaszokról, visszajelzésekről, irányításról, a felhasználók kényelméről és bátorításáról szól.

Ha nem tervezed meg a felhasznált szavakat, attól még valamit közölni fog a felhasználókkal, csak nem azt, amit szeretnél. Például az üzeni nekik, hogy nem tudsz vagy nem akarsz nekik segíteni, nem érdekel annyira a problémájuk, mint amennyire kellene. Ez persze az ügyfél-élmény szempontjából nem szerencsés. A kommunikáció tehát kulcsfontosságú a használhatóság szempontjából.

2. Mutasd meg, mit adsz!

Ha a weboldaladon valamilyen információt kérsz a felhasználóktól, vagy azt várod, hogy valamit megtegyenek, akkor a microcopy segítségével kommunikálnod kell, hogy milyen értéket kínálsz ezért cserébe. Válaszolnod kell a felhasználók azon kérdésére: hogy, „mi a hasznom nekem ebből az egészből?”

Az ilyen kérdések képesek megállítani az embereket, amikor a céljuk elérésére törekednek. Vagyis választ kell adnod, és valamit kínálnod kell nekik. Nem bonyolult dolgok ezek:

• Add meg az e-mail címed! – Így mi meg tudjuk erősíteni a rendelésed tényét.
• Add meg a telefonszámod! – Hogy üzenetet küldhessünk neked a szállításról.

A lényeg, hogy az üzleti céljaid összepárosítsd a felhasználói előnyökkel, és mindez jelenjen meg a mikroszövegekben is.

3. Mindig legyél konstruktív!

A felhasználókat mindig segítened kell abban, hogy megkapják, amit akarnak. De mi van, ha valami hiba csúszik a folyamatba? Ezt jelezned kell a felhasználóknak, azonban a hibaüzenetnek mindig konstruktívnak kell lennie. Ezt pedig a mikroszövegben kell elérned.

Vagyis, amikor visszajelzést kell adnod, mindig legyél konstruktív! Hiszen a weboldalad azért van, hogy segítse a felhasználókat elérni a céljaikat. Tehát ne azt mond, hogy „Nem tudsz belépni!”, hanem azt, hogy „Nem tudsz belépni, mert a beírt jelszó hibás. Kérlek próbáld újra, vagy kérj új jelszót!” Konstruktívnak lenni tehát hasznos. Ezért ez legyen a legnagyobb prioritású feladat minden mikroszövegnél.

Néhány további gyakorlati tipp a jó mikroszövegekhez!

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.

Használj személyes névmásokat!

A weboldalad látogatóihoz szólj, ne csak beszélj bele a levegőbe. Használhatod a Te vagy Ön névmásokat, de elég, ha úgy fogalmazol, hogy az a felhasználókhoz szól. Tehát ne azt írd, hogy „1 termék a kosárba került”, hanem azt, hogy „1 terméket a kosaradba tettünk” vagy „1 terméket az Ön kosarába tettünk”. Ugye mennyivel személyesebb?

Kezdd igével a mondatokat!

Ha CTA-ról van szó vagy bármilyen interaktív elemről, ahol cselekednie kell a felhasználónak, ott kerüljön az ige a mondat elejére. Ez sokkal közvetlenebb, és aktivitásra sarkallja a felhasználót. Tehát ne azt írd például, hogy „A lehetőségek”, hanem azt, hogy „Válaszd ki a Neked tetsző megoldást!”.

Mondd meg, hogy mit tegyen!

A jó microcopy segít a felhasználóknak abban, hogy anélkül végrehajtsanak egy cselekvést, hogy gondolkodniuk kellene rajta. Ezért olyan népszerű a „kattints ide” kifejezés a CTA-knál. Ugyanakkor ennél tovább is léphetsz. Használj olyan szavakat, melyek világosan elmondják az embereknek, hogy pontosan mi történik! A kattintható elemekre kerüljenek olyan szövegek, mint a „olvasd tovább!” vagy akár a „kosárba teszem”, „kérek információt”, „letöltöm”, „feliratkozom”, stb.

Ezen szavak mindegyike világos és érthető, és a felhasználók ezek alapján érteni fogják, hogy mire számíthatnak, ha kattintanak. De például a jó navigációs kifejezések is elárulják az embereknek, hogy hova juthatnak, és megmagyarázzák, hogy miről szól a weboldal.

Használj természetes nyelvet!

Úgy írj, ahogy személyesen vagy telefonon beszélnél az ügyfeleiddel. A szakmaiságot persze nem kell messzire hajítani, de a szakszövegeket kerüld. A felhasználók által érthető szavakkal magyarázd el, amit szeretnél, barátságos, nyugodt hangnemben.

Előzd meg az aggodalmakat!

Mielőtt a felhasználók elkezdenének aggódni egy cselekvés, nyugtasd meg őket. Menj elébe az aggodalmaiknak! Legyenek átláthatók a folyamatok, ne rejtegess semmit. Értsék meg, hogy mit miért tesznek a weboldaladon vagy alkalmazásodban. Tehát amikor mondjuk elkéred a telefonszámukat vagy az e-mail címüket, akkor magyarázd el, hogy miért van ezekre az adatokra szükséged, és nyugtasd meg őket, hogy nem fogod zaklatni őket sem telefonon, sem spamekkel.

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.

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.

Legyen tömör!

Ezt talán mondani sem kell, mégis megemlítjük, hiszen a microcopy a nevét is onnan kapta, hogy a legrövidebb szöveg a kijelzőkön. A felhasználói interakcióknál nincs szükség hosszú magyarázatokra, ezek csak túlterhelik az embereket.

A fontos szöveg legyen mindig látható!

A microcopynak két típusa van: az egyik, ami folyamatosan látható, a másik viszont csak akkor jelenik meg, ha szükség van rá. Utóbbiaknál hovert használnak a megjelenésre. Minden azonban nem rejthető el: vannak olyan fontos szövegek, melyeknek folyamatosan láthatónak kell maradniuk a felhasználók számára. Például formoknál vagy gomboknál.

A „további információ” jellegű szövegeknél viszont használható az eltűnő és felbukkanó microcopy. Ezek akkor magyarázzák el az embereknek, hogy mi történik, ha információt kér. Ezt kifejezhetjük a kis kérdőjel-ikonnal, melyre kattintva megjelennek a részletek.

Helyezd a jobb oldalra!

A microcopy elhelyezésének a normál szövegolvasáshoz kell igazodnia. Nálunk a legtöbben balról jobbra olvasnak, illetve fentről lefelé. Tehát, ha van egy űrlapmező, ahol meg kell adnia egy adatot a felhasználónak, akkor a microcopy vagy annak jobb oldalára vagy közvetlenül alá kerül. Használhatsz bizonyos esetekben placeholdert is, ennek azonban jól olvashatónak kell lennie. Az űrlapok készítésének szabályairól itt írtunk részletesen.

Ne képként jelenjen meg a szöveg!

Ha képként jelenítesz meg szöveget, az nem olvasható a keresőmotorok vagy a felolvasó-eszközök számára. De adott esetben a reszponzív megjelenés miatt is nehézzé válhat az olvasásuk. Ezért jobb megoldás, ha minden szöveg, így a microcopy is szövegként jelenik meg a weboldaladon. Arról is győződj azonban meg, hogy a mérete és a kontrasztja minden esetben biztosítja a könnyű olvashatóságot!

Ne félj megismételni, amit egyszer már elmondtál!

Lehet, hogy neked unalmasnak tűnik, vagy feleslegesnek tartod, hogy ugyanazt leírod kétszer vagy többször, azonban a felhasználók egészen máshogy látják a weboldalad. Nem minden esetben olvassák el a szöveget, átsiklanak rajta, úgyhogy mondd el nekik újra, hogy biztosan elérjék a céljukat.

III. A microszövegek 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? 

Egy jó és egy rossz hibaüzent gyakran csak apró részletekben különbözik. Egy jó hibaüzenettel csökkenthető a felhasználói frusztráció, és segít az embereknek a felület további használatában.

El kell mondanod, mi történt és miért

Az embereknek meg kellene érteniük a problémát, miközben a hibaüzented olvassák. Ha nem értik, nem is tudnak tenni semmit azért, hogy megoldják, és ez negatív irányba befolyásolja a termék használatának élményét.

A hibaüzenetnek tehát mindig világosan meg kell határoznia a problémát, elmondania 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.

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!

Mindig jelezd a következő lépést!

Ha bekövetkezik egy hiba, akkor azt a felhasználónak mielőbb javítania kell. A hibaüzenetnek elegendő információt kell tartalmaznia a felhasználó számára ahhoz, hogy megtegye a következő lépést annak érdekében, hogy kikeveredjen a kellemetlen szituációból

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.

Emberi nyelven fogalmazd meg!

Miközben a hibaüzenetnek pontosnak kell lennie, és meg kell határoznia a hibát és a megoldást, a technikai részletekkel felesleges terhelned a felhasználót, mert csak összezavarja. A legtöbb embert nem is érdekli a probléma technikai háttere, csak a megoldást keresi.

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. 

Arra azonban figyelj, hogy annyira ne váljál barátkozóvá, hogy „buta” hibaüzeneteket fogalmazz meg. Ezek ugyanis idegesítőek lehetnek a felhasználó számára egy stresszes, komoly szituációban. Segíthet az üzenet megfogalmazásában, ha hangosan elolvasod a szöveget, mert így könnyebben ki tudod szúrni a rossz szavakat, megfogalmazásokat.

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. 

Ne használj csupa nagybetűt!

Ha egy felhasználó azt látja egy hibaüzenetben, hogy azt nagyon hangsúlyozni probálod számára – sokan az élőbeszédbeli ordításnak érzékelik -, akkor az csak elbátortalanítja. Ráadásul nehezebb is olvasni a nagybetűs szövegeket.

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.

Milyen hibákat követhetsz el a hibaüzeneteidnél?

Nyilván Téged is zavar, amikor egy eltervezett folyamat olajozott végrehajtása helyett egyszer csak beüt egy hibaüzenet. A helyzet csak rosszabb lesz, ha nem érted, hogy hol a hiba, mert a hibaüzenet nem fogalmaz világosan. Ilyen esetekben az emberek hajlamosak arra, hogy az egészet feladják, otthagyják, kihajítsák a mobilt vagy a laptopot az ablakon. Olykor még az is előfordul, hogy valakit annyira felidegesít egy hibaüzenet, hogy nem csak hogy nem fog rendelni, vásárolni, stb. egy weboldalon, hanem háborút fog indítani az adott weboldallal, céggel szemben.

De milyen hibákat követhetsz el a hibaüzeneteidnél, melyek kikészíthetik az embereket?

Kétértelműen fogalmazol

A hibaüzenetedben világosan kell fogalmaznod, pontosan meg kell határoznod, hogy mi történt, hol a hiba, és az adott helyzetben mi a teendő. Űrlapok esetében jelezned kell, hogy melyik mező kitöltésénél merült fel a gond, és hogy mit kell tennie a felhasználónak. A lényeg, hogy a felhasználónak ne kelljen törnie a fejét azon, hogy mit rontott el. Tedd a lehető legvilágosabbá számára a helyzetet és a megoldását!

A felhasználót hibáztatod

Semmiképpen ne ijesztgesd a felhasználót, ne hibáztasd, és ne fújd fel a problémát, ne tegyél úgy, mintha nagyobb hibát követett volna el, mint amekkoráról valójában szó van. Különösen akkor ne, ha Te követtél el hibát. De még akkor se hibáztasd az embereket, ha tényleg ők hibáztak!

Még a negatív kifejezéseket is kerüld el a hibaüzeneteidben, mert már ezek miatt is bűntudatuk lehet az embereknek, azt érezhetik, hogy hibáztak, és azt gondolhatják, hogy a helyzet rosszabb, mint valójában. Kerüld az olyan negatív szavakat, mint a “hiba”, “valami nincs rendben”, “probléma történt”, “tönkrement”, stb.

Rosszul helyezed el a hibaüzenetet

Egy hiba csak még súlyosabbnak tűnik a felhasználó számára abban az esetben, ha azt hosszú, bulletpointos listában tálaljuk neki. Amikor az emberek azt látják, hogy egyszerre számtalan hibát elkövettek, inkább feladják, ahelyett, hogy megoldanák a helyzetet.

Egy űrlap esetén célszerű egyből az elrontott mező mellett, azonnal jelezni, hogy javításra van szükség. De ha mégsem így oldod meg az űrlapod, akkor is pontosan utalj arra, hol követte el a hibát a felhasználó. A hibaüzenet elhelyezése tehát kulcskérdés, a pontos pozicionálás sok felesleges magyarázattól kímél meg, miközben a felhasználó egyből látja, hol hibázott.

Tisztázatlan elvárásaid vannak

Ha már sikerült összehoznod egy kedves és bocsánatkérő üzenetet, világossá teszed a felhasználók számára, hogy mi a hiba, ráadásul a megfelelő helyre teszed a hibaüzenetet, még azt is tisztázni kell, hogy pontosan mit vársz el a felhasználótól, mit is kellene tennie. Nagyon sok hibaüzenet van, amelyik nem fogalmazza meg, mi is lenne a következő lépés.

Ennél még jobb megoldás, ha már előre jelzed az emberek számára, hogy pontosan mit vársz el tőlük, mire figyeljenek. Rövid kis mondatokra, zárójeles megjegyzésekre kell gondolni, úgynevezett microcopykra, melyek vezetik a felhasználót és mérséklik a bizonytalanságát. Ha így teszel, csökkentheted a hibaüzeneteik megjelenésének számát, ami hatalmas lépés a felhasználói élmény javítása felé.

Mindezek alapján már tudod korrigálni, ha nálad sincs minden rendben a hibaüzenetekkel, de a lényeg, amit mindenképpen jegyezz meg, hogy a hibaüzenetnek emberinek, segítőkésznek, humorosnak és alázatosnak kell lennie.