“Látom, látom, de nem értem.
Miért?
Hát mert lusta vagyok elolvasni.”
A képek és ikonok akkor segítik a weboldalt, ha kapcsolódnak a mondanivalóhoz, felismerhetők és nem akadályozzák a használatot. A kép önmagában nem bizonyít konverziónövekedést. Választáskor figyelj a képméretre, a betöltésre, a szöveges leírásra, a kattintható felületre és a felhasználási jogokra. Az alábbi szempontokkal eldöntheted, melyik vizuális elem ad hasznos információt, és melyik csupán díszítés.
Ha inkább a videót részesíted előnyben a szöveg helyett, akkor íme:
Ezért érdemes képeket és ikonokat használnod
Könnyebbé és gyorsabbá teszik a megértést
A kép és az ikon támogassa a szöveg megértését. Egy termékfotó vagy folyamatábra konkrét információt adhat; egy ismeretlen ikon jelentése viszont nem feltétlenül egyértelmű. A fontos műveletet szöveggel is nevezd meg. A W3C képleírási döntési fája a kép oldalon betöltött szerepe alapján segít megfelelő szöveges alternatívát választani.
Hangulatba helyezi a látogatót
A fotó hangulatot és környezetet közvetíthet, de az olvasók reakciója eltérő lehet. Olyan képet válassz, amely kapcsolódik a valódi ajánlatodhoz. Illusztrációt vagy stockfotót ne mutass be saját ügyfélként, referenciaként vagy igazolt üzleti eredményként.
Könnyebben kattintható a weboldal eleme
Az ikon önmagában nem növeli meg a kattintható felületet. A teljes gomb vagy hivatkozás legyen jól felismerhető és telefonon is kényelmesen használható. A WCAG célterületre vonatkozó útmutatója a célterület méretét és a szomszédos elemek közötti helyet vizsgálja; egy kis ikon elhelyezése nem helyettesíti ezt.
Megtöri a szöveget
Egy hosszabb szöveget tagolj világos címekkel, rövid bekezdésekkel és szükség esetén felsorolással. Képet akkor adj hozzá, ha szemléltet vagy segíti a tájékozódást. Nem kell minden szövegrész közé dekorációt tenni.
Vezeti a tekintetet
A képi hierarchia segíthet észrevenni a fontos részleteket és a következő lépést. Ettől még nem következik, hogy minden látogató végigolvassa az oldalt. Nézd meg használati próbában, hogy megtalálják-e az ajánlatot, az elérhetőséget és a keresett információt.
Izgalmassá teszik a weboldalad
Természetesen nem ez az elsődleges céljuk, de azért nem elhanyagolandó. Minden sokkal jobb, ha egy kicsit izgi, nem?
Bizalmat szül a felhasználók szemében
Az egységes megjelenés hozzájárulhat az első benyomáshoz, de nem bizonyítja a szolgáltatás minőségét. A bizalomhoz legyenek ellenőrizhető szakmai adatok, valódi munkák és pontosan jelölt ügyfélvélemények is.
Mikor jó egy kép vagy ikon?
Az ikon jelentése legyen érthető a használat helyén. Ha a művelet nem közismert, tedd mellé a nevét is. Képként működő gombnál vagy hivatkozásnál a szöveges alternatíva a műveletet vagy a célt írja le.
Fotónál nézd meg, hogy a kép releváns és jól kivehető-e a tényleges asztali és mobilos méretben. Az informatív kép kapjon a szerepéhez illő rövid szöveges alternatívát; a pusztán dekoratív vagy a mellette lévő szöveget megismétlő képhez sokszor az üres alt="" megfelelő. Összetett ábránál a fontos adatok az oldalon szövegként is legyenek elérhetők. Ne minden képbe azonos kulcsszólistát írj.
Ami pedig mindkettőre igaz, hogy egyértelműen kell ábrázolnia, azt amit a mellette található szöveggel ki szeretnél fejezni, amilyen érzést át szeretnél adni.
Szabályok arra az esetre, ha több képet és ikont alkalmazol
Érdemes következetes vizuális rendszert használni. Ettől még egy figyelmeztető ikon, egy termékfotó és egy portré szerepe különböző: az egységesség ne menjen a felismerhetőség és a szükséges különbségek rovására.
Ikonok esetén van például:
- körvonalas (itt még az is fontos, hogy egységes legyen a körvonal vastagsága)
- teli/kitöltött
- színes
Más besorolás szerint pedig megkülönböztetünk:
- minimalista ikont
- részletes ikont
Fotóknál tartsd következetesen a kivágást, a képarányokat és a díszítőelemeket, ahol ez segíti az áttekinthetőséget. A fontos képi információ ne csak CSS-háttérként szerepeljen, és mobilon se vágódjon le. A Google képkeresési útmutatója a környező szöveget, a képleírást és a betölthető képet is fontosnak tartja; a CSS-képeket nem indexeli.
Hogyan tudod feldobni a képeket és ikonokat?
Egy arculathoz illő forma vagy finom árnyék segíthet egységesíteni a megjelenést. A díszítés nem bizonyít szakértelmet, és nem érdemes miatta rontani az olvashatóságot, növelni a fölösleges betöltési terhet vagy elrejteni a kép fontos részét.
Ha például körvonalas ikonról beszélünk, akkor
- mögé tudsz tenni valamilyen kis formát
Ez lehet az arculatodnak egy formája vagy bármilyen más fiktív forma
- egy körbe vagy egyedi alakzatba is belerakhatod
Itt is lehet az arculatodnak egy saját, jellegzetes alakja
- kicsit ki is lógathatod egy alakzatból
Képek esetén az alábbiakat teheted
- köré helyezel különféle alakzatokat, ikonokat, formákat
- belerakod valamilyen alakzatba
- még jobban fel tudod dobni az egészet, ha kicsit kilógatod az alakzatból
- kivágod a fotód hátterének egy részét, a másikat pedig meghagyod
- szolid árnyékot raksz a képek köré
Hogyan válassz úgy fotót, hogy ne keltsen unalmas, stock fotó hatást?
1. Olyan fotót válassz, amely kapcsolódik a valódi helyzethez! A saját fotó lehet előny, de egy megfelelően licencelt stockkép használata sem önmagában hiba. Ne állíts róla valótlan eredetet vagy ügyfélkapcsolatot.
2. A beállítás feleljen meg a kép céljának! A kamerába nézés portrénál teljesen indokolt lehet, egy munkafolyamatot bemutató képnél más beállítás működhet jobban. Ne egyetlen arckifejezésből vagy tekintetirányból ítéld meg, hogy a fotó használható-e.
3. A kép színvilága ne legyen túl eltérő a te weboldaladétól vagy a többi fotótól!
Tehát ha már van egy tónusa, hangulata a honlapodnak, akkor engedd el azokat a képeket amik nem illenek bele. Olyan fotót válassz, ami azt a hangulatot tükrözi, amit te szeretnél kifejezni.
Hol találhatsz szuper képeket és ikonokat?
Ikonok
Flaticon ikonok keresésére használható. A hivatalos feltételek szerint a felhasználás a licenctípustól függ: a normál ingyenes tartalomnál előírt forrásjelölés szükséges, a megfelelő fizetős licenc ettől eltérhet. A jelölés módját, az engedett felhasználást és a letöltéskor érvényes feltételeket is ellenőrizd; egy tetszőleges link nem old fel minden korlátozást.
Képek
A korábbi Freepik jelenleg Magnific néven érhető el. A kiválasztott képnél nézd meg, milyen licenc és forrásjelölés tartozik hozzá. A szolgáltató feltételei általános és külön licencű tartalmakat is megkülönböztetnek; a csomag és a letöltés körülményei számíthatnak.
További képtárak is szóba jöhetnek. Letöltés előtt minden esetben ellenőrizd az adott kép felhasználási feltételeit; az ingyenes hozzáférés nem jelent korlátlan jogot minden célra:
A megfelelő képtárat a konkrét feladat, a használható képek és a licencfeltételek alapján válaszd ki. Ne csak az árat vagy a választék méretét nézd.
Amik még szerintem szuper képtárak:
- PNGTree: az aktuális csomag és az adott elem licencét ellenőrizd.
- Stockvault: az adott kép engedélyezett felhasználásából indulj ki, különösen üzleti felhasználásnál.
- Stock Photo Secret: az adott képhez és felhasználáshoz tartozó feltételeket vizsgáld meg.
Szívesen olvasnál még hasonlókról? Rendszeresen megjelenő hírleveleimben ilyen és egyéb, vállalkozással, online marketinggel, web-/landing oldal készítéssel kapcsolatos fontos tudnivalókat osztok meg. Ha szeretnéd kimaxolni a vállalkozásodban lévő potenciált, akkor iratkozz fel ezekre a hasznos levelekre itt! 👇
Zárás
A képi elemeknél a relevanciát, a használhatóságot, a betöltést és a jogszerű felhasználást együtt ellenőrizd. A szebb látvány önmagában nem igazol több vásárlót; az üzleti eredményt a tényleges jelentkezések és vásárlások alapján értékeld.
Ha további segítségre lenne szükséged weboldalad / landing oldalad vizuális elemeinek tökélyre fejlesztéséhez vagy vállalkozásod online marketingjének felturbózásához, akkor vedd fel velem a kapcsolatot itt:
Nagyon sikeres és produktív vállalkozást kívánok neked!
