Webshop UI/UX tervezés

Ahogy az alapoktól felépítünk egy házat, ami biztos bázison nyugszik, miközben kívül-belül irigylésre méltóan szép, úgy alakítunk ki egy weboldalt, webshopot is. Biztos alapra helyezve, vonzó dizájnnal tesszük ellenállhatatlanná, hogy végső soron elérje azt a célt, amiért létrehoztuk, azaz minél több látogatót, vevőt, konverziót hozzon.




Egy webshop sikerét a használhatóság
​és a dizájn együttesen határozza meg.

Fontos, hogy a webáruház jól célzottan szolgálja a vásárlókat, végigvezetve őket azon az úton, hogy érdeklődőből vásárlóvá majd visszatérő vevővé váljanak. Ehhez elengedhetetlen a jól kidolgozott ergonómiai tervezés és az ezzel szervesen együttműködő grafikai megvalósítás.







User Interface (UI) – a felhasználói felület

A felhasználói felület a weboldal vagy webáruház grafikus elrendezése. Ide tartoznak például a kattintható gombok, a szöveges tartalmak vagy a képek is. A UI a képernyő elrendezését és a vizuális elemeket is magában foglalja.

Egy oldal felhasználója első blikkre ítéletet hoz a website-ról. Ha használhatónak és megjelenésében is vonzónak találja marad, ha nem ezt tapasztalja, azonnal elhagyja az oldalt. A User Interface, azaz a felhasználói felület kialakítása ezért döntő valamennyi projekt esetében.

A látogatót elsősorban az érdekli, hogy könnyen, minimális erőfeszítéssel navigálhasson az oldalon. Ha vásárolni akar, akkor azt minél egyszerűbben és gyorsabban szeretné megtenni. Éppen ezért elengedhetetlen a felhasználói igények feltérképezése és azok beépítése a webshop felhasználói felületének kialakításakor. A felhasználói felület célja, hogy zökkenőmentes utat és átjárhatóságot biztosítson a látogató számára az oldalon.si a weboldalon, ha ezt megkapja, erősödik a márkába vetett bizalom, ami konverzióra ösztönöz, növeli a visszatérés esélyét és az újabb konverziók lehetőségét

  • vegye figyelembe a látogatók igényeit, hogy az oldalon tartsa őket
  • legyen személyre szabható (pl. látogatói kategória választással)
  • közvetítse a brandet és a márka értékeket
  • a felhasználó az élményt keresi a weboldalon, ha ezt megkapja, erősödik a márkába vetett bizalom, ami konverzióra ösztönöz, növeli a visszatérés esélyét és az újabb konverziók lehetőségét







Drótvázzal alapozunk

A webshop tervezése során minden esetben drótváz(wireframe) elkészítésével indítunk, ez adja a vázat, az alapot, amire később a dizájn épül. A drótvázzal meghatározzuk az oldal struktúráját, elhelyezzük a fő tartalmi elemeket, ha szükséges több variációt is készítünk. A wireframe elkészítésével megrendelőinket segítjük abban, hogy értelmezni tudják az oldal felépítésére vonatkozó elképzeléseket. Az áttekinthető drótvázak készítésének előnye, hogy a jelentősebb módosításokat még az alapozás fázisában elvégezhetjük, amivel időt takarítunk meg.








Minden előzetes terv szerint

Képzeljük csak el, milyen lenne, ha tervek nélkül építenénk fel egy házat, amiről csak a befejezés szakaszában derül ki, hogy nincs kéménye, vagy az ajtók rossz helyre kerültek.


Ugyanígy kell gondolkodnunk a weboldal esetében is. A drótvázak a tervezés szabadságát adják, az első látványtervek megjelenésével a tökéletes kimunkálás lehetőségét nyújtják, amivel felesleges plusz munkáktól és ezzel pénzkidobástól kíméljük meg ügyfeleinket.

