UX

6'

Így készül a weboldalad a háttérben

Mátyás Krisztián / 1/23/2020

Az egyedi weboldal készítésének folyamata.

A Wordpress és hasonló honlapszerkesztők robbanásszerű növekedésével programozói tudás nélkül is lehet ma már weblapot készíteni. Egy céges informáló weboldalhoz sok esetben elegendőnek tűnhet megtanulni a weboldalkészítő szoftverét, és már neki is láthatunk a weboldal elkészítésének.

Sokak számára a weboldalkészítés egyenlő a kódolással, Wordpress pluginok telepítésével/testreszabásával és témák telepítésével. Ahhoz viszont, hogy eredményeket érjünk el, ez a legtöbb esetben nem elég.

Egy sikeres és jól működő weboldal elkészítésének titka a háttérmunkákban rejlik. Gondos tervezés, ötletelés és tesztelés az, ami megelőzi egy weboldal elkészültét. Ez a cikk azért született, hogy ügyfeleink könnyebben átlássák weboldaluk elkészítésének lépéseit.

1. Piackutatás & Stratégiaalkotás

Egy weboldal készítésének folyamata a Mokapotnál minden esetben a piackutatással kezdődik. Egyrészről feltérképezzük vállalkozásod célpiacát, versenytársait, megértjük a jövőbeni felhasználók igényeit. Másrészről pedig magát a vállalkozást vizsgáljuk, működési elvét, értékeit, arculatát.

A legtöbb esetben a partner vállalkozásoknak már van egy kialakult ügyfélköre, évek óta ismeri a vevőit. Ilyenkor közösen határozunk meg egy célcsoportot. Készítünk továbbá egy kulcsszóelemzést (SEO analízis), ahol meghatározzuk azokat a főbb kulcsszavakat, amiket beírva a Google keresőjébe, az első oldalakon jeleníti majd meg a weboldalt.

Ahhoz, hogy a későbbiekben kialakítsuk a megfelelő felhasználói élményt, meg kell értenünk a felhasználók motivációját.

  • Kik a weboldal felhasználói?
  • Mi a szándékuk, amikor a weboldalra érkeznek?
  • Milyen információt akarnak megtudni?

A vizuális dizájn alapjait a vállalkozás termékeinek, szolgáltatásainak vizsgálata határozza meg. Fontos szempont, hogy a későbbi weboldal kinézete tükrözze a vállalkozást, de a látogató igényeinek is megfeleljen.

Míg a vizuális dizájn a jéghegy csúcsa, vagyis ettől lesz modern és professzionális a weboldal, addig a UX dizájn az, ami elvégzi a háttérmunkát és meghatározza egy weboldal funkcionalitását.

Nézzünk az utóbbira egy példát. Egy irodaszereket árusító webshop esetében B2B (business to business) piacról beszélünk, ahol az irodaszereket rendelő munkatárs a legtöbbször számítógép elől fogja böngészni a termékkatalógusunkat. Ez már eleve hasznos információ a UX dizájn tervezéséhez.

Tudjuk azt, hogy sok esetben lesznek visszatérő vásárlók, akiknek fontos a funkcionalitás, vagyis a könnyű, megszokott módon el tudják végezni a munkájukat. A termékkatalógus legyen több szempontból szűrhető, akár megadott márkák szerint is. A webshop kinézetének érdemes egy visszafogottabb, üzleti, professzionális megjelenést sugallnia.

Általában ez az egyik lépés, amit a kezdő szabadúszó vagy éppen magának fejlesztő cégvezető kihagy a weblapjának elkészítéséből.

2. Tervezés

A tervezés számunkra egy alapos procedúra, amely több lépésből áll, és ahol a lépések között folyamatosak a tesztelések (usability study) és az irányváltoztatások.

Miért kell folyamatosan tesztelni a weboldalad a lépések között?

Először is azért, hogy biztosan kielégítsük a felhasználói igényeket, másrészt pedig, ha hamarabb észrevesszük, hogy nem jó az irány, az növeli a hatékonyságot is.

Egyszerű példaként, ha az egyik CTA, pl. egy webshop esetén a kosárba teszem gomb, nem elég szembetűnő, akkor kevesen kattintanak rá, ami pedig csökkenti a vásárlási hajlandóságot. Ha egy ilyen problémát még a tervezési szakaszban orvosolunk, akkor nem pazaroltunk el sok munkaórát a fejlesztésnél.

Na de egy picit előreszaladtunk, nézzük szép sorban.

2.1 Oldaltérkép 

A tervezés az oldaltérkép elkészítésével kezdődik. Itt dől el, hogy melyik menüből (szolgáltatások, rólunk, kapcsolat stb.), hová tud a felhasználó kattintani, vagyis az, hogy az oldalad logikailag hogyan épül majd fel. Fontos számunkra, hogy az oldal könnyen navigálható legyen, és hogy elérjük vele a felhasználói élményt. Itt figyelünk arra, hogy a felhasználó a legrövidebb úton találja meg azt az információt, amit keres.

Weblap oldaltérképének tervezése.
Weblap oldaltérképének tervezése.

