Nielsen Norman Group<\/a> nemr\u00e9g egy eg\u00e9sz cikket szentelt a k\u00e9rd\u00e9snek. V\u00e9gigvett\u00e9k az elk\u00f6vethet\u0151 hib\u00e1kat, mik\u00f6zben azt is bemutatt\u00e1k, hogy mi is lenne az optim\u00e1lis megold\u00e1s. L\u00e1ssuk teh\u00e1t az \u0151 sorvezet\u0151j\u00fckre t\u00e1maszkodva, hogy mik\u00e9nt \u00e9rdemes felsorol\u00e1sokat, list\u00e1kat k\u00e9sz\u00edteni a weboldalakon!<\/p>\nMi\u00e9rt j\u00f3k a felsorol\u00e1sok?<\/h2>\n
A web nem a hossz\u00fa, monoton sz\u00f6vegek terepe. Az emberek itt a gyorsan \u00e1tfuthat\u00f3 tartalmakat kedvelik. Ezekn\u00e9l k\u00f6nnyen \u00e1tugorhatj\u00e1k azokat a r\u00e9szeket, melyek nem fontosak sz\u00e1mukra. A sz\u00f6vegeket \u00e9rdemes ez\u00e9rt k\u00fcl\u00f6nb\u00f6z\u0151 technik\u00e1kkal megt\u00f6rni<\/strong>: p\u00e9ld\u00e1ul c\u00edmekkel, k\u00e9pekkel, kiemel\u00e9sekkel, beh\u00faz\u00e1ssal, nagyobb sort\u00e1vols\u00e1ggal, sz\u00ednekkel, \u00e9s persze felsorol\u00e1sokkal.<\/p>\nA felsorol\u00e1sok, list\u00e1k is hat\u00e9konyan t\u00f6rik meg a hossz\u00fa, \u00f6sszef\u00fcgg\u0151 sz\u00f6vegeket, ez\u00e1ltal k\u00f6nnyebben befogadhat\u00f3v\u00e1 teszik azt az emberek sz\u00e1m\u00e1ra. R\u00e1ad\u00e1sul a list\u00e1k felh\u00edvj\u00e1k magukra a figyelmet<\/strong>: a felhaszn\u00e1l\u00f3k mindig r\u00e1pillantanak, amikor \u00e1ttekintenek egy hosszabb sz\u00f6veget, vagyis a fontos inform\u00e1ci\u00f3kat \u00e9rdemes list\u00e1kba rendezni. Seg\u00edtenek a sz\u00f6veg meg\u00e9rt\u00e9s\u00e9ben is, hiszen egyb\u0151l megmutatj\u00e1k, melyek azok az inform\u00e1ci\u00f3k, melyek fontosak<\/strong> \u00e9s biztosan egybe tartoznak, az elemek k\u00f6z\u00f6tt \u00f6sszef\u00fcgg\u00e9s van<\/strong>.<\/p>\nMelyikre figyelsz fel jobban? Az els\u0151 vagy a m\u00e1sodik verzi\u00f3ra?<\/p>\n
1. A Google f\u0151 meg\u00e1llap\u00edt\u00e1sa az, hogy mik\u00f6zben egy desktopos weboldal gyakran t\u00f6bb c\u00e9lt is szolg\u00e1lhat, addig a mobil weboldalakn\u00e1l m\u00e1r c\u00e9lszer\u0171 arra f\u00f3kusz\u00e1lni, hogy a felhaszn\u00e1l\u00f3k megtal\u00e1lj\u00e1k azt a tartalmat, amit keresnek. Ennek \u00e9rdek\u00e9ben tartsuk a call to action gombokat a weboldal fels\u0151 vagy k\u00f6z\u00e9ps\u0151 r\u00e9sz\u00e9n, vagyis ahol a felhaszn\u00e1l\u00f3k k\u00f6nnyen \u00e9szreveszik! Legyenek a men\u00fck r\u00f6videk, mert egy mobil oldalon kicsi az es\u00e9lye, hogy a hossz\u00fa men\u00fck\u00f6n v\u00e9gig fognak g\u00f6rgetni a felhaszn\u00e1l\u00f3k. K\u00f6nnyen visszat\u00e9rhessenek a f\u0151oldalra: ma m\u00e1r \u00e1ltal\u00e1ban a bal fels\u0151 sarokban \u00e1lland\u00f3an szerepl\u0151 log\u00f3t arra haszn\u00e1lj\u00e1k az emberek, hogy az visszarep\u00edtse \u0151ket a f\u0151oldalra. \u00d3vatosan a hirdet\u00e9sekkel! Nem szerencs\u00e9s, ha kiszor\u00edtj\u00e1k a hasznos tartalmat.<\/em><\/p>\n2. A Google f\u0151 meg\u00e1llap\u00edt\u00e1sa az, hogy mik\u00f6zben egy desktopos weboldal gyakran t\u00f6bb c\u00e9lt is szolg\u00e1lhat, addig a mobil weboldalakn\u00e1l m\u00e1r c\u00e9lszer\u0171 arra f\u00f3kusz\u00e1lni, hogy a felhaszn\u00e1l\u00f3k megtal\u00e1lj\u00e1k azt a tartalmat, amit keresnek. Ennek \u00e9rdek\u00e9ben:<\/em><\/p>\n\n- Tartsuk a call to action gombokat a weboldal fels\u0151 vagy k\u00f6z\u00e9ps\u0151 r\u00e9sz\u00e9n, vagyis ahol a felhaszn\u00e1l\u00f3k k\u00f6nnyen \u00e9szreveszik!<\/em><\/li>\n
- Legyenek a men\u00fck r\u00f6videk, mert egy mobil oldalon kicsi az es\u00e9lye, hogy a hossz\u00fa men\u00fck\u00f6n v\u00e9gig fognak g\u00f6rgetni a felhaszn\u00e1l\u00f3k.<\/em><\/li>\n
- K\u00f6nnyen visszat\u00e9rhessenek a f\u0151oldalra: ma m\u00e1r \u00e1ltal\u00e1ban a bal fels\u0151 sarokban \u00e1lland\u00f3an szerepl\u0151 log\u00f3t arra haszn\u00e1lj\u00e1k az emberek, hogy az visszarep\u00edtse \u0151ket a f\u0151oldalra.<\/em><\/li>\n
- \u00d3vatosan a hirdet\u00e9sekkel! Nem szerencs\u00e9s, ha kiszor\u00edtj\u00e1k a hasznos tartalmat.<\/em><\/li>\n<\/ul>\n
Az emberek teh\u00e1t szeretik a felsorol\u00e1sokat, mert szeretik gyorsan feldolgozni a sz\u00f6vegeket. Ilyenkor az sem okoz probl\u00e9m\u00e1t, hogy egy felsorol\u00e1s \u00e1ltal\u00e1ban nagyobb ter\u00fcletet has\u00edt ki egy weboldalb\u00f3l, mint ha egy bekezd\u00e9sbe rendezn\u00e9nk a tartalm\u00e1t. A felhaszn\u00e1l\u00f3k nem b\u00e1nj\u00e1k, ha g\u00f6rgetni\u00fck kell a lista miatt, amennyiben<\/strong> \u00fagy \u00e9rzik, hogy \u00e9rt\u00e9kes inform\u00e1ci\u00f3khoz jutnak ez\u00e1ltal. \u00c9s persze sokkal nagyobb es\u00e9llyel kezdenek el g\u00f6rgetni egy hossz\u00fa list\u00e1t l\u00e1tva, mint egy egybef\u00fcgg\u0151 sz\u00f6veg eset\u00e9ben.<\/p>\nTan\u00e1csok 7 pontban<\/h2>\n1. A lista sorai lehet\u0151leg azonos hossz\u00fas\u00e1g\u00faak legyenek!<\/h3>\n
A felsorol\u00e1sok akkor m\u0171k\u00f6dnek j\u00f3l, amikor a list\u00e1ban szerepl\u0151 sorok azonos hossz\u00fas\u00e1g\u00faak, \u00e9s az egyes elemek azonos fontoss\u00e1g\u00faak. Azonos hossz eset\u00e9n egyik sor sem t\u0171nik fontosabbnak a m\u00e1sikn\u00e1l. Teh\u00e1t ne haszn\u00e1lj olyan list\u00e1t, mint ez:<\/p>\n
Ahhoz, hogy a Google-t\u0151l ki\u00e9rdemeld a keres\u0151tal\u00e1lati list\u00e1n a \u201cMobilbar\u00e1t\u201d min\u0151s\u00edt\u00e9st, van m\u00e9g n\u00e9h\u00e1ny t\u00e9nyez\u0151, amire figyelni kell.<\/em><\/p>\n\n- Ker\u00fcld az olyan megold\u00e1sokat, melyek nem haszn\u00e1lhat\u00f3k mobilon, p\u00e9ld\u00e1ul a Flasht!<\/em><\/li>\n
- A sz\u00f6veg olvashat\u00f3 legyen mobilon zoomol\u00e1s n\u00e9lk\u00fcl.<\/em><\/li>\n
- Olyan legyen az oldalad m\u00e9rete, hogy horizont\u00e1lisan ne kelljen mozgatnia a felhaszn\u00e1l\u00f3knak, ahhoz, hogy befogadhassa a teljes tartalmat.<\/em><\/li>\n
- Akkora t\u00e1vols\u00e1gra helyezd el a linkeket egym\u00e1st\u00f3l, hogy a felhaszn\u00e1l\u00f3k k\u00f6nnyen tudj\u00e1k nyomogatni \u0151ket, de a m\u00e9ret\u00fck is legyen megfelel\u0151. A Google minimin\u00e1lisan 7 mm-es , illetve 48 pixeles m\u00e9retet javasol.<\/em><\/li>\n<\/ul>\n
Ehelyett n\u00e9zzen ki \u00edgy!<\/p>\n
Ahhoz, hogy a Google-t\u0151l ki\u00e9rdemeld a keres\u0151tal\u00e1lati list\u00e1n a \u201cMobilbar\u00e1t\u201d min\u0151s\u00edt\u00e9st, van m\u00e9g n\u00e9h\u00e1ny t\u00e9nyez\u0151, amire figyelni kell.<\/em><\/p>\n\n- Ker\u00fcld az olyan megold\u00e1sokat, melyek nem haszn\u00e1lhat\u00f3k mobilon!<\/em><\/li>\n
- A sz\u00f6veg olvashat\u00f3 legyen mobilon zoomol\u00e1s n\u00e9lk\u00fcl is.<\/em><\/li>\n
- Horizont\u00e1lisan ne kelljen mozgatni az oldalt a teljes befogad\u00e1shoz.<\/em><\/li>\n
- A linkek m\u00e9rete \u00e9s t\u00e1vols\u00e1ga is legyen \u00e9rint\u00e9shez optimaliz\u00e1lva.<\/em><\/li>\n
- A Google minimin\u00e1lisan 7 mm-es , illetve 48 pixeles m\u00e9retet javasol.<\/em><\/li>\n<\/ul>\n
2. Csak akkor haszn\u00e1lj sorsz\u00e1mos list\u00e1kat, ha fontos a sorrend!<\/h3>\n
A sorsz\u00e1mos list\u00e1kat tartogasd azokra az esetekre, amikor a benne szerepl\u0151 t\u00e9teleket fontos sorba rendezned. P\u00e9ld\u00e1ul mert egy folyamat l\u00e9p\u00e9seit mutatja be, vagy mert helyez\u00e9sek l\u00e1that\u00f3k rajta, mint egy top10-es list\u00e1n.<\/p>\n
Ha a sorrend az adott felsorol\u00e1s eset\u00e9ben nem sz\u00e1m\u00edt, akkor ne haszn\u00e1lj sorsz\u00e1moz\u00e1st! Ha \u00edgy teszel, az csak zavart okoz az emberek sz\u00e1m\u00e1ra. P\u00e9ld\u00e1ul azt gondolhatj\u00e1k egy sz\u00e1mozott list\u00e1t l\u00e1tva, hogy annak minden l\u00e9p\u00e9s\u00e9t meg kell tenni\u00fck, mik\u00f6zben esetleg arra akarod r\u00e1venni \u0151ket, hogy egyet v\u00e1lasszanak ki az ott szerepl\u0151 lehet\u0151s\u00e9gek k\u00f6z\u00fcl.<\/p>\n
Ez egy rossz megold\u00e1s:<\/p>\n
Kapcsolatba l\u00e9phetsz vel\u00fcnk az al\u00e1bbi megold\u00e1sokat haszn\u00e1lva:<\/em><\/p>\n1. Online kapcsolati \u0171rlapon<\/em><\/p>\n2. Chaten<\/em><\/p>\n3. Telefonon<\/em><\/p>\n4. Szem\u00e9lyesen<\/em><\/p>\nA j\u00f3 megold\u00e1s:<\/p>\n
Kapcsolatba l\u00e9phetsz vel\u00fcnk az al\u00e1bbi megold\u00e1sokat haszn\u00e1lva:<\/em><\/p>\n\n- Online kapcsolati \u0171rlapon<\/em><\/li>\n
- Chaten<\/em><\/li>\n
- Telefonon<\/em><\/li>\n
- Szem\u00e9lyesen<\/em><\/li>\n<\/ul>\n
3. Azonos mondatszerkezeteket haszn\u00e1lj!<\/h3>\n
A list\u00e1n szerepl\u0151 mondatoknak lehet\u0151leg azonos szerkezet\u0171eknek, azonos sz\u00f3haszn\u00e1lat\u00fanak kell lenni\u00fck. Ha nagyok az elt\u00e9r\u00e9sek, azok lelass\u00edtj\u00e1k vagy \u00f6sszezavarj\u00e1k az embereket. Ez\u00e9rt minden listaelemet azonos megold\u00e1ssal szerkessz meg. Teh\u00e1t p\u00e9ld\u00e1ul minden mondat kezd\u0151dj\u00f6n ig\u00e9vel (vagy f\u0151n\u00e9vvel, mell\u00e9kn\u00e9vvel, a l\u00e9nyeg, hogy azonos legyen a sz\u00f3faja). Ahogy arra is figyelj, hogy ha az egyik listaelem teljes mondat, akkor a k\u00f6vetkez\u0151 ne legyen csak t\u00f6red\u00e9k.<\/p>\n
Ami nem j\u00f3:<\/p>\n
Tartsd be a k\u00f6vetkez\u0151 szab\u00e1lyokat a parkban tart\u00f3zkod\u00e1s sor\u00e1n:<\/em><\/p>\n\n- Helyezd a kihelyezett kuk\u00e1kba a szemetet!<\/em><\/li>\n
- Az \u00e1llatokat megijeszthetik a hangos zajok.<\/em><\/li>\n
- S\u00e1rga vonalak jelzik, hova \u00e1llj.<\/em><\/li>\n
- Mindenkinek a saj\u00e1t felel\u0151ss\u00e9ge a park tiszt\u00e1n tart\u00e1sa.<\/em><\/li>\n<\/ul>\n
Ehelyett:<\/p>\n
\n- Helyezd a kihelyezett kuk\u00e1kba a szemetet!<\/em><\/li>\n
- Ne hangoskodj, mert megijeszti az \u00e1llatokat!<\/em><\/li>\n
- Maradj a s\u00e1rga vonallal jel\u00f6lt ter\u00fclten bel\u00fcl!<\/em><\/li>\n
- Tartsd tiszt\u00e1n a parkot!<\/em><\/li>\n<\/ul>\n
4. Ne szerepeljen ugyanaz a sz\u00f3 t\u00f6bb mondat elej\u00e9n!<\/h3>\n
Ha lehets\u00e9ges, ker\u00fcld az azonos szavak megjelen\u00e9s\u00e9t a sorok elej\u00e9n. S\u0151t az is el\u0151ny\u00f6s, ha nem haszn\u00e1lsz n\u00e9vel\u0151ket, k\u00f6t\u0151szavakat a mondat elej\u00e9n, mint p\u00e9ld\u00e1ul az \u201ca\u201d, \u201caz\u201d vagy \u201c\u00e9s\u201d. Ehelyett tedd a kulcsszavakat a mondatok elej\u00e9re, mert \u00edgy jobban elk\u00fcl\u00f6n\u00edthet\u0151k egym\u00e1st\u00f3l a felsorol\u00e1s egyes elemei, \u00e9s megmutathat\u00f3 a l\u00e9nyeg.<\/p>\n
5. Vezesd be a list\u00e1t egy vil\u00e1gos, le\u00edr\u00f3 mondattal!<\/h3>\n
A bevezet\u00e9s, vagyis a felsorol\u00e1s el\u0151tt alkalmazott szavak, mondatok az\u00e9rt fontosak, mert ezek magyar\u00e1zz\u00e1k el a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra, hogy mir\u0151l sz\u00f3l a lista \u00e9s mi\u00e9rt fontos. Ennek a bevezet\u0151nek nem kell egy teljes mondatnak lennie, ha a lista elemei kieg\u00e9sz\u00edtik. P\u00e9ld\u00e1ul \u00edgy:<\/p>\n
Az egyik gyakori hiba, hogy a https-t nem \u00e1ll\u00edtj\u00e1k be alap\u00e9rtelmezettnek, hanem gyakorlatilag p\u00e1rhuzamosan fut a http oldallal. Ebb\u0151l pedig 3 dolog k\u00f6vetkezik:<\/em><\/p>\n\n- duplik\u00e1lt tartalom<\/em><\/li>\n
- linkek felh\u00edgul\u00e1sa<\/em><\/li>\n
- keres\u0151motorok felt\u00e9rk\u00e9pez\u00e9si b\u00fcdzs\u00e9j\u00e9nek pazarl\u00e1sa<\/em><\/li>\n<\/ul>\n
6. L\u00e9gy k\u00f6vetkezetes a forma kialak\u00edt\u00e1s\u00e1n\u00e1l!<\/h3>\n
K\u00e9t szab\u00e1lyra kell figyelni\u00a0a nagybet\u0171vel val\u00f3 kezd\u00e9sn\u00e9l \u00e9s a mondat v\u00e9gi \u00edr\u00e1sjelek (k\u00e9rd\u0151jel, felki\u00e1lt\u00f3jel, pont) alkalmaz\u00e1s\u00e1n\u00e1l:<\/p>\n
\n- Ha a felsorol\u00e1s elemei mondatok, akkor kezdd \u0151ket nagybet\u0171vel \u00e9s fejezd be ponttal (vagy k\u00e9rd\u0151jellel, felki\u00e1lt\u00f3jellel)!<\/li>\n
- Ha csak t\u00f6red\u00e9kek, akkor ne haszn\u00e1lj a v\u00e9g\u00e9n pontot! Nem musz\u00e1j nagybet\u0171vel sem kezdeni, de ha \u00edgy teszel, akkor k\u00f6nnyebb lesz \u00e1ttekinteni a list\u00e1t az embereknek.<\/li>\n<\/ul>\n
A l\u00e9nyeg azonban az, hogy ha mondatokb\u00f3l \u00e1ll a list\u00e1d, akkor ne kezdd a sorokat kis bet\u0171kkel, \u00e9s ne fejezd be pont n\u00e9lk\u00fcl! Ez lenne a helyes megold\u00e1s:<\/p>\n
Mit akarnak l\u00e1tni egy mobilos weboldalon az emberek?<\/em><\/p>\n\n- Legel\u0151sz\u00f6r is a kapcsolati inform\u00e1ci\u00f3kat (c\u00edmet, telefonsz\u00e1mot) \u00e9s a nyitva tart\u00e1st.<\/em><\/li>\n
- Szint\u00e9n sokan k\u00edv\u00e1ncsiak a c\u00e9g \u00e1raira, a term\u00e9kek \u00e9s szolg\u00e1ltat\u00e1sok list\u00e1j\u00e1ra.<\/em><\/li>\n
- Enn\u00e9l az\u00e9rt kevesebben, de m\u00e9g 39 sz\u00e1zal\u00e9k f\u00e9nyk\u00e9pet is szeretne l\u00e1tni.<\/em><\/li>\n
- 10-20 sz\u00e1zal\u00e9kuk akar vide\u00f3kkal, v\u00e1s\u00e1rl\u00f3i v\u00e9lem\u00e9nyekkel, k\u00f6z\u00f6ss\u00e9gi m\u00e9dia linkekkel, inform\u00e1ci\u00f3s cikkekkel vagy blogbejegyz\u00e9sekkel tal\u00e1lkozni.<\/em><\/li>\n<\/ul>\n
Ha pedig csak egy-egy sz\u00f3 van minden sorban, vagy legal\u00e1bbis nem alkotnak teljes mondatokat, akkor ne haszn\u00e1lj nagybet\u0171t az elej\u00e9n \u00e9s pontot a v\u00e9g\u00e9n!<\/p>\n
7. Ne haszn\u00e1lj t\u00fal sor felsorol\u00e1st, mert elvesz\u00edti a hat\u00e9konys\u00e1g\u00e1t!<\/h3>\n
B\u00f6lcsen v\u00e1laszd ki azt a r\u00e9sz\u00e9t a sz\u00f6vegednek, melyet felsorol\u00e1ssal akarsz hangs\u00falyozni. Csak akkor alkalmazz felsorol\u00e1st, ha a list\u00e1d legal\u00e1bb 3 elemb\u0151l \u00e1ll. Ha csak 2 elemes a list\u00e1d, akkor ink\u00e1bb \u00edrj egy mondatot, melybe belefoglalod! V\u00e9g\u00fcl pedig: egy list\u00e1ba ne helyezz bele tov\u00e1bbi list\u00e1kat, mivel ezeket neh\u00e9z m\u00e1r \u00e9rtelmezni. Ha m\u00e9gis r\u00e1k\u00e9nyszer\u00fclsz list\u00e1kon bel\u00fcli felsorol\u00e1sokra, akkor elt\u00e9r\u0151 felsorol\u00e1sjelekkel k\u00fcl\u00f6nb\u00f6ztesd meg \u0151ket!<\/p>\n
Ezek lenn\u00e9nek teh\u00e1t az \u00e1ltal\u00e1nos szab\u00e1lyok a felsorol\u00e1sokra vonatkoz\u00f3an. Ugyanakkor minden c\u00e9g vagy szervezet eset\u00e9ben lehetnek saj\u00e1t szab\u00e1lyok, melyek ett\u0151l elt\u00e9rnek. Ha Ti st\u00edlus-\u00fatmutat\u00f3tok is m\u00e1s megold\u00e1st \u00edr el\u0151, akkor el\u0151sz\u00f6r azt vedd figyelembe, miel\u0151tt az itt felsorolt szab\u00e1lyokat k\u00f6vetn\u00e9d. A j\u00f3 tartalomnak ugyanis fontos r\u00e9sze, hogy k\u00f6vetkezetesen legyen form\u00e1zva a teljes weboldalon vagy dokument\u00e1ci\u00f3n kereszt\u00fcl.
\n