Webdesign, ami bevételt is termel – A UX tervezés 7 trükkje

Webdesign, ami bevételt is termel – A UX tervezés 7 trükkje

A UX tervezés (User Experience Design) előretörése vitathatatlanul az egyik legjobb dolog, ami valaha a webdesign világával és a weben megcélzott vásárlóval történt – bár nem esztétikai szempontok kényszerítették ki. A megfelelő UX-szel felépített üzleti weboldalak ugyanis pénzt termelnek, míg más oldalak – hiába szépek és esztétikusak – valahogy csak nem hoznak a konyhára.

Nézzük meg, hogy mire érdemes figyelni és milyen játékszabályokat kell betartani, ha egy weboldal vagy landing page megvalósítására készülsz – ugyanis az, hogy szép, az üzletileg nem lesz elég! Pszichológiai trükkökről már írtunk részletesen, itt most inkább arról lesz szó, hogy hogyan néz ki egy olyan ux tervezés folyamata, amelynek eredményeképpen a weboldalad messze kiemelkedhet majd a versenytársak közül a posztmodern kor kalandos marketing-játszóterén…

Az alábbi 7 pont betartásával  még a nagy versenyt támasztó, zsúfolt piacokon is sikereket fogsz tudni elérni, növelni tudod a konverziós arányt és csökkenteni a visszafordulást (bounce rate).

Mi az az UX tervezés, és miért olyan fontos?

A felhasználói élmény tervezéséről (UX – User Experience design) lényegében bármilyen termék kapcsán beszélhetünk, legtöbbször azonban mégis online marketing funnel-ek, applikációk és weboldalak kapcsán botlunk a kifejezésbe. Az elmúlt évtizedek egyik legnagyobb marketing-tanulságára alapozva a UX tervezés abból az alapvetésből tört a csúcsra, hogy a fókusz többé már nem a terméken magán, sokkal inkább a fogyasztón, a fogyasztó problémáin van, és azon, hogy egy adott termék miként képes erre a problémára megoldást nyújtani.

A UX tervezés a webdesignban ugyanezen az elven működik, – a weboldalad is egy termék, ami minél magasabb szinten elégíti ki a felhasználók elvárásait, annál nagyobb volumennel segít értékesíteni a célterméked/szolgáltatásod. Az pedig elég fontos, hogy a felhasználóid kellőképpen fontosnak érezzék magukat, hiszen

a felhasználók 68%-a azért nem konvertál végül, mert úgy érzi, nem foglalkoznak vele eléggé.

Az élményközpontú tervezés fő motivációi egyrészt a valódi érték közvetítése, másrészt a létező problémákra adható lehető legokosabb megoldás megtalálása. A “jó tett helyébe jót várj” elve tökéletesen működik itt, hiszen az ilyen termékek/szolgáltatások nemcsak vásárlói lojalitást eredményeznek, de sokszor a legértékesebb marketing eszközt, a szájról-szájra terjedő reklámot/ajánlásokat is a vásárlók életét megkönnyítő perfekcionizmusnak köszönhetjük.

A sikeres UX tervezés receptje tehát az, hogy olyan terméked és weboldalad legyen, amely valós problémára találja meg a lehető legokosabb, legpraktikusabb, legletisztultabb (egyszóval legnagyobb „élvezeti értékkel” bíró) megoldásokat. De bármit is tervezel, a legeslegelső szabállyal kezdj; tökéletesen ismerd meg azt, akinek a termékedet szánod.

1. Ismerd azt, akinek tervezel!

Az UX tervezés első lépéseként mindenképpen időt kell szentelned a jövőbeli felhasználóid megismerésére.

A célcsoport modellezése ún. perszónákból kialakított fiktív portfólió létrehozásával történik. A leghúsbavágóbb kérdések, amelyekre a célcsoportod megismeréséhez minenképpen választ kell kapnod:

Kik fogják használni a terméket? Mekkora az átlag életkoruk? Mi a szakmájuk?  Mikor használnák és milyen problémára nyújt megoldást a termék? Mi a motivációjuk? Van-e problématudatuk? Milyen lehetséges kifogásaik lehetnek a termékkel kapcsolatban?

