Termékek kártyáinak rácsának létrehozása és fejlesztése

Termékek kártyán magánügyfeleknek

A Termékek kártyán megoldás akkor hasznos, ha a látogató gyorsan szeretné átlátni a kínálatot, összehasonlítani az árakat, megnézni a képet, majd dönteni. Egy jól felépített termékkártya nem csak szép elem a weboldalon. Segít abban, hogy az oldal érthetőbb legyen, kevesebb legyen a bizonytalanság, és a felhasználó ne vesszen el a sok információ között.

Én azt látom, hogy sok magánügyfél nem külön teljes webáruházat keres, hanem egy meglévő oldalra szeretne rendezett kártyás megjelenítést. Lehet ez szolgáltatáslista, digitális termék, tanfolyam, letölthető anyag, kézműves termék vagy bemutató portfólió. A lényeg ugyanaz. A látogató néhány másodperc alatt értse, mit lát, mennyibe kerül, és mit kell tennie, ha érdekli.

A Qjob.hu felületén olyan magán szakember is kereshető, aki távolról készíti el ezt a részt. Nem kell személyes találkozó. A feladat leírása, a képek, a terméknevek, a rövid szövegek és az elvárt minta online is átadható. A szakember ez alapján meg tudja tervezni a kártyák szerkezetét, majd elkészíti a végleges HTML, CSS vagy weboldalba illeszthető megoldást.

Termékkártyás elrendezés célja

A termékkártyás elrendezés célja nem az, hogy minden információ egyszerre kerüljön a felhasználó elé. Szerintem ez az egyik leggyakoribb félreértés. A kártya akkor működik jól, ha csak a döntéshez szükséges első információkat mutatja. Név, kép, rövid leírás, ár, gomb, esetleg címke vagy értékelés. A részletes adatokat külön oldalon vagy lenyíló részben is meg lehet jeleníteni.

Ha túl sok szöveg kerül egy kártyára, az oldal nehézkes lesz. Ha túl kevés, akkor a látogató nem kap elég támpontot. Ezért kell a termékek kártyán való megjelenítését nem csak látványként kezelni, hanem információs szerkezetként is. Egy tapasztalt webes szakember először azt nézi meg, milyen döntést kell meghoznia a látogatónak, és ehhez milyen adatok szükségesek.

Volt olyan eset, amikor egy ügyfél húsz terméket akart egyetlen hosszú listában megmutatni. Minden termékhez három bekezdés szöveg tartozott. A látogatók alig görgettek tovább az első néhány elemnél. Amikor a termékek rövid kártyákba kerültek, a kínálat átláthatóbb lett. Nem lett több termék, nem lett más az ár, csak a forma vált tisztábbá.

Termékek kártyán árak

Az ár főleg attól függ, hogy hány kártyára van szükség, kell-e egyedi grafikai megoldás, lesz-e szűrés, rendezés, gomb, animáció vagy tartalomfeltöltés. A túl olcsó munka ezen a területen gyakran gyengébb minőséget jelent. Nem mindig a látvány miatt, hanem azért, mert a kártyák később nehezen szerkeszthetők, mobilon szétesnek, vagy túl lassan töltődnek be.

Tapasztalatom szerint nem érdemes csak a legalacsonyabb ár alapján dönteni. Egy termékkártya egyszerű elemnek tűnik, de sok apró részletből áll. Képarány, térköz, betűméret, kattintható felület, mobilos sorrend, akadálymentesebb szöveg, gyors betöltés. Ezek együtt adják a használható végeredményt.

Online munka és anyagleadás

Távoli munkánál az első lépés a pontos anyagleadás. A megrendelőnek érdemes egy helyen átadni a termékneveket, képeket, árakat, rövid leírásokat és a kívánt gombszöveget. Nem kell tökéletes brief, de legyen érthető. Ha az adatok több üzenetben, külön fájlokban és félkész formában érkeznek, könnyen nő a munkaidő.

A szakember általában először kér néhány alapinformációt. Hány kártya lesz. Kell-e később bővíteni. Milyen rendszerben működik az oldal. Statikus HTML kell, tartalomkezelőbe illesztett blokk, vagy csak egy tervezett minta. Ezután készülhet egy próbaelrendezés. Én ezt jó megoldásnak tartom, mert egyetlen mintakártyán gyorsan kiderül, jó-e az irány.

A kommunikáció lehet üzenetben, képernyőképpel, rövid videóval vagy megosztott dokumentumban. A lényeg az, hogy a javítások ne legyenek homályosak. Az nem elég, hogy legyen modernebb. Jobb így fogalmazni. A kép legyen nagyobb. Az ár kerüljön közelebb a gombhoz. Mobilon két sor helyett egy sorban legyen a cím, ha elfér. Így a módosítás gyorsabb és pontosabb.

Megfelelő szakember kiválasztása