A drótváz a weboldal vagy webshop tervrajza, aminek célja, hogy bemutassa a készülő termék alapfelépítését még az előtt, hogy a dizájn tervezése elkezdődne. A wireframe abban nyújt támogatást a megrendelőnek, hogy már a kezdeteknél láthassa, milyen lesz az oldal felépítése, tartalma és ergonómiai elrendezése. A megbízó az alapoktól részesévé válik a tervezési folyamatnak, aktívan részt vehet a legjobb megoldások kialakításában.​

A drótváz elemei:

  • fejléc, lábléc kialakítása
  • navigációs elemek megtervezése
  • gombok létrehozása
  • tartalmi blokkok
  • címkék
  • címek, szöveges blokkok
  • képek helye
  • Call to Action elemek (CTA gombok)

Ahhoz, hogy egy jól használható, kedvelt és visszatérő látogatókat, vásárlókat hozó felületet hozzunk létre elengedhetetlen, hogy átgondolt, logikusan kezelhető és a felhasználók igényeire szabott struktúrát hozzunk létre. Ezt alapozza meg a drótváz, amire később a fejlesztő és a grafikus is támaszkodhat.





Az ergonómia ereje

A webshop tervezésénél meg kell határozni, honnan, milyen irányba szeretnénk irányítani a látogatót.

Ehhez meg kell terveznünk, hogy a felhasználót milyen cselekvésre szeretnénk ösztönözni, hogyan juttatjuk el a termék-felfedezéstől a kosárig, meghatározzuk, hogy az egyes kattintásokkal hova navigálhat a látogató. Ennek megvalósítása tapasztalatot és konkurencia-elemzést igényel. Az ergonómiai tervezés végén elkészül a drótváz készlet, ami a főoldal mellett valamennyi aloldal pontosan megtervezett vázlatát tartalmazza. A folyamat következő lépcsőjeként, az ergonómia tervezést követően  megkezdődhet a dizájntervezés, az oldal felöltöztetése színekkel, formákkal, részlet gazdag elemekkel.


UI kit tervezés

Az UI kit összeállítása és a design tervezés kéz a kézben együtt jár.

Az UI kit olyan összetevőket tartalmaz, amelyek a webáruház valamennyi aloldalán egységesen jelennek meg, a designhoz hasonlóan meghatározóak a webes arculat megalkotásában. Az UI kit egy tervkészlet az oldal összes visszatérő elemével. Olyan állományt készítünk kódszinten, amely rögzíti a webshop színvilágát, meghatározza a felhasznált betűtípusok körét, magában foglalja, hogy milyen az oldalakon használt gombok megjelenése, vagy azok színvilága. Az UI kitben egységesítjük a kitöltendő űrlapok formáit, a különböző boxokat, widgeteket, a táblázatok vagy ikonok kinézetét.





Drótvázból használatra kész tervek

Az ötlettől eljutottunk oda, hogy elkészült a főoldal és az aloldalak tervei.

Tudjuk, hogy mit szeretnénk megjeleníteni az oldalakon és hogyan kívánjuk alakítani a felhasználó útját. A drótvázak alapján elkészültek a dizájntervek. Csapatunk ekkor kezd bele a reszponzív oldalmegjelenések kialakításába. A desktop verzió mellett megszületnek az oldalak tabletre és okostelefonokra optimalizált változatai, amelyek megjelenítik ugyanazokat a dizájn elemeket, amiket a desktop (asztali gépes) verziónál látunk. Fontos, hogy a reszponzív oldalak is jól kidolgozott felületekké váljanak, precíz mozgatással, hangsúlyos gombokkal és látványelemekkel segítsék a felhasználót.
Ha mindez adott, elkezdjük a felhasználói felület kialakítását.







Mi a következő lépés?


Szívesen segítünk ha kérdésed lenne, vedd fel velünk a kapcsolatot elérhetőségeink valamelyikén, kollégáink készséggel állnak rendelkezésre.


+36 20 414 0284

office@paprikasoft.com

Küldj nekünk üzenetet

Adatvédelmi nyilatkozat

Welcome!

We have detected, that you’re visiting us from outside of Hungary. Would you like to visit our international website?
You can chage this settings at every time on the top of the page.