A ux tervezés során feltett kérdésekre kapott válaszok segítenek meghatározni az oldal(ak) logikai felépítését, tartalmát, hangnemét és stílusát. Ha időt szánsz arra, hogy megértsd, hogyan gondolkoznak és reagálnak a jövőbeli felhasználóid, akkor fogsz tudni igazán ütőképes weboldalt vagy appot készíteni.

Perszónák táblázatai

Készíts a perszónákról táblázatot, ahol összegzed az adott perszónákra vonatkozó adatokat!

2. Használd ki a pszichológia alaptörvényeit

Egy online felület rengeteg, lényegében végtelenül sokféleképpen kombinálható összetevőből áll. Használhatsz képeket, animációkat, illusztrációkat, videót, és persze itt vannak még a gombok és egyéb CTA-k, színhasználat, betűkészlet, szöveges tartalmak, kiemelés, alacsony kontrasztú elemek. A kívánt hatás (többnyire vásárlás, esetleg valamilyen soft konverzió) elérése érdekében minden elemet tökéletesen össze kell hangolni a többivel a ux tervezés során. Érdemes olyan alapelvek szerint rendezni a tartalmakat, amiről nagy eséllyel tudjuk, hogy a legpozitívabb hatást fogja kiváltani a felhasználóban. Itt jön képbe a pszichológia. Nézzük, mik azok az elméletek, amelyek minden projektben alkalmazhatóak!

Gestalt elmélet: a gestaltpszichológia (azaz alaklélektan) UX tervezésben való alkalmazása elsősorban a tartalom-elhelyezésben kap kiemelkedő szerepet: az emberi észlelés szabályszerűségeit veszi alapul a webdesign területén is, az egész és a részek közötti hierarchia vizsgálata révén. A tervezés során fontos tudnod, hogy a különböző grafikai elemek, színek, szövegdobozok elhelyezése és egymás mellé rendelése miként fog hatni a látogatóra, milyen érzelmeket vált ki, hogyan tehető könnyen fogyaszthatóvá akár egy terjedelmesebb weboldal is. A leggyakrabban használt alapelvei a közelség elve, a hasonlóság elve és a zártság elve.

Hick’s elmélet: Lényegében azt állítja, hogy a választási lehetőségek számától függ az az idő, amit a felhasználó választással tölt el. Minél több a választás, annál több idő telik el és annál kisebb eséllyel fog végül pozitív lezárást kapni a folyamatunk – ennek landing oldalaknál van óriási jelentőségea ux tervezés gyakorlatát tekitve. Ezért érdemes úgy terveznünk, hogy minél kevesebb választási opció elé állítsuk a felhasználóinkat a folyamat egy adott fázisán belül.

A Von Restorff elméletet alkalmazzuk, amikor szeretnénk elérni, hogy egy adott elemre emlékezzenek a felhasználók. Amikor sok homogén elem kerül a felhasználó elé, arra az elemre fog legjobban emlékezni, amelyik a legnagyobb mértékben tér el az átlagtól. Egy ilyen apró trükk megfelelő alkalmazásával (pl. CTA elhelyezés és színezés) nagy arányú konverziónövekedést is elérhetsz.

pszicológiai elméletek az UX tervezés során

Használd a vonatkozó pszichológiai elméleteket az UX tervezés során, és vezesd a felhasználóidat!

3. Milyen a jó user interface (UI)? Leginkább letisztult

…és közérthető! Az elmúlt évek dizájntrendjeinek koronázatlan királyai a minimal és a flat webdesign. Népszerűségüket a könnyen emészthető és átlátható, jól strukturált tartalmi felépítésnek köszönhetik.

Természetesen ez nem azt jelenti, hogy mindig minimal vagy flat dizájnt kell alkalmaznod, csak tanulj az irányvonalak jól működő megoldásaiból és alkalmazd a saját projektednél. A jó dizájnt nem kell magyarázni, a tartalma egyszerűen értelmezhető, nem tántorítja el a júzert felesleges interakciókkal és a folyamat végén nem hagy bennük kétséget.

Érdemes észben tartani, hogy a letisztult tervezés, a lényegretörő, könnyen olvasható szöveges tartalom mind-mind időt és energiát spórol a felhasználóidnak, ami magasabb konverzió formájában köszön vissza.

