M\u00e9g mindig gyakran hangzik el weboldalak tervez\u00e9sekor, elemz\u00e9sekor, hogy mennyire l\u00e9nyeges az a tartalom, ami a hajt\u00e1s f\u00f6l\u00e9 ker\u00fcl. Elviekben, ha az olvas\u00f3 itt nem tal\u00e1lja meg, amit keres, akkor rendk\u00edv\u00fcl gyorsan tov\u00e1bb\u00e1ll weboldalr\u00f3l. Ezt persze \u00e1rnyalj\u00e1k az \u00fajabb tanulm\u00e1nyok, melyekb\u0151l az is l\u00e1tszik, hogy ha nem is olyan fontos, mint j\u00f3 p\u00e1r \u00e9ve volt, m\u00e9g mindig megfontol\u00e1st \u00e9rdemel, csak kicsit m\u00e1sk\u00e9nt kell megk\u00f6zel\u00edteni.<\/p>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/06\/hajtas-felett.png\")
<\/figure><\/div>\n\n\n\nMit jelent a „hajt\u00e1s felett”?<\/h2>\n\n\n\n
A hajt\u00e1s fogalma m\u00e9g a nyomtatott sajt\u00f3 kor\u00e1b\u00f3l sz\u00e1rmazik, amikor kett\u00e9hajtott\u00e1k a lapokat, \u00e9s \u00edgy sz\u00e1ll\u00edtott\u00e1k, \u00edgy helyezt\u00e9k ki az \u00fajs\u00e1gosok a standra. Nyilv\u00e1n ilyenkor l\u00e1tszania kellett a l\u00e9nyegnek, a legh\u00faz\u00f3sabb sztorinak, hogy a h\u00edrekre \u00e9hes k\u00f6z\u00f6ns\u00e9g bev\u00e1s\u00e1roljon a lapb\u00f3l. Nyilv\u00e1n nem \u00e1lltak neki forgatni, hogy m\u00e9gis mi van a lap als\u00f3 fel\u00e9n, hanem a szembe\u00f6tl\u0151 inform\u00e1ci\u00f3 alapj\u00e1n d\u00f6nt\u00f6ttek.<\/p>\n\n\n\n
![\"Hajt\u00e1s](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2014\/08\/hajt\u00e1s-felett-a-nyomtatott-sajt\u00f3-kor\u00e1ban.jpg\")
<\/figure><\/div>\n\n\n\nA weben ugyanez a megjelen\u00e9s lett a sztenderd a digit\u00e1lis tartalmakn\u00e1l, mivel a monitorok k\u00e9par\u00e1nya hasonl\u00f3 volt egy f\u00e9lbehajtott \u00fajs\u00e1g\u00e9hoz, \u00e9s kinyitva, illetve leg\u00f6rgetve el\u0151bukkantak a tov\u00e1bbi tartalmak. \u00cdgy teh\u00e1t a weben a hajt\u00e1s feletti tartalomnak az sz\u00e1m\u00edtott, amit a felhaszn\u00e1l\u00f3k g\u00f6rget\u00e9s n\u00e9lk\u00fcl l\u00e1thattak egy adott weboldalon. Nem is volt ezzel sok\u00e1ig gond, k\u00e9t okb\u00f3l is.<\/p>\n\n\n\n
Az egyik, hogy amikor m\u00e9g \u00faj volt az online vil\u00e1g az emberek sz\u00e1m\u00e1ra, \u00e9s idegen a sz\u00e1m\u00edt\u00f3g\u00e9p, meglehet\u0151sen bizonytalanul kezelt\u00e9k azt. Ekkor m\u00e9g nem \u00e1llt r\u00e1 a felhaszn\u00e1l\u00f3k keze a g\u00f6rget\u00e9sre, vagyis nem nem volt rutincselekv\u00e9s a scrolloz\u00e1s. \u00cdgy nagyobb ar\u00e1nyban maradtak a hajt\u00e1s felett.<\/p>\n\n\n\n
A m\u00e1sik ok pedig az, hogy sok\u00e1ig alig volt vari\u00e1ci\u00f3ja a k\u00e9perny\u0151felbont\u00e1soknak. Vagy mindenki a 640×480-as felbont\u00e1st haszn\u00e1lta, vagy a k\u00f6vetkez\u0151 l\u00e9p\u00e9sben a 800×600-ast, majd 1024×768-ast. Ezut\u00e1n elkezdett bonyol\u00f3dni a dolog, sok lett a k\u00e9perny\u0151m\u00e9ret, sokf\u00e9le a felbont\u00e1s, majd megjelent az okostelefonok, a tabletek sz\u00e1mtalan vari\u00e1ci\u00f3ja.<\/p>\n\n\n\n
![\"Eml\u00e9ksz\u00fcnk](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2014\/08\/r\u00e9gi-sz\u00e9p-id\u0151k.jpg\")
<\/figure><\/div>\n\n\n\nHamarosan pedig felbukkant a reszponz\u00edv design is. Ilyenkor minden k\u00e9perny\u0151felbont\u00e1sn\u00e1l m\u00e1shogy n\u00e9z ki az oldal, minden eszk\u00f6z\u00f6n kicsit m\u00e1s mennyis\u00e9g\u0171 inform\u00e1ci\u00f3 ker\u00fcl a hajt\u00e1s f\u00f6l\u00e9 \u00e9s al\u00e1, att\u00f3l is f\u00fcgg\u0151en, hogy \u00e9ppen hogy forgatjuk az eszk\u00f6zt, vagyis vertik\u00e1lisan vagy horizont\u00e1lisan tartjuk.<\/p>\n\n\n\n
Mindez azt jelenti, hogy a sokf\u00e9le kijelz\u0151m\u00e9ret \u00e9s -felbont\u00e1s kor\u00e1ban felmer\u00fcl nem csak a l\u00e9tjogosults\u00e1gra vonatkoz\u00f3 k\u00e9rd\u00e9s, hanem az is, hogy m\u00e9gis milyen eszk\u00f6z\u00f6n kell a fontos tartalomnak a hajt\u00e1s f\u00f6l\u00e9 ker\u00fclnie? Milyen k\u00e9perny\u0151felbont\u00e1s sz\u00e1m\u00edt ilyenkor? <\/p>\n\n\n\n
Igaz ugyan, hogy a Google Analytics adatai alapj\u00e1n b\u00e1rmely weboldal eset\u00e9n gyorsan meg tudjuk hat\u00e1rozni, hogy a legt\u00f6bben milyen felbont\u00e1s mellett \u00e9s milyen eszk\u00f6z\u00f6n \u00e9rik el az oldalunkat, de ez nem sokat jelent. Ha jobban megn\u00e9zz\u00fck az adatokat, akkor azt l\u00e1tjuk, hogy sz\u00e1mtalan a vari\u00e1ci\u00f3, \u00e9s a legnagyobb csoport is csak egy t\u00f6red\u00e9ke a teljes l\u00e1togat\u00f3sz\u00e1mnak.<\/p>\n\n\n\n
Mi\u00e9rt fontos m\u00e9g mindig a hajt\u00e1s felett? \u00c9s mit mutatnak a vizsg\u00e1latok?<\/h2>\n\n\n\n
M\u00edg a web hajnal\u00e1n a felhaszn\u00e1l\u00f3kra egy\u00e1ltal\u00e1n nem volt jellemz\u0151, hogy g\u00f6rgetn\u00e9nek a weboldalakon. 1997-ben kezd\u0151d\u00f6tt egy v\u00e1ltoz\u00e1s, amikor a hosszabb weboldalak gyakoribb\u00e1 v\u00e1ltak, \u00edgy az emberek k\u00e9nytelen voltak megtanulni g\u00f6rgetni. Ugyanakkor tov\u00e1bbra is a hajt\u00e1s feletti inform\u00e1ci\u00f3k kapt\u00e1k a legnagyobb figyelmet: m\u00e9g a 2010-es vizsg\u00e1latok is azt mutatt\u00e1k, hogy a felhaszn\u00e1l\u00f3k tekintete a weboldalon elt\u00f6lt\u00f6tt id\u0151 80 sz\u00e1zal\u00e9k\u00e1ban a hajt\u00e1s felett mozog.<\/p>\n\n\n\n
2010-t\u0151l kezd\u0151d\u0151en – vagyis a reszponz\u00edv design \u00e9s a minimalizmus terjed\u00e9s\u00e9nek hat\u00e1s\u00e1ra – m\u00e9g hosszabb\u00e1 v\u00e1ltak a weboldalak. Ez\u00e9rt a Nielsen Norman Group 2018-ban el\u00e9rkezettnek l\u00e1tta az id\u0151t egy \u00fajabb szemk\u00f6vet\u00e9ses vizsg\u00e1latra<\/a>.<\/p>\n\n\n\n A kutat\u00e1sban 1920×1080-as kijelz\u0151k haszn\u00e1lat\u00e1val 120 szem\u00e9ly vizsg\u00e1ltak, illetve t\u00f6bb ezer oldalt, k\u00f6zt\u00fck h\u00edroldalakat, web\u00e1ruh\u00e1zakat, blogokat, stb. Ezeken kellett a legk\u00fcl\u00f6nf\u00e9l\u00e9bb feladatokat elv\u00e9gezni. A c\u00e9l nem az volt, hogy az egyes oldalakat elemezz\u00e9k, hanem az, hogy a felhaszn\u00e1l\u00f3i viselked\u00e9st jellemezni tudj\u00e1k. Majd az adatokat \u00f6sszevetett\u00e9k a kor\u00e1bbi vizsg\u00e1latuk eredm\u00e9nyeivel is.<\/p>\n\n\n\n Alapvet\u0151en k\u00e9t v\u00e1ltoz\u00e1s lehetett hat\u00e1ssal az emberek viselked\u00e9s\u00e9re: az egyik a nagyobb kijelz\u0151k, a m\u00e1sik pedig az \u00faj webdesign trendek. Ezekhez ugyanis val\u00f3sz\u00edn\u0171leg alkalmazkodtak a felhaszn\u00e1l\u00f3k. A kett\u0151 hat\u00e1s\u00e1t ugyanakkor nem lehet egym\u00e1st\u00f3l elk\u00fcl\u00f6n\u00edteni, de \u00fagy v\u00e9lt\u00e9k, hogy ez nem is olyan fontos, hiszen egyiket sem lehet m\u00e1r \u201cvisszacsin\u00e1lni\u201d, m\u00e9g akkor se, ha akarn\u00e1nk.<\/p>\n\n\n\n Mint kider\u00fclt, a leg\u00fajabb kutat\u00e1sban az emberek a weboldalon elt\u00f6lt\u00f6tt id\u0151 57 sz\u00e1zal\u00e9k\u00e1t a hajt\u00e1s f\u00f6l\u00f6tt t\u00f6lt\u00f6tt\u00e9k. 74 sz\u00e1zal\u00e9kot pedig az els\u0151 k\u00e9t kijelz\u0151nyi ter\u00fcleten<\/strong>, vagyis 2160 pixelig g\u00f6rgettek le. Az elemz\u00e9s egy\u00e9bk\u00e9nt nem vette figyelembe a weboldalak hossz\u00e1t, \u00edgy a kapott \u00e9rt\u00e9ket torz\u00edthatt\u00e1k a r\u00f6vid oldalak, \u00e9s nem csak annak az eredm\u00e9nye, hogy 2160 pixel ut\u00e1n feladt\u00e1k az emberek a g\u00f6rget\u00e9st.<\/p>\n\n\n\n Mindenesetre a sz\u00e1mok jelent\u0151s m\u00e9rt\u00e9kben k\u00fcl\u00f6nb\u00f6znek a 2010-es eredm\u00e9nyekt\u0151l<\/strong>. Akkor m\u00e9g az emberek az idej\u00fck 80 sz\u00e1zal\u00e9k\u00e1t t\u00f6lt\u00f6tt\u00e9k a hajt\u00e1s felett. Mik\u00f6zben persze a figyelem nagym\u00e9rt\u00e9k\u0171 cs\u00f6kken\u00e9se a hajt\u00e1s ut\u00e1n kor\u00e1bban \u00e9s most is megfigyelhet\u0151 volt. Ez itt l\u00e1tszik j\u00f3l a grafikonon:<\/p>\n\n\n\n Fontos azonban, hogy nem minden oldal azonos hossz\u00fas\u00e1g\u00fa. Ez\u00e9rt, hogy meg\u00e1llap\u00edts\u00e1k, mik\u00e9nt oszlik meg a felhaszn\u00e1l\u00f3k figyelme egy oldalon – att\u00f3l f\u00fcggetlen\u00fcl, hogy az milyen hossz\u00fa -, felosztott\u00e1k 20 sz\u00e1zal\u00e9knyi r\u00e9szekre az oldalakat. Ez alapj\u00e1n meg\u00e1llap\u00edtott\u00e1k, hogy a felhaszn\u00e1l\u00f3k idej\u00fck 42 sz\u00e1zal\u00e9k\u00e1t a fels\u0151 h\u00fasz sz\u00e1zal\u00e9k b\u00f6ng\u00e9sz\u00e9s\u00e9vel t\u00f6lt\u00f6tt\u00e9k, illetve 65 sz\u00e1zal\u00e9kban a fels\u0151 40 sz\u00e1zal\u00e9kkal foglalkoztak. (A keres\u0151ben a tal\u00e1lati oldalakon ezek az ar\u00e1nyok m\u00e9g nagyobbak voltak, vagyis az embereket els\u0151sorban az els\u0151 tal\u00e1latok \u00e9rdekelt\u00e9k).<\/p>\n\n\n\n De ha a hajt\u00e1s feletti ter\u00fcletet n\u00e9zz\u00fck, azon bel\u00fcl is ink\u00e1bb a fels\u0151 r\u00e9szen l\u00e9v\u0151 inform\u00e1ci\u00f3k keltett\u00e9k fel a figyelmet: 65 sz\u00e1zal\u00e9knyi id\u0151t a hajt\u00e1s feletti r\u00e9sz fels\u0151 fel\u00e9n<\/strong> t\u00f6lt\u00f6ttek az emberek.<\/p>\n\n\n\n A l\u00e9nyeg teh\u00e1t az, hogy m\u00edg 57 sz\u00e1zal\u00e9knyi id\u0151 jutott az oldal hajt\u00e1s feletti r\u00e9sz\u00e9re, m\u00e1r csak 17 sz\u00e1zal\u00e9k a m\u00e1sodik kijelz\u0151nyi r\u00e9szre, m\u00edg a marad\u00e9k 26 sz\u00e1zal\u00e9k az \u00f6sszes t\u00f6bbire. Ez azt jelenti, hogy min\u00e9l k\u00f6zelebb van egy inform\u00e1ci\u00f3 az oldal tetej\u00e9hez, ann\u00e1l nagyobb az es\u00e9lye annak, hogy az emberek el fogj\u00e1k olvasni<\/strong>.<\/p>\n\n\n\n Ezt meger\u0151s\u00edtett\u00e9k az olvas\u00e1si mint\u00e1k is. A legt\u00f6bb felhaszn\u00e1l\u00f3 az \u00fagynevezett F-mint\u00e1t haszn\u00e1lta<\/a> – amit akkor szoktak, ha egy weboldal nincs megfelel\u0151en struktur\u00e1lva -, vagyis gyakrabban n\u00e9ztek a weboldalak fels\u0151 r\u00e9sz\u00e9re, \u00e9s kev\u00e9sb\u00e9 \u00e9rdekelte \u0151ket az oldal als\u00f3 r\u00e9sze. De m\u00e9g akkor is, ha a tartalom kell\u0151en struktur\u00e1lt volt, ink\u00e1bb az oldalak fels\u0151 r\u00e9sze \u00e9rdekelte a felhaszn\u00e1l\u00f3kat. Egy\u00e9bk\u00e9nt pedig nagyon hat\u00e9konyan megtal\u00e1lt\u00e1k az oldalon azokat az inform\u00e1ci\u00f3kat, melyek fontosak voltak a feladatuk v\u00e9grehajt\u00e1sa szempontj\u00e1b\u00f3l, \u00edgy ez sem eredm\u00e9nyezte azt, hogy az oldal alj\u00e1n k\u00f6r\u00fcln\u00e9zzenek.<\/p>\n\n\n\n Ennek ellen\u00e9re az is l\u00e1tszik, hogy a 2010-es vizsg\u00e1latokhoz k\u00e9pest cs\u00f6kkent a hajt\u00e1s felett elt\u00f6lt\u00f6tt id\u0151. Milyen k\u00f6vetkeztet\u00e9seket lehet ebb\u0151l levonni? Az NNG szerint el\u0151sz\u00f6r is azt, hogy a designerek j\u00f3 munk\u00e1t v\u00e9geztek, \u00e9s siker\u00fclt r\u00e1venni arra az embereket, hogy g\u00f6rgessenek. Vagyis b\u00e1r tiszt\u00e1ban voltak a hossz\u00fa weboldalak h\u00e1tr\u00e1nyaival, ezt siker\u00fclt bizonyos m\u00e9rt\u00e9kben m\u00e9rs\u00e9kelni. M\u00e1sr\u00e9szt pedig az emberek egyre ink\u00e1bb r\u00e1 lettek szoktatva a g\u00f6rget\u00e9sre az\u00e1ltal, hogy t\u00f6bb lett a g\u00f6rget\u00e9st ig\u00e9nyl\u0151 oldal.<\/p>\n\n\n\n Legal\u00e1bbis bizonyos m\u00e9rt\u00e9kig. M\u00e9g mindig kijelenthet\u0151 ugyanis, hogy az emberek nem szeretnek sokat g\u00f6rgetni, \u00e9s ritk\u00e1n jutnak tov\u00e1bb h\u00e1rom kijelz\u0151nyi hossz\u00fas\u00e1gn\u00e1l<\/strong>. M\u00edg 8 \u00e9ve m\u00e9g a hajt\u00e1s felett t\u00f6lt\u00f6tt\u00e9k az idej\u00fck 80 sz\u00e1zal\u00e9kot, most a h\u00e1rom kijelz\u0151nyi ter\u00fcleten t\u00f6ltenek 81 sz\u00e1zal\u00e9kot. Az emberek teh\u00e1t csak akkor g\u00f6rgetnek lefel\u00e9, ha erre van okuk<\/strong>. A figyelem tov\u00e1bbra is els\u0151sorban a weboldalak fels\u0151 r\u00e9sz\u00e9re ir\u00e1nyul. Ez az a r\u00e9sz, mely a legink\u00e1bb felfedezhet\u0151, \u00e9s a legt\u00f6bben megtekintik.<\/p>\n\n\n\n \u00c9rdekes ugyanakkor, hogy a felbont\u00e1s n\u00f6veked\u00e9se nem eredm\u00e9nyezte a g\u00f6rget\u00e9si hajland\u00f3s\u00e1g cs\u00f6kken\u00e9s\u00e9t. Ennek oka tal\u00e1n az lehet, hogy a designerek nem kihaszn\u00e1lj\u00e1k a nagyobb felbont\u00e1s ny\u00fajtotta el\u0151ny\u00f6ket, hanem a tartalmakat nagyobb t\u00e1vols\u00e1gra helyezik egym\u00e1st\u00f3l. Az inform\u00e1ci\u00f3s\u0171r\u0171s\u00e9g teh\u00e1t val\u00f3sz\u00edn\u0171leg t\u00fal nagy volt kor\u00e1bban, ez\u00e9rt alakultak ki zs\u00fafolt, zavaros oldalak.<\/p>\n\n\n\n A hajt\u00e1s feletti r\u00e9sz az a r\u00e9sze a weboldalnak, amit az emberek az els\u0151 m\u00e1sodpercekben l\u00e1tnak, amikor meg\u00e9rkeznek a weboldalra. Ez a r\u00e9sz valamif\u00e9le megh\u00edv\u00f3k\u00e9nt m\u0171k\u00f6dik, \u00e9s arra pr\u00f3b\u00e1lja r\u00e1venni a felhaszn\u00e1l\u00f3kat, hogy n\u00e9zzenek jobban k\u00f6r\u00fcl a weboldalon. Ez\u00e9rt a legalapvet\u0151bb inform\u00e1ci\u00f3kat k\u00edn\u00e1lja a weboldalr\u00f3l, \u00edgy az emberek pillanatok alatt k\u00e9peset felfogni az oldal l\u00e9nyeg\u00e9t. <\/p>\n\n\n\n A szervez\u0151elv alapvet\u0151en az, hogy fel\u00fclre ker\u00fclnek a fontos dolgok<\/strong>. Min\u00e9l l\u00e9nyegesebb egy inform\u00e1ci\u00f3 a weboldaladon, ann\u00e1l feljebb ker\u00fclj\u00f6n. Az, hogy mi a fontos, eszk\u00f6zt\u0151l is f\u00fcgghet: mobilon fontosabb lehet a telefonsz\u00e1m vagy az el\u00e9rhet\u0151s\u00e9g \u00e9s t\u00e9rk\u00e9p, mint desktopon, \u00edgy ezek m\u00e1s poz\u00edci\u00f3ba cs\u00faszhatnak. Minden eszk\u00f6z\u00f6n l\u00e1that\u00f3 lesz a log\u00f3, a men\u00fc, a c\u00edmsor, a fels\u0151 \u00e9s legfontosabb k\u00e9p, azonban, hogy a sz\u00f6vegb\u0151l \u00e9s esetleg a t\u00f6bbi k\u00e9pb\u0151l mennyi l\u00e1tszik, az eszk\u00f6z\u00f6nk\u00e9nt elt\u00e9r\u0151 lehet. <\/p>\n\n\n\n A fejl\u00e9cek oldalank\u00e9nt elt\u00e9rhetnek<\/strong>, vagyis jellemz\u0151, hogy a f\u0151oldal egy kicsit nagyobb, m\u00edg az aloldalak szinte cs\u00edkk\u00e1 keskenyed\u0151 fejl\u00e9cet kapnak. Ilyenkor arra kell figyelni, hogy a cs\u00f6kkentett m\u00e9ret\u0171 fejl\u00e9cek is viselj\u00e9k a f\u0151oldali fejl\u00e9c tulajdons\u00e1gait, de azt mintegy r\u00f6vid\u00edtve tegy\u00e9k k\u00f6zz\u00e9. <\/p>\n\n\n\n A hajt\u00e1s feletti r\u00e9sz feladata az, hogy a felhaszn\u00e1l\u00f3k legalapvet\u0151bb k\u00e9rd\u00e9seire v\u00e1laszt adjon<\/strong>: mit k\u00e9pvisel a m\u00e1rka, milyen term\u00e9keket, szolg\u00e1ltat\u00e1sokat k\u00edn\u00e1l, hogyan lehet kapcsolatba l\u00e9pni vele. Mindezek mellett megmutatja a weboldal min\u0151s\u00e9g\u00e9t \u00e9s identit\u00e1s\u00e1t is. Amennyiben pozit\u00edv \u00e9rzelmi reakci\u00f3t v\u00e1lt ki a felhaszn\u00e1l\u00f3b\u00f3l, akkor \u0151 azt \u00e9rzi, hogy valami \u00e9rt\u00e9kesbe futott bele, \u00edgy a weboldal fejl\u00e9ce teljes\u00edtette feladat\u00e1t. <\/p>\n\n\n\n F\u0151 elemei:<\/p>\n\n\n\n Nem kell persze minden felsorolt elemnek k\u00f6telez\u0151 jelleggel szerepelnie rajta, illetve meg kell tal\u00e1lni az egyens\u00falyt az inform\u00e1ci\u00f3k \u00e9s a harmonikus elrendez\u00e9s k\u00f6z\u00f6tt. Vagyis csak annyi inform\u00e1ci\u00f3t helyezz el itt, amennyi felt\u00e9tlen\u00fcl sz\u00fcks\u00e9ges. Ha t\u00falzs\u00fafolod, az rontani fog rajta<\/strong>. Ugyanakkor a legfontosabb linkek m\u00e1r itt jelenjenek meg. <\/p>\n\n\n\n Szint\u00e9n nem j\u00f3 t\u00fals\u00e1gosan \u00fcresre tervezni a fejl\u00e9cet, hiszen, ha a felhaszn\u00e1l\u00f3 a weboldaladra meg\u00e9rkezve nem tudja a fejl\u00e9c alapj\u00e1n kital\u00e1lni, hogy mir\u0151l sz\u00f3l az oldal, mit k\u00edn\u00e1lhat neki, akkor nem biztos, hogy neki\u00e1ll a weboldalad m\u00e1s r\u00e9szein ez ut\u00e1n nyomozni. A minimalista fejl\u00e9cek a log\u00f3n k\u00edv\u00fcl jellemz\u0151en csak a legfontosabb linkeket tartalmazz\u00e1k a weboldalak f\u0151 r\u00e9szeire. <\/p>\n\n\n\n L\u00e9tezik egy olyan SEO-m\u00edtosz, mely szerint a hajt\u00e1s f\u00f6l\u00e9 helyezett call to action gombok rontj\u00e1k a helyez\u00e9st a tal\u00e1lati oldalakon, \u00e9s egy\u00e1ltal\u00e1n nem megfelel\u0151ek SEO-szempontb\u00f3l. A Redditen<\/a> \u00e9ppen ez\u00e9rt fel is mer\u00fclt az a k\u00e9rd\u00e9s, hogy a „Google javasolja a CTA-gombok elt\u00e1vol\u00edt\u00e1s\u00e1t a hajt\u00e1s feletti r\u00e9szr\u0151l?”<\/em><\/p>\n\n\n\n Mint kider\u00fclt, egy webdesigner \u00fcgyfel\u00e9nek egy SEO-tan\u00e1csad\u00f3 c\u00e9g mondta azt, hogy „rendk\u00edv\u00fcl fontos” lenne, hogy minden CTA-gombot elt\u00e1vol\u00edtson a hajt\u00e1s feletti r\u00e9szr\u0151l. Magyar\u00e1zatuk szerint a Google-dokument\u00e1ci\u00f3j\u00e1b\u00f3l der\u00fcl ki, hogy nem javasolj\u00e1k a weboldalak fels\u0151 r\u00e9sz\u00e9n a CTA-gombok elhelyez\u00e9s\u00e9t.<\/p>\n\n\n\n A felvet\u00e9sre John Mueller, a Google szakembere reag\u00e1lt, aki elmondta, hogy a „Google keres\u00e9s semmit nem mond a CTA-gombokr\u00f3l”. Ez ink\u00e1bb a hirdet\u00e9sekkel vagy az analitik\u00e1val lehet \u00f6sszef\u00fcgg\u00e9sben – tette hozz\u00e1. <\/p>\n\n\n\n \u00dagy v\u00e9lekedett, hogy a CTA-gomb tal\u00e1n csak akkor okozhat probl\u00e9m\u00e1t a hajt\u00e1s felett, ha az eg\u00e9sz CTA t\u00fal nagyra siker\u00fcl, \u00e9s m\u00e1r \u00fagy n\u00e9z ki, mint valami rekl\u00e1m. Ilyenkor a CTA letolja a f\u0151 tartalmat az oldalon, ami a r\u00e9gi oldalelrendez\u00e9si algoritmus sz\u00e1m\u00e1ra lehet, hogy nem megfelel\u0151. Ugyanakkor azt ism\u00e9t hangs\u00falyozta, hogy egy norm\u00e1l m\u00e9ret\u0171 CTA a hajt\u00e1s felett teljesen rendben van SEO szempontb\u00f3l.<\/p>\n\n\n\n Friss\u00edt\u00e9s, 2022.06.23.:<\/em><\/p>\n\n\n\n Hab\u00e1r az elm\u00falt \u00e9vek legink\u00e1bb a lehet\u0151 legnagyobb hajt\u00e1s felett elhelyezz k\u00e9pekr\u0151l sz\u00f3ltak (hero image), m\u00e1ra kibontakozott egy \u00faj designtrend: egyes weboldalak hajt\u00e1s feletti r\u00e9sze k\u00e9p n\u00e9lk\u00fcl jelenik meg. De mi \u00e9rtelme ennek? Haszn\u00e1lhat\u00f3 megold\u00e1s?<\/p>\n\n\n\n Az elm\u00falt egy-k\u00e9t \u00e9vben a legk\u00fcl\u00f6nb\u00f6z\u0151bb ter\u00fcleteken tev\u00e9kenyked\u0151 c\u00e9gek weboldalai eset\u00e9ben jelentek meg olyan weboldalak, ahol a hajt\u00e1s felett egy\u00e1ltal\u00e1n nem l\u00e1that\u00f3 k\u00e9p vagy ak\u00e1r vide\u00f3. Itt teh\u00e1t m\u00e1r nem csak valami \u00fatkeres\u00e9sr\u0151l van sz\u00f3, ahol designerek pr\u00f3b\u00e1lgatj\u00e1k a portfoli\u00f3-oldalaikon a leg\u00fajabb ir\u00e1nyzatokat.<\/p>\n\n\n\n A k\u00e9p hi\u00e1ny\u00e1n k\u00edv\u00fcl ugyanakkor sok egy\u00e9b vizu\u00e1lis jellemvon\u00e1sukat tekintve elt\u00e9rnek egym\u00e1st\u00f3l ezek a weboldalak. N\u00e9melyik\u00fck abszol\u00fat minimalista designnal k\u00e9sz\u00fcl, m\u00e1sokn\u00e1l megjelennek az anim\u00e1lt elemek, vagy egy\u00e9b k\u00fcl\u00f6nleges design-megold\u00e1sok. <\/p>\n\n\n\n De persze akadnak k\u00f6z\u00f6s von\u00e1saik is ezeknek az oldalaknak. Az els\u0151 dolog, ami felt\u0171nhet, hogy minden ilyen „k\u00e9phi\u00e1nnyal” oper\u00e1l\u00f3 weboldal nagy hangs\u00falyt helyez a tipogr\u00e1fi\u00e1ra<\/strong>, annak kiemelked\u0151 jelleg\u00e9re. Nyilv\u00e1n, ha egy weboldalon nincs m\u00e1s meghat\u00e1roz\u00f3 vizu\u00e1lis elem, akkor a tipogr\u00e1fia lesz az, ami kialak\u00edtja a weboldal karakter\u00e9t. Ebbe beletartozik minden a k\u00fcl\u00f6nleges bet\u0171t\u00edpust\u00f3l, a rendhagy\u00f3 m\u00e9reten \u00e9s sz\u00edneken kereszt\u00fcl a szavak jelent\u00e9s\u00e9\u00e9ig. <\/p>\n\n\n\n A designtrend teh\u00e1t egy\u00e9rtelm\u0171en a sz\u00f6vegnek kedvez<\/strong>, azt emeli ki. Hiszen, ha nincs k\u00e9p, akkor a sz\u00f6veg alap\u00fa \u00fczenet ker\u00fcl a k\u00f6z\u00e9ppontba. <\/p>\n\n\n\n A sz\u00f6veget t\u00e1mogatja a karakteres sz\u00ednhaszn\u00e1lat<\/strong> is, a gradiensekkel \u00e9s elhom\u00e1lyos\u00edt\u00e1sokkal oper\u00e1l\u00f3 h\u00e1tterek, illetve egy fekete-feh\u00e9r megjelen\u00e9s gyakran kieg\u00e9sz\u00fcl egy-egy er\u0151teljes, kontrasztos sz\u00ednnel. Emellett pedig gyakran felbukkannak anim\u00e1ci\u00f3k<\/strong>, mozg\u00e1sok is a weboldalakon, mintegy kompenz\u00e1lva a k\u00e9p hi\u00e1ny\u00e1t.<\/p>\n\n\n\n Mik\u00f6zben egy k\u00e9p n\u00e9lk\u00fcli weboldal megtervez\u00e9se egyszer\u0171nek t\u0171nhet, \u00e9s maga az eredm\u00e9ny is gyakran meglehet\u0151sen minimalista<\/strong>, a tervez\u00e9s az\u00e9rt nem annyira egyszer\u0171. <\/p>\n\n\n\n A k\u00e9pn\u00e9lk\u00fclis\u00e9get viszont nem szabad er\u0151ltetni. Ha p\u00e9ld\u00e1ul remek fot\u00f3id vannak, akkor nem \u00e9rdemes azokat veszni hagyni, csak hogy kipr\u00f3b\u00e1lhass valami \u00fajat. Ugyanakkor, ha nem \u00e1llnak rendelkez\u00e9sre j\u00f3 k\u00e9pek, akkor haszn\u00e1lhat\u00f3 megold\u00e1s lehet olyan weboldalt \u00f6sszehozni, mely ink\u00e1bb a szavakra \u00e9s a tipogr\u00e1fi\u00e1ra \u00e9p\u00edt. Persze ez csak akkor m\u0171k\u00f6dik, ha k\u00e9pek n\u00e9lk\u00fcl is hajland\u00f3ak a l\u00e1togat\u00f3k az interakci\u00f3ra, \u00e9s el\u00e9rhet\u0151 egy ilyen megjelen\u00e9ssel a c\u00e9l.<\/p>\n\n\n\n Kifejezetten j\u00f3 megold\u00e1s lehet a megold\u00e1s indul\u00f3 c\u00e9gek sz\u00e1m\u00e1ra<\/strong>, melyek nem akarnak vagy nem tudnak egy weboldalhoz sz\u00fcks\u00e9ges nagyobb k\u00e9panyaggal bajl\u00f3dni. Ha a hajt\u00e1s felett nincs \u00f3ri\u00e1si k\u00e9p, akkor az lehet\u0151v\u00e9 teszi, hogy a hajt\u00e1s alatt vagy az aloldalakon is kisebb k\u00e9pek jelenjenek meg.<\/p>\n\n\n\n K\u00fcl\u00f6n\u00f6sen fontos ezeken az oldalakon a megfelel\u0151 kontraszt<\/strong> kialak\u00edt\u00e1sa: a sz\u00ednekn\u00e9l, bet\u0171t\u00edpusokn\u00e1l, az elemek m\u00e9retez\u00e9s\u00e9n\u00e9l is figyelni kell erre, mert a kontraszt teremti meg azokat a k\u00fcl\u00f6nbs\u00e9geket az egyes elemek k\u00f6z\u00f6tt, melyek azt\u00e1n v\u00e9gigvezetik a felhaszn\u00e1l\u00f3t az oldalon. <\/p>\n\n\n\n A k\u00e9pek, vide\u00f3k magyar\u00e1z\u00f3 ereje ezeken az oldalakon nincs jelen, \u00edgy nem tudj\u00e1k azt a plusz jelent\u00e9st hozz\u00e1tenni a weboldalhoz, mely seg\u00edtene a felhaszn\u00e1l\u00f3knak \u00e9rtelmezni az \u00fczenetet. Ez\u00e9rt nagyobb figyelmet kell szentelni a tartalomnak<\/strong>, a k\u00f6nny\u0171 olvashat\u00f3s\u00e1gnak \u00e9s az \u00e9rthet\u0151s\u00e9gnek.<\/p>\n\n\n\n \u00d6sszess\u00e9g\u00e9ben teh\u00e1t elmondhat\u00f3, hogy k\u00e9pek \u00e9s vide\u00f3k n\u00e9lk\u00fcl meglehet\u0151sen nagy kih\u00edv\u00e1s lehet egy olyan oldalt \u00f6sszehozni, mely hat\u00e9konyabb, mint k\u00e9pekkel. Sokkal nagyobb felel\u0151ss\u00e9g h\u00e1rul a t\u00f6bbi design-elemre: a h\u00e1tterekre, tipogr\u00e1fi\u00e1ra, sz\u00ednekre vagy anim\u00e1ci\u00f3kra. Ugyanakkor gondos tervez\u00e9ssel, \u00e1tgondolts\u00e1ggal kiemelked\u0151 weboldal hozhat\u00f3 l\u00e9tre, mely a sz\u00f6veges tartalmat emeli a k\u00f6z\u00e9ppontba. <\/p>\n\n\n\n Az els\u0151 fontos k\u00e9rd\u00e9s a m\u00e9retre vonatkozik. Akadnak, akik megpr\u00f3b\u00e1lnak erre prec\u00edz sz\u00e1mokat meghat\u00e1rozni, azonban manaps\u00e1g a legnagyobb kih\u00edv\u00e1st ink\u00e1bb az jelenti, hogy elfogadhat\u00f3an jelenjen meg mindenf\u00e9le kijelz\u0151n a weboldal. Mert m\u00e9g ha k\u00e9t kijelz\u0151 m\u00e9rete azonos is, a felbont\u00e1suk k\u00fcl\u00f6nb\u00f6zhet, \u00edgy a felhaszn\u00e1l\u00f3k m\u00e1st \u00e9s m\u00e1st l\u00e1tnak a weboldaladb\u00f3l.<\/p>\n\n\n\n Mivel pontosan nem mindig lehet tudni, hogy kinek mekkora r\u00e9sz jelenik meg a kijelz\u0151j\u00e9n az oldaladb\u00f3l g\u00f6rget\u00e9s n\u00e9lk\u00fcl, ez\u00e9rt fontos, hogy megpr\u00f3b\u00e1ld r\u00e1venni a felhaszn\u00e1l\u00f3kat a g\u00f6rget\u00e9sre<\/strong>. Arra kell b\u00e1tor\u00edtanod \u0151ket, hogy fedezz\u00e9k fel a weboldal t\u00f6bbi r\u00e9sz\u00e9t. Tartalmi szempontb\u00f3l ez azt jelenti, hogy a weboldal fels\u0151 r\u00e9sz\u00e9n valamif\u00e9le \u00edzel\u00edt\u0151t ny\u00fajtasz a tartalomb\u00f3l, mely a weboldalon tal\u00e1lhat\u00f3. Olyannak kell lennie az itt megjelen\u0151 tartalomnak, hogy az emberek \u00e9rezz\u00e9k a k\u00e9sztet\u00e9st a folytat\u00e1sra. Az ig\u00e9nyes tartalommal – ak\u00e1r t\u00f6rt\u00e9netmes\u00e9l\u00e9ssel, azaz egy „t\u00f6rt\u00e9net” elkezd\u00e9s\u00e9vel – is seg\u00edtheted ezt, de egyes designelemekkel is:<\/p>\n\n\n\n Annak meg\u00edt\u00e9l\u00e9s\u00e9ben, hogy az emberek mennyire hajland\u00f3ak a weboldaladon a g\u00f6rget\u00e9sre, a h\u0151t\u00e9rk\u00e9pek seg\u00edtenek<\/a>. Egy g\u00f6rget\u00e9si h\u0151t\u00e9rk\u00e9p p\u00e9ld\u00e1ul el\u00e1rulja, hogy a l\u00e1togat\u00f3k meddig g\u00f6rgettek le, siker\u00fclt-e r\u00e1venned \u0151ket, hogy tov\u00e1bb tekintsenek az oldal tetej\u00e9n\u00e9l.<\/p>\n\n\n\n Nem \u00e9rdemes teh\u00e1t valamilyen m\u00e9ret mellett leragadni a hajt\u00e1s feletti r\u00e9szt tekintve, ink\u00e1bb n\u00e9h\u00e1ny egyszer\u0171 szab\u00e1lyt tan\u00e1csos k\u00f6vetni. P\u00e9ld\u00e1ul, hogy olyan magass\u00e1g\u00fa legyen, ami nem akad\u00e1lyozza a tartalom befogad\u00e1s\u00e1t. Ha egy inform\u00e1ci\u00f3-k\u00f6zpont\u00fa oldalr\u00f3l van sz\u00f3, akkor szerencs\u00e9s lehet egy keskenyebb fejl\u00e9c, ugyanakkor landing oldalak eset\u00e9ben meggy\u0151z\u0151bb lehet egy nagyobb fejl\u00e9c. Nem \u00e1rt egy\u00e9bk\u00e9nt, ha m\u00e9g a hajt\u00e1s felett l\u00e1tszik valamennyi a fejl\u00e9c alatti tartalomb\u00f3l, mert \u00edgy a felhaszn\u00e1l\u00f3 k\u00f6nnyebben elkezd g\u00f6rgetni.<\/p>\n\n\n\n A vizu\u00e1lis hierarchi\u00e1t<\/strong> tekintve figyelembe kell venni az \u00fagynevezett F-mint\u00e1t<\/a>, melyet a felhaszn\u00e1l\u00f3k tekintete \u00e1ltal\u00e1ban bej\u00e1r a weboldalakon. Az emberek tekintete a bal fels\u0151 sarokb\u00f3l indul egy ismeretlen weboldalon. Ez\u00e9rt kell itt megjelennie a log\u00f3nak, amivel a log\u00f3kr\u00f3l sz\u00f3l\u00f3 anyagunk egy k\u00fcl\u00f6n fejezet\u00e9ben foglalkoztunk. <\/p>\n\n\n\n A mellette elhelyezked\u0151 navig\u00e1ci\u00f3s s\u00e1v<\/strong> megtervez\u00e9s\u00e9n\u00e9l<\/a> figyelned kell arra, hogy ne tedd azt t\u00falzs\u00fafoltt\u00e1, mert a t\u00fal sok link nyomaszt\u00f3an hat a felhaszn\u00e1l\u00f3ra. N\u00e9ha az eg\u00e9sz weboldal strukt\u00far\u00e1j\u00e1t \u00e1t kell alak\u00edtani annak \u00e9rdek\u00e9ben, hogy ne n\u0151j\u00f6n t\u00fal nagyra a navig\u00e1ci\u00f3s men\u00fc. Elterjedt az elm\u00falt \u00e9vekben az \u00fagynevezett hamburger men\u00fc is, melynek el\u0151nye lehet, hogy seg\u00edti a f\u0151 elemekre t\u00f6rt\u00e9n\u0151 \u00f6sszpontos\u00edt\u00e1st, azaz nem vonja el a felhaszn\u00e1l\u00f3 figyelm\u00e9t a l\u00e9nyegr\u0151l. Ugyanakkor web\u00e1ruh\u00e1zakn\u00e1l nem praktikus a haszn\u00e1lata. <\/p>\n\n\n\n A tov\u00e1bbi tartalom att\u00f3l f\u00fcgg, hogy milyen t\u00edpus\u00fa a weboldal. Ha egy term\u00e9ket akar eladni, akkor a linkek mellett megjelenhet egy hero image<\/a>, hiszen a c\u00e9l itt a term\u00e9k hat\u00e9kony bemutat\u00e1sa. Ugyanakkor egy web\u00e1ruh\u00e1zn\u00e1l vagy egy \u00fczleti weboldaln\u00e1l az a c\u00e9l, hogy a felhaszn\u00e1l\u00f3 k\u00f6nnyen navig\u00e1ljon, tal\u00e1lkozzon a leg\u00fajabb aj\u00e1nlatokkal, vagy ak\u00e1r, hogy l\u00e1ssa a kor\u00e1bbi rendel\u00e9seit. A fejl\u00e9c \u00e1ltal kommunik\u00e1lt dolog teh\u00e1t aszerint v\u00e1ltozik, hogy mi a f\u0151 c\u00e9lja a weboldalnak. <\/p>\n\n\n\n Ha k\u00e9p jelenik meg itt, akkor tal\u00e1n mondani sem kell, hogy a j\u00f3 min\u0151s\u00e9gen t\u00fal el kellene mondania egy t\u00f6rt\u00e9netet (a c\u00e9gr\u0151l, a term\u00e9kr\u0151l), \u00e9rz\u00e9seket kell kiv\u00e1ltani, motiv\u00e1lnia a felhaszn\u00e1l\u00f3t, hogy az oldalon maradjon. Fot\u00f3 helyett manaps\u00e1g el\u00e9g n\u00e9pszer\u0171ek a rajzolt illusztr\u00e1ci\u00f3k<\/a>, melyek sokkal maradand\u00f3bb nyomot k\u00e9pesek hagyni a l\u00e1togat\u00f3ban, mint egy sablonos fot\u00f3. Szint\u00e9n haszn\u00e1lhat\u00f3 valamilyen vide\u00f3 vagy anim\u00e1ci\u00f3. <\/p>\n\n\n\n V\u00e9g\u00fcl, \u00e1ltal\u00e1ban szerepel a fejl\u00e9cben valamilyen call to action<\/strong> is, m\u00e9g ha ez tal\u00e1n nem is az oldal f\u0151 CTA-ja. Itt az egyik fontos t\u00e9nyez\u0151 annak j\u00f3 elhelyez\u00e9se, mely k\u00e9pes kattint\u00e1sra \u00f6szt\u00f6n\u00f6zni a felhaszn\u00e1l\u00f3t. Emellett persze a CTA-kn\u00e1l sz\u00e1mos m\u00e1s szab\u00e1lyt is figyelembe kell venni, ezekr\u0151l itt \u00edrtunk b\u0151vebben<\/a>. <\/p>\n\n\n\n![\"A](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/04\/hajtas-feletti-ido.png\")
<\/figure><\/div>\n\n\n\nMi jelenjen meg a hajt\u00e1s feletti r\u00e9szen a weboldaladon?<\/h2>\n\n\n\n
Nem okoz gondot SEO-szempontb\u00f3l egy hajt\u00e1s feletti CTA-gomb<\/h3>\n\n\n\n
Weboldalak k\u00e9p n\u00e9lk\u00fcl a hajt\u00e1s felett – mi\u00e9rt lehet j\u00f3 megold\u00e1s?<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/10\/croma.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/10\/radian.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/10\/digitlhaus.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/10\/sarahguo.png\")
<\/figure><\/div>\n\n\n\nMire figyelj a hajt\u00e1s feletti r\u00e9sz tervez\u00e9s\u00e9n\u00e9l?<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/02\/hajtas-felett-gorgetes.jpg\")
<\/figure><\/div>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/02\/cta-hajtas-felett.jpg\")
<\/figure><\/div>\n\n\n\n