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.
A hero image á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.
Tartalomjegyzék
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 megfelelő kép kiválasztásához javasolt a webdesigner segítségét kérni.
A tevékenységedhez illő képet használj
Az oldaladon használt képek javíthatják, de tönkre is tehetik a webdesign-t. 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 -nek
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é.
Legyen cselekvésre ösztönzés (CTA) a hero image -en
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 támogatása hero image használatával
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 hero image segítségével
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ó a hero image képen
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.
Hero image használata bizalom építésre
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.
Hero image érzelemkeltésre
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 webdesign-nak, ezért használata előtt érdemes felülvizsgálni az egész weboldalt, a legjobb hatás elérése érdekében.