Az egyik fontos irányadó pont a vizuális hierarchia kialakítása (méretek, színek, headerek, ikonok tudatos rendezése és használata), de idetartozik a könnyen használható navigáció, az új felhasználók tájékozódásának elősegítése, vagy épp a gördülékeny check-out folyamataid felépítése is. A letisztult UI titka az alapos UX tervezés; a folyamattervezés szakaszában ne felejts el részletes drótvázakat készíteni, eltervezni az oldal felépítését, és a már elkészült drótvázakat még a pixelpontos dizájn előtt valós személyeken tesztelni. Rengeteg időt spórolhatsz vele.

Drótvázazás folyamata

A pixelpontos dizájn tervezése előtt készíts drótvázakat, hogy a weboldalad ne csak szép, de átgondolt és könnyen használható is legyen!

4. Soha ne kamuzz!

Talán az egyik legfontosabb szabály a UX tervezés során, hogy soha ne hazudj a felhasználóknak, és ne próbálj sumákolni. Az egyenes és őszinte kommunikáció – akár árral vagy termék/szolgáltatás tartalmával kapcsolatban, – mindig a legjobb választás, lépésről lépésre alapozza meg a bizalmat a fogyasztó és a brand között. Nincs az a webdesign, ami miatt bárki kattintana a vásárlás gombra anélkül, hogy tudná mit is vesz meg pontosan és mennyiért! És senki sem ajánl másnak olyan céget, aki egyszer már átverte, vagy megvezette őt.

Amellett, hogy a terméket/szolgáltatást tisztán, félrevezetésektől mentesen mutatod be, fontos, hogy saját céged imidzsét se hagyd ki az összképből. Adj meg minden olyan információt az oldalon, amely a cég hitelét növelheti a felhasználó szemében. Az online piacon sajnos rengeteg a csaló, így a felhasználókban egyre inkább kialakul egyfajta gyanakvás – ennek révén pedig egyre többen egyre okosabban szűrik meg, hogy kiben bízhatnak meg, így ezt a jelenséget a ux tervezés során muszáj figyelembe venni.

5. Használd az UX tervezés konvencióit!

Ahogy az UI-ban, úgy az UX dizájnban is vannak olyan jól bevált dizájn pattern-ek (minták), amiknek a használatával gyorsíthatunk a tervezési munkán. Így komolyabb erőfeszítések és tesztelés nélkül hozhatunk létre olyan felületeket, amiket a felhasználók már ismernek és szeretnek.

A UX tervezés során konvencióról beszélhetünk:

1. Interakció dizájn konvenciók: vannak olyan esetek, amikor a felhasználó interakcióba kényszerül a weboldallal / applikációval – ilyenkor érdemes egy már jól ismert módon megtervezned azt (kis kreativitás azért belefér). Egy jól megtervezett interakció (például drop down listák vagy on-off switchek megjelenítése és működésük) sokat javíthat a weboldalad használhatóságán, mert a felhasználónak nem okoz extra agymunkát a kezelési mód kitalálása.

2. IA (Information Architecture) konvenciók: azaz az egyes típusú (elsősorban szöveges és infomatív) tartalmakat hogyan, hol és mikor érdemes megjeleníteni a weboldalon.

3. Vizuális webdizájn konvenciók: a weboldal különböző elemeinek (például a navigációs blokk, a logó vagy a footer) elhelyezésére és a társított funkcióira már számtalanszor bevált megoldásokat alkalmazhatsz, ilyen szempontból sok jó template-ttel lehet összefutni a neten. Javasolt hero kép használata is az oldal elején, amellyel egy pillantás alatt közelebb hozhatjuk a felhasználót az oldal témájához, de ugyanilyen fontos a jól megválasztott CTA dizájn, hover állapotok, linkek stílusára vonatkozó konvenciók. Fontos szem előtt tartanunk a színek jelentéshordozó szerepét is (pl tiltó színek vs. megengedő színek). Tartalomrendezésnél pedig a gyakran használt irányelvek egyike a hármas tagolás.

Ha pedig attól félsz, hogy a weboldalad/applikációd „template szagú” lesz a sok pattern-től (mintától), akkor játssz egy kicsit többet, hass az érzelmekre! A UX tervezés során használj egyedi illusztrációkat, izgalmas mikro-interakciókat, animációkat, igazítsd a szövegezés stílusát a célcsoporthoz a fokozott élmény eléréséért – a spanyol viaszt viszont nem kell feltalálnod.

