oma webergonomia light

20 / - 1 -

Online Marketing Akadémia | Webergonómia tudásanyag Minden jog fenntartva © www.oma.hu

- 2 -

Tartalomjegyzék

1 EGY ÚJ SZEMLÉLET ..................................................................................................................... - 6 -

2 MI AZ A WEBERGONÓMIA? ......................................................................................................... - 9 -

2.1 AZ ERGONÓMIA ÉS A WEBERGONÓMIA .................................................................................... - 9 - 2.2 „A WEB A FIGYELEM IPARÁGA” ...............................................................................................- 10 - 2.3 AZ ERGONÓMIKUS WEB MA MAGYARORSZÁGON .....................................................................- 12 -

3 WEBERGONÓMIA TESZTEK ........................................................................................................ - 14 -

3.1 FAPADOS MEGOLDÁS A HASZNÁLHATÓSÁGI TESZTRE ...............................................................- 14 - 3.2 A CARD SORTING TESZT ..........................................................................................................- 17 - 3.3 SZOFTVEREK A WEBERGONÓMIA TESZTELÉSHEZ ......................................................................- 18 -

3.3.1 Az 5 másodperces teszt ..................................................................................................... - 18 - 3.3.2 Tesztelés hőtérképpel ....................................................................................................... - 19 - 3.3.3 Google Analytics: Kísérletek és A/B teszt ........................................................................... - 20 - 3.3.4 Tesztelés fejlesztés közben ............................................................................................... - 25 -

4 WEBERGONÓMIA A GYAKORLATBAN ........................................................................................ - 28 -

4.1 MIÉRT FONTOS A FELHASZNÁLÓBARÁT SZEMLÉLET? ................................................................- 28 - 4.2 AZ ERGONÓMIKUS DOMAIN ....................................................................................................- 30 - 4.3 WEBOLDAL ≠ PROSPEKTUS .....................................................................................................- 31 - 4.4 MIRE ÜGYELJ A WEBDESIGN TERVEZÉSEKOR? KÜLLEM, SZÍNEK… ...............................................- 32 - 4.5 NAVIGÁCIÓ A HONLAPON .......................................................................................................- 36 - 4.6 A LINKEK A WEBOLDALON .......................................................................................................- 40 - 4.7 KAPCSOLAT VAGY ELÉRHETŐSÉG MENÜPONT ..........................................................................- 42 - 4.8 A NYITÓOLDAL A FŐ OLDAL? ...................................................................................................- 42 - 4.9 DE! AZ ALOLDAL IS LEHET NYITÓOLDAL! ..................................................................................- 46 - 4.10 MENNYIRE GYORS A HONLAPOD? ............................................................................................- 48 - 4.11 MUMUS: A KÉPERNYŐFELBONTÁS ...........................................................................................- 51 - 4.12 A FORMÁZÁS..........................................................................................................................- 57 - 4.13 KÉPEK ÉS GRAFIKÁK A WEBEN .................................................................................................- 58 - 4.14 SZÖVEG A WEBRE: A FÓKUSZ ..................................................................................................- 60 - 4.15 TIPOGRÁFIA A WEBEN ............................................................................................................- 66 - 4.16 A WEBES ŰRLAPOK TERVEZÉSÉNEK 10+1 PONTJA .....................................................................- 70 - 4.17 AKADÁLYMENTESÍTÉS: EGYENJOGÚSÁG A WEBEN ....................................................................- 81 -

5 TECHNIKAI TRÜKKÖK, ÉRDEKESSÉGEK ........................................................................................ - 86 -

5.1 AZ URL IS LEHET FELHASZNÁLÓBARÁT .....................................................................................- 86 - 5.2 “BEVEZETŐ KIHAGYÁSA” A GOOGLE TALÁLATI LISTÁJÁBAN .......................................................- 88 -

6 ÚJ TRENDEK A WEBERGONÓMIÁBAN ......................................................................................... - 89 -

6.1 FLAT DESIGN ..........................................................................................................................- 89 - 6.2 MATERIAL DESIGN ..................................................................................................................- 91 - 6.3 PARALLAX SCROLLING ............................................................................................................- 93 -

7 ÚTRAVALÓUL ........................................................................................................................... - 95 -

http://www.online-marketing-akademia.hu/?utm_source=Webergonomia_ebook&utm_medium=ebook&utm_campaign=Ebook�


- 3 -

1 Egy új szemlélet

Egy hatékony weboldalnak a felhasználók igényeit kell kiszolgálni. A felhasználó irányít, és dönt. Nincs kompromisszum. Ha nem azt nyújtod, és nem olyan módon kínálod a tartalmad, ahogyan az neki kényelmes és megfelel, kíméletlenül „kiikszel”.

Nem hoz bevételt a weboldalad, annak ellenére, hogy

• sok százezer forintba került? • dolgoztál azon, vagy fizettél másnak azért, hogy weboldalad

jó helyen legyen a keresőkben? • tízezreket költöttél arra, hogy megjelenj a Google

AdWordsben, esetleg az Etargetben? • kiküldtél már pár hírlevelet?

És semmi haszon?

Nem hozza a számokat a weboldal?

Kidobott pénznek érzed?

Voltál már abban a helyzetben, hogy ha nézed a statisztikád, nem tudtad, hogy miért van az,

• hogy hiába sok a látogatód, még sincs megrendelésed? • hogy hiába a nyitóoldaladon a sok olvasó, a visszafordulások

aránya magasabb, mint 70%? • hogy az ajánlatkérés aloldalad, végülis látogatott, de

mégsem kapsz ajánlatkéréseket? • hogy alig iratkoznak fel a hírleveledre?

Ha ezek a helyzetek ismerősek számodra és eddig tanácstalan voltál, hogy mit tegyél, akkor most az egyik legjobb döntést



- 4 -

hoztad meg, azzal hogy kezedbe veszed az Online Marketing Akadémia Webergonómia modulját.

Ebben a tudásanyagban részletesen rávilágítunk arra mit érdemes változtatni jelenlegi weboldaladon vagy mit vegyél figyelembe, ha majd a következőt tervezed annak érdekében, hogy a felhasználók kényelmét minél inkább kiszolgáld. Azzal ugyanis, ha a felhasználó azt érzi, hogy ez a weboldal gyors, kényelmes, egyszerű, használható, akkor ez egyben a hatékonyságot is eredményezi – számodra.

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.



- 5 -

• 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.

[…]



- 6 -

2 Mi az a webergonómia?

A webergonómia a felhasználói kényelem speciálisan az internetes világra értelmezett formája, amely az internetes oldalak használhatóságával és ennek kapcsán az internet felhasználók szokásainak vizsgálatával foglalkozik. A célja gyakorlatilag a látogatók elégedettségének és ezzel együtt a weboldal hatékonyságának a növelése, a kezelhetőség egyszerűsítése mellett.

[…]

„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



- 7 -

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.

[…]

Ha üzleti célokat akarsz elérni weboldaladdal (és ha nem akkor is), törekedned kell a felhasználóbarát weblapok készítésére, mert egy olyan oldal, amely megkönnyíti a látogatók munkáját és tájékozódását, mindenképpen pozitív élményt okoz, és amennyiben a látogató elégedett, abban az esetben az oldal üzemeltetője is elégedetté válik.

A webergonómia célja pedig végső soron éppen ez.

[…]



- 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. Vannak olyanok is, amelyek még tervezési fázisban vethetők be



- 9 -

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.

[…]

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.

Itt is van ingyenes verzió, teszteld le bátran! […]


http://fivesecondtest.com/�


- 10 -

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 biztosí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



- 11 -

megfogalmazunk és leírunk egy weboldalra, azt a látogató el is olvassa. Ugyanis nem olvassa el.

[…]

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 letakarod 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özethető 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.



- 12 -

[…]

Ami a legfontosabb, ha a felhasználó tudja, mely oldalakat látogatott már meg, nem kell újra és újra feleslegesen ellátogatnia ugyanazokra az oldalakra.

[…]

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, a piros, amire épp rákattintottunk, és a kékek azok amelyek, újak, még nem kattintottunk rá.



- 13 -

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 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. A felhasználók 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 Tester.


https://developers.google.com/pagespeed/�

https://developers.google.com/pagespeed/�


- 14 -

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

Mumus: a képernyőfelbontás

Nagy igazság: aki internetezik, képernyőt néz.

Bármi, amit közvetíteni szeretnénk a látogatónak, azaz leendő ügyfelünknek egy képernyőn keresztül jut el hozzá. Azonban képernyő rengeteg van: ezernyi márka, többfajta felbontás és 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.



- 15 -

[…]

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észletesen.

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!



- 16 -

Ugyanakkor az is teljesen igaz, hogy ha a szöveg kerül túlsúlyba és az oldalon semmi képi elem nincs, akkor oldal túl puritánnak, amatőrnek látszhat.

[…]

Elmondható tehát, hogy a hatékony weboldal megköveteli a szöveg és képek egyensúlyát. Meg kell találni az arany középutat.

Az arany középút pedig a következő.

[…]

Ha szeretnéd ténylegesen modellezni, hogy a ma elérhető legnépszerűbb okosmobilokon, tableteken hogyan néz ki a honlapod, akkor itt van erre egy nagyon jó kis ingyenes eszköz:

http://www.responsinator.com/


http://www.responsinator.com/�


- 17 -

Csak annyi a feladatot, hogy a képernyő bal felső sarkában lévő mezőbe beírd a honlapod címét, és máris láthatod, hogy az egyes eszközökön hogyan is látszik a honlapod. A vizsgált eszközök között Apple termékek, Android operációs rendszerrel futó telefonok és tabletek, és még egy sor kevésbé népszerű eszközön is tesztelheted a megjelenést.

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.

Ezt soha NE csináld!

A képernyő felbontáson kívül sokszor érdemes böngészőre is optimalizálni. Sokszor találkozunk még manapság is olyan weboldallal, ahol a tulajdonos (vagy talán a fejlesztő?) kiírja a látogatóknak, hogy a weboldal használatához milyen típusú böngészőt használ. Ezt sose tedd!

Helyette inkább gondoskodj arról, hogy a lehető legtöbb ma elterjedt böngészőben egyformán megtekinthető, élvezhető és használható legyen a weboldalad! Ezek böngészők pedig: Internet Explorer, Mozilla Firefox, Google Chrome, Safari.



- 18 -

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

[…]

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 honlap 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



- 19 -

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:

[…]



- 20 -

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


http://oma.hu/megrendeles�

oma webergonomia light

Documents