Az Nielsen Norman Group nemrég egy egész cikket szentelt a kérdésnek. Végigvették az elkövethető hibákat, miközben azt is bemutatták, hogy mi is lenne az optimális megoldás. Lássuk tehát az ő sorvezetőjükre támaszkodva, hogy miként érdemes felsorolásokat, listákat készíteni a weboldalakon!

Miért jók a felsorolások?

A web nem a hosszú, monoton szövegek terepe. Az emberek itt a gyorsan átfutható tartalmakat kedvelik. Ezeknél könnyen átugorhatják azokat a részeket, melyek nem fontosak számukra. A szövegeket érdemes ezért különböző technikákkal megtörni: például címekkel, képekkel, kiemelésekkel, behúzással, nagyobb sortávolsággal, színekkel, és persze felsorolásokkal.

A felsorolások, listák is hatékonyan törik meg a hosszú, összefüggő szövegeket, ezáltal könnyebben befogadhatóvá teszik azt az emberek számára. Ráadásul a listák felhívják magukra a figyelmet: a felhasználók mindig rápillantanak, amikor áttekintenek egy hosszabb szöveget, vagyis a fontos információkat érdemes listákba rendezni. Segítenek a szöveg megértésében is, hiszen egyből megmutatják, melyek azok az információk, melyek fontosak és biztosan egybe tartoznak, az elemek között összefüggés van.

Melyikre figyelsz fel jobban? Az első vagy a második verzióra?

1. A Google fő megállapítása az, hogy miközben egy desktopos weboldal gyakran több célt is szolgálhat, addig a mobil weboldalaknál már célszerű arra fókuszálni, hogy a felhasználók megtalálják azt a tartalmat, amit keresnek. Ennek érdekében tartsuk a call to action gombokat a weboldal felső vagy középső részén, vagyis ahol a felhasználók könnyen észreveszik! Legyenek a menük rövidek, mert egy mobil oldalon kicsi az esélye, hogy a hosszú menükön végig fognak görgetni a felhasználók. Könnyen visszatérhessenek a főoldalra: ma már általában a bal felső sarokban állandóan szereplő logót arra használják az emberek, hogy az visszarepítse őket a főoldalra. Óvatosan a hirdetésekkel! Nem szerencsés, ha kiszorítják a hasznos tartalmat.

2. A Google fő megállapítása az, hogy miközben egy desktopos weboldal gyakran több célt is szolgálhat, addig a mobil weboldalaknál már célszerű arra fókuszálni, hogy a felhasználók megtalálják azt a tartalmat, amit keresnek. Ennek érdekében:

• Tartsuk a call to action gombokat a weboldal felső vagy középső részén, vagyis ahol a felhasználók könnyen észreveszik!
• Legyenek a menük rövidek, mert egy mobil oldalon kicsi az esélye, hogy a hosszú menükön végig fognak görgetni a felhasználók.
• Könnyen visszatérhessenek a főoldalra: ma már általában a bal felső sarokban állandóan szereplő logót arra használják az emberek, hogy az visszarepítse őket a főoldalra.
• Óvatosan a hirdetésekkel! Nem szerencsés, ha kiszorítják a hasznos tartalmat.

Az emberek tehát szeretik a felsorolásokat, mert szeretik gyorsan feldolgozni a szövegeket. Ilyenkor az sem okoz problémát, hogy egy felsorolás általában nagyobb területet hasít ki egy weboldalból, mint ha egy bekezdésbe rendeznénk a tartalmát. A felhasználók nem bánják, ha görgetniük kell a lista miatt, amennyiben úgy érzik, hogy értékes információkhoz jutnak ezáltal. És persze sokkal nagyobb eséllyel kezdenek el görgetni egy hosszú listát látva, mint egy egybefüggő szöveg esetében.

Tanácsok 7 pontban

1. A lista sorai lehetőleg azonos hosszúságúak legyenek!