2.2 Drótváz - wireframe

A drótváz az oldaladnak egy fekete-fehér leegyszerűsített változata, amely arra szolgál, hogy az oldal egyes elemei a megfelelő helyre kerüljenek. Ennél a résznél direkt nem használunk színeket és kidolgozott oldalelemeket, hiszen itt nem az a cél, hogy már a végleges kinézetet vitassuk.

Általában az oldaltérképet a drótvázzal együtt mutatjuk meg az ügyfeleinknek, és beszéljük át közösen, hogy mi a véleményük.

Kíváncsi vagy miért nem színes a drótváz?

A színek rendkívül erős dizájn eszközök, az üzenetünk eljuttatására, éppen ezért, ha a drótváz színes lenne, az elterelné a figyelmet a lényegről, az pedig jelen esetben az oldal felépítése.

Egyedi weboldal drótváza.
Egyedi weboldal drótváza.

2.3 Tartalom, szövegezés

A szövegezés lépésnél elkészítjük az oldalad szövegezését, ami egyszerre lesz informatív és eredményes. Figyelünk arra, hogy a már ezelőtt megtervezett célcsoportnak szóljon, és minden esetben írásban is tükrözze a vállalkozásod stílusát.

A piackutatásnál meghatározott kulcsszóelemzés ennél a lépésnél hasznosítható. Nincs is annál taszítóbb, mint egy szövegfal - wall of text, ami, mint egy száraz jogi szöveg, üldözi el a látogatónkat, mielőtt még hozzákezdene az olvasásnak.

A kulcsszavakat és a keresőoptimalizálást figyelembe véve, fontosnak tartjuk, hogy egy jól strukturált, vevőmágnes szövegezést alakítsunk ki, ami bizalmat kelt a látogatódban.

2.4 Vizuális dizájn - prototípus

Ennél a résznél alakítjuk ki weboldalad végleges arculatát, meghatározzuk a színeket, a betűtípust, a képeket, illetve dizájnelemeket készítünk.

A színekre különösen nagy hangsúlyt fektetünk. Egyszerűnek tűnhet kiválasztani, mi az ami tetszik, de mi igyekszünk egy picit előrébb gondolkodni. Úgy alakítjuk ki a weboldalad színeit, hogy a későbbi marketingedben is használni tudd. 

A képeknél figyelünk a minőségre és a harmóniára, nem kell attól aggódnod, hogy visszaköszönnek a 2000-es évek a weboldaladon. A tipográfia fontos része egy weboldalnak, hiszen a kiválasztott betűkép/betűtípus sokat javíthat (vagy ronthat) a weblap dizájnján, használhatóságán.

Egyszóval egy modern és professzionális arculatot alakítunk ki, amit ebben a lépésben már össze is gyúrunk egy prototípussá. A prototípust Figma-ban megmutatjuk, hogy átbeszéljük az utolsó simításokat. Ez már egy kattintható, funkcióiban szemléletes képmása lesz a weboldaladnak.

Reszponzív weboldal vizuális dizájnja.
Reszponzív weboldal vizuális dizájnja.

3. Fejlesztés

Ha megvagyunk a kutatás és tervezés fázisaival, és veled közösen átbeszéltük, elkezdjük az oldal fejlesztését. Ennél a résznél öntünk lelket a szunnyadó dizájnelemekbe. A fejlesztéseket úgy végezzük, hogy az eredmény egy villámgyors weboldal legyen, hiszen ezzel jelentősen javul a felhasználói élmény.

Tudtad, hogy számít a Google rangsorolásnál a weboldal betöltési sebessége?

A weboldaladat reszponzívan fejlesztjük, így minden eszközre, legyen az laptop, tablet vagy egy telefon, tökéletesen illeszkedik.

Fejlesztésünknél a mobile-first módszert alkalmazzuk. A módszer lényege, hogy először a mobil verzióját készítjük el az oldaladnak, és csak úgy haladunk az asztali nézet felé. Ez többek között azért van, mert a Google keresések 63%-a mobilról érkezik, és a felhasználók átlagosan 4 órát böngésznek a készülékükön.

4. Projekt lezárása, extrák

Beállítunk minden keresőoptimalizáláshoz szükséges funkciót és végezetül távoktatásban megtanítjuk neked, hogyan kezelheted a weboldalad admin felületét, így nem kell attól félned, hogy magadra maradsz. 

Igény esetén vállaljuk weboldalad Google Ads kampánymenedzselését, hogy már az első pillanatoktól egy vevőszerző gépezetet kapj a kezedbe.

A céged megítélése nem csak azon múlik, milyen remek a termék/szolgáltatás amit nyújtasz. Legalább annyira fontos a megjelenés is, mert tudod, egy jó első benyomásra nincs második esély. Ne spórolj a részleteken.

Kíváncsivá tettünk? Vedd fel velünk a kapcsolatot!

Ha érdekesnek találod, oszd meg a cikket bátran!

Töltsd le ingyenes online marketing anyagunk!

Hasznos eszközök, amikkel felpörgetheted online jelenléted

Ezzel elfogadod adatkezelési feltételeinket.