A megfelelő szakember kiválasztásánál a portfólió sokat elárul. Nem az a legfontosabb, hogy minden korábbi munka hasonló legyen, hanem hogy a kártyák rendezettek, jól olvashatók és mobilon is használhatók legyenek. Érdemes megnézni, hogyan bánik a térközökkel, képekkel és gombokkal. Ezekből gyorsan látszik, mennyire figyel a részletekre.

Sokan ott hibáznak, hogy csak látványtervet kérnek, de nem beszélnek a működésről. Pedig a termékek kártyán való megjelenítése akkor lesz hasznos, ha a látogató tud vele dolgozni. Kattintson tovább. Kérjen ajánlatot. Tegye kosárba. Olvasson részleteket. Mentse el a terméket. A cél határozza meg, hogyan kell felépíteni a kártyát.

Érdemes rákérdezni arra is, hogy a szakember milyen formában adja át a munkát. Csak képet küld, vagy használható kódot is. Beilleszti az oldalba, vagy külön fájlt ad. Javítja-e a mobilnézetet. Vállal-e egy kör módosítást. Ezek apró kérdéseknek tűnnek, de később sok félreértést előznek meg.

Termékkártyák tartalma és minősége

A jó termékkártya nem akar mindent elmondani. Röviden mutatja meg a legfontosabbat. A cím legyen egyértelmű, ne túl hosszú. A kép legyen azonos arányú, különben a rács rendezetlennek látszik. Az ár helye legyen állandó. A gomb szövege legyen konkrét, például részletek, ajánlatkérés vagy megrendelés. Ez egyszerűnek hangzik, mégis gyakran ezen csúszik el a minőség.

Szerintem egy magánügyfélnek nem kell minden technikai részletet ismernie. De azt jó tudni, hogy a kártyás termékmegjelenítés nem csak HTML dobozok sorozata. Számít a betöltési sebesség, a képek mérete, a címsorok rendje, a kódszerkezet és az, hogy a kártyák bővíthetők-e később. Ha ma hat termék van, holnap lehet tizenkettő. A megoldás ezt bírja el.

Gyakori probléma, hogy a megrendelő különböző minőségű képeket ad. Egyik fekvő, másik álló, harmadik túl kicsi. Ilyenkor a szakembernek vagy egységes képarányt kell kialakítania, vagy jeleznie kell, hogy a végeredmény nem lesz egyforma. Ez nem akadékoskodás. Ez a tiszta munka része.

Gyakori hibák kártyás oldalaknál

Az egyik gyakori hiba a túl sűrű elrendezés. A megrendelő minél több terméket akar egyszerre mutatni, ezért a kártyák kicsik lesznek, a szöveg összenyomódik, a gombok pedig nehezen kattinthatók. Mobilon ez még feltűnőbb. Egy jó online szakember inkább kevesebb információt mutat elsőre, de azt jól.

A másik hiba a következetlenség. Más hosszúságú címek, különböző gombszövegek, eltérő képméretek, véletlenszerű sorrend. Ettől az oldal amatőr hatású lesz. Nem azért, mert rossz a termék, hanem mert a felület nem segíti a bizalmat. Én azt látom, hogy a látogatók gyorsan ítélnek. Ha az első benyomás zavaros, ritkábban nézik meg a részleteket.

Probléma lehet az is, ha nincs előre tisztázva a javítások száma. A kártyás elrendezésnél könnyű sok apró módosítást kérni. Egy kicsit nagyobb kép. Más színű gomb. Rövidebb cím. Több hely az ár alatt. Ezek önmagukban nem nagy dolgok, de együtt időt visznek el. Ezért jobb már az elején megbeszélni, hány módosítási kör tartozik az árba.

Átadás és későbbi módosítás

A munka végén a megrendelőnek nem csak azt kell megkapnia, hogy a kártyák jól néznek ki. Fontos az is, hogy később lehessen rajtuk változtatni. Ha új termék kerül be, legyen világos, mit kell másolni vagy hol kell átírni a szöveget. Ha tartalomkezelőben készül a blokk, akkor legyen érthető a szerkesztési mód.

Az átadás történhet kódfájlként, beépített oldalszakaszként, képernyőképes ellenőrzéssel vagy rövid leírással. A pontos forma attól függ, milyen oldalon kell használni a megoldást. Egy egyszerű bemutató oldalnál elég lehet a kész kód és a hozzá tartozó képmappa. Egy bonyolultabb rendszerben már jobb, ha a szakember közvetlenül beilleszti és ellenőrzi is.

Végül érdemes egy próbanézést kérni több eszközön. Nem kell ezt túlbonyolítani. Asztali nézet, táblagép szélesség, mobilnézet. Ha ezeken rendben van a kártyák sorrendje, a gombok működnek, a szöveg olvasható, akkor a termékek kártyán megoldás már nem csak látványos rész, hanem használható felületelem is.