Menü

Így készíts Hero image - et weboldaladra. Esettanulmányok a legjobbaktól

2017. szeptember 28. | 710

Mi az a Hero image?

Egyszerűen megfogalmazva, a Hero image egy túlméretezett banner a weboldal tetején. Ezzel a képpel találkozik a felhasználó először a weboldalon, ez ragadja meg elsőként a figyelmét, és mivel legfelül helyezkedik el és legtöbbször kitölti a teljes képernyő szélességet.

Általában egy nagyfelbontású kép mely sokszor tartalmazza az adott vállalkozás egyedi értékesítési ajánlatát (Unique Selling Point - USP) és cselekvésre ösztönzését (CTA), úgy mint egy feliratkozási űrlapot vagy egy gombot a vásárlás megkezdéséhez. A nagyfelbontású statikus fotón túl, egyre több weboldalon jelennek meg videók és animációk Hero image-ként.

Miért érdemes Hero image-et használni?

A legtöbb ember vizuális típus, ezért egy jól kiválasztott Hero image – legyen az egy magas felbontású statikus kép vagy akár videó - használata növeli az esélyt arra, hogy a weboldaladra látogató felhasználó első benyomása pozitív lesz, és emiatt nőni fog az oldaladon végrehajtott konverziók száma. Emiatt kiválóan alkalmas arra, hogy a látogatókat cselekvésre ösztönözze, és képi formában bemutassa vállalkozásodat és annak főbb tulajdonságait valamint előnyeit.

Mire kell elsődlegesen ügyelned a Hero image használatakor?

Két fontos tényezőt mindenképpen mérlegelni kell mielőtt alkalmazni kezded.

A Hero imagenek minden esetben nagyfelbontásúnak kell lennie, ezért csak kellő körültekintés és hozzáértés mellett alkalmazd, mivel befolyásolhatja weboldal betöltési sebességét. A Google egy kutatása szerint, ha 0,9 másodperccel nő egy weboldal betöltési sebessége, az akár 20 % - al is csökkentheti annak forgalmát. Vagyis a Hero image - legyen az bármennyire is kiváló – elvesztheti hatékonyságát, ha használata miatt túl sok időt vesz igénybe a weboldal betöltése. Minden esetben megfelelően optimalizált képet vagy videót használj.

A felhasznált képnek ténylegesen pluszt kell hozzáadni a weboldalhoz. A stock fotók használata gyors és olcsó megoldás, viszont egyáltalán nem eredeti és sokszor közhelyes is. Gondolj bele, hány weboldalon tűnhet fel ugyanaz a fotó? Ezért mindenképpen kerüld a stock fotók használatát Hero imageként.

Hogyan válaszd ki a megfelelő Hero image-et?

A weboldaladhoz legjobban illeszkedő kép kiválasztása nehéz feladat. Nagyban függ attól, hogy éppen terméket, szolgáltatást értékesítesz vagy vállalkozásod bemutatkozásához szeretnéd-e használni. Ráadásul, mint már említettem akár videót is használhatsz. Azt pedig nem győzöm hangsúlyozni, hogy minden esetben nagyfelbontásúnak és megfelelően optimalizáltnak kell lenni a Hero image-nek!

Előre nagyon nehéz megmondani, hogy milyen reakciót fog kiváltani a használt kép az oldalad látogatóiból, ezért nem árt több variációt is kipróbálni és tesztelni azokat, majd ezután eldönteni melyik lesz a végleges.

A tevékenységedhez illő képet használj

Az oldaladon használt képek javíthatják, de tönkre is tehetik a felhasználói élményt (UX). Az UX fontosságáról már írtam korábban, érdemes újból elolvasni. Mindig olyan képet használj, ami kifejezi és összhangban van céljaiddal. Egy rossz kép használata azonnal meg fog látszani weboldaladat elhagyó felhasználók számában!

Nagyfelbontású képet használj

A Hero image nem lehet homályos vagy pixeles, mivel nem létezik annál nagyobb webdizájn hiba, mint a nagyméretű és alacsony minőségű képek használata. Egy tökéletes minőségű kép bizalmat sugároz a felhasználók felé.

Cselekvésre ösztönzés használata (CTA)

A hangsúly a képen van, de nem árthat egy cselekvésre ösztönző gomb használata sem. Egy szép képen elhelyezett gomb, megnövekedett konverzióhoz vezet!

Tervezz a különböző felbontásokkal

Napjainkban ahány felhasználó, annyi különböző felbontású készülék áll rendelkezésre. Ügyelj arra, hogy a Hero image a legelterjedtebb felbontásokra optimalizálva legyen.

Esettanulmányok a nagyvilágból

A következőkben példákon keresztül bemutatom, milyen típusú képek a leghatékonyabbak a különböző célok eléréséhez

Termékértékesítés

Sok esetben egy egyszerű és letisztult nagyfelbontású termékfotó a legjobb választás. Több termék esetén használhatsz slidert az összes bemutatására. Erre egy kiváló példa az Apple honlapja, ami már a képekkel megragadja az odalátogatók figyelmét.

Elérhető előnyök kihangsúlyozása

Az elérhető előnyöket, vagy az egyedi értékesítési ajánlatot (Unique Selling Point - USP) hangsúlyozó Hero image tökéletes választás, szolgáltatást nyújtó vállalkozások számára. Az UXPin weboldala egy dinamikus Hero image-el azonnal lehetőséget biztosít a látogatóknak, hogy használják a szolgáltatásukat még mielőtt bármit is tennének a weboldalon.

Egyszerű illusztráció

Egy letisztult és egyszerű illusztráció segítségével tájékoztathatod a látogatóidat a vállalkozásod tevékenységéről oly módon, hogy az egyáltalán nem lesz megterhelő számukra. Tökéletes példa minderre a Buffer weboldala.

Bizalom építése

Mindenki aki blogot vezet, szembesült már azzal, hogy egyre nehezebb felkelteni az olvasók figyelmét, hogy elolvassák a bejegyzéseket. Egy jól megválasztott kép mindig alkalmas az olvasók figyelmének felkeltésére.

Az egyik legjobb példa erre, Mark Ronson blogja. Mivel az arcképét adja az oldalhoz, ezáltal a felhasználók hitelesnek tekintik és nagyobb arányban olvassák el bejegyzéseit mint egy „arctalan” blogon tennék.

Az emberi tényező

Nem árulok el titkot azzal, hogy a valós személyekről készült, egyedi képekkel megalapozod a weboldaladra látogatók bizalmát. Fontos, hogy erre a stock fotók nem igazán alkalmasak, sőt legtöbb esetben éppen ellenkező hatást fejtenek ki!

Kiváló példa a megfelelő használatra, a Poco People weboldala.

Érzelemkeltés

Ha a felhasználók érzelmére hatsz, nagyobb eséllyel ér célba az üzeneted. Ezt csak abban az esetben használd, ha weboldalad például jótékonysági célra jött létre.

Nagyon jó példa erre a Charity:water weboldala. Egy képpel tökéletesen bemutatják, mire fordítják az oldalukon gyűjtött adományokat.

Összegzés

A Hero image használata egy kiváló lehetőség minden weboldaltulajdonos számára. A legfontosabb amire ügyelni kell, hogy tökéletesen összhangban legyen a weboldal tartalmával. Mivel szerves része a weboldal felhasználó élményének (UX) ezért használata előtt érdemes felülvizsgálni az egész weboldalt, a legjobb hatás elérése érdekében.

Tetszett a cikk? Oszd meg!

megosztom