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.
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.
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.
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.
Kapcsolódó cikkek
Tudatos dizájn: így sarkall több tanulásra a Duolingo
A kis bagolynak rengeteg sunyi trükkje van.
"Kis" felhasználói élménybeli hibák, nagy kiesett bevétel
Hogy lehet egy rossz vizuális kialakítással félmillió embert kiakasztani?
Weboldal felújítás: Hogyan hat a vevőkre egy elavult dizájn?
Miért kerül sokba, ha túlságosan eljár egy weboldal felett az idő?