Menü

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

2017. szeptember 28. | 201

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 megjelennek 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 weboldalunkra látogató felhasználók első benyomása oldalunkról pozitív lesz, és emiatt nőni fog a weboldalunkon végrehajtott konverziók szám. Emiatt kiválóan alkalmas arra, hogy a látogatókat cselekvésre ösztönözze, és képi formában bemutassa vállalkozásunkat és annak főbb tulajdonságait valamint előnyeit.

Mire kell elsődlegesen ügyelnünk Hero image használatakor?

Két fontos tényezőt mindenképpen mérlegelni kell mikor a weboldalunkon történő alkalmazása előtt.

A Hero imagenek minden esetben nagyfelbontásúnak kell lennie, ezért csak kellő körültekintés és hozzáértés mellett alkalmazzuk, mivel befolyásolhatja weboldalunk 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áljunk.

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. Gondoljunk bele, hány weboldalon tűnhet fel ugyanaz a fotó? Ezért mindenképpen kerüljük a stock fotók használatát Hero imageként.

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

A weboldalunkhoz legjobban illő kép kiválasztása nehéz feladat. Nagyban függ attól, hogy éppen terméket, szolgáltatást értékesítünk vagy vállalkozásunk bemutatkozásához szeretnénk használni. Ráadásul, mint már említettük akár videót is használhatunk. Azt pedig nem győzzük 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 oldalunk 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égünkhöz illő képet használjunk

Az oldalunkon 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 írtunk korábban, érdemes újból elolvasni. Mindig olyan képet használjunk ami kifejezi és összhangban van céljainkkal. Egy rossz kép használata azonnal meg fog látszani weboldalunkat elhagyó felhasználók számában!

Nagyfelbontású képet használjunk

A Hero image nem lehet homályos vagy pixeles, mivel nem sok nagyobb webdizájn hiba fordul elő, 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ünk 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ünk 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 bemutatjuk, 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álhatunk 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ékoztathatjuk a látogatóinkat a vállalkozásunk 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 árulunk el titkot azzal, hogy a valós személyekről készült, egyedi képekkel megalapozzuk a weboldalunkra 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 hatunk, nagyobb eséllyel ér célba az üzenetünk. Ezt csak abban az esetben használjuk, ha weboldalunk 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