Interaktív pop-up üzenetek animációval készítése

Üzenetanimáció

Az üzenetanimáció akkor működik jól, ha azonnal jelzi, mi történt, és nem tartja fel a felhasználót. Sok magánügyfél azért keres ilyen megoldást, mert a weboldalon vagy az alkalmazásban fontos visszajelzések jelennek meg, mégis túl merev az egész felület. Ilyenkor egy rövid, tiszta mozgás sokat számít. Nem dísznek kell, hanem azért, hogy a látogató értse a művelet eredményét, és ne bizonytalanodjon el. A Qjob.hu oldalán is gyakran olyan szakembert keresnek az emberek, aki ezt emberi szemmel tervezi meg, nem csak kóddal oldja meg.

Én személy szerint azokat a megoldásokat tartom erősnek, ahol a mozgás rövid, finom és következetes. Ha minden üzenet másképp bukkan fel, más tempóval tűnik el, vagy túl erős a villanás, az hamar fárasztó lesz. De az is hiba, amikor nincs semmi visszajelzés, és a felhasználó nem tudja, elküldődött-e az űrlap, sikerült-e a mentés, vagy csak lefagyott az oldal. Az üzenetanimáció célja a bizonytalanság csökkentése. Ez főleg rendelésnél, regisztrációnál, kapcsolatfelvételnél és bejelentkezésnél számít.

Mikor hasznos az értesítési animáció

Az értesítési animáció ott hasznos, ahol rövid állapotváltozást kell jelezni. Ilyen lehet a sikeres küldés, a hibás mező, a kosár frissítése vagy egy új üzenet megérkezése. Sokan azt gondolják, hogy elég egy egyszerű szöveg a képernyőn. A valóságban viszont a mozgás segít irányítani a figyelmet. Ha a felugró üzenet csak ott áll mozdulatlanul, gyakran észre sem veszik. Ha viszont túl nagy lendülettel érkezik, már zavaróvá válik. A jó arány megtalálása ezért nem mellékes részlet.

Sok megrendelő akkor szembesül ezzel, amikor kész a honlap, de a használat közben mégis ridegnek érződik. Volt olyan eset, amikor egy ügyfél azt mondta, minden technikailag rendben van, mégis sok volt a félbehagyott kapcsolatfelvétel. A gond végül nem az űrlappal volt, hanem azzal, hogy sikeres küldés után alig látható visszajelzés jelent meg. Miután a felugró üzenet kapott egy rövid megjelenési mozgást és tisztább eltűnést, csökkent a bizonytalanság. Nem csoda történt, csak érthetőbb lett a használat.

Üzenetanimáció árak

Az ár általában attól függ, hogy egyetlen egyszerű állapotjelzésről van szó, vagy egy teljes értesítési rendszer kialakításáról. Más munka egy sikeres küldést jelző kis sáv, és más egy olyan többállapotú megoldás, ahol siker, hiba, figyelmeztetés és folyamatjelzés is külön viselkedik. Számít az is, hogy kész terv alapján dolgozik-e a fejlesztő, vagy neki kell kitalálni a logikát, az időzítést és a megjelenés részleteit.

Az én tapasztalatom az, hogy az olcsó megoldások sokszor csak első ránézésre tűnnek jó vételnek. Olcsóbban 12.000 alatt ritkán lesz valóban használható eredmény, mert ennyi idő alatt ritkán fér bele a finomhangolás, a tesztelés és a különböző eszközök ellenőrzése. Egy mutatós mozgás önmagában még nem jó. Akkor lesz értékes, ha gyors, tiszta és nem rontja a kezelhetőséget.

Szakember választás üzenetanimációhoz

Amikor valaki szakembert keres, gyakran ugyanabba a hibába fut bele. Megnézi a látványos mintát, és azt hiszi, ez elég. Pedig az üzenetanimáció minőségét nem a látvány önmagában dönti el, hanem az, hogy a felhasználó észreveszi-e, érti-e, és közben nem akad-e meg. Ezért én mindig azt nézném meg elsőként, hogy az illető mutat-e valós felhasználási helyzeteket. Például űrlaphibát, sikeres fizetést, mentési állapotot vagy új üzenet érkezését.

Jó jel, ha a felülettervező vagy a fejlesztő beszél a sebességről, az eszközök közti eltérésekről és a visszafogott mozgásról. Rossz jel, ha csak annyit mond, hogy majd látványos lesz. A legtöbb magánügyfélnek nem látványshow kell, hanem kiszámítható működés. Fontos az is, hogy a kiválasztott szakember vállaljon javítást az első változat után. Sok finom részlet csak használat közben derül ki. Én jobban bízom abban, aki ezt eleve belekalkulálja, mint abban, aki kész csomagot ígér minden kérdés nélkül.

Helyi igények és eltérő felhasználói helyzetek

Ha a munka helyi szolgáltató oldalra, kisebb vállalkozói honlapra vagy személyes portfólióra készül, a környezet sokat számít. Más tempó működik egy fiatalos kreatív oldalon, és más egy ügyvédi, egészségügyi vagy ingatlanos felületen. Budapesten gyakran több az összetett felhasználói út, mert több szolgáltatás, több aloldal és több kapcsolatfelvételi pont van. Kisebb településen sokszor egyetlen oldalon történik minden, ezért ott még fontosabb, hogy az üzenet mozgása ne takarja ki a lényeget.

A városon belüli kerületek vagy a környező települések említése akkor válik hasznossá, ha a weboldal helyi ügyfelekre épít. Egy budai lakberendező más tónust kérhet, mint egy pesti gyorsszerviz, és megint más lehet az igény Érd, Dunakeszi vagy Budaörs felől érkező látogatóknál. Nem azért, mert az emberek teljesen mások, hanem mert a szolgáltatás ritmusa más. A helyi célcsoporthoz igazított üzenetanimáció ezért sokszor nyugodtabb, egyszerűbb és rövidebb, mint egy országos kampányoldalon.

Gyakori hibák a felugró üzeneteknél

Sokan hibáznak akkor, amikor a felugró üzenetet a tartalom elé helyezik, és úgy mozgatják be, hogy közben elveszi a fókuszt a feladatról. A másik gyakori gond a túl hosszú időtartam. Ha a mozgás lassú, a rendszer lomhának érződik, még akkor is, ha technikailag gyors. Én azt szeretem, amikor a felhasználó szinte csak érzékeli a mozgást, de nem kell rá külön figyelnie. Ez nehéz határ. És pont ezért érdemes erre külön embert keresni.

Gyakori probléma az is, hogy a felugró üzenet minden eszközön ugyanúgy viselkedik. Pedig ami asztali nézetben kényelmes, mobilon túl nagy lehet. Volt már olyan oldal, ahol a mobilos értesítés a képernyő felét eltakarta, miközben csak annyit akart jelezni, hogy az adatlap mentése sikerült. Az ilyen apróság bosszantóbb, mint amilyennek elsőre tűnik. A felhasználó nem azt mondja majd, hogy rossz volt a mozgás, hanem egyszerűen ideges lesz, és otthagyja az oldalt.

Tervezés és tesztelés a jobb eredményért

A jó üzenetanimáció tervezéssel kezdődik. Először azt kell tudni, milyen eseményhez kapcsolódik, mit kell közölnie, és mennyi ideig maradjon látható. Utána jön a mozgás iránya, ereje, időtartama és az eltűnés módja. Az értesítési animáció akkor hiteles, ha ugyanazt a logikát követi minden állapotban. Ha a siker fentről csúszik be, a hiba oldalról ugrik fel, a figyelmeztetés pedig kifakul, az könnyen széteső hatást kelt.

A tesztelést sokan kihagyják vagy túl gyorsan letudják. Pedig itt dől el, hogy a kész megoldás valóban használható-e. Meg kell nézni mobilon, nagyobb monitoron, lassabb készüléken és olyan helyzetekben is, amikor több üzenet jelenik meg egymás után. Nekem az a benyomásom, hogy a legtöbb gyenge eredmény nem rossz ötletből születik, hanem abból, hogy senki nem próbálta ki valós helyzetben. A jó fejlesztő vagy felülettervező viszont figyeli, mikor tűnik túl zajosnak, mikor túl halvány, és hol kell visszavenni.

Végül az számít, hogy a látogató biztosabban használja-e az oldalt. Ha igen, akkor az üzenetanimáció elérte a célját. Ha csak szebb lett tőle a képernyő, de közben lassabbnak, zavarosabbnak vagy idegesítőbbnek hat a használat, akkor érdemes újragondolni az egészet. Itt nem a feltűnés a cél, hanem a tiszta visszajelzés. És szerintem ez az a pont, amit a jó szakemberek már az első beszélgetésben is értenek.