26 / - 1 -

Tartalomjegyzék
1 EGY ÚJ SZEMLÉLET ..................................................................................................................... - 5 -
2 MI AZ A WEBERGONÓMIA? ......................................................................................................... - 8 -
2.1 AZ ERGONÓMIA ÉS A WEBERGONÓMIA .................................................................................... - 8 -
2.2 „A WEB A FIGYELEM IPARÁGA” ................................................................................................ - 9 -
2.3 AZ ERGONOMIKUS WEB MA MAGYARORSZÁGON .....................................................................- 11 -
2.4 UI ÉS UX DIÓHÉJBAN...............................................................................................................- 13 -
2.4.1 UI, azaz user interface ................................................................................................ - 13 -
2.4.2 UX, azaz a user experience .......................................................................................... - 15 -
2.5 MIT GONDOLJ ÁT MÉG A WEBOLDAL KÉSZÍTÉS ELŐTT? .............................................................- 19 -
3 WEBERGONÓMIA TESZTEK ........................................................................................................ - 21 -
3.1 FAPADOS MEGOLDÁS A HASZNÁLHATÓSÁGI TESZTRE ...............................................................- 21 -
3.2 A CARD SORTING TESZT ..........................................................................................................- 24 -
3.3 SZOFTVEREK A WEBERGONÓMIA TESZTELÉSHEZ ......................................................................- 25 -
3.3.1 Az 5 másodperces teszt ............................................................................................... - 25 -
3.3.2 Tesztelés hőtérképpel ................................................................................................. - 26 -
3.3.3 Tesztelés fejlesztés közben ......................................................................................... - 28 -
3.4 GOOGLE OPTIMIZE: A/B TESZT LÉTREHOZÁSA LÉPÉSRŐL-LÉPÉSRE .............................................- 30 -
3.4.1 Mire használható az A/B tesztelés? ............................................................................. - 31 -
3.4.2 Első lépések a Google Optimize-zal ............................................................................. - 32 -
3.4.3 Az első kísérlet létrehozása ......................................................................................... - 34 -
3.4.4 Összekapcsolás a Google Analytics-szel ....................................................................... - 38 -
3.4.5 Diagnosztikai elemzés, és egyéb beállítások ................................................................ - 41 -
3.4.6 Célzás az Optimize-ban ............................................................................................... - 43 -
3.4.7 A kísérlet elindítása .................................................................................................... - 45 -
4 WEBERGONÓMIA A GYAKORLATBAN ........................................................................................ - 46 -
4.1 MIÉRT FONTOS A FELHASZNÁLÓBARÁT SZEMLÉLET? ................................................................- 46 -
4.2 AZ ERGONÓMIKUS DOMAIN ....................................................................................................- 48 -
4.3 WEBOLDAL ≠ PROSPEKTUS .....................................................................................................- 49 -
4.4 MIRE ÜGYELJ A WEBDESIGN TERVEZÉSEKOR? KÜLLEM, SZÍNEK… ...............................................- 50 -
4.5 NAVIGÁCIÓ A HONLAPON .......................................................................................................- 54 -
4.6 A LINKEK A WEBOLDALON .......................................................................................................- 57 -
4.7 KAPCSOLAT VAGY ELÉRHETŐSÉG MENÜPONT ..........................................................................- 60 -
4.8 A NYITÓOLDAL A FŐ OLDAL? ...................................................................................................- 60 -
4.9 AZ ALOLDAL IS LEHET NYITÓOLDAL! ........................................................................................- 64 -
4.10 MENNYIRE GYORS A HONLAPOD? ............................................................................................- 66 -
4.11 STÍLUSOK ÉS FORRÁSKÓD .......................................................................................................- 70 -
4.12 KÉPEK ÉS GRAFIKÁK A WEBEN .................................................................................................- 71 -
4.13 SZÖVEG A WEBRE: A FÓKUSZ ..................................................................................................- 73 -
4.14 TIPOGRÁFIA A WEBEN ............................................................................................................- 80 -
4.15 A WEBES ŰRLAPOK TERVEZÉSÉNEK 10+1 PONTJA .....................................................................- 84 -
4.16 MUMUS: A KÉPERNYŐFELBONTÁS ...........................................................................................- 94 -
4.17 A RESZPONZÍV WEBDESIGN .....................................................................................................- 97 -
4.18 AZ ADAPTÍV DESIGN ...............................................................................................................- 99 -
4.19 AKADÁLYMENTESÍTÉS: EGYENJOGÚSÁG A WEBEN .................................................................. - 101 -

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
-2-
 4.20 „MOBILE FIRST” SZEMLÉLET .................................................................................................. - 106 -
4.20.1 A „Mobile first” jelentése .......................................................................................... - 107 -
4.20.2 Honlap tervezési csekklista a mobile first elmélet szerint ........................................... - 110 -
5 HOGYAN TERVEZZ HATÉKONY LANDING OLDALT? ..................................................................... - 114 -
5.1 MI AZ A LANDING OLDAL? ..................................................................................................... - 114 -
5.2 MIÉRT VAN SZÜKSÉG LANDING OLDALRA? ............................................................................. - 115 -
5.3 A HATÉKONY LANDING OLDAL 15+1 FŐ JELLEMZŐJE ............................................................... - 117 -
5.4 PÉLDÁK HATÉKONY LANDING OLDALAKRA ............................................................................. - 122 -
6 TRENDEK A WEBERGONÓMIÁBAN ........................................................................................... - 127 -
6.1 FLAT DESIGN ........................................................................................................................ - 127 -
6.2 MATERIAL DESIGN ................................................................................................................ - 129 -
6.3 PARALLAX SCROLLING .......................................................................................................... - 131 -
6.4 DARK MODE ......................................................................................................................... - 132 -
6.5 MINIMALIZMUS ................................................................................................................... - 134 -
6.6 B/W DESIGN ........................................................................................................................ - 135 -
6.7 „BOLD” TIPOGRÁFIA ............................................................................................................. - 136 -
7 WEBERGONÓMIA CSEKKLISTA ................................................................................................. - 138 -
8 66 KÉRDÉS A HONLAPODRÓL: TE VÁLASZOLSZ! ........................................................................ - 146 -
ÚTRAVALÓUL ................................................................................................................................. - 152 -

A tartalomjegyzék a teljes verzióra vonatkozik.

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
-3-
1 Egy új szemlélet
[…]

Mire ennek a modulnak a végére érsz, képben leszel a legtöbb

fontos dologgal, ami kapcsolatba hozható azzal, hogy mitől lesz
egy weboldal felhasználóbarát.

• Megtudod, mit takar a webergonómia fogalma, és miért

fontos Neked az, hogy ezzel tisztában legyél.
• Észre fogod venni, hogy azzal, ha nem csak elolvasod ezt az
anyagot, hanem meg is valósítod a benne leírtakat,
fényévekkel előződ meg a konkurenseidet, és bekerülhetsz
abba az elit csoportba, akik Magyarországon elmondhatják
magukról, hogy a weboldaluk tervezésénél figyelembe vették
a webergonómiai szempontokat.
• Tisztában leszel azzal, hogy melyek azok a design elemek,
amelyek rontanak egy weboldal hatékonyságán, illetve mi is
igazából egy ergonómikus webdesign feladata.
• Tudni fogod, hogy mik a webes navigáció alapszabályai.
• Megmutatjuk Neked, hogy mire kell kritikusan figyelni a
nyitóoldalad és a különböző aloldalad tervezésénél, annak
érdekében, hogy a látogatók, ne ábránduljanak ki belőled és
a weboldaladból 3-4 másodperc alatt.
• Megtudhatod, hogy hogyan turbózd fel honlapod, mitől lesz
gyors, és akár felbontás-független.
• Képes leszel megírni úgy egy weboldal szövegét, hogy
pontosan tudd mit fognak belőle elolvasni a látogatók. A
helyes tördeléssel, kiemelésekkel és a lényegre törő
információkkal tudni fogod irányítani az olvasóid, hogy minél
egyszerűbben és gyorsabban eljussanak a számodra fontos
aloldalig: az ajánlatkérésig, a megrendelésig, vagy éppen a
hírlevél-feliratkozásig.

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
-4-
• Tudni fogod, hogy milyen alapvető hibákat ne kövess el az
űrlapjaidban, amikor adatokat kérsz el a látogatóidtól.
• Megtanulod, hogyan kell profin és szakszerűen elkészíteni
egy hibaüzenetet, azaz egy hibaoldalt, és meg fogod érteni,
hogy miért is olyan fontos ez (Neked).
• És a végén bemutatjuk, mit jelent az akadálymentesítés az
interneten, miért hasznos ez Neked.

Szóval, ha a végére érsz, sok mindent megtudsz arról, mitől lesz

egy weboldal igazán felhasználóbarát, de az, hogy ezeket
alkalmazod-e, hogy használod-e a gyakorlatban, csak Rajtad
múlik. Ha végrehajtod a változtatásokat már csak egyetlen
dolgod van, igaz az állandó feladat: figyelni a statisztikát és
tesztelni, mérni az eredményességet és a hatékonyságot. […]

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
-5-
2 Mi az a webergonómia?
„A web a figyelem iparága”
Ha Jakob Nielsent akarjuk idézni – aki a webergonómia egyik
legnagyobb, legismertebb képviselőjének számít az USÁ-ból –
arról, hogy hogyan lehet meghatározni a webet, a következőt
kapjuk:

„A web a figyelem iparága, ahol a fő

fizetőeszköz a felhasználó ideje. Mit
néznek meg, hajlandók elidőzni, és hova
fognak később visszatérni?”

(forrás: Web-design, Jakob Nielsen,

Budapest, Typotex 2002)

Tehát, ha úgy fogalmazunk, hogy egy weboldal célja a figyelem

megszerzése, fenntartása és a felhasználó idejének legjobb
kihasználása, akkor már meg is értettük a webergonómia
lényegét, persze csak tömören. Nem érdemes elpazarolni a
felhasználó idejét olyan dolgokra, melyek számára nem fontosak,
mert ezzel hátráltatjuk a gyors információszerzést, amire minden
felhasználónak igénye van. Az tehát, ha rózsaszín flamingó repül
át jobbról balra a weboldalon és még az animációt kikapcsolni
sem lehet, sajnos megbosszulhatja magát azzal, hogy
pillanatokon belül elhagyja az oldalunkat, és nem is tér vissza a
jövőben.

[…]

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
-6-
UI és UX dióhéjban
Ha nem tévedünk, azért olvasod ezt a tudásanyagot, mert
szeretnél egy kicsit képbe kerülni a webergonómiával. Ebben az
esetben (még mielőtt belevágunk a lépésről-lépésre
megvalósításba) tisztáznunk kell két egymástól eltérő, de mégis
gyakran együtt emlegetett fogalmat.

Ha már kutakodtál a neten ebben a témában, vagy néha szembe

jött veled egy-egy mai állásajánlat a szakma ezen területéről,
akkor találkozhattál ezzel: UI / UX designer. A UI / UX pár osítás
sokszor előkerül ha webfejlesztésről van szó.

De mit is jelent ez? Mik ezek a jelölések, és mit csinál az, aki
ezzel foglalkozik? Sokan ráadásul felcserélik, vagy azonos
jelentéstartalommal ruházzák fel a két külön területet.

A designer szó valószínűleg nem szorul magyarázatra, a másik

kettőt viszont most átbeszéljük.

UI, azaz user interface

[…]

A felhasználói felületek tervezői leginkább arról gondoskodnak,

hogy az érdeklődők a folyamatok egyes lépcsőit milyen
elemekkel tudják majd végrehajtani. Ezek az elemek, a gombok,
csúszkák, jelölők, de érintőképernyős eszközökön ilyenek
lehetnek a suhintások, elhúzások stb. Egyszóval a feladat az,
hogy az interaktivitás minél könnyebben működjön az a dott
felületen, azaz a felület képes legyen a felhasználót v izuálisan
irányítani az adott honlapon / alkalmazáson, annak érdekében,
hogy a felhasználó, és a felület tulajdonosa is minél könnyebben ,
akadályoztatás nélkül elérhesse a célját.

[…]

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
-7-
 Szerencsére ma már rendkívül sok olyan előre megtervezett nyílt
forrás kódú elem lelhető fel a neten, amiket ingyen vagy kevés
támogatásért cserébe fel lehet használni, és tényleg profi hatást
keltenek. Vannak, amelyeket képszerkesztő programokkal lehet
használni de vannak olyanok is, melyek már a webes használatra
elő vannak készítve (HTML5 és css kombináció).

Mutatunk párat, így nem kell teljesen nulláról indítani a tervezést,

de akár csak a példák miatt is érdekes lehet megnézegetni
ezeket.

[…]

UX, azaz a user experience

[…]

Számokból, tapasztalatokból, felhasználói élményekből mért

következtetéseket jelent, amelyeket meg kell próbálni beépíteni a
felületbe. A felhasználói élmény (UX) tehát nem más, mint azok a
benyomások, amik a felhasználót a weboldal használata k özben
érik.

Igen ám, csak akkor itt jön a kérdés, hogy ezt hogy lehet
lemérni? Hogyan lehet számszerűsíteni a felhasználók élményét?
A következő fejezetben, amiben részletesen írunk a tesztelésről ,
éppen erről fogunk beszélni.

Előtte viszont szeretnénk bemutatni pár olyan fogalmat, amivel

érdemes tisztában lenni, ha valaki olyan honlapot szeretne, ami
növeli a felhasználói élményt.

[…]

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
-8-
3 Webergonómia tesztek
Az, hogy weboldalad megfelel-e a legalapvetőbb webergonómiai
szabályoknak a legegyszerűbb módszerekkel is lemérheted, de a
fapados megoldások mellett természetesen léteznek profi és
drága megoldások is.

Fapados megoldás a
használhatósági tesztre
Ha tesztelsz, azzal első körben kiszűrheted a legnagyobb
bakikat, de hosszabb távon akár a legapróbb problémákra is
fényt deríthetsz. Ha a tesztet időben kezded el, mondjuk a
weboldalnak még a fejlesztési fázisában, jelentős és felesleges
plusz kiadásoktól mentesítheted magad és céged.

A teszteléshez nem kell nagy csapat.

Tévhit, hogy minél több emberen tesztelsz, annál több hibára fog
fény derülni.

[…]

Szoftverek a webergonómia
teszteléshez
Több szoftver és internetes alkalmazás létezik, melyek
segíthetnek tesztelni a weboldalad használhatóságát. Vann ak

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
-9-
 olyanok is, amelyek még tervezési fázisban vethetők be
hatékonyan, és vannak olyanok is, amelyek már a működő,
élesben látogatható honlapok tesztelésére való.

Az alábbiakban ezek közül mutatunk be néhányat a teljesség

igénye nélkül, de ügyelve arra, hogy az ingyenes kategóriába
esők mellett bemutassunk pár profibb, de fizetős megoldást is.

Az 5 másodperces teszt
Five Second Test – http://fivesecondtest.com

Ez a kis online eszköz abban segít, hogy felméresd a

célcsoportoddal mennyire használható a weboldalad. Mennyire
maradandó az, amit látnak, vajon az hat-e rájuk az első 5
másodpercben, amit Te szeretnél. A folyamat úgy működik, hogy
feltöltesz egy képet a weboldaladról (vagy annak tervezetéről) , a
tesztalanyok ezt online megnézhetik bármikor, bárhonnan, de
csak 5 másodpercig láthatják. Ezután feltehetsz nekik bármilyen
kérdést, és vagy tudják a választ vagy nem. Erről persze a teszt
végén Te kapsz egy kis összesítést is.

Ilyesmi kérdéseket tehetsz fel például: „Miről szól a weblap?”,

„Mit kínál a weblap a feliratkozásért cserébe?”, és hasonlók.

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
- 10 -
Tesztelés hőtérképpel
ClickTale – http://www.clicktale.com

Talán az egyik legnépszerűbb online szoftver a használhatósági

tesztek elvégzéséhez. A ClickTale amellett, hogy videót készít az
egyes látogatók egérmozgásairól, még egyéb lehetőségeket is
felkínál:

• az egérmozgásról készít hőtérképet;

• a kattintásokról is képes hőtérképet készíteni;
• hasznos eszközöket kínál a konverziós csatornák
megfigyelésére;
• elemezhető vele az, hogy a látogató hogyan használja az
oldal görgetősávját (scroll);
• kifejezetten hasznos funkciókat kínál az űrlapok
használhatóságának kielemzéséhez.

Elérhető áron van, a legkisebb csomag is havi 20-30.000 Ft, de

valóban az egyik legjobb webergonómiai szoftver.

Google Optimize: A/B teszt lépésről-lépésre

Ha ingyenes, de profi megoldás kell a teszteléshez, akkor
bízhatsz a Google-ben, van rá megoldása. Korábban a Google
Analytics A/B teszt, „Kísérletek” funkciója is sok lehetőséget

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
- 11 -
rejtett, azonban a Google ezt a megoldást kivezette, és helyette
a Google Optimize szolgáltatást adta a tesztelni kívánó tudatos
weboldal tulajdonosok kezébe.

Az új rendszer nem egy export az Analytics-ből, és nem csak egy

új felület, hanem egy teljesen új eszköz nagyon sok funkcióval.
Az első lépésektől kezdve a beállítás nem egyszerű, de éppen
ezért írjuk le ebben a tudásanyagban, hogy ezen segítsünk
átlendülni. Ha ugyanis az első lépéseken túl vagyunk, akkor
teszteket, kísérleteket létrehozni már nem bonyolult, viszont
rendkívül hasznos információk derülnek ki belőlük. […]

Első lépések a Google Optimize-zal

Indulj el ezen a linken: https://optimize.google.com majd
jelentkezz be azzal a Google profiloddal, amelyikkel eléred a
honlapodhoz csatolt Google Analyticset is. Érdemes a tesztelés
beállításához a Google Chrome böngészőjét használni, mert e z
nagy mértékben segítheti majd a telepítést és a beüzemelést.

Első körben az egész munka környezetet kell létrehoznod.

Hozz létre:

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
- 12 -
 • fiókot: ebből cégenként 1 db elég lesz;

• tárolót: minden fiókban több tárolót tudsz létrehozni, ezt

jellemzően projektenként / honlaponként érdemes is
megtenni. A táróló tartalmazza majd az összes
optimalizálási konfigurációt a webhely tesztjeihez. Egy
fióknak legalább egy tárolót kell tartalmaznia.

[…]

Összekapcsolás a Google Analytics-szel

A teszt beállításának folyamatában a következő lépés az
összekapcsolás a Google Analytics szolgáltatással. Régen nem
volt erre szükség, akkor azonban egyedi mérőkódokat kellett
beilleszteni a tesztelni kívánt verziókba külön-külön, ami
meglehetősen bonyolult volt a mostani verzióhoz képest, amikor
is a mérés egyetlen kódon alapul, ez pedig nem más, mint a
honlapban egyébként is bent lévő Google Analytics kód.

[…]

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
- 13 -
4 Webergonómia
a gyakorlatban
Weboldal ≠ Prospektus
Sok cég esik abba a hibába, hogy a nyomtatott anyagait, akarja
felrakni a webre.

Ez több szempontból is rossz megközelítés, de főként azért, mert

ezek a vállalkozások nem veszik figyelembe, hogy az internet
más média, mint a hagyományos nyomtatott kiadványok.
Máshogyan olvasunk újságot, és más módon olvasunk a
képernyőnkön. Átgondolt tervezés szükséges ahhoz, hogy egy
dokumentumot a weben emészthetővé tegyünk, így bizt osítva
látogatóinknak, hogy oldalunk tartalmát könnyen olvashassák.

Hőtérképes mérések
bizonyítják, hogy az átlag
felhasználó szemmozgása
az interneten nagyon
szórt. A látogató, nagyon
sok mindent figyelmen
kívül hagy a weboldal
nézegetése közben, és
véletlenül sem szabad
abba a hitbe ringatni
magunkat, hogy amit mi
megfogalmazunk és leírunk egy weboldalra, azt a látogató el is
olvassa. Ugyanis nem olvassa el.

[…]

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
- 14 -
Mire ügyelj a webdesign
tervezésekor? Küllem, színek…
Egy jól megtervezett, átgondolt webdesign alátámasztja a
weboldal mondanivalóját és semmiképpen sem elnyomja azt.

Sokszor találkozunk olyan weboldallal, ahol a webdesign

köszönőviszonyban sincs az oldalon értékesített termékkel vagy
szolgáltatással. Teszteld le Te is a saját weboldalad: ha let akarod
a logót, a szlogent a címsort és a főbb menüpontokat, és a
helyébe képzelsz más szövegeket, akkor is helytálló lenne a
honlap? Ha igen, akkor baj van. Egyedi a céggel és a kínált
megoldásokkal összhangban lévő webdesignra van szükség.

Hogy miért kell mindenképpen egyedi webdesign?

Ahhoz, hogy egyértelmű legyen a válasz, azt kell megérteni, hogy

mire is szolgál a webdesign, és mikor van döntő szerepe.

[…]

A linkek a weboldalon
Az emberek általában képesek összekavarodni (bár ez nem
mindenkiben tudatosul), és bizonyosan felesleges utakat járnak
be, ha a weboldalon a már meglátogatott és az új linkek nem
egymástól jól megkülönböztethető színnel szerepelnek. A
kényelmetlen komfortérzet egyszerűen elkerülhető: két különböző
színt (vagy stílust) kell használni a kétféle linkhez.

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
- 15 -
 A legrégebbi használhatósági alapelv a navigációban, hogy a
felhasználóknak meg kell mutatni, hol voltak már, hol tartanak
épp és hová van lehetőségük még eljutni. Az interneten a linkek
jelentik a legfőbb eszközt a navigációs folyamatban.

Példa!

A fenti példa jól mutatja, ahogy a Google megkülönbözteti a

felhasználók számára a linkeken keresztül a múltat, a jelent és a
jövőt. Látszik, hogy a linkek, amelyek lila színt kaptak, már
meglátogatott oldalak (múlt), az aláhúzott, amire épp készülünk
rákattintani (jelen), és a kékek azok, amelyek újak, még nem
kattintottunk rá (jövő).

[…]

Mennyire gyors a honlapod?

Egyik legfontosabb ergonómiai szempont egy weboldal esetében
a gyorsaság, azaz, hogy minél hamarabb kapja meg az oldalt a
felhasználó. Ez olyan kritérium, aminek kötelező megfelelni. A

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
- 16 -
weboldal válaszidejének csökkentése tehát nem lehetőség,
hanem alapfeltétel.

[…]

Téves az a feltevés, hogy egy felhasználó türelmesen vár majd

egy jól kitalált, sokszázezer forintos webdesignra. Az emberek
számukra hasznos információ után kutatnak az interneten. A
céljuk az, hogy minél gyorsabban kézhez kapják az információt.
Ha ezt meggátoljuk azzal, hogy a letöltési időt olyan hosszúra
nyújtjuk, amivel lehetetlenné tesszük a hatékony böngészést, a
felhasználók nem fognak sok időt tölteni weboldalainkon. Ha
ilyen, a gyorsaságot figyelmen kívül hagyva tervezzük meg
oldalainkat, szinte biztos, hogy felhasználóink a lassú letöltődés
miatt hamar otthagyják oldalunkat és később sem térnek vissza.

Tehát a tartalom minél gyorsabb megjelenítése legyen az egyik fő

szempont. (Emlékezz vissza, mi is a Google kereső sikerének
egyik legfontosabb záloga? Na ugye!)

[…]

Még egy ötlet: a Google-nek már saját ajánlásai is vannak azzal

kapcsolatban, hogy mit érdemes a weboldaladon módosítani
annak érdekében, hogy gyorsabb legyen. Az eszköz neve Page
Speed Insight.

Használd ezt az eszközt is és gondoskodj arról, hogy weboldalad

minél gyorsabb legyen!

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
- 17 -
 Képek és grafikák a weben
Fogadd el alaptételként: a honlapon elhelyezett grafikai elemek
mennyiségét érdemes minimalizálni, mivel ezzel csökkentheted a
honlapod letöltési idejét. Erről már írtunk feljebb részlete sen.

Azonban az indokolatlan grafikának egyéb ergonómiai

szempontból sincs helye a weboldalon, beleértve ebbe a képként
megjelenő szöveges elemeket is, amelyek ráadásul
keresőoptimalizálás szempontjából is hátrányosak az oldalnak.

A képként elmentett szövegek csak abban az esetben

elfogadhatóak egy profi weboldalon, ha az a néhány képként
megjelenített szó az üzleti grafika szerves része. Egyéb esetben
kerül az ilyesfajta megjelenítést kiváltképp a navigációban!

[…]

Tipográfia a weben
Fontos elsők között leszögezni, hogy a webes tipográfiának
jelentős korlátai vannak ahhoz képest, amivel egy nyomdász
dolgozhat. Utóbbi ugyanis kismillió betűtípussal, betűkészlettel
és elrendezéssel dolgozhat, a weben azonban sokáig csak
olyanokkal dolgozhattunk, amelyekről garantáltan tudtuk, hogy
elérhető és használható lesz azokon a gépeken is, amelyeken
majd a látogatók böngészik az oldalainkat.

Ma ugyan ez az elv már megdőlt, hiszen okos programozással

bármilyen betűtípus megjeleníthető bárki számítógépén, ettől
függetlenül ergonómiai szempontból nem javasolt egyedi, mások
által kevéssé ismert betűkészletet használni a weboldalhoz.

Az internetes tipográfia 3 fő korlátozó tényezőjét tartsd szem

előtt: […]

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
- 18 -
4.1 A webes űrlapok
tervezésének 10+1 pontja
Ha weboldaladnak üzleti célokat kell szolgálnia, elengedhetetlen,
hogy legyen az oldalon kitöltendő űrlap. Ha csak az e -mailed írod
ki, nem fognak Neked írni. A felhasználó kényelmes, ezért, ha az
ajánlat alatt egyből ott egy kapcsolat-felvételi mező, egy
ajánlatkérési vagy egy megrendelési lehetőség, sokkal nagyobb
konverziója lesz a honlapodnak.

És itt a lényeg: a konverzió. Az űrlap ergonómiájára azért kell

kiemelt figyelmet fordítani, mert itt ér véget a sztori, ami azzal
kezdődött, hogy megérkezett a látogató a honlapra. A honla p
tette a dolgát, meggyőzte a látogatót, aki döntött: végrehajtja a
honlap üzleti célját. Vásárol, megrendel, ajánlatot kér,
feliratkozik, visszahívást kér, fel akarja venni a kapcsolatot,
röviden: kitölti az űrlapot.

És ha itt a folyamat végén, valami homokszem kerül a gépezetbe,

akkor bizony az összes eddigi erőfeszítés kárba vész. Hiába
fizettél a látogatóért, hiába írtál remek szövegeket, hiába tudta a
látogató, hogy mit kell tennie, ha az űrlap nem egyértelmű, és
nem felel meg az ergonómiai szabályoknak, akkor minden hiába
volt. És mégis, a legtöbb oldaltulajdonos elköveti az alapvető
hibákat is, köztük például, […]

Nos, eddig jól kiveséztük az űrlapokat, de a folyamatnak nincs

teljesen vége akkor, amikor a megrendelő kitölti az űrlapot, és
rákattint az elküld gombra. Egyetlen fontos rész ugyanis ezután
következik.

A sikeres kitöltés után a látogató az úgynevezett köszönőoldalra

jut, ahol újra lehetőség van felkelteni a figyelmét.

A felhasználóbarát köszönő oldal

Nézzük, mi a feladata egy eredményes és látogatóbarát

köszönőoldalnak: […]

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
- 19 -
5 Kis képernyők, nagy
problémák

Mumus: a képernyőfelbontás
Nagy igazság: aki internetezik, valamilyen képernyőt néz.

Bármi, amit közvetíteni szeretnénk a látogatónak, azaz leendő

ügyfelünknek (egyelőre) egy képernyőn keresztül jut el hozzá.
Azonban képernyő is rengeteg van ma már: ezernyi márka,
többfajta felbontás, képernyőméret vagy akár színmélység,
ezekhez több száz különböző verziójú szoftver és driver
kapcsolódhat. Habár ezeknek a termékeknek gyártói mindig
törekednek arra, hogy mindenféle más hardvertől és platformtól
független monitort gyártsanak, nem elegendő ebben bízni,
nekünk is úgy kell elkészíteni a weboldalunkat, hogy minden
képernyőn élvezhetően és nagyjából hasonlóan jelenjen meg a
tartalmunk.

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
- 20 -
A StatCounter felmérése alapján az elmúlt 1 évben a
leggyakoribb 15 képernyőfelbontás közül 8 mobilhoz köthető, és
összesen 27,44%-os részesedést szakítanak ki a tortából
Magyarországon. A legnépszerűbb mobilfelbontás a 360x640 és
a 360x780 pixel.

Az elmúlt pár évben látható a trend felbontásokból, a fekvő

helyzetű eszközök mellett egyre több az álló helyzetű eszköz és
az irány összességében az álló verzió felé billen az irány, nem is
akármennyire. Ennek az oka pedig egyértelműen az elmú lt
években lezajlott mobilforradalom.

Ami ezekből az adatokból számunkra fontos, az a trend, tehát ez

kiindulási alapnak jó, de erre alapozni azért még nem szabad.
Figyeld meg a saját számaid, a Google Analyticsben gyönyörű
riportok vannak azzal kapcsolatban, hogy milyen felbontású
képernyőkről neteznek a Te látogatóid, és az új weboldalad úgy
kell megtervezni, hogy ezeken a felbontású monitorokon jól
követhető legyen a tartalom. A következő oldalon mutatunk egy
képernyőfelvételt, hogy lásd hogyan tudod elérni az Analyticsben
a saját adataid.

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
- 21 -
Menj a Közönség > Technológia > Böngésző és operációs
rendszerek menübe, majd az elsődleges dimenziónak válaszd ki
a „Képernyőfelbontás” opciót. Ahhoz, hogy szép jelentést kapj,
amit könnyű értelmezni, a jobb felső sarokban válaszd ki a
kördiagram opciót, és persze válaszd ki a vizsgálni kívánt
időtartamot (a képernyőnek egészen a jobb felső részén – ez
nincs az ábrán). Így tehát látni fogod a saját számaid a
képernyőfelbontással kapcsolatban.

Ha nincs még weboldalad, vagy nem ismertek az erre vonatkozó

saját számaid, akkor indulj ki az előző oldalon bemutatott
StatCounter.com felmérésből.

Ugyanakkor, szeretnénk megjegyezni, hogy ezek az adatok, nem

feltétlenül azt jelentik, hogy olyan weboldalt érdemes készíteni,
ami fix szélességgel rendelkezik, és csak a legáltalánosabb
képernyőfelbontásnál mutat jól. Sőt.

Akkor mi a megoldás? […]

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
- 22 -
„Mobile first” szemlélet
Ahogy pár oldallal feljebb megmutattuk, Te is meg tudod nézni,
hogy a honlapod leginkább milyen felbontású eszközökön
nézegetik a felhasználók. Arról is kapsz infót, hogy a konverzió k,
a webes célteljesülések milyen felületekről érkeznek leginkább.

Lehetséges, hogy Nálad ezek a számok, még nem mutatják

erőteljesen a mobil technológia fölényes előnyét. A globális
trendek, azonban előbb utóbb begyűrűznek hozzád is, hiszen az
okos eszközök terjedése megállíthatatlan, és csak idő kérdése,
hogy minden fogyasztói csoport webes szokásait teljesen
átalakítsa. Nemrég még azon töprengtünk, hogy szüksége s-e
mobil verzió a honlapra, ma pedig egyes iparágakban vagy akár
földrajzi régiókban már azt a kérdés teszik fel, hogy a mobil
verzión kívül van-e szükség egyáltalán bármi másra? A fejlődő
országokban egyértelműen sokkal olcsóbb egy mobil eszközön
netezni, hiszen asztali számítógépük vagy laptopuk nagyon
keveseknek van (azok magas ára miatt), a fejlett országokban
pedig egyre több az okos (és drága) kütyü, amelyek képernyő
felbontásához alkalmazkodni kell. Autók kijelzője, okos órák apró
képernyője, okos konyhai eszközök érintőképernyős felületei,
vagy akár okos szemüvegek: mind újabb és újabb kihívást
jelentenek.

Tehát a világot behálózza a mobil technológia, és ott van a

zsebünkben az internet. Furcsa mód, sokszor még ma is így
emlegetjük: mobiltelefon, pedig valójában a mai szóban forgó
eszközök inkább kis mikro számítógépek. Ezért nem hagyhat od
figyelmen kívül a mobilra való tervezést. […]

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
- 23 -
6 Hogyan tervezz hatékony
landing oldalt?
Miért van szükség landing oldalra?
Gondolj csak bele: látsz egy hirdetést, tetszik és felkelti az
érdeklődésed. Kattintasz. Ezután egy fogadó oldalra jutsz. Mivel
lennél maximálisan elégedett?

A magas felhasználói élményhez hozzátartozik, hogy akkor jól

célzott és releváns a hirdetésed / szöveged / emailed / Facebook
bejegyzésed, ha a megfelelő embereknek jelenik meg a megfelelő
időben, a nekik való üzenettel és kattintás után releváns
weboldalra érkeznek, ahol a hirdetési szisztémád beteljesedik.
Lényeg, hogy úgy érezzék a hirdetésedre kattintók, hogy
megtalálták, amit keresnek.

Ezt hívják mikromomentumnak:

• a megfelelő embernek,

• a megfelelő időben,

• a megfelelő eszközön,

• a megfelelő üzenet.

Nagyon sok hirdető itt rontja el. Minden tökéletes lenne, ha a

felcsigázó hirdetésre / üzenetre való kattintás után a látogatóinak
nem úgy kellene kibogarászni, mit is akarsz tőle és nem lenne
elrejtve előle a lehetőség, hogy a pénzét odaadhassa.

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
- 24 -
 A legtöbb esetben sajnos nem fordítanak kellő figyelmet a cégek
az érkező oldalak megtervezésére, és helyette a látogatót az
adott szolgáltatás, vagy termék aloldalár érkeztetik a látogatót.
Rosszabb esetben pedig egyenesen a nyitóoldalra.

Hány és hány ilyen példa van! Rengeteg! Nézzünk párat!

A hatékony landing oldal 15+1 fő

jellemzője
1) Irányíts a szövegeddel!

Ha a hirdetésben kiemelted valaminek a fontosságát, pl. egy

probléma felvetés kapcsán ígértél megoldást a kattintóknak,
akkor ezen, a direkt az adott hirdetéshez készített landing
oldalon hozz létre testre szabott üzenetet, amely minden
információt irányítottan tartalmaz és a végén valamilyen
cselekvésre buzdítja a látogatókat. Például adják meg email
címüket, vásárolják meg a termékedet, töltsék le a csalidat
stb. Ügyelj a fő címsorra, hogy szinte szó szerint egyezzen a
reklámod címsorával!

2) Semmilyen zavaró elem ne legyen!

Az érkezési oldalról ne lehessen semmilyen más menüpontra

átkattintani. Innen vagy visszafordulni lehet vagy jobb esetben
továbblépni az értékesítési tölcséred következő szakaszába.
Fókuszálj: ellenőrizd minden mondatod, minden elemet az
egész oldalon, hogy a fő célt szolgálja-e!

3) Folytasd a fő gondolatot!

Olyan szöveget tegyél fel, amely kapcsolódik reklámod

mondanivalójához, a reklámra kattintók érezzék úgy magukat,
mintha tökéletesen nekik szólnának a szövegeid!

[…]

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
- 25 -
Köszönjük!

Köszönjük, hogy letöltötted az Online Marketing Akadémia

Webergonómia tudásanyagának Light verzióját, azaz a

„Hogyan tedd hatékonnyá weboldalad? –

Webergonómia: felhasználóbarát megoldások”

című e-könyv rövid bemutató anyagát!

A teljes modult megrendelheted online itt:

http://oma.hu/megrendeles

Online Marketing Akadémia | Webergonómia tudásanyag

Minden jog fenntartva © www.oma.hu
- 26 -