• Webshop készítési útmutató

8 pont, amitől sikeres lesz a webshopod!

A webshop készítés folyamata összetett, ne várd azt, hogy a szerződés másnapján belevágjon a fejlesztő csapat a kódolásba. Valójában az internetes kereskedelem egy ettől sokkal mélyebb tervezési és elemzési munkát igényel. A hazai e-kereskedelmi forgalom a 950 milliárd forint környékén alakul majd 2020-ban, a Reacty középtávú előrejelzése szerint, így egyik webshopnak sem mindegy, hogy mekkora részt szakít ki ebből a hatalmas forgalomból. Ha webshop készítés előtt állsz, vagy már van, csak nem működik, íme egy webshop készítési útmutató, egy üzleti szemléletű fejlesztői csapattól. 

Webshop készítési útmutató

Először a legfontosabb, hogy megvizsgáljuk és megértsük az üzletet, illetve azt, hogy valóban szükség van-e egyedi rendszer fejlesztésére. Az esetek jelentős részében erre egyébként nincs szükség, hiszen rengeteg kész megoldást adó platform létezik már, ami a kezdő e-kereskedelmi vállalkozásoknak pillanatok alatt megfelelő megoldást nyújt, teljes infrastruktúrával és ennek kezelésével, karbantartásával. Ilyenek például nemzetközi piacon a Shopify, a Woocommerce, itthon pedig a Shoprenter, vagy az Unas.

Amennyiben valamilyen egyedi igénye van az online boltodnak, amit ezek a platformok nem tudnak kiszolgálni, alig várjuk, hogy dolgozzunk rajta. Ennek a megfelelő kivitelezéséhez pedig a következő folyamat vezet:

1. Megértés

Abraham Lincoln azt mondta, ha 6 órája van egy baltával fát vágni, az első 4 órát a szerszám élezésével tölti. Ugyanezt szükséges egy projekt kezdetekor is tenni. A rászánt idő 2/3-át a probléma pontos megértésére szánni.

2. Kutatás

Mikor pontosan értjük a feladatot, hogy hogyan is vág egybe a felhasználók problémáival és a márkáddal, ideje elvégezni az alapvető kutatási feladatokat, hogy megbizonyosodjunk arról, megfelelő az irány és kicsit faragjunk, pontosítsunk rajta. Miből áll ez a fázis?

Felhasználói Interjúk, ahol szemtől szemben egy felhasználóval beszélgetünk. Mit keres a termékben, mi az ő problémája, a saját szavaival. Felhasználói workshopok (fókusz csoport), ahol párbeszédre törekszünk az egész csoporttal.

Kérdőívek, amik lehetőséget adnak a nagyobb mintavételre, hiszen több emberhez jutnak el, viszont itt egy sokkal felületesebb kérdéssorra törekedve.

Továbbiakban pedig a már jól ismert piackutatás és versenytárselemzés erőit használjuk fel a piac megértéséhez.

3. Elemzés

Az első két pont alapos elvégzése után elegendő anyag áll rendelkezésünkre az ún. felhasználói personak kialakításához.

Persona: egy felhasználói csoportból kialakított, azt reprezentáló fikcionális személy.

Ebből legalább 2-3 megtervezése készül el, rajtuk keresztül könnyebben tudunk kapcsolódni a felhasználói csoportokhoz, mint emberekhez. Egy persona a teljesség igénye nélkül a következő pontokból áll: célok, demográfiai háttér, szokások, fájdalompont, igények, és kap egy nevet.

A personakon kívül a felhasználó útját is lemodellezzük ebben a szakaszban. Ezt User Journey-nek hívjuk. Egy ilyen dokumentumban a felhasználók útját tervezzük meg az ismerkedési fázistól a vásárlásig. Milyen lépéseket tesznek, döntéseket hoznak meg, milyen érzelmet váltunk ki belőlük.

