A Világításcenter.hu mögött egy több évtizedes múlttal rendelkező hazai villamossági vállalkozás áll: az Orbán Elektric Kft., akik 1993 óta foglalkoznak villanyszerelési anyagok és kapcsolódó termékek kereskedelmével, és a növekvő igényekre reagálva a webáruházat is egyre tudatosabban fejlesztik.
A közös projektünk kiindulópontja nagyon kézzelfogható volt: a meglévő design technikailag és megjelenésben is elavult, a cél pedig egy gyorsabb, stabilabb, SEO-szempontból is átláthatóbb felület létrehozása, ami jobb felhasználói élményt, magasabb konverziót és összességében egy modernebb boltot ad. Mindezt úgy, hogy közben megmarad a már megszokott színvilág, és a végeredmény prémium érzetet sugall, mégis “elérhető” módon.
Ami még különlegessé teszi a megújulást, hogy a webáruház megjelenése nemcsak egy redesign-on esett át, hanem akadálymentes is lett.
Ez több mint egy “szép gesztus” a részükről. Tudatos döntés volt, hiszen egy akadálymentesített webáruház hozzájárul ahhoz, hogy nagyobb felhasználói réteget érjen el.
Bemutatjuk a megújulás történetét, miközben kiemelünk néhány olyan megoldást is, amelyek kifejezetten egyedivé teszik a webáruház új felületét – nemcsak látványban, hanem működésben is.
Előtte – Utána
A vilagitascenter.hu-nak korábban is egyedi design-ja volt a Tokyo design témára építve. Ugyanakkor ez már több mint hat éves téma és mint tudjuk, a mai felgyorsult világban ennyi idő nem kevés. Megérett már a webáruház a design frissítésre.
Így nézett ki a webáruház a megújulás előtt:
A tervezés a megszokott menetben történt: megterveztük a webáruház felépítését drótvázakkal, majd ezekre látványterveket készítettünk.
Az új design kialakításánál a legújabb Hamburg témára építkeztünk, ugyanakkor jelentősen eltértünk a “sablontól” és számos újdonság, plusz funkcióval is felturbóztuk.
Könnyebbséget jelentett a csapatnak, hogy a Hamburg már úgy lett kialakítva, hogy megfelel az akadálymentes szabályoknak, így nagyobb figyelmet tudtunk szentelni a megjelenésnek és az egyedi funkciók kialakításának.
A megújult megjelenést áttekintheted, ha ellátogatsz a webáruház oldalára vagy átgörgeted a lenti ablakokban a grafikai terveket:
A cikk további részében kitérünk pár olyan megoldásra, amelyek a VilágításCenter webáruházat igazán egyedivé varázsolják:
Széles kivitel
A Hamburg téma 1380 pixel széles elrendezését 1690 pixel szélesre növeltük, így jobban kihasználtuk a nagyobb kijelzők (laptop, desktop) nyújtotta lehetőségeket. Ennek köszönhetően több termék és információ fér el egy képernyőn, kényelmesebb a böngészés (kevesebb görgetés), és a terméklisták, szűrők, kiemelések is átláthatóbban rendezhetők.
A szélesebb elrendezésnél külön figyeltünk arra, hogy ne hosszú, nehezen követhető sorok jöjjenek létre. Az olvashatóság érdekében a szöveges blokkok továbbra is kontrollált sortöréssel, jól tagoltan jelennek meg, így a tartalom könnyen befogadható marad.
A menüben a főkategóriák mellé egyértelmű, könnyen felismerhető ikonokat (más szóval piktogramokat) helyeztünk, hogy a látogató már első pillantásra gyorsabban be tudja azonosítani, melyik menüpont hová vezet. Ez különösen hasznos egy nagy választékú, sok kategóriával dolgozó webshopnál, mint amilyen a VilágításCenter is, hiszen segítik, hogy hamarabb jusson el a felhasználó a releváns termékekhez.
Akadálymentességi szempontból fontos, hogy az ikonok nem helyettesítik a szöveget, csak támogatják azt. Minden menüpont továbbra is jól olvasható felirattal szerepel, az ikonok pedig megfelelően kezelhetők, így a felület képernyőolvasóval és billentyűzettel is értelmezhető marad.
Kiemelt információk a termékajánló moduloknál
A főoldali termékajánlók („Kedvenceid még kedvezőbben” és az „Újdonságaink”) mellé beépítettünk egy különálló, fix bannert. Ilyet ritkán látni sablonos megoldásoknál. Most kifejezetten az volt a cél, hogy a termékek mellett megjelenjen egy képi felület, ami megtöri az oldal monotonitását és fenntartja a látogató figyelmét.
A megoldás teljesen egyedileg került beépítésre, és külön modul logikával kezelhető, így gyorsan cserélhető a tartalma anélkül, hogy a termékajánló működéséhez hozzá kellene nyúlni. Ezek a kiemelt információk mobilon is jobban érvényesülnek.
Kategória oldal egyediségei
A kategória oldalakon több hasznos funkció is helyet kapott a megújult felületen, amelyeknek célja a könnyebb navigáció és áttekinthetőség.
Szűrőpanel elrejthetősége
Az ügyfél kérésére a kategóriaoldalon a szűrőt nem “kötelező elemként” kezeltük, hanem egy mozdulattal össze lehet csukni, hasonló logikával, mint a főmenüt. Ez különösen azoknak hasznos, akiket a bal oldali szűrősáv gyakran zavar böngészés közben, vagy egyszerűen csak a termékeket szeretnék gyorsan átfutni.
Hogyan működik:
Nyitott állapotban a szűrő egy klasszikus oldalsávként viselkedik, tehát megszokott és könnyen értelmezhető. Viszont, ha a felhasználó bezárja, akkor a terméklista szélesebb felületet kap.
További előnye, hogy a szűrő elrejthetősége csökkenti a vizuális terhelést, és fókuszáltabb böngészést tesz lehetővé. Emellett fontos, hogy a “toggle funkció” jól azonosítható, egyértelmű állapotot jelez (nyitva/zárva), és billentyűzettel is biztonságosan kezelhető.
Fixen megjelenő kosár modul
A terméklista oldalakon a kosár fixen megjelenik a jobb oldalon, így a vásárlók folyamatosan nyomon követhetik, mit raktak bele. A termékek darabszámát a felhasználók közvetlenül itt is növelhetik vagy csökkenthetik, nem kell ehhez külön a kosár oldalra lépniük. Ezáltal kevesebb kattintással és kevesebb oldal betöltéssel jár egy vásárlás.
Az, hogy a darabszám helyben állítható, csökkenti a fölösleges navigációt és a kontextusváltást, ami különösen hasznos lehet kognitív terhelés vagy figyelmi nehézség esetén.
TOP termékek
A kategóriaoldalak tetején (még a terméklista felett) kiemeljük a top 3 terméket, hogy a látogatók gyorsan kapjanak egy kapaszkodót a választáshoz. Egy nagy kínálatnál a legnehezebb lépés sokszor az, hogy “hol kezdjem?”. Ez a blokk pontosan ebben segít: csökkenti a döntési terhet, és gyorsabbá teszi a termékfelfedezést.
Üzleti szempontból ez egy finom, mégis hatékony terelés, mert fókuszt ad a kategóriának, és segít abban, hogy a felhasználó ne vesszen el a listában, hanem hamarabb eljusson a kosárba tételig. Különösen mobilon és első látogatásnál működik jól, amikor a gyors tájékozódás a legfontosabb.
Termékoldal egyediségei
A termékoldalon úgy építettük fel a legfelső szekciót, hogy a vásárlási döntéshez szükséges fontos információk azonnal, hajtás felett legyenek elérhetők. A nagy és részletgazdag termékképek mellett a jobb oldali blokkban ott van minden, ami a döntést gyorsítja: raktárállapot, várható szállítási idő, legkedvezőbb szállítási díj, hűségpont érték, vásárlói értékelés, akciós ár és az akció időtartama, stb.
Emellett a „szakmai” adatok sem vesznek el: a gyártó, cikkszám és gyártói cikkszám is ugyanitt szerepel. Ez különösen egy világítástechnikai webshopnál érték, ahol sokan konkrét paraméterek alapján keresnek, és fontos, hogy egyértelműen azonosítható legyen a termék.
Az eredmény egy nagyon átlátható, informatív termékoldal, ahol a felhasználónak nem kell vadásznia a részletekre vagy ide-oda görgetnie: gyorsabban összeáll a kép, kevesebb a bizonytalanság.
A termékoldalon lentebb görgetve sem egy megszokott látvány várja a felhasználót: a képi és információs blokkokat úgy rendeztük el, hogy azok könnyen emészthetőek legyenek.
A termékkép alatt rögtön megjelennek a webáruház által kínált szállítási opciók, így a vásárlónak már itt egyértelmű, hogy miként juthat majd el hozzá a termék.
Ez alatt, a bal oldali szekcióban kaptak helyet a hosszabb szöveges tartalmak:
- Termék paraméterei
- Hosszú leírás
- Vélemények
- Videók
- stb.
Mindegyik lenyitható és visszacsukható. Így aki gyorsan csak a lényegre kíváncsi, nem kap túl sok információt egyszerre, aki pedig részletesen dönt, egy kattintással eléri a bővebb leírásokat.
A lenyitható elemek mellett, a jobb oldalon egy egyedileg beépített “További ajánlatok” modul fut: lapozható, több soros termékcsempékkel, kifejezetten arra optimalizálva, hogy böngészés közben is adjon releváns alternatívákat és kiegészítő ötleteket, anélkül, hogy elvinné a fókuszt a fő termékről.
Mitől akadálymentes egy webshop design?
Az akadálymentes design azt jelenti, hogy a webáruházat minél többen, minél kevesebb akadállyal tudják használni. Akkor is, ha valaki gyengébben lát, csak billentyűzettel tud navigálni, képernyőolvasót használ, vagy épp mobilon, rossz fényviszonyok között böngészik. A cél nem “extra funkciók” hozzáadása, hanem egy érthetőbb, biztosabban használható felület.
Gyakorlatban ez olyan alapokon múlik, mint a jó kontrasztok és olvashatóság, a logikus felépítés és következetes komponensek, a jól látható fókuszállapotok, valamint az, hogy a gombok, űrlapok, menük és visszajelzések (hibák, sikerüzenetek) egyértelműen értelmezhetők legyenek.
Ugyanilyen fontos, hogy a webshop billentyűzettel is végigjárható legyen, és a tartalom technikailag is úgy épüljön fel, hogy a segédeszközök (például képernyőolvasók) helyesen tudják értelmezni. Ha egy oldal akadálymentes, kevesebb a bizonytalanság, kevesebb a hibázási lehetőség és kevesebb lemorzsolódás is.
Ha kíváncsi vagy, milyen szempontok mentén érdemes végigellenőrizni egy webshopot, hogy megfelel-e az akadálymentes szabályoknak, összeraktunk egy checklistet, ami segíthet ebben. Ingyenesen letöltheted ezen az oldalon.
Akadálymentes webshop akár 1 napon belül
Nem akarsz az ellenőrző listával bíbelődni, inkább gyors megoldást keresel? Akkor a Hamburg téma használatát javasoljuk számodra, akár átalakításokkal, mint ahogyan a VilágításCenter esetében is történt.
Ez a téma már az EU-s akadálymentességi elvárások szerint épült fel, billentyűzet-navigációval, képernyőolvasó-kompatibilitással és optimalizált struktúrával.
Válts Hamburgra, hogy a webáruházad készen álljon arra, hogy minden vásárló könnyen eligazodjon az oldaladon! Segítségünkkel akár 1 napon belül megújulhat a webáruházad!
A szerzőről:
