Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2017-11-300 komment

Ne helyezd cikkcakk-mintába a képeidet a weboldaladon!

Ha a dekorációs céllal a weboldaladon lévő képeket úgy helyezed el, hogy azok nem egy hasábba kerülnek, akkor az zavarja a felhasználókat. De nem csak az elrendezés számít, hanem a képek információtartalma is.

A modern webdesignnak elengedhetetlen részeit jelentik a képek, melyek magyarázzák, értelmezik a mellettük lévő szöveget. A hagyományos megközelítés szerint a képeknek és a szövegeknek van egy saját hasábjuk, ebbe vannak rendezve, egymás alá: az egyik oldalon a képek, a másikon a hozzájuk tartozó szöveg. A másik, és már régóta terjedő megoldásnál viszont a képek úgynevezett cikkcakk mintába rendeződnek: azaz lefelé haladva váltják egymást a képek és a szöveg. Ennek az elrendezésnek általában az az indoka, hogy így oldják a monotóniát, tegyék érdekesebbé a hosszú oldalakat.

Megint a hagyományos megoldás a hatékonyabb

A Nielsen Norman Group azonban arra hívta fel a figyelmet, hogy kutatásaik szerint a hagyományos elrendezés esetében hatékonyabban olvassák és futják át a weboldal tartalmát a felhasználók. Ennek oka vélekedésük szerint az, hogy a következetesség mindig előnyös a webdesignban.

(Forrás: NNG)

Vizsgálataikban négy különböző weboldalt elemeztek, melyek cikkcakk minta alapján épültek fel. Ezeknek elkészítették a másik típusú elrendezését, azaz a képeket és a szövegeket két külön hasábba rendezték. A kutatásban több dolog is kiderült.

Az egyik az, hogy a felhasználók tekintetének útvonalát a képek minősége és információs tartalma is befolyásolta. Sőt, az információs érték fontosabbnak bizonyult, mint az elrendezés. A felhasználók gyakrabban tekintettek a magasabb információs értékkel bíró képekre, mint az értéktelenekre. És ilyenkor nem számított, hogy milyen elrendezésben kerül tálalásra a kép a weboldalon. Ez tehát azt jelenti, hogy ha a kép “több, mint dekoráció”, akkor mindkét elrendezés jól működik.

Az értéktelen képek csak zavarnak

A dekorációs céllal használt képeket viszont átugrották a felhasználók. Azokon az oldalakon, ahol a képek elsősorban ilyen célból szerepeltek, a látogatók gyorsan megtanulták, hogy ezek nem fontosak a feladatuk végrehajtásához, így a szövegre koncentráltak.

Ugyanakkor megfigyelhető volt az is, hogy a cikkcakk elrendezésnél – szemben a normál elrendezéssel – a felhasználók tekintete gyakran rátévedt a dekorációs célokat szolgáló képekre. Ez azonban nem szándékos pillantás volt, hanem véletlenszerű, és a képek inkább csak akadályt jelentettek a feladat végrehajtásánál.

Ennek oka hogy a dekorációs képeket cikkcakk minta esetén nehezebb elkerülni. Pedig az emberek elsősorban arra törekszenek, hogy a legkisebb erőfeszítéssel érjék el céljukat. Ezért, ha megtanulják, hogy egy oldalon a képek feleslegesek számukra, akkor elkezdik elkerülni őket. Szabályos elrendezés esetén ez könnyen megy, hiszen gond nélkül tud a tekintetük lefelé siklani a fontosabbnak tartott szöveges tartalmakon. A cikkcakk mintánál viszont egy pillanatra elakadnak a képeken, de csak egy egészen rövid időre, mert egyből fontosabb a szöveget keresik.

Ezt a helyzetet tovább lehet rontani azzal, ha a fotók szöveget is tartalmaznak, és esetleg közel vannak helyezve a szövegekhez. Ez azt jelenti, hogy itt a képek úgy néznek ki, mint ha szövegek lennének, ezért versenyeznek velük a figyelemért. A felhasználónak ebben az esetben rendkívül nehéz dolguk van, amikor nehéz meghatározniuk, hogy hol találják a következő bekezdést.

A felirattal ellátott – például képernyőképek weboldalakról, fontos e-mailekről – képek ugyan hasznosnak tűnhetnek számodra, azonban a látogatók számára gyakran túl bonyolultak. Márpedig egy első pillantásra felfoghatatlan kép nem segíti őket a megértésben. Így aztán a többi képedet inkább kerülni fogják.

Következtetések

Összességében tehát elmondható, hogy

  • az információs értékkel bíró képek több figyelmet kapnak, mint a pusztán dekorációs céllal rendelkezők,
  • a dekorációs képekre kevesebbszer tekintenek a felhasználók, és nem veszik figyelembe őket sem a klasszikus, sem a cikkcakk elrendezésnél.
  • A cikkcakk elrendezésnél azonban nem tudják elkerülni a dekorációs képeket, így gyakran megakadnak rajtuk egy pillanatra, majd azonnal tovább is lépnek.

Legyinthetnénk, hogy hát csak egy pillanatra torpannak meg. Azonban a megakadások olyan hatásúak, mintha zsúfolt lenne a weboldalad: nehezebb és kevésbé hatékony az olvasása. Ezért az NNG azt tanácsolja, hogy gondold át alaposan szükséged van-e egy-egy képre a weboldalon, van-e neki információs értéke. Hiszen az információs képek azok, melyek jól működnek mindkét elrendezésnél, mivel támogatják a szöveget és felhívják magukra a figyelmet. Ezekkel időt töltenek az emberek, mert meg szeretnék érteni, hogy mit ajánlasz számukra.

Az oldalon egyébként az első képek alapján döntik el az emberek, hogy figyelembe veszik-e a többit. Ezt azt jelenti, hogy az oldal felső részén található képek információtartalmára kell a leginkább figyelned. A dekorációs célú képek ezért jobb, ha lekerülnek az oldal aljára. Persze hasznosak lehetnek feljebb is a márkaidentitás szempontjából. Ugyanakkor, ha gondok vannak az információs értékkel a képeknél, akkor jobb őket egymás alá rendezni, hogy megkönnyítsd az emberek dolgát a weboldalad átfutásánál. Az egyetlen kivétel az lehet, ha mindössze 2-3 soros a szöveges tartalmad. Ebben az esetben a cikk-cakk elrendezés is elfogadható lehet a lista rövidsége miatt.

Emellett érdemes elkerülni a túlságosan bonyolult képeket is. Még akkor is, ha Te fontosnak érzed őket, a felhasználók számára nehéz lehet befogadni őket, különösen akkor, ha még nem tudják, hogy mit kínálsz a tartalmaddal. Ezek a képek ráadásul a szövegekkel is versenyeznek, így érdemes inkább olyan képet választani helyettük, melyek kiegészítik a szöveget, nem pedig fokozzák a kognitív terhelést. Csak az elrendezés kedvéért pedig ne használj képeket! Minden képnek legyen értelme, még akkor is, ha csak a márkád identitását akarod erősíteni vele!

Végül pedig még egy tanács: a magas információtartalmú képeket mindig az első sorba, bal oldalra helyezd! Hiszen az emberek jelentős része innen kezdi áttekinteni az oldalt, még mielőtt lefelé görgetne. Ha van információtartalma az itt lévő képnek, akkor nem akasztod meg feleslegesen a látogatókat.

Kategória: Design | Címke: , ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.