Mi legyen egy webshop termékoldalán?

Az elmúlt hetekben egy magyar webshop termékoldalának elemzésébe, újratervezésébe kezdtünk bele. A vizuális tervezés előtt egy meglehetősen nehéz, ám alapvető kérdéssel néztünk szembe: milyen információk, funkciók legyenek a termékoldalon, és mik azok amiket száműzni kell?

A válasz nyilván minden esetben más – függ a webshop tartalmától, felépítésétől, az árucikkek sajátosságaitól, valamint a célközönségtől is – a látogató célja azonban minden esetben ugyanaz.

Mi a felhasználó célja az oldalon?

Egy webshop termékoldalát a látogató a következő két alapvető céllal keresi fel:

  1. Információt keres a termék jellemzőiről, funkcióiról, kinézetéről, áráról, hogy eldönthesse, hogy megfelel-e az igényeinek és lehetőségeinek
  2. Meg szeretné vásárolni a kiválasztott terméket

A jelenlegi helyzet

A fenti célokat szem előtt tartva kerestünk megoldást a két alapvető problémára:

  • az oldal túlzsúfolt, nehezen áttekinthető
  • a felépítés miatt újabb elemek elhelyezése nem lehetséges (A tartalmi elemek egy része egy dobozban van, és doboz fejlécében egymást mellett elhelyezett tabokkal lehet köztük váltani. Ezzel a megoldással véges a horizontálisan felhasználható hely, és ezzel a megjeleníthető menüpontok száma is.)

Az információegységek és funkciók összegyűjtése

A jelenlegi termékoldalt végignézve kigyűjtöttük a most létező és egy blokként kezelhető információegységeket, funkciókat. A következő lépésben a listát kiegészítettük azokkal a pontokkal, amelyek nem léteznek, de úgy gondoltuk, hogy szükség van rájuk.

A gyűjtemény végül több mint 40 elemből állt, ami az első pillanatban rengetegnek tűnik. Végigolvasva látható, hogy a felsorolt pontok nagy része valóban releváns információ egy termék kapcsán.

Jelenleg létezik:

  • A termék megnevezése
  • Kép
  • Cikkszám
  • Rövid leírás
  • Ár (Ft-ban)
  • Kosár (gomb)
  • Házhoz szállítás infó (doboz)
  • Házhoz szállítás infó (tooltip)
  • Raktárkészlet infó (doboz)
  • Raktárkészlet infó – bolt infó (tooltip és popup)
  • Több kép (gomb)
  • Hosszú leírás
  • Specifikáció
  • Értékelések
  • Hasonló termékek
  • Kiemelt csomagajánlat
  • Termék opciók (szín, memória, stb.)
  • Akciós, promóciós ajánlat megjelenítése
  • Kapcsolódó termékek
  • Csomagok
  • Kiegészítő ajánlatok
  • Összehasonlítás (gomb)
  • Árértesítő (gomb)
  • Kívánságlista (gomb)
  • Opcionális kiegészítő szolgáltatás #1 felhívása
  • Opcionális kiegészítő szolgáltatás #1 részletes leírása
  • Opcionális kiegészítő szolgáltatás #2 felhívása
  • Opcionális kiegészítő szolgáltatás #2 részletes leírása
  • Ár (€-ban)
  • Áruhitel információ (link)
  • Elfogadott bankkártyák és utalványok logói
  • Elfogadott bankkártyák és utalványok leírása (tooltip)
  • Küldés emailben (gomb)
  • Utoljára megtekintett termékek
  • Promóciós megjelenítések (bannerek)
  • Termék bemutató videók
  • “Breadcrumb” menü

Jelenleg nem létezik, de szükséges lenne:

  • Vissza a találati listára (link)
  • Oldal tetejére (link)
  • Áruhitel konstrukció részletei
  • Hitelkalkulátor (link)

Elemzés, kiértékelés, súlyozás

Azt tudtuk, hogy ha mindent ki akarunk emelni, akkor azzal pont az ellenkező hatást fogjuk elérni, így meg kell határoznunk egy fontossági sorrendet.

A teljes lista egy táblázatba került, amelyet a következő oszlopokkal egészítettünk ki.

  • jelenleg létezik (igen/nem)
  • szükségesnek tartjuk (igen/nem)
  • állandóan megjelenik, vagy valamilyen paramétertől függően opcionális
  • prioritás (1-5)

A sorokat egyesével kiértékelve, a táblázat kitöltése után a következő rendezést alkalmaztuk:

  1. szükséges: igen
  2. prioritás: csökkenő sorrend

Az így kialakult végleges sorrend alapján kezdtük meg az új termékoldal drótvázának kialakítását. A “szükséges” mező egyértelműen meghatározta, hogy milyen elemek kerüljenek fel a tervekre, a prioritás oszlopban szereplő érték pedig megmutatta, hogy azok az oldalon milyen sorrendben, súllyal szerepeljenek.

A fenti szempontokat figyelembe véve összesen 10 elemet vettünk le az új oldalról, másokat új struktúrába szerveztünk, hogy a bevezetőben említett problémákra megoldást nyújtsunk.

A drótvázak azóta elkészültek, a vizuális tervezés folyamatban van. A megvalósítás után az átalakítás kiértékeléséről várhatóan újabb blog bejegyzésben számolok majd be.

Ha nem szeretne lemaradni a friss bejegyzésekről, iratkozzon fel az RSS csatornára, kövesse a blogot a Twitteren, vagy csatlakozzon a Facebookon!

Schmidi

Webfejlesztő, termékmenedzser, használhatósági hittérítő. Korábban a DoclerHoldingnál tevékenykedett, jelenleg az Extreme Digital csapatának tagja. A könnyen használható weboldalak, a usability és az információmegosztás lelkes híve.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.