A dinamikus kártyaképek tesznek egy chatbotot igazán informatívvá!

A generic template az egyik leghasznosabb Messenger UI-elem. Praktikus, változatos és esztétikus, segítségükkel remekül átadható az információ a boton keresztül. A kártyák tetején található kép feltűnő és informatív, amely ráadásul színessé is teszi a beszélgetést.

Ezen kártyaképek remek tulajdonsága, hogy dinamikusan is létrehozhatók, ezzel pedig az egész chatbot élőbbé válik. Ebben a cikkben most bemutatok néhány olyan esetet, amikor remekül jöttek a dinamikus kártyaképek!

Mitől lesz dinamikus a kép?

A Generic template-k statikusak, de programozói segítséggel dinamikussá válhatnak. A kártyaképek tervezésekor meghatározzuk, hogy mely részek cserélődnek dinamikusan (ez lehet kép vagy szöveg is), és ezeket a képre égetjük.

 

A dinamikus adat jöhet például adatbázisból, API-n keresztül, vagy betölthetjük akár a felhasználó által a chatbotnak elküldött adatot is.

A kártya megtervezése

A dinamikus képek elsődleges funkciója, hogy a lényeges információkat egyből megszerezhesse a felhasználó. Éppen ezért kulcsfontosságú, hogy a generic template kártyákat alaposan megtervezzük.

 

A kép és a szöveges rész egy összefüggő elemet alkot, tehát az egész kártya adatstruktúráját kell szem előtt tartani a képek tervezéskor. Az adatok megjelenítése akkor megfelelő, ha első pillantásra egyértelmű, hogy mit látunk, és az információ könnyen feldolgozható.

 

A Messenger egészen kis felbontású készülékeken is elérhető, ezért kiemelten fontos, hogy a kártyán lévő adatok kontrasztosak és minden kijelzőn jól olvashatóak legyenek. Nem szabad a képet túlzsúfolni, a részleteket nyugodtan írhatjuk a generic template kártya szöveges blokkjába.

 

A következőkben jöjjön pár példa a chatbotjainkban használt dinamikus képekre:

 

Extreme Digital

Az Extreme Digital chatbotjában a felhasználók többek közt bekövethetik a megrendelésüket, így pontosan tudják, hol tart a folyamat. A rendelés adatai egy kártyán jelennek meg. A kártya képén kiemelt helyen szerepel a rendelés azonosítója és annak státusza, illetve vizuálisan is megjelenítjük, hogy hol tart a rendelés a teljes folyamaton belül.

CONTACT Konferencia bot

Vannak olyan helyzetek, amikor a megjelenítendő adatok egyszerűen nem helyezhetők egy képre. Ekkor is segíthet azonban a dinamikus kép abban, hogy a kártyák megszemélyesíthetők és megkülönböztethetők legyenek. A CONTACT chatbotjában például a soron következő előadásoknál csak az előadók profilképe és a kezdés időpontja jelenik meg. Ha pedig a networking funkción keresztül integettek nekünk, akkor az integetést küldő felhasználó profilképét tesszük a kártyára.

V4 Future Sports Festival

A V4 Future Sports Festival chatbotjának egyik központi fukciója volt a meccskövetés, mellyel a versenyszámok alakulását lehetett nyomonkövetni. Tekintve, hogy nem lehetett tudni, ki jut tovább és mely versenyzők mérkőznek majd meg, képtelenség lett volna az összes lehetséges párosítást előre legyártani. A dinamikus képek segítségével azonban könnyedén aktualizálhattuk a chatbot üzeneteit.

Sihuhu

A Sihuhu menetrend-kártyáinak képe nem csak informatív, hanem kimondottan esztétikus is. A kártyákon megjelenítjük a felhasználó által megadott két állomás nevét. Ami viszont igazán szembetűnő, hogy a kártyák külleme folyamatosan változik: a hátteret a célállomásnak megadott település egyik nevezetessége adja.

A generic template kártyák felhasználási formái önmagukban is rendkívül sokszínűek, a dinamikus kártyaképek adta lehetőségekkel azonban már csak a képzeletünk szab határt!