De ne feledd: egyik világklasszis termék (pl. facebook) sem a cuki animációk miatt lett sikeres, hanem mert működő, egyszerűen értelmezhető és szerethető megoldást kínál a felhasználók problémájára.

UX konvenciók és trendek

Vizsgálj meg pár konkurens weboldalt és tanulmányozd az UX trendeket. Mik az erősségeik? Mit érdemes adaptálni és mi az, amit rosszul csinálnak?

6. Maxold ki a reszponzivitást

Ma már nem az a kérdés a webdesign során, hogy tervezz-e mobilra (hiszen a tavalyi évben 63%-ra nőtt  a teljes mobilos forgalom az asztali gépek 37%-ához képest!!) hanem az, hogy a weblap- és UX tervezés folyamatának melyik részébe illeszted majd be.

A legjobb módszer, hogy ha a mobilra való tervezés egy időben halad az asztali tervezéssel, vagy megelőzi azt. A dizájn kialakítása során számolj a reszponzív töréspontokkal, így könnyebben tervezhetsz fluid tartalmakat különböző felbontású és méretű kijelzőkre.

Használj grid systemeket! Segítséget jelenthetnek a reszponzív töréspontok meghatározásában, sávokra osztva a képernyőt. Átláthatóvá teszi a tartalmak elhelyezését, rendezését, hierarchiájának meghatározását egy sokkal következetesebb webdesign érdekében.

Grid systemek fontossága

A grid systemek segítséget nyújthatnak neked az UX tervezés során

Mobilon nem muszáj minden elemet ugyanúgy megjeleníteni, mint desktop-on. A 7blog főoldala például mobil nézetben nem jelenít meg egy navigációs elemet – próbáld csak ki, amikor a cikk végére értél.

7. Tesztelj, használd, és jöjjenek a leadek!

A UX tervezés során szinte végtelen számú lehetőséged adódik (kvalitatív és kvantitatív egyaránt) tesztelésre. Különböző haladó analitikai platformok, heat map-ek, retention (rendszeresen visszatérő látogatók) arányát mérő rendszerek, user tesztek segítik tökéletesíteni a weboldaladat/applikációdat.

Mindezek mellett az egyik legütősebb fegyvered lehet a tökéletességért vívott harcban az A/B tesztelés, amellyel lényegében bármilyen típusú problémát tesztelhetsz, legyen az tematikai sorrend, kontextus, CTA dizájn és használat, szövegezés, képek stb. Egyszerre több verziót futtathatsz, azok külön-külön valós júzerek keze alatt futnak át majd érnek össze újra. A kapott eredményeket elemezve a gyakorlatban jobban működő megoldásokat alkalmazhatod. Egy fontos szabály van: ha valós eredményeket szeretnél, egyszerre csak egy módosítást tesztelj ugyanazon az oldalon.

A/B teszting toolok

Teszteld a weboldalad bevételeled növelése érdekében. Hasznos A/B testing tool-ok: pl. Google Optimize, vagy az Optimizely.

Webdesign marketinges szemmel

A UX tervezés fenti elveinek betartása megteremti az alapot, hogy az online marketinges kollégák még tovább tudják növelni az oldalad sikerességét a saját eszköztáruk bevetésével. Ha azonban a saját oldalad – ahol a konverzióknak, vásárlásoknak meg kellene történnie – alulteljesít, akkor azt a marketing eredménye is megsínyli lassabb eredmények és magasabb költés formájában.

Ezért ne nyugodj bele, hogy a weboldal vacak – állj neki az itt olvasott tanácsok alapján egy tényeken alapuló webdesign megvalósításának és csiszold tökéletesre – elvégre a vállalkozásod sikere múlik rajta. Megosztásokat előre is köszönöm, és a kérdések elől sem futok el. 😉

1200 628 Farkas Flóra
Feliratkozás
Visszajelzés
guest
2 hozzászólás
Legrégebbi
Legújabb Magasan értékelt
Inline visszajelzések
Minden hozzászólás megtekintése
Írd ide, amit keresel...