A Messenger kártya kreatív felhasználási lehetőségei
A chatbotok fejlesztésére lehetőséget biztosító instant üzenetküldő alkalmazások platformonként egyedi UI elemeket nyújtanak a programozók számára. Ebben a bejegyzésben az egyik kedvencemet szeretném kiemelni, a Messengeren elérhető Generic Template-et, amit az egyértelmű és félreérthetetlen hasonlósága miatt a továbbiakban csak kártyaként fogok nevezni.
Egy kártya az alábbi elemeket tartalmazhatja (az opcionális elemeket *-al jelöltem):
- image_url *
- 1:1 vagy 1.91:1 képarány
- title
- max 80 karakter
- 1 sor
- subtitle
- max 80 karakter
- mobilon maximum 5, desktopon maximum 2 soros szöveg
- buttons *
- maximum 3 darab
A kép egy óriási személyreszabható dinamikus felületet biztosít, ami a leghangsúlyosabb az összes elérhető Messenger UI elem közül. Egy igazi kis játszóteret kapunk, ahol teljesen elengedhetjük a fantáziánkat, no de ezt egy kicsit részletesebben is kifejtem, mielőtt mélyebbre ásnánk a témában.
A kártyában megjelenő kép helyére beilleszthetünk akár szerver oldalon generálódó dinamikus képeket is, amiket közvetlenül a kártya létrehozását megelőzően készítünk el. A kártyákon a user számára személyre szabott, gyorsan és könnyen értelmezhető információkat jeleníthetünk meg. A képen megjelenő tartalmak fontos, hogy egyértelműek legyenek, és a design elkülönüljön a többi, más célt szolgáló kártyáktól.
Csak olyan adatot tehetünk rá, ami időtálló és egyben egyértelművé teszi, hogy mi várja a felhasználót a kártya megnyitását követően. Pl. egy euró árfolyamot csak akkor írhatunk egy kártyára, ha feltüntetjük rajta a kártya létrehozásának dátumát, így ha 1 hónap múlva tér vissza a felhasználó, nem lesz félrevezető a kártyán megjelenő info.
A kártyák a kijelzők méretéhez igazodva jelennek meg, ezért egy kisebb készüléken a kártya mérete is kisebb lesz, ezt figyelembe kell venni a tervezéskor, főleg akkor, ha a képen szövegek is megjelennek.
A Sihuhu esettanulmányunkban bemutattam egy felhasználási lehetőségét a kártyának, ahol a vonatutakhoz és konkrét járatokhoz generáltunk egyedi képeket. Készítettünk ezen felül néhány koncepciót, ahol további egyedi felhasználásait mutatjuk be a kártyának.
ingatlan.com bot koncepció
A közel 20 éves ingatlan.com az egyik legrégebbi magyar honlap. A cég a kezdetek óta magyar tulajdonban van, az alapító ma is a cég stratégiai vezetője.
Rengeteget foglalkoznak az alkalmazás felhasználó élményének fejlesztésével, jelenleg is egy kiválóan megtervezett és kivitelezett keresőfelületet biztosítanak a felhasználóik számára.
A koncepciónk szerint a userek egy Messenger boton keresztül szövegesen indíthatnak keresést (pl. “Szeged belvárosában kiadó lakás amerikai konyhával 80e forint körül” ). A bot az ingatlan.com adatbázisában keres, és a keresési eredményeket kártyaként küldi el.
A csatolt kártyák ékes példái annak, hogy mikor is lehet hasznos egy 1:1 arányú kép.
Az ingatlan kártyák lementhetőek vagy megoszthatóak az ismerőseinkkel.
oszkar.com bot koncepció
Az Oszkár (születési nevén Online Személyfuvar Közvetítő Rendszer, bár azóta tudjuk, hogy valójában nem lát el ilyen tevékenységet) 2007. november végén állt üzembe. Célja, hogy az utazni kívánó autósok útitársat találhassanak költségeik csökkentése, vagy egy jó hangulatú közös utazás érdekében.
Az elméletben működő oszkar.com boton keresztül lehetőség lenne utat foglalni, és a foglalást követően a bot elküldi számunka a foglalás adatait tartalmazó kártyát. A kártya képén olyan adatokat szeretnénk megjeleníteni, amik segíthetik a felhasználóknak a kocsik megtalálását.
Az oszkar rendszerében a sofőröknek fel kell tölteniük egy képet az autóról, amivel szállítani fogják az utasokat, ezt a képet illesztjük be a kártya hátterébe. A jármű rendszámtábláját nagy méretben helyezzük el a kép közepén. A rendszámtól jobbra egy blokkot hozunk létre, a blokk színe az autó beállított színe lesz, és fölé helyezzük az autó márkajelzését. A fenti példában egy narancssárga Peugeot-t keresünk majd. A bal felső sarokban az úthoz beállított indulási pont Google Mapsből kigenerált képét illesztjük be.
CsimiCsomag bot koncepció
A CsimiCsomag egy képzeletbeli futárszolgálat. A chatboton keresztül csomagkövetést állíthatnak be a userek a csomag azonosítójának elküldésével. A bot a regisztrált csomagokkal kapcsolatban minden státuszváltozást követően új kártyát küld a felhasználónak. A kártya képén megjelenítjük a csomagazonosítót és a kiszállítás várható időpontját.
A cég logóját egy jópofa matricaként “ragasztjuk” rá a “kartondobozra”.
A kártya alsó részében grafikusan is megjelenítjük a csomag státuszát:
- a folyamatban lévő státuszt sárga színnel jelöljük, és az ikon mellett egy sárga órát helyezünk el
- a már lezárult státuszokat zöld színnel jelöljük, és az ikon mellett egy zöld pipát jelenítünk meg
- a leszállított csomagokra egy “szállítva” pecsétet helyezünk el.
Hogy a felhasználók könnyebben tudják megkülönböztetni az egyes csomagokat pl. egy karácsonyi időszakban, használhatunk eltérő mintázatú csomagolópapírokat.
Trója étterem bot koncepció
Napi leves és grillezett csirkemell rizzsel és fitnesz salátával. Ez a bevett ebédem és a szegedi Trójából rendelem telefonon keresztül. Az ő képzeletbeli botjuk felismeri a rendelési szokásaimat, és az átlagos rendelési időmet megelőzően rámír, hogy ebédeltem-e már? És ha nem, akkor pedig küldhetik-e a szokásosat. De szeretném! 😍
A rendelésemet követően egy kártyát küld a bot, amin összegzi a rendelésem információit.
A program a rendelt termékek számától függően rendezi el az ételeket a kártya képén.
Rövid összegzés
Messenger kártya rulez! 😁
Yusuf 