Egy user journey segítséget nyújt a vásárlási folyamat egyes különálló lépéseire koncentrálni, ezáltal ezeket részletesen átgondolni a felhasználó gondolatai és érzelmei figyelembevételével.

Erről részletesebben ebben a cikkben is írtunk. 

Customer journey

4. Leírás

Az elkészült personak és felhasználói útvonal segítségével meghatározzuk a kisebb elemeket, amik a design és fejlesztés alapjait képezik. Ezek a következők:

  • User story, azaz felhasználói történet. Egy ilyen történet az online boltod egy adott funkciójának a részletes leírását tartalmazza a vásárlód szempontjából. Azaz pl. mit lát és mit szeretne elérni a felhasználó egy adott oldalra érkezve.
  • Ezekből scenario map és egyes esetekben user flow is készül. Ezek feladata, hogy funkciókra pontosan modellezze egy felhasználó, vásárló útját az alkalmazás megnyitásától a kívánt cél eléréséig. Itt dokumentálásra kerül, hogy a felhasználók hogyan cselekednek bizonyos oldalakra érkezve és milyen eszközökkel befolyásolható a döntésük és terelésük a vásárlás irányába. A cél, hogy minél könnyebbé tegyük felhasználóink számára a vásárlás folyamatát.
  • Ebben a szakaszban egy első verziós oldaltérkép, azaz sitemap is elkészítésre kerül. Ilyennel valószínűleg találkoztál már a 2000-es évek közepén is. Bár akkor a funkciója jórészt keresőoptimalizálás volt, ma már a terméktervezés részét képezi. A user flow segítségével könnyedén elkészíthető. Meghatározzuk az oldalakat és azok hierarchiáját a felhasználó számára lehető legegyszerűbb, legkevésbé félreérthető módon.

5. Tervezés, design

Itt eljutottunk az első alkalomhoz, mikor már rengeteg leírás mellett végre valami szemkápráztató is készül a termékből. Na persze ehhez először meg kell tervezni a magas szintű struktúrát. Ez szerencsére már játszi könnyedséggel történik a meglévő dokumentumok alapján. A nagyvonalakban történő tervezésről írtunk korábban ebben a cikbben. Itt most kicsit mélyebbre megyünk.

5.1 Wireframe, azaz drótváz

Szeretjük magyarra fordítani ezeket a szakkifejezéseket, hiszen magyarul sem jelentenek semmivel többet, mint angolul. Szóval mi is a drótváz? A szakasz legfontosabb eleme. A prototípus prototípusa. A termék egy olyan verziója, ami meghatározza milyen elemekből és milyen struktúrában fog felépülni a végleges változat.

Ahogy a fentiek mindegyike ez is egy iteratív folyamat. Azaz több verzión megy keresztül, mire közel végleges formát ölthet. Itt sok esetben a tervező még nem veszi elő a varázsprogramokat a számítógépen, hanem alacsony részletességű drótvázat készít a jó öreg papír, ceruza kombóval.

5.2 Felhasználói felület, UI

Idáig is eljutottunk. Mondhatnánk, hogy a drótvázak alapján már csak ki kell színezni és átadni a fejlesztőknek a terveket, de ez ennyire azért nem egyszerű, ha a webshop készítési útmutató eddigi alaposságát szeretnénk megtartani. Ugyanis itt még nem ér véget a UX folyamat. Bár a wireframe alapján valóban könnyedén összerakható az oldalak felépítése, fontos döntéseket szükséges meghatározni a színpaletta, hangulat kombinációval. És ne felejtsük, hogy itt feladat eldönteni, hogy bizonyos elemek (pl. űrlap mezők, gombok) hogyan legyenek akkorák, amekkorának lenniük kell. Hiszen gondolni kell a felhasználókra (personák megkönnyítik), hogy milyen körülmények között hanszálják, milyen az életkoruk. Ezek meghatározzák többek között a szövegméretet, kontrasztot, illetve a teljes színpalettát is.