A felsorolások akkor működnek jól, amikor a listában szereplő sorok azonos hosszúságúak, és az egyes elemek azonos fontosságúak. Azonos hossz esetén egyik sor sem tűnik fontosabbnak a másiknál. Tehát ne használj olyan listát, mint ez:

Ahhoz, hogy a Google-től kiérdemeld a keresőtalálati listán a “Mobilbarát” minősítést, van még néhány tényező, amire figyelni kell.

• Kerüld az olyan megoldásokat, melyek nem használhatók mobilon, például a Flasht!
• A szöveg olvasható legyen mobilon zoomolás nélkül.
• Olyan legyen az oldalad mérete, hogy horizontálisan ne kelljen mozgatnia a felhasználóknak, ahhoz, hogy befogadhassa a teljes tartalmat.
• Akkora távolságra helyezd el a linkeket egymástól, hogy a felhasználók könnyen tudják nyomogatni őket, de a méretük is legyen megfelelő. A Google miniminálisan 7 mm-es , illetve 48 pixeles méretet javasol.

Ehelyett nézzen ki így!

Ahhoz, hogy a Google-től kiérdemeld a keresőtalálati listán a “Mobilbarát” minősítést, van még néhány tényező, amire figyelni kell.

• Kerüld az olyan megoldásokat, melyek nem használhatók mobilon!
• A szöveg olvasható legyen mobilon zoomolás nélkül is.
• Horizontálisan ne kelljen mozgatni az oldalt a teljes befogadáshoz.
• A linkek mérete és távolsága is legyen érintéshez optimalizálva.
• A Google miniminálisan 7 mm-es , illetve 48 pixeles méretet javasol.

2. Csak akkor használj sorszámos listákat, ha fontos a sorrend!

A sorszámos listákat tartogasd azokra az esetekre, amikor a benne szereplő tételeket fontos sorba rendezned. Például mert egy folyamat lépéseit mutatja be, vagy mert helyezések láthatók rajta, mint egy top10-es listán.

Ha a sorrend az adott felsorolás esetében nem számít, akkor ne használj sorszámozást! Ha így teszel, az csak zavart okoz az emberek számára. Például azt gondolhatják egy számozott listát látva, hogy annak minden lépését meg kell tenniük, miközben esetleg arra akarod rávenni őket, hogy egyet válasszanak ki az ott szereplő lehetőségek közül.

Ez egy rossz megoldás:

Kapcsolatba léphetsz velünk az alábbi megoldásokat használva:

1. Online kapcsolati űrlapon

2. Chaten

3. Telefonon

4. Személyesen

A jó megoldás:

Kapcsolatba léphetsz velünk az alábbi megoldásokat használva:

• Online kapcsolati űrlapon
• Chaten
• Telefonon
• Személyesen

3. Azonos mondatszerkezeteket használj!

A listán szereplő mondatoknak lehetőleg azonos szerkezetűeknek, azonos szóhasználatúnak kell lenniük. Ha nagyok az eltérések, azok lelassítják vagy összezavarják az embereket. Ezért minden listaelemet azonos megoldással szerkessz meg. Tehát például minden mondat kezdődjön igével (vagy főnévvel, melléknévvel, a lényeg, hogy azonos legyen a szófaja). Ahogy arra is figyelj, hogy ha az egyik listaelem teljes mondat, akkor a következő ne legyen csak töredék.

Ami nem jó:

Tartsd be a következő szabályokat a parkban tartózkodás során:

• Helyezd a kihelyezett kukákba a szemetet!
• Az állatokat megijeszthetik a hangos zajok.
• Sárga vonalak jelzik, hova állj.
• Mindenkinek a saját felelőssége a park tisztán tartása.

Ehelyett:

• Helyezd a kihelyezett kukákba a szemetet!
• Ne hangoskodj, mert megijeszti az állatokat!
• Maradj a sárga vonallal jelölt terülten belül!
• Tartsd tisztán a parkot!

4. Ne szerepeljen ugyanaz a szó több mondat elején!

Ha lehetséges, kerüld az azonos szavak megjelenését a sorok elején. Sőt az is előnyös, ha nem használsz névelőket, kötőszavakat a mondat elején, mint például az “a”, “az” vagy “és”. Ehelyett tedd a kulcsszavakat a mondatok elejére, mert így jobban elkülöníthetők egymástól a felsorolás egyes elemei, és megmutatható a lényeg.

5. Vezesd be a listát egy világos, leíró mondattal!

A bevezetés, vagyis a felsorolás előtt alkalmazott szavak, mondatok azért fontosak, mert ezek magyarázzák el a felhasználók számára, hogy miről szól a lista és miért fontos. Ennek a bevezetőnek nem kell egy teljes mondatnak lennie, ha a lista elemei kiegészítik. Például így:

Az egyik gyakori hiba, hogy a https-t nem állítják be alapértelmezettnek, hanem gyakorlatilag párhuzamosan fut a http oldallal. Ebből pedig 3 dolog következik:

• duplikált tartalom
• linkek felhígulása
• keresőmotorok feltérképezési büdzséjének pazarlása

6. Légy következetes a forma kialakításánál!

Két szabályra kell figyelni a nagybetűvel való kezdésnél és a mondat végi írásjelek (kérdőjel, felkiáltójel, pont) alkalmazásánál:

• Ha a felsorolás elemei mondatok, akkor kezdd őket nagybetűvel és fejezd be ponttal (vagy kérdőjellel, felkiáltójellel)!
• Ha csak töredékek, akkor ne használj a végén pontot! Nem muszáj nagybetűvel sem kezdeni, de ha így teszel, akkor könnyebb lesz áttekinteni a listát az embereknek.

A lényeg azonban az, hogy ha mondatokból áll a listád, akkor ne kezdd a sorokat kis betűkkel, és ne fejezd be pont nélkül! Ez lenne a helyes megoldás:

Mit akarnak látni egy mobilos weboldalon az emberek?

• Legelőször is a kapcsolati információkat (címet, telefonszámot) és a nyitva tartást.
• Szintén sokan kíváncsiak a cég áraira, a termékek és szolgáltatások listájára.
• Ennél azért kevesebben, de még 39 százalék fényképet is szeretne látni.
• 10-20 százalékuk akar videókkal, vásárlói véleményekkel, közösségi média linkekkel, információs cikkekkel vagy blogbejegyzésekkel találkozni.

Ha pedig csak egy-egy szó van minden sorban, vagy legalábbis nem alkotnak teljes mondatokat, akkor ne használj nagybetűt az elején és pontot a végén!

7. Ne használj túl sor felsorolást, mert elveszíti a hatékonyságát!

Bölcsen válaszd ki azt a részét a szövegednek, melyet felsorolással akarsz hangsúlyozni. Csak akkor alkalmazz felsorolást, ha a listád legalább 3 elemből áll. Ha csak 2 elemes a listád, akkor inkább írj egy mondatot, melybe belefoglalod! Végül pedig: egy listába ne helyezz bele további listákat, mivel ezeket nehéz már értelmezni. Ha mégis rákényszerülsz listákon belüli felsorolásokra, akkor eltérő felsorolásjelekkel különböztesd meg őket!

Ezek lennének tehát az általános szabályok a felsorolásokra vonatkozóan. Ugyanakkor minden cég vagy szervezet esetében lehetnek saját szabályok, melyek ettől eltérnek. Ha Ti stílus-útmutatótok is más megoldást ír elő, akkor először azt vedd figyelembe, mielőtt az itt felsorolt szabályokat követnéd. A jó tartalomnak ugyanis fontos része, hogy következetesen legyen formázva a teljes weboldalon vagy dokumentáción keresztül.

The post Hogyan használj listákat, felsorolásokat a weboldaladon? appeared first on Webshark Blog.