Skip to content

A weboldal tervezés 3 fő alappillére

8 hónapja

1058 szó

Egy weboldalt meg kell tervezni. Úgy mint egy házat. Ha ezt nem teszed meg, akkor létrejön valami, ami ugyan kinéz valahogy, de egyáltalán nem biztos, hogy tesz bármi érdemlegeset számodra vagy épp a látogatód számára.

1. pillér: A cél vezérelje a tervet

Építészeti tervrajz papíron
A weboldal tervezése – bár nem kötelező – de legalább olyan fontos, mint az építészeti tervek

Ha egy házat építtetsz, először is meg kell vizsgálnod, milyen célt kell, hogy szolgáljon, kinek az igényeit kell kielégítse. Egy idős házaspárét? Felejtsd el a emeletet. Egy nagyobbacska családét? Ekkor jó, ha van benne két fürdőszoba és sok-sok hálószoba

Ugyanígy egy weboldalnál is az első eldöntendő kérdés az, hogy ki számára – azaz milyen célcsoportnak – készüljön a weboldal és mit szeretnénk, hogy ők a weboldalon megtegyenek.

Például, ha azt mondom, hogy nyugdíjasoknak akarok eladni számítógép-kezelési kurzust, akkor valószínűleg olyan oldalt kell terveznem, amely:

  • Rém egyszerű. Lehetőleg ne kelljen benne sok felé kattintgatni, legjobb lesz, ha az egész tartalom egy oldalon jelenik meg.
  • Kerüli az apró betűs részeket. A célcsoportom sok tagja ugyanis már nem lát tökéletesen. Ha kis betűkkel írok, akkor egyszerűen nem tudja elolvasni az ajánlatomat – legyen az bármily kedvező is számára.
  • A hagyományos fizetési módokra hagyatkozik. Ne akarjunk PayPal-t kezeltetni egy 70 éves idős úrral, mert nem biztos, hogy tudni fogja* – mi pedig így elesünk egy rakás jelentkezőtől. Inkább ajánljunk fel készpénzes és pl. kártyás fizetést.
  • Rendkívül intuitív, designjában kontrasztos. Szintén a rosszabb látás miatt, valamint azért, mert olyan embereknek szól, akik nincsenek túl mélyen benne a honlapok használatában.

* Ellenben ez lehet maga a tanfolyam egyik eleme, hogy ennek a kezelését megtanítsuk neki 🙂

A cél, amelyet a weboldalunknak szolgálnia kell, ez alapján egy egyetlen mondatban összefoglalható állítás kell, hogy legyen – amely nagyon egyszerűen arról szól, hogy kinek mit kell megtennie a honlapon.

Például:

  • Az első gyermeküket váró kismamák regisztráljanak
  • Egyéni vállalkozók iratkozzanak fel a levelezőlistánkra
  • Egyedülálló nők csatlakozzanak a Facebook csoportunkhoz
  • Focirajongók vegyék meg a könyvet, stb.

Ha ez megvan, sokkal könnyebben tudjuk majd kialakítani a weboldalunk szerkezetét, könnyebben tudjuk eldönteni, hogy milyen tartalom kerüljön fel rá és mi az, aminek nem is olyan fontos, hogy ott legyen az oldalon. Ez a hatékony weboldal tervezés első lépése.

25 honlapcél füzet borító

25 Jól Működő Honlapcél

Ingyenes tippfüzet, amely segítségedre lesz a honlapod IGAZI CÉLJÁNAK a meghatározásában.

2. pillér: Az oldal szerkezete

Miután megvan az, hogy hová szeretnénk eljuttatni a látogatónkat, el kell készítenünk a weboldal szerkezetét. Ez lesz a tulajdonképpeni tervrajzunk. Az, amely alapján a designer ki tudja dolgozni a végső kinézetet, a szövegíró meg tudja írni a tartalmakat, a programozó pedig (a felhasználói útvonalak ismeretével együtt) ki tudja alakítani a technikailag legmegfelelőbb megoldásokat.

Az oldal szerkezetét legcélszerűbb valamilyen wireframing (drótváz) szoftverrel elkészítenünk. Egy ilyen wireframe kb. így néz ki:

Így néz ki egy nem kézzel rjazolt, ám firka szerű weboldal drótváz
A Balsamiq Wireframes program segítségével készült weboldal drótváz

Ugye mennyire hasonlít ez egy papír alapon felvázolt oldalra? A hasonlóság nem meglepő, hiszen az ilyen tervek – amíg nem léteztek a megfelelő célszoftverek – papíron készültek.

Viszont amióta vannak már olyan programok, mint pl. a Balsamiq, azóta az életünk könnyebbé vált, hiszen az olyan botkezű rajzolók, mint én magam is esztétikus honlapterveket tudnak készíteni. Másrészt pedig egy elektronikus vázlat mindig sokkal könnyebben módosítható, mint egy papíron rajzolt verzió. A sokszorosításról nem is beszélve!

Amikor ezt a szerkezetet készítjük, mindenképp figyeljünk arra oda, hogy nem minden látogatónk jártas abban a témában, amelyről mi szólunk. Így érdemes először a teljesen laikusokhoz szólnunk, akiket lépésről lépésre kell fokozatosan érdeklődővé, majd vásárlóvá változtatnunk.

3. pillér: Mérhető felhasználói útvonalak

Miután megvagyunk a vázlatokkal, írjuk le, hogy az oldalunkon / oldalainkon milyen útvonalat kellene a felhasználóinknak bejárniuk. Ez – bár egyértelműnek tűnhet számunkra – a látogatónk számára nem biztos, hogy az.

Ezt könnyen letesztelhetjük, ha a célcsoportunk egy-egy tagját odaültetjük a vázlatunk (vagy mondjuk egy abból készült kattintható prototípus) elé, és megkérjük, hogy nézzen rá az oldalra. Aztán nézzük végig, mit csinálna az oldalon. Egyáltalán nem biztos, hogy azt az útvonalat járja be, amit mi elvárunk tőle.

Ezért érdemes előre betervezni minden komolyabb eshetőséget:

  • Mi van, ha a felhasználó itt nem ide, hanem amoda kattint?
  • Mi van, ha végigolvassa az oldalt, de nem teljesíti a célt?
  • Mi van, ha nem találja a lényeget?
  • Mi van, ha el akarja hagyni az oldalt idő előtt?

Bármilyen elakadási / lemorzsolódási eshetőségre fel kell készülnünk és készíteni egy forgatókönyvet rá, hogy az adott esetben hogyan fogjuk a felhasználónkat visszaterelgetni a helyes útra a weboldal célja felé.

Tableten a google analytics látható
A Google analytics mindig a segítségünkre van, ha a látogatóink viselkedését elemezzük

Hosszú távon pedig úgy tudjuk kideríteni, hogy hol vannak ezek az elakadási pontok, ha mindent mérünk… De erről majd egy későbbi cikkben írok.

Szerző: Domonkos Ervin

Domonkos Ervin

WordPress és kisvállalati UX szakértő 10 éves szakmai tapasztalattal. A WordPress Szeged meetupok szervezője, a Codeable.io büszke tagja és a Tervezz sikeres weboldalt című könyv szerzője.

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

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