Miután ezt a kihívást is sikeresen vettük, keltsük életre interaktív prototípusokkal! Az első alkalom, hogy kipróbálható, “megnyomkodható” verziót látnak az ötletgazdák. Ma már meglehetősen egyszerű elkészíteni egy kattintható prototípust a megfelelő előkészületek mellett (Oldaltérkép, user flow). Ez hasznos a design sprintek, iterációk folyamatában, hiszen hamarabb látni a felhasználó útját, mint a fejlesztés közben, illetve hasznos a fejlesztőknek is. Hiszen egy pontos terve a felhasználói felületnek.

6. Fejlesztés

A fejlesztők megkapják a grafikai és kutatási anyagokat, amik segítségével nulladik lépésben technológiai leírás, specifikáció készül, amire a fejlesztési folyamat során hivatkozni lehet.

A specifikáció első verziójának elkészültével megkezdődnek az aktív fejlesztési munkák, sprintek is. Ezek során a funkciók sorban készülnek el, gyakori tesztelési és átadási fázisokkal, így mindegyiket lehetőség van tesztelni, kipróbálni és szükség esetén iterálni rajta, mielőtt a teljes termék elkészülne.

A fejlesztés során kiemelt figyelmet fordítunk az iparági alapok és legjobb gyakorlatok használatára, valamint a minőség rendszeres ellenőrzésére és magas szinten tartására.

7. Tesztelés

Természetesen a termék tesztelése nem csak a tervezési szakasz alatti felhasználókkal tesztelést jelentette. A tesztelés és iterációk folyamatosak a tervezési és fejlesztési szakaszok minden állomása közben. Ezek során minden alkalommal a folyamat elején elkészült dokumentumokhoz viszonyítva nézzük a termék aktuális állapotát.

Az átadás előtt azonban még két utolsó nagy, alapos tesztet végzünk, hogy az indulás során biztosan minden megfelelően működjön.

Ez magában foglal egy nagyobb terhelés alatti tesztelést, amivel az induló kampány következtében várható megnövekedett érdeklődést szimuláljuk. Ezen túl pedig a végtermék tesztelését felhasználókkal, vagy akár beta program indításával a korai visszajelzések begyűjtése érdekében.

8. Átadás és utánkövetés

A webbolt készen áll az élesítésre, átadásra. A várva várt pillanat elérkezett. Valódi felhasználók és vásárlók érkeznek a webshopra.

Hogy hátradőlni? Ne viccelj. Gyűlnek az éles felhasználási adatok, itt az idő elemezni ezeket. Fontos látni, hogy hol működik kiemelkedően jól a folyamat. Ahogyan azt is, hogy hol akadnak el esetleg felhasználók, mi okozhatja a kosárelhagyásukat. Itt végre élesben látható, hogy valóban segít-e a termék megoldani a problémájukat, megtalálni, amit kerestek. És visszajelzést kapunk arról, hogyan lehet még tovább fejleszteni és magasabb minőséget nyújtani a továbbiakban.

Emellett nagyon fontos része a folyamatnak, ezért szerepel a webshop készítési útmutató írásunkban is, hogy a háttérfolyamatok is legyenek átláthatók és követhetők. Bizonyos webshop méret fölött érdemes elgondolkodni egy kereskedelmi ERP rendszer használatán is, hogy valóban olyan minőségben tudd kiszolgálni a vásárlóidat, ami hosszú távon generál folyamatos üzletet. 

Végszó

Íme a CodingLab webshop készítési útmutatója, mi ebben megközelítésében hiszünk, hiszen már többször bizonyította nemcsak piacképességét, hanem kiemelkedő arányú sikerességét is. Amennyiben kérdéseid merülnek fel, keress minket elérhetőségeinken vagy vedd igénybe ingyenes konzultációs lehetőségünket.

2020-06-22T11:45:00+00:002020, június 22, hétfő|Categories: Blog, cms rendszer fejlesztés, alkalmazás készítés, Egyéb kategória|Cimkék: |