{"id":3038,"date":"2018-09-20T13:06:19","date_gmt":"2018-09-20T11:06:19","guid":{"rendered":"http:\/\/blog.webshark.hu\/?p=3038"},"modified":"2018-09-20T13:06:19","modified_gmt":"2018-09-20T11:06:19","slug":"mekkora-zajt-bir-el-egy-weboldal","status":"publish","type":"post","link":"https:\/\/blog.webshark.hu\/2018\/09\/20\/mekkora-zajt-bir-el-egy-weboldal\/","title":{"rendered":"Mekkora \u201czajt\u201d b\u00edr el egy weboldal?"},"content":{"rendered":"

A weboldalakon l\u00e9v\u0151 irrelev\u00e1ns inform\u00e1ci\u00f3t \u201czajnak\u201d tekinthetj\u00fck, m\u00edg a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra l\u00e9nyeges dolgokat \u201cjelz\u00e9snek\u201d. Ezek megfelel\u0151 ar\u00e1nya rendk\u00edv\u00fcl fontos egy weboldal kialak\u00edt\u00e1s\u00e1n\u00e1l.<\/strong><\/p>\n

Az embereknek nagyon sok inform\u00e1ci\u00f3t kell feldolgozniuk minden nap. Veled is mennyi inform\u00e1ci\u00f3 j\u00f6tt szembe a mai napon. De mennyi volt ezek k\u00f6z\u00f6tt a fontos, \u00e9s mennyi az \u00e9rdektelen inform\u00e1ci\u00f3?<\/p>\n

Az inform\u00e1ci\u00f3 legnagyobb r\u00e9sze, mellyel tal\u00e1lkozunk, jellemz\u0151en zaj. Vagyis teljesen \u00e9rdektelen sz\u00e1munkra. Ezzel szemben a relev\u00e1ns \u00e9s hasznos inform\u00e1ci\u00f3 – amit kifejezetten keres\u00fcnk – jelz\u00e9s. Az ember-g\u00e9p interakci\u00f3kban a jel\/zaj ar\u00e1ny a relev\u00e1ns\/irrelev\u00e1ns inform\u00e1ci\u00f3k ar\u00e1ny\u00e1t mutatja meg egy adott fel\u00fcleten vagy kommunik\u00e1ci\u00f3s csatorn\u00e1n.<\/p>\n

A fel\u00fcleten b\u00e1rmi inform\u00e1ci\u00f3nak sz\u00e1m\u00edthat: a sz\u00f6veges tartalom, a k\u00e9pi elemek, az anim\u00e1ci\u00f3k, stb. Tulajdonk\u00e9ppen minden, amit az embereknek fel kell dolgozniuk. Ahhoz, hogy jav\u00edtsd a weboldaladon az inform\u00e1ci\u00f3k kommunik\u00e1l\u00e1s\u00e1nak hat\u00e9konys\u00e1g\u00e1t \u00e9s seg\u00edtsd a l\u00e1togat\u00f3kat a feladataik elv\u00e9gz\u00e9s\u00e9ben, min\u00e9l magasabb jel\/zaj ar\u00e1nyt kell megc\u00e9lozni.<\/p>\n

Jel vagy zaj?<\/h2>\n

Hab\u00e1r a jel \u00e9s a zaj meghat\u00e1roz\u00e1sa viszonylag egyszer\u0171, amikor egy val\u00f3s designr\u00f3l van sz\u00f3, akkor m\u00e1r nem annyira k\u00f6nny\u0171 megragadni a k\u00fcl\u00f6nbs\u00e9get. Hiszen nem minden l\u00e1togat\u00f3nak ugyanaz a c\u00e9lja. Ez\u00e9rt az, hogy mi sz\u00e1m\u00edt jelnek vagy zajnak, egy\u00e9nenk\u00e9nt k\u00fcl\u00f6nb\u00f6zik. Ami az egyik ember sz\u00e1m\u00e1ra hasznos inform\u00e1ci\u00f3, a m\u00e1sik sz\u00e1m\u00e1ra csak zavar\u00f3 zaj. \u00cdgy teh\u00e1t, a weboldalad jel\/zaj ar\u00e1nya att\u00f3l f\u00fcgg\u0151en lehet magasabb vagy alacsonyabb, hogy \u00e9ppen ki a l\u00e1togat\u00f3ja, \u00e9s \u0151 mit pr\u00f3b\u00e1l tenni.<\/p>\n

Ha megn\u00e9zed p\u00e9ld\u00e1ul egy l\u00e9git\u00e1rsas\u00e1g weboldal\u00e1t, akkor az k\u00fcl\u00f6nb\u00f6z\u0151 c\u00e9loknak is kiindul\u00f3pontja lehet. P\u00e9ld\u00e1ul rep\u00fcl\u0151jegyet rendelhet\u00fcnk, becsekkolhatunk egy lefoglalt j\u00e1ratra, vagy megn\u00e9zhetj\u00fck a r\u00e9szleteit ennek a j\u00e1ratnak. Ez azt jelenti, hogy a l\u00e1togat\u00f3knak a weboldal k\u00e9t eleme zajnak sz\u00e1m\u00edt a h\u00e1romb\u00f3l.<\/p>\n

Ugyanakkor vannak olyan elemei is az oldalnak, melyek minden l\u00e1togat\u00f3 sz\u00e1m\u00e1ra zajt jelentenek. Ilyen lehet egy hirdet\u00e9s, egy puszt\u00e1n dekor\u00e1ci\u00f3s c\u00e9l\u00fa k\u00e9p, vagy a visszajelz\u00e9s lehet\u0151s\u00e9ge.<\/p>\n

Egy ide\u00e1lis vil\u00e1gban nem jelenne meg a weboldalon semmi olyan inform\u00e1ci\u00f3, ami egy felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra nem relev\u00e1ns. Mindez szoros kapcsolatba hozhat\u00f3 a minimalizmussal, azzal a webdesign trenddel, mely a felesleges elemek elt\u00e1vol\u00edt\u00e1s\u00e1t t\u0171zte ki c\u00e9lul a weboldalak eset\u00e9ben.<\/p>\n

Ugyanakkor bizonyos elemeknek olyan funkci\u00f3ik is lehetnek, melyek nem egyszer\u0171en a kommunik\u00e1ci\u00f3r\u00f3l vagy egy feladat hat\u00e9kony v\u00e9grehajt\u00e1s\u00e1r\u00f3l sz\u00f3lnak. Az inform\u00e1ci\u00f3k kommunik\u00e1l\u00e1sa mellett ugyanis azt szeretn\u00e9nk, ha a weboldalunk vizu\u00e1lisan vonz\u00f3 is lenne, \u00e9s valamilyen \u00e9rzelmet v\u00e1ltana ki a l\u00e1togat\u00f3b\u00f3l. Szeretn\u00e9nk a weboldallal megmutatni a m\u00e1rk\u00e1nkat, \u00fczleti c\u00e9ljaink szolg\u00e1lat\u00e1ba akarjuk \u00e1ll\u00edtani, egy term\u00e9k\u00fcnket hirdetn\u00e9nk. Ezeket a c\u00e9lokat is figyelembe v\u00e9ve egy \u00e9sszer\u0171 jel\/zaj ar\u00e1nyt kellene ink\u00e1bb megc\u00e9loznunk, ahelyett, hogy az irrelev\u00e1ns elemek teljes m\u00e9rt\u00e9k\u0171 elt\u00e1vol\u00edt\u00e1s\u00e1ra t\u00f6rekedn\u00e9nk.<\/p>\n

Fontos azonban itt megjegyezni, hogy vannak olyan dolgok, melyek mindenki sz\u00e1m\u00e1ra zajt jelentenek, \u00e9s nem szolg\u00e1lnak semmilyen c\u00e9lt. Erre lehet p\u00e9lda egy felesleges anim\u00e1ci\u00f3, mely csak megzavarja a felhaszn\u00e1l\u00f3t, egy t\u00falzott m\u00e9ret\u0171 k\u00e9p, mely an\u00e9lk\u00fcl foglal sok helyet, hogy inform\u00e1ci\u00f3t k\u00f6z\u00f6lne. Figyelni kell teh\u00e1t minden elemet, mely nem szolg\u00e1lja a felhaszn\u00e1l\u00f3k vagy a c\u00e9g c\u00e9ljait, \u00e9s meg kell fontolni az elt\u00e1vol\u00edt\u00e1sukat.<\/p>\n

Hogyan jav\u00edtsd a jel\/zaj ar\u00e1nyt?<\/h2>\n

Mik\u00f6zben fontos a megfelel\u0151 egyens\u00faly a felhaszn\u00e1l\u00f3k \u00e9s a c\u00e9g \u00e9rdekei k\u00f6z\u00f6tt, egy magas jel\/zaj ar\u00e1ny el\u00e9rhet\u0151, ha kell\u0151 figyelmet ford\u00edtasz a tartalomra \u00e9s er\u0151s vizu\u00e1lis hierarchi\u00e1t alak\u00edtasz ki a weboldaladon.<\/p>\n

Egyszer\u0171 \u00e9s prioriz\u00e1lt tartalom<\/h3>\n

Ha jav\u00edtani akarod a jel\/zaj ar\u00e1nyt, akkor kezdd egy vil\u00e1gos tartalmi strat\u00e9gia kialak\u00edt\u00e1s\u00e1val, mely seg\u00edt elrendezni az inform\u00e1ci\u00f3kat, annak megfelel\u0151en, ahogy \u00e1t szeretn\u00e9d adni a k\u00f6z\u00f6ns\u00e9gednek.<\/p>\n

Miel\u0151tt neki\u00e1lln\u00e1l tartalmat gy\u00e1rtani a weboldaladra, vagy csak \u00e1tvizsg\u00e1lni a m\u00e1r megl\u00e9v\u0151 tartalmat, gondold \u00e1t, hogy val\u00f3j\u00e1ban mire van sz\u00fcks\u00e9g\u00fck a weboldaladra l\u00e1togat\u00f3knak, \u00e9s neked mit kell kommunik\u00e1lnod fel\u00e9j\u00fck. Ha m\u00e1r megvan a list\u00e1d a tartalmakr\u00f3l, akkor rendezd ezeket hierarchi\u00e1ba: helyezd megfelel\u0151 sorrendbe az \u00f6tleteket \u00e9s a t\u00e9m\u00e1kat.<\/p>\n

Mivel az emberek nem olvasnak figyelmesen a weben, fontos, hogy minden sz\u00f6vegegys\u00e9g hasznos legyen, legal\u00e1bb n\u00e9h\u00e1ny felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra. Ker\u00fcld a felesleges tartalmakat, ahogy a nagy sz\u00f6vegegys\u00e9geket is, mivel ezek kih\u00edv\u00e1st jelentenek azoknak az olvas\u00f3knak, akik csak \u00e1tfutj\u00e1k a tartalmadat, hogy \u00edgy k\u00fcl\u00f6n\u00edts\u00e9k el gyorsan a jelt a zajt\u00f3l. Haszn\u00e1ld a ford\u00edtott piramist a sz\u00f6vegek kialak\u00edt\u00e1s\u00e1n\u00e1l: kezdd a legfontosabbal, majd add hozz\u00e1 a \u201cj\u00f3 ha tudod\u201d r\u00e9szeket is. Seg\u00edtsd a felhaszn\u00e1l\u00f3kat abban, hogy elker\u00fclj\u00e9k az F-minta szerinti olvas\u00e1st. Ehhez j\u00f3l kell form\u00e1znod a sz\u00f6veget: kiemelt kulcsszavakkal \u00e9s felsorol\u00e1sokkal.<\/p>\n

Vizu\u00e1lis hierarchia kialak\u00edt\u00e1sa<\/h3>\n

Minden egyes oldal eset\u00e9ben gondold \u00e1t a k\u00fcl\u00f6nb\u00f6z\u0151 elemek fontoss\u00e1g\u00e1t (tartalmat jelentenek-e vagy csak d\u00edsz\u00edt\u00e9st), majd seg\u00edtsd a felhaszn\u00e1l\u00f3kat a megfelel\u0151 vizu\u00e1lis hierarchi\u00e1val abban, hogy megtal\u00e1lj\u00e1k a jelet \u00e9s \u00e1tugorj\u00e1k a zajt. Ez azt jelenti, hogy b\u00e1rminek, ami fontos a legt\u00f6bb felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra, legyen vizu\u00e1lis s\u00falya.<\/p>\n

Mit haszn\u00e1lhatsz a vizu\u00e1lis hierarchia kialak\u00edt\u00e1s\u00e1ra? Nagyobb vagy vastag bet\u0171ket, elt\u00e9r\u0151 sz\u00ednt, ikont, nagyobb gombot. \u00c1ltal\u00e1noss\u00e1gban a fontosabb elemeknek nagyobbnak, er\u0151sebbnek, vagy kontrasztosabbnak kell lenni\u00fck, mint az \u0151ket k\u00f6r\u00fclvev\u0151 t\u00f6bbi elemnek. Csak a l\u00e9nyeges inform\u00e1ci\u00f3kat emeld ki, \u00e9s gy\u0151z\u0151dj meg arr\u00f3l is, hogy a weboldal nem nehezedik r\u00e1 a felhaszn\u00e1l\u00f3kra.<\/p>\n

Dinamikus zaj<\/h2>\n

Egy webes felhaszn\u00e1l\u00f3i fel\u00fcletet eg\u00e9sz m\u00e1s dolog megtervezni, mint egy print anyagot. Hab\u00e1r az alapelvek azonosak az interakt\u00edv \u00e9s a statikus design eset\u00e9ben, van n\u00e9h\u00e1ny t\u00e9nyez\u0151, amit m\u00e9g figyelembe kell venni a weben. Els\u0151sorban azt, hogy pillanatr\u00f3l pillanatra v\u00e1ltozik, mi sz\u00e1m\u00edt zajnak, att\u00f3l f\u00fcgg\u0151en, ahogy a felhaszn\u00e1l\u00f3i feladatok is v\u00e1ltoznak.<\/p>\n

Ennek kapcs\u00e1n el\u00e9g, ha a navig\u00e1ci\u00f3ra gondolsz: legt\u00f6bbsz\u00f6r a navig\u00e1ci\u00f3 csak zaj, mivel a felhaszn\u00e1l\u00f3 a tartalomra \u00f6sszpontos\u00edt. Ugyanakkor, ha v\u00e9gzett egy adott oldallal, \u00e9s egy m\u00e1sik oldalra l\u00e9pne \u00e1t, a navig\u00e1ci\u00f3b\u00f3l hirtelen jelz\u00e9s lesz. Ez a probl\u00e9ma megoldhat\u00f3 egy k\u00f6vetkezetes designnal, vagyis amikor a navig\u00e1ci\u00f3 minden oldalon ugyanolyan m\u00f3don jelenik meg. Ez\u00e1ltal a felhaszn\u00e1l\u00f3k gyorsan megtanulj\u00e1k, hogy a navig\u00e1ci\u00f3s r\u00e9sszel ne foglalkozzanak, eg\u00e9szen addig, am\u00edg sz\u00fcks\u00e9g\u00fck nem lesz r\u00e1. Ezzel a megold\u00e1ssal a navig\u00e1ci\u00f3 ugyan zaj marad, de nem zavarja a felhaszn\u00e1l\u00f3kat.<\/p>\n

\u00d6sszess\u00e9g\u00e9ben teh\u00e1t elmondhat\u00f3, hogy egy j\u00f3 jel\/zaj ar\u00e1ny jav\u00edtja a kommunik\u00e1ci\u00f3t a felhaszn\u00e1l\u00f3kkal, \u00e9s k\u00f6nnyebb\u00e9 teszi a feladataik elv\u00e9gz\u00e9s\u00e9t. T\u00f6rekedj teh\u00e1t a zaj cs\u00f6kkent\u00e9s\u00e9re, \u00e9s legyenek a jelz\u00e9seid kiemelked\u0151k. Ezzel a megold\u00e1ssal a felhaszn\u00e1l\u00f3k k\u00f6nnyebben megtal\u00e1lj\u00e1k a sz\u00fcks\u00e9ges inform\u00e1ci\u00f3kat \u00e9s v\u00e9grehajthatj\u00e1k a feladataikat a weboldaladon.<\/p>\n

(A sz\u00f6veg ezen bejegyz\u00e9s<\/a> alapj\u00e1n k\u00e9sz\u00fclt).<\/em>
\n