Webshark Blog

A képek a weboldaladon többet jelentenek egyszerű dekorációnál, helykitöltő elemnél, mert képesek a felhasználói élmény befolyásolására. (Frissítés, 2022.01.27. – Egy új fejezettel bővítettünk: Az 5 stockfotó-típus, amit mindenképpen kerülj el!)

Ha a weboldaladon lévő képeket dekorációs céllal ú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.

• Képekkel olykor sokkal könnyebben elmondhatsz valamit, mint szavakkal.
• Egy egyszerű kép is többet tud mondani, mint egy bekezdésnyi szöveg.
• A képeknél nem számítanak a nyelvi korlátok.
• Ráadásul az emberek sokkal gyorsabban dolgozzák a képi információkat.
• A képekkel könnyedén felkeltheted a látogatók figyelmét a weboldaladon, és segítségükkel megkülönböztetheted a termékeidet.

Nem mindegy azonban, hogy milyen képeket használsz, és hogyan teszed ezt.

Milyen képeket használj, és hogyan?

4 kérdés, amit tegyél fel magadnak, mielőtt kiválasztanál egy fotót a weboldaladra

A megfelelő fotó kiválasztása még talán annál is nehezebb, mint a megfelelő szavaké. Ennek ellenére sokan nem fordítanak kellő gondot a fotókra, kevesebbet foglalkoznak velük, mint a weboldal szövegében. Ha nem is olvasol tovább ebben a bejegyzésben, ezt a néhány bekezdést még fusd át, mert ha megjegyzed az itt felsorolt kérdéseket, és mindig felteszed képválasztásnál, akkor a legnagyobb hibákat már elkerülöd.

1. A kiválasztott kép megfelelően közvetíti azt az üzenetet, amit kommunikálni akarsz?

Ugye nem szívesen használsz felesleges, értelmetlen, oda nem illő szavakat a weboldaladon, hanem a lényeget akarod megfogalmazni, minél érthetőbben? Akkor a tartalmaidban elhelyezett fotókkal miért tennél másképp? Minden egyes képnek, amit elhelyezel a tartalmadban, hozzá kell járulnia ahhoz, hogy

• világosabb legyen a látogatók számára az üzeneted,
• cselekvésre ösztönözd őket,
• és több konverziót érj el.

2. Illik a kép a márkádhoz?

Egy egyszerű szabály: ha egy kép nem passzol a márkád image-éhez, akkor ne használd! A márkád személyiségének erőteljesnek és világosnak kell lennie. Ez azt is jelenti, hogy legyél következetes a képek kiválasztásánál. És persze fogalmazd meg magadnak, hogy milyen üzenetet akarsz közvetíteni az embereknek, vagy mit szeretnél, ha megtanulnának tőled.

3. Elég színes a kép?

Ez talán furcsának tűnhet, de a színek érzéseket keltenek. Próbálj olyan képeket használni, melyek élénkek és életteliek, hacsak nincs valami különleges oka annak, hogy másmilyen fotókat használj. Az erős színek vonzzák a tekintetet, mozgásra kényszerítik a szemet, és nem hagyják unatkozni a látogatót.

4. Valóságosnak néz ki?

Az emberek nagyon sok időt töltenek monitorok előtt munka közben. Ez stockfotókon általában úgy néz ki, hogy nagyon vidáman vigyorognak egy excel-táblázatra. Ha azonban körülnézel az irodában, ilyen kollégát ritkán fogsz látni. A stockfotókkal ez a baj: gyakran teljesen elrugaszkodnak a valóságtól, úgyhogy ezeket a megoldásokat inkább kerüld a képválasztásnál. Tehát, ha valamivel a való életben ritkán vagy soha nem találkozol, akkor azt ne mutasd a weboldaladon sem. De a stockfotók használatáról hamarosan bővebben is szó lesz.

És most jöjjenek a részletek!

Mire figyelj a fotók kiválasztásánál és használatánál?

Nem minden weboldalnak van szüksége kép-központú designra

Nyilván komoly értéke van annak, ha a felhasználók figyelmét fel tudod kelteni néhány esztétikus képpel, ugyanakkor ez azzal jár, hogy más elemeket nehezebb lesz megtalálni és használni az oldalon. Ha túl nagy figyelem irányul a képekre, akkor az eltérítheti a felhasználót a tartalmad befogadásától. Ilyenkor csak a képre figyel, és nem veszi észre a call to actiont, mely a weboldal lényegét jelenti.

Habár egy kép-központú design adott esetben indokolt is lehet, a legtöbb weboldalnál inkább egy kiegyensúlyozott megközelítést érdemes követni. A képeknek, melyeket a felhasználói felületen alkalmazol, a terméket vagy szolgáltatásokat kell támogatnia. De semmiképpen sem szabad túlragyognia és elhomályosítania fontos tartalmakat vagy funkciókat.

Legyen célja és megfelelő mondanivalója a képeknek!

Sok weboldalon csak azért szerepelnek képek, hogy kitöltsék a helyet, és rosszabb esetben még össze is zavarják a látogatókat. A képek azért vannak, hogy vagy egy történetet mesélj el velük, vagy leegyszerűsítsd a mondanivalód. Úgyhogy ne erőltesd bele a képeket a tartalmaidba

Minden képben van egy történet, amit elmesél a látogatóknak. Csakúgy, mint az írott szövegnél, jó ha tudod már az indulás előtt, hogy mit akarsz elmondani vele. A képekkel inspirálhatod és elkötelezheted a közönségedet, de nem minden kép javítja a felhasználói élményt.

A usability tesztek azt mutatják, hogy a pusztán dekorációs céllal felhasznált képek ritkán adnak értéket a designhoz. Inkább csak rontják, mint javítják a felhasználói élményt. Az emberek általában átsiklanak rajtuk, vagy rosszabb esetben frusztrálja őket a látvány.

A legveszélyesebb dolog minden design esetében, amikor a képek rossz üzenetet közvetítenek. Ezért mindig meg kell győződnöd arról, hogy a képek illeszkednek az írott tartalomhoz. Olyan képeket kell választanod a weboldaladra, melyek szoros kapcsolatban állnak a termékeddel és illeszkednek a kontextusba is.

A képek nem teremthetnek vizuális zajt!

A képek esetén nem igaz az az elv, hogy a több jobb. Már ha a weboldaladnak nem kifejezetten az a célja, hogy képeket mutass be rajta. A képeid valószínűleg azt a célt szolgálják, hogy a termékeid, szolgáltatásaid megismertesd a látogatókkal. Ehhez viszont elegendő néhány kép, nem kell túl sok. Azok viszont olyanok legyenek, hogy valóban megragadják a látogatók figyelmét.

Mindig, amikor egy képet teszel a weboldaladra, tedd fel magadnak a kérdést, hogy az adott kép illik-e a weboldalad esztétikájához. Tehát például, ha a weboldalad elegáns, kifinomult, nagy whitespace-eket használsz, akkor a képid is legyenek nagyok, melyek a teljes kijelzőt elfoglalják.

Mindig azonos méretű és stílusú képeket használj!

A weboldalad sokkal jobban fog kinézni, ha következetes vagy a képhasználatnál. Ez a méretet, az azonos képarányokat és a stílust is jelenti. Ez segít abban is, hogy a szöveget megfelelően formázd.

Figyelj a reszponzivitásra!

Győződj meg arról, hogy a képek, amiket a weboldaladon használsz, minden kijelzőméreten jól jelennek meg. Teszteld őket különféle felbontásoknál, képarányoknál és eszközön!

• A képek soha nem tűnhetnek pixelesnek!
• Soha ne növeld őket 100%-nál nagyobbra!
• Mindig az eredeti arányokkal jelenítsd meg őket!

Reszponzív weboldalaknál gyakori probléma a megfelelő képméret kiválasztása, mely a legjobban illeszkedik minden eszköz kijelzőjéhez. Egyetlen kép néha nem elegendő ahhoz, hogy minden képernyőfelbontást és eszközt kiszolgáljon.

De hogyan válaszd ki az optimális reszponzív képméretet? Akadnak olyan online eszközök is a neten, melyek segítségével különféle képméreteket tudsz kezelni. Ilyen például a Cloudinary, mely képes arra, hogy reszponzív töréspontokat hozz létre a segítségével. Ez az eszköz egy fejlett algoritmust használ, így könnyen meghatározza a megfelelő töréspontokat minden feltöltött kép esetében. A képeket elemzi, hogy megtalálja ezeket, majd mindegyik felbontásra készít egy képet.

A teljesítmény

Amikor képekben gondolkodunk, akkor általában úgy gondoljuk, hogy azok javítani fogják a felhasználói élményt. Pedig a felhasználói élménynek a weboldalsebesség is a része. Márpedig egy képnek mérete van, és minden egyes képpel lassul a weboldal. Tehát hiába használsz lenyűgöző képeket, melyek megfogják a felhasználókat, ha azok meg sem várják, hogy betöltődjenek.

A weboldalsebesség fontosságáról írtunk már egy nagyon részletes anyagot, úgyhogy erre nem térünk ki. A lényeg, hogy ha sok képet használsz, akkor optimalizálnod kell a sebességet, amire a linkelt posztban találsz ötleteket. Ezek közül itt csak néhányat emelünk ki:

CSS sprite használata

Sok kép betöltése rendkívül sok időt és erőforrást vesz igénybe. Sokkal gyorsabb egyetlen kép betöltése, és komponenseinek megjelenítése, mivel csökkenti a szerverlekérések számát. CSS sprite-ok használatával a böngésző csak egy képet tölt be.

Lazy loading

A lényeg itt az, hogy egy kép csak akkor jelenjen meg, ha a felhasználó elér hozzá a böngészőben, ahelyett, hogy az oldal megjelenésére kelljen várnia a be nem töltött képek miatt.

Skeleton screen

Ez az a megoldás, amikor a felhasználók számára még azelőtt megjeleníted a weboldalad skeleton verzióját, hogy a képek betöltésre kerülnének. Ilyenkor már látják, hogy mire számíthatnak, ráadásul adott esetben képek nélkül is interakcióba léphetnek az oldallal.

Ne feledd: a kép a design része!

Habár ez nyilvánvalónak tűnik, a gyakorlatban mégsem az. A képek a webdesign integráns részét képezik, és eképpen kell is figyelembe venni őket. Mivel a designnak célja van, azért a képeknek ugyanennek a célnak az elérését kell támogatniuk.

Habár a képekre nagyban építő weboldalak általában jobban teljesítenek, ahhoz, hogy ez valóban így történjen, figyelembe kell venni néhány használhatósági elvet. Például a vizuális hierarchiának megfelelően kell elrendezni a képeket, így az elsődleges és a másodlagos elemeknek eltérő súlyt adni.

Hangold össze a képet a szöveggel!

Amikor együtt jelenik meg egy oldalon a kép és a szöveg, akkor azok összhangjára figyelni kell. Meg kell találni a megfelelő egyensúlyt a kettő között. Erre például jó megoldás lehet, ha a képet háttérként – egy overlayt ráhelyezve – jeleníted meg a szöveg mögött.

De más megoldások is lehetségesek, például, ha a maga kép tartalmazza a szöveget, ami persze SEO-szempontból nem a legjobb megoldás. Vagy egyéb kreatív megoldásokat alkalmazol a megjelenítésre, ahogy például ezen az oldalon is tették a designerek.

A megfelelő layout

A felhasználó élményt nagymértékben meghatározza a weboldal elrendezése. Általában a sok képet tartalmazó oldalak rácsszerkezetet használnak, mivel ez egy problémamentes megoldás, ha a megjelenítésükről van szó. A rácsnak persze több típusa is van.

Alkalmazhatod a klasszikus rácsot, amelyben négyzet alakú képek kapnak helyet. Önmagában harmónia és egyensúly érzetét kelti, és olyankor lehet használni, amikor a képeknek nem feladata, hogy vezessék a látogatót.

Rendezetlenebbé is teheted a rácsot, elszakadva a konvencionális megoldástól. Egy ilyen megoldás segítségével már irányíthatod a felhasználó tekintetét, és kiemelhetsz bizonyos tartalmi részeket.

A rácsban szerepelhetnek akár eltérő méretű képek is, miközben az egész továbbra is a rendezettség érzetét kelti. Erre akkor lehet szükség, ha úgy akarsz sok képet megjeleníteni, hogy nem ragaszkodsz egy bizonyos oldalarányhoz.

Adj hozzá mozgást!

A mozgás sokat dobhat egy képekkel teletűzdelt weboldal megjelenésén. De csakúgy, mint a szövegeknél: a mozgásnak és a képeknek összhangba kell kerülniük. A mozgás segíthet például abban, hogy egy képre irányítsa a felhasználó figyelmét, amikor az fölé mozgatja az egérmutatót. Erre olyankor valóban szükség lehet, ha sok a kép az oldalon, így egyik sem emelkedik ki.

De a weboldal lefelé görgetésnél is megoldható, hogy ne csak úgy ott legyenek az oldalon a képek, hanem valamilyen mozgással tűnjenek fel, így még inkább felkeltik a figyelmet. Végül pedig, ha valahol kép helyett tudsz videót is használni, akkor tedd azt!

Ha lehet, eredeti képeket használj!

Ha eredeti képet használsz a weboldaladon, akkor javul a felhasználói élmény, és növeled az esélyét annak, hogy a keresésekre jobb helyezést érj el. Az eredeti képekre az emberek jobban felfigyelnek, mint a stockfotókra. Habár stockfotókat is használhatsz jól a weboldaladon, az kétségtelen, hogy SEO szempontból az utóbbi nem optimális választás, és nem ugyanazt a hatást éred el velük. Az emberek tucatnyi vagy akár több száz oldalon is találkozhatnak ugyanazzal a képpel, mint amit Te használsz.

SEO szempontból az is fontos, hogy megfelelő fájlnevet adj a képeidnek. A Google ugyanis még nem nézi meg, hogy mi van a képeiden, amikor feltérképezi azt. A hozzá kapcsolódó szövegekből tud kiindulni. A fájlnév információt nyújt számára arról, hogy mi található a képen. A fájlnév a kép URL-jében is megjelenik, ezért mindig kisbetűvel célszerű írni, és kötőjelet hagyni az egyes szavak között.

Ugyanígy fontos a képaláírás és az alt text is. Utóbbi persze nem látható az átlagos felhasználó számár, ugyanakkor a keresőmotorok számára információt hordoz. Ha a képeden van felirat, akkor az alt text ugyanaz lehet.

Többféle vizuális megoldást használj!

Az illusztrációknak és a fotóknak is helye van egy-egy termék weboldalán. Egy fotó ideális eszköz specifikus dolgok vagy történetek bemutatására. Tehát amikor nem valamilyen autót kell mutatnunk, hanem egy adott autót.

Az illusztrációk viszont kiválóak arra, hogy általános dolgokat fejezzenek ki, melyeknél egy fotó esetleg elidegenítően hathat. Ezek tehát akkor segítik a megértést, amikor nincs szükség valaminek az egzakt megjelenítésére.

Legyen egy fókuszpontod!

A képek olyan vizuális kommunikációs eszközt adnak a kezedbe, mellyel közvetítheted az üzeneteidet. Egyértelmű fókusz segítségével könnyen és gyorsan közölheted a gondolataidat, míg homályos fókusszal a kép jelentés nélkülivé válik.

Amikor fókuszról beszélünk, egyszerűen arról van szó, hogy egy bizonyos dologra irányul a figyelem a fotón. Ez a dolog kerül a kép középpontjába, így tisztán érthetővé és befogadhatóvá válik az üzenet. El kell kerülnöd azt a hibát, hogy az embereknek találgatniuk kelljen a kép jelentését!

Javítsák a képek a konverziót

A termékeket sokszor a képek adják el. Az emberek nagymértékben támaszkodnak a képekre, amikor ismerkednek egy termékkel, és fontolgatják annak megvásárlását. Ezért a webáruházak legfontosabb elemét a termékekről készült képek jelentik. Minél vonzóbb az emberek számára a terméked megjelenése, annál bátrabban vágnak bele a megvásárlásába. Ami persze neked jobb konverziós arányokat hoz.

A termékképeknek ezért szépnek kell lenniük. Egy jó kép elvégzi a munkát: felkelti a felhasználó figyelmét, és megkülönbözteti a terméked a többitől. Ugyanakkor az ilyen képek elkészítése munkaigényes feladat.

Ami még fontos, hogy az elsődleges képed a hajtás felett jelenjen meg. Ne kelljen az embereknek görgetniük azért, hogy lássanak egy képet a termékről. Lényeges még, hogy a kép nagy legyen, olyan nagy, amekkora csak lehetséges. Ha pedig már elérted a maximális méretet, lehetővé kell tenned, hogy az emberek rázoomolhassanak az őket érdeklő részletekre. Ez különösen fontos például ruházati termékeknél, ahol sokat számítanak a részletek. Természetesen a zoomolt részleteknek is kiváló minőségűnek kell lenniük.

Fejezzék ki a személyiséged, és válts ki velük érzelmeket!

A képeknek meg kell ragadniuk a termék vagy szolgáltatás lényegét, ugyanakkor meg is kell lepniük és gyönyörködtetniük kell az embereket. A fotók képesek arra, hogy legalább annyira szórakoztassanak, mint amilyen mértékben informálnak.

Ha már van egy kielégítő felhasználói élményed, akkor a jó képekkel érzelmi kapcsolatot alakíthatsz ki a felhasználóiddal. Az érzelmileg erőteljes képek biztosítják azt, hogy az emberek mélyebben is érdeklődjenek majd a weboldalad iránt.

Használd a megfelelő fájltípust!

Mindig legyél tisztában azzal, hogy milyen képfájl-típust használsz! Általában a JPEG vagy JPG kínálja a legjobb megoldást, amikor jó minőségű, de kis méretű képekre van szükséged. Utóbbi főleg a weboldalsebesség miatt fontos. A JPEG-képek jellemzően olyan fotók, melyeken sok szín, árnyalat, árnyék található. A fotókat tudod hatékonyan tömöríteni JPEG-gel, ugyanakkor tény, hogy a tömörítés minőségromlással jár, hiszen az adatok egy része elveszik. Emellett átlátszó hátteret sem használhatsz, mint például a PNG-nél.

A PNG-t általában akkor szerencsés használni, amikor a képeden kevés a szín, az árnyalat. Tipikusan ilyenek a logók, illetve a különböző grafikák, illusztrációk. Sokkal jobb minőség érhető el PNG-vel, mint JPG-vel, és ha nem fotóról van szó, akkor a méret is kisebb lehet. A PNG-fájlokat tudod kicsinyíteni, nagyítani anélkül, hogy az bármiféle minőségromlással járna. Célszerű 24 bites PNG-t használni a 8 bites helyett, mert több színt jelenít meg, és jobb a minősége.

Dilemmád elsősorban akkor lehet a választásnál, ha a fotódon szöveg is található. Általában akkor érdemes JPEG-et választani, ha a képed nagyobb részét teszi ki a fotó. Fordított esetben válaszd a PNG-t. Egy PNG fájlt bármikor átalakíthatsz JPG-vé, azonban visszafelé már nem működik, illetve technikailag kivitelezhető, csak nincs értelme, mert a minőség nem fog javulni, csak nagyobb lesz a fájlméret.

Találd meg a helyes egyensúlyt a minőség és a fájlméret között!

Minél nagyobb felbontású a képed, annál szebb, hiszen annál jobb a minősége. Ez ugyanakkor a fájlméret növekedésével jár, ami lassítja az oldalad betöltődését. A weboldalaknál a legnagyobb mértékben a képek a felelősek a lassú betöltődésért. Ha gyorsítani kell a weboldaladat, akkor mindig az első legyen, hogy a képek fájlméretét csökkented! A weben találsz olyan online eszközöket, melyek viszonylag veszteségmentes módon képesek tömöríteni a képfájljaidat.

Figyelj arra, hogy a felhasznált kép kiterjedése ne legyen nagyobb, mint az éppen szükséges szélesség, mert ezáltal feleslegesen nagy a mérete. Ezért a fájltípuson és a tömörítés mértékén kívül mindig vágd meg a képed a megfelelő szélességre és magasságra. Azt se felejtsd el, hogy a kijelzők általában csak 72dpi felbontású képet tudnak megjeleníteni, így ennél nagyobb felbontás felesleges, csak a mérete nő a képnek. Végül pedig: soha ne használj nagyméretű, de alacsony minőségű képet, mert az pixelesnek és homályosnak fog látszani!

Néhány ökölszabály:

• A teljes-kijelzős háttérképek és nagyméretű képek mérete se haladja meg az 1MB-t. Ha 1MB-nál nagyobb a fotód, akkor méretezd át.
• Minden más képnek legalább 300KB alatt kellene maradnia, de lehet sokkal kisebb is.
• Ha teljes-kijelzős háttérképet használsz (amiről hamarosan szó lesz a bejegyzésben), akkor tölts fel egy 2000 px szélességű képet.
• Ha van lehetőséged az általad használd grafika programban, hogy webre optimalizált minőségben mentsd el a képet (save for web), akkor mindig használd ki.
• Használhatsz olyan webes szoftvereket, mint a TinyPNG és társai. Ezekből elég sokat találsz ma már, és habár nem egyforma hatékonysággal teszik a dolgukat, mindegyik hatékonyan képes csökkenteni a fotód méretét.

Használj képaláírást és alt textet!

A képek szöveges információkkal való kiegészítése révén tudod keresőoptimalizálni őket. Ez persze elsősorban az eredeti képeknél fontos, nem a stockfotóknál. Egy képaláírás az embereknek is segíthet a kép jobb megértésében, nagyobb eséllyel olvassák el a képaláírást, mint a kenyérszövegedet. Ugyanakkor persze az is igaz, hogy felesleges erőltetni a képaláírásokat ott, ahol nincs szükség rájuk.

Az alt textek a képek szöveges megfelelői, ha a böngésző nem jeleníti meg a képet. Az alt text lényege, hogy leírja a kép tartalmát. SEO-szempontból fontos, mivel hasznos információkat ad a keresőmotoroknak, melyek ezeket az információkat is felhasználják, amikor képeket kell megjeleníteniük az egyes keresésekre.

A képhez kapcsolódó szövegek közé tartozik még a megfelelő fájlnév is, hiszen ez is szöveges információ. SEO szempontból természetesen a kulcsszavakat magukba foglaló képek jelentik az optimális választást. Az eredeti fájlneveket gyakran át kell forgalmaznod oly módon, hogy az a lehető legjobban leírja azt, ami a képen látható. Ez segít a keresőmotoroknak megérteni a képeidet. Ugyanakkor persze fájlnevekről van szó, tehát túl hosszúra ne nyúljanak.

Ne feledkezz meg a felhasználási jogokról!

Amikor képeket keresel a neten, azt mindig vedd figyelembe, hogy azoknak jogtulajdonosaik vannak. Ha csak nem adnak kifejezett engedélyt a képek használatára – illetve jelzik a használat korlátait -, nem használhatod fel a képeiket következmények nélkül.

A weben egyébként számtalan olyan oldalt találsz, ahol szabadon felhasználható képeket kínálnak. Nyilván a választék nem olyan széles, mint ha a teljes webes képi tartalomból válogatnál, de legalább legális.

Miért és hogyan használj emberekről készült fotókat a weboldaladon?

Az emberekről készült képek egyfelől nagyon hatékonyak, amikor a látogatóidat akarod meggyőzni. Ennek alapvető oka az, hogy arcokkal emberibbé teszed a weboldalad, és érzelmi kapcsolatot alakítasz ki a felhasználókkal, akik egyébként is sokkal jobban felfigyelnek azokra a képekre, melyeken emberek láthatók. Másfelől azonban akadnak problémák is az arcokat mutató felületekkel, így nem minden esetben optimális választás egy-egy emberi arcot mutató kép. Helyette egy kicsit trükközni kell, de erre mindjárt rátérünk. Először lássuk az előnyöket!

Milyen pozitívumai vannak az emberi arcokról készült képeknek?

Amikor emberi arcokat vagy egyszerűen embereket látunk, akkor azt érezzük, mintha kapcsolatba lépnénk a céggel. Minél nagyobbak és minél inkább a középpontba vannak helyezve az emberi arcok egy weboldalon, annál erősebbé válik az érzelmi kapcsolat. A képek segítenek a látogatóknak abban, hogy gyorsabban felmérjék, mi található a weboldaladon, és megállapítsák, hogy ennek ők részesei szeretnének-e lenni vagy sem.

Amikor látnak egy emberi arcot, akkor felmérik, hogy ők is olyanok-e, vagy esetleg olyanok akarnak-e lenni, mint a fotón látható személy. Ha a válasz igen, akkor megnő az esélye az elköteleződésnek, mivel ez azt jelzi, hogy kapcsolódni tudnak a termékedhez vagy szolgáltatásodhoz.

Meghatározzák a weboldal érzelmi hangvételét

Nyilván Te is tapasztaltad már, hogy ha valaki nevet, akkor egy idő Te is együtt nevetsz vele, ha fáradt és ásítozik, Te is ásítozni fogsz. Ugyanez igaz minden érzelemre. Az érzelmek átadhatók, ezáltal meghatározható az interakciók érzelmi hangvétele. Az emberek azért figyelnek tudattalanul is az arcokra és az azokon megjelenő érzelmekre, mert így tudnak megfelelően viszonyulni a többi emberhez.

Ugyanakkor mivel kultúránként és koronként is változik, hogy egyes arckifejezéseket miként dekódolnak az emberek, ezért fontos, hogy tisztában legyél azzal, miként fogja értelmezni a közönséged az általad bemutatott arcokat.

Lehet tehát arra törekedni, hogy érzelmeket kapcsolj a termékeidhez azáltal, hogy ezeket emberi arcokról készült fotókon jeleníted meg ezeket az érzelmeket. Ez az oka annak is, hogy nagyon sokan használnak mosolygó arcokat a hirdetésekben azért, hogy pozitív kapcsolatot alakítsanak ki a közönségükkel.

Bizalmat keltenek

Ha a weboldaladon a cégeddel kapcsolatban álló embereket mutatsz, azzal növelheted a feléd irányuló bizalmat. Milyen fotókra van szó?

• Bemutathatod a cég dolgozóit.
• Bemutathatsz olyan embereket, akik kapcsolatba kerültek a termékeddel vagy szolgáltatásoddal.
• Az ajánlások mellé is tehetsz emberi arcokat, hogy hihetőbbek lesznek.

Minél “valódibbnak” tűnnek a weboldaladon látható emberek, annál jobban meg fognak bízni benned a látogatók. Azért nem jók a modellekkel készített, hamisnak látszó fotók, mert nem azt mutatják meg, hogy valójában miként lépnek kapcsolatba az emberek a termékeddel, vagy kik állnak mögötte. Ez pedig inkább kártékony, mint hasznos. Ami igazán hatékony, ha sikerül bemutatnod a cég mögött állók valódi személyiségét.

Vezetik a felhasználók tekintetét

Az emberi arcokról készült fotók nem csak arra alkalmasak, hogy érzelmi kapcsolatot alakítsanak ki a látogatókkal. Arra is képesek, hogy végigvezessék őket a weboldalon. Mivel az emberi arcok sokkal jobban felkeltik a figyelmet, mint bármilyen más webdesign elem, ezért hatékonyan használhatod ezeket a fotókat arra, hogy a látogatók tekintetét olyan pontokra irányítsd a weboldalon, melyek neked fontosak.

Ha például egy fotón látható tekintet a CTA-dra irányul, akkor a legtöbb felhasználó is oda fog nézni. A felhasználóknak ugyanis néha kell egy kis segítség ehhez. Ezáltal jelezheted nekik, hogy hova is nézzenek az oldalon, és mi legyen a következő lépésük.

Mivel a felhasználók követik a fotókon szereplő emberek tekintetének irányát, így pontosan oda néznek, ahová akarod. Ez a reakció teljesen természetes, és anélkül megtörténik, hogy gondolkodniuk kellene rajta. Tehát, ha azt szeretnéd, hogy az emberek görgessenek, akkor a lefelé mutató nyíl helyett – vagy annak megerősítéseként -, egy lefelé néző arcot is elhelyezhetsz az oldalra. Ha felfelé néznek a fotón szereplő emberek, akkor a felhasználók tekintete a navigációra fog irányulni. És így tovább.

De gondot is okozhatnak az emberi arcokat mutató képek

Tehát, mint azt elmondtuk, az arcokkal emberközelibbé teszed a weboldalad, és érzelmi kapcsolatot alakítasz ki a felhasználókkal. Akik egyébként is sokkal jobban felfigyelnek azokra a képekre, melyeken emberek láthatók. Ugyanez érvényes a hirdetéseknél is, ahol melegséget árasztanak és érzelmeket váltanak ki az emberekről készül fotók. Tim Carr szerint ugyanakkor az arcokat mutató képek jelentős mértékben rontják például a hirdetési teljesítményt, de egy weboldalon is érdemes lehet óvatosabban kezelni őket. Először elmondjuk, mi lehet ennek az oka, majd javaslatokat is adunk a megoldásra.

Hol a hiba?

Tehát, mint tudjuk, a tekintetünk mindig keresi az emberi arcokat. Így teszünk a weboldalakon is. Ebből következik a designban az az elgondolás, hogy ha emberi arcokat használunk, akkor oda tudjuk vonzani a tekintetet. És ez valóban így van. A gond csak az, hogy a figyelem felkeltése a dolog könnyebbik része, ugyanis nekünk általában arra van szükségünk, hogy ezt a figyelmet fenntartsuk az üzenetünkre irányítva.

Nem megy át az üzenet

Emellett megfigyelhető egy másik jelenség is, amikor képekről van szó: az emberek hajlamosak csak a képre figyelni, és nem foglalkoznak a mellette lévő szöveggel. A látogatók egyszerűen átugorják a címsort és a fotóra összpontosítanak. Ezt remekül bemutatta egy szemkövetéses vizsgálat, melyben egy weboldal egy kisgyereket mutatott, ami közvetlenül az olvasóra tekintett. Habár az oldalon hangsúlyos volt a szöveg is, a figyelem legnagyobb része nem erre, hanem a fotóra irányult. Márpedig marketing szempontból, ha például ez egy hirdetésnél így történik, akkor az bukás, hiszen maga a kép nem tudja átadni mindazt azt információt, amit át kellene adni. De ugyanez érvényes lehet egy weboldalnál is.

Elriaszthatnak látogatókat

Ez azonban csak az egyik probléma. A másik az, hogy bizonyos felhasználókat el is riasztanak az arcokról készült fotók, olyan módon, hogy ők ennek nincsenek is tudatában. Az emberek ugyanis rendkívül gyorsan véleményt alkotnak más emberi lényekről (a pillanatok alatt kialakuló első benyomás fontossága), Márpedig mindenkiben jelen van a nem tudatos elfogultság más emberekkel kapcsolatban.

Ez azt jelenti, hogy az embereket ábrázoló képek ugyan bizonyos látogatókat ugyan vonzani fognak, másokat viszont taszítani. Ez akkor különösen nagy gond, ha széles a célközönséged, így nagy a kockázata, hogy sokaknak nem fog tetszeni bizonyos emberi arc. Márpedig a cél alapvetően az, hogy a közönséged ráhangolódjon a weboldalra vagy hirdetésre, ne pedig elriassza őt. Úgy tűnik azonban, hogy az emberekről készül képek sok esetben az utóbbit teszik.

Tim Carr legalábbis azt tapasztalta a hirdetései tesztjei során, hogy az embereket ábrázoló anyagok majdnem mindig negatívan hatottak az olvasói vagy nézői reakciókra. Ugyanakkor az olyan hirdetések, melyek nem tartalmaztak fotókat vagy legalábbis egy semleges környezetet mutattak, mindig túlteljesítették az előbbieket.

Mit használj emberi arcok helyett a képeknél?

A környezetet hangsúlyozd!

Mivel a képek, fotók még mindig fontosak, viszont az emberi arcokról  készült fotók kockázatosak lehetnek, ezért úgy lehet a dolgot megkerülni, hogy bár látszanak az emberek a képeken, azonban az arcuk nem. Így például, ha egy kábel-szolgáltatást mutatsz be, akkor a tévét néző család ne szemből legyen látható, hanem hátulról, és a televízióra helyeződjön a hangsúly.

Termékképeket mutass!

A másik kézenfekvő lehetőség, hogy ha egy terméket akarsz eladni, akkor azt mutatod be. Ha például internetszolgáltatást kínálsz, akkor a képen egy laptop vagy egy tablet legyen látható, mellette természetesen az üzenettel. Habár sokan erről azt gondolják, hogy semmi személyesség nincs benne, nehezebben szólítja meg az embereket, mint egy élethelyzetet bemutató kép, Tim Carr szerint a gyakorlatban a terméket központba helyező megközelítés mindig jobb teljesítményt mutat a hirdetéseknél.

Használj kreatív illusztrációkat!

Az illusztrációk jól működnek az emberek elkerülhetetlen ítéletalkotásának elkerülésénél. A rajzolt illusztrációk ugyanis a kevésbé realisztikus megjelenítés révén nem váltják ki azokat a negatív hatásokat, mint a fotók. Tehát, ha azt szeretnéd bemutatni, miként használja valaki a terméked vagy a szolgáltatásod, akkor ezt rajzolt formában is megteheted, negatív következmények nélkül.

A lényeg tehát az, hogy az emberek társasági lények, és egymásra tudatalatti szinten adnak pozitív és negatív reakciókat. Márpedig, ha szeretnéd eladni a terméked vagy a szolgáltatásod, akkor kizárólag pozitív reakciókra van szükséged. Viszont ha emberi arcokat bemutató fotókat használsz, akkor azzal ronthatod a nézői reakciókat. Lehet, hogy egy kicsit nagyobb erőfeszítés, de érdemes az emberek helyett az őket használat közben körülvevő környezetre, a termékre helyezni a hangsúlyt, vagy rajzolt illusztrációkat alkalmazni.

Háttérképek használata a weboldalon

A háttérképek a weboldalak szerves részét jelentik. A modern webdesignban sokkal fontosabbá váltak, mint eddig bármikor. Ugyanúgy egy képet közvetít a cégedről, mint mondjuk a logód. Annál is inkább fontos elmerengeni egy kicsit a háttérképek kérdésén, mert manapság, amikor mindent eluralt a minimalizmus és sablonokból készülnek az oldalak, a nagy egyformaságban alig pár olyan elem van, ami segít kitűnni és kifejezni az egyéniségedet. Az egyik ilyen elem a háttér.

Mindez azonban csak akkor működik, ha a megfelelő képeket használod. Egy rossz választással eltorzíthatod azt az üzenetet, amit a látogatóid felé akarsz közvetíteni, sőt UX problémák is felmerülhetnek.

Egyszínű háttér

Ha nem olyan vagy, akinek trendek határozzák meg az életét, hanem komolyan, megfontoltan intézed a dolgokat, akkor választhatod a megszokott megoldást: az egyszínű hátteret. Ez néhány éve még alapértelmezett választás volt, gyakorlatilag nem nagyon volt más lehetőség, mint egyszínű hátteret alkalmazni.

Egy ilyen háttér jól nézhet ki, ugyanakkor nem állítható róla, hogy túlzottan izgalmas vagy egyedi lenne. Egy minimalista weboldal esetén pedig pont ez az, amit kompenzálni kellene. Egy egyszínű háttérrel már végletesen minimalistává válik a weboldalad, egész egyszerűen nem lesz képes felkelteni az emberek figyelmét, és unalmassá válik.

Technikailag az egyszínű háttér nem okoz majd sok gondot. Például reszponzív weboldalakon egyáltalán nem lesz problémád azzal, hogy mekkora kijelzőre kerül a háttér. Habár az egyszínű háttér egyszerűnek tűnik, azonban ilyenkor is van néhány dolog, amire figyelni kell:

• A háttér és a szöveg kontrasztja, valamint a színek párosítása megfelelő legyen.
• A kiválasztott színek érzelmi hatást gyakorolnak a látogatókra: felélénkítik vagy épp megnyugtatják őket.
• A színek nem semlegesek, gyakran erősebb a hatásuk, mint egy fotónak.

Az olyan színek, melyek a színkörön egymáshoz közel találhatók, inkább megnyugtatók a látogatók számára – természetesen annak függvényében, hogy milyen színt választottál -, miközben az egymással szemben lévő színek felkeltik a figyelmet, ha háttér-előtér kombinációba kerülnek.

Minták használata háttérként

A következő megoldást a minták használata jelenti. Az egyszínű hátterekhez képest az az előnyük, hogy miközben ezek is alapvetően egyszerű megoldást jelentenek, mégis megmutatható általuk némi egyediség, mélységet adnak a designnak. A mintáknál is ki lehet használni a színek erejét, vagyis kiválthatók érzelmek, ugyanakkor a minta révén különlegessé tehető a megjelenés.

Mivel egy minta folyamatosan ismétlődő elemekből tevődik össze, így technikailag elvileg nem okoz gondot, hogy milyen méretű kijelzőn jelenik meg. Ugyanakkor arra figyelni kell, hogy kisfelbontású kijelzőn más lehet a hatása a mintának, mint óriási felbontásnál, nagy kijelzőn. Emellett az is fontos, hogy ne váljon nagyon erőssé a mintázat, ne követeljen túlságosan sok figyelmet a felhasználótól. De figyeljünk arra is, hogy

• a minta nagyon enyhe kontrasztban legyen a háttérszínnel,
• megtörhető whitespace-ekkel, ami azt jelenti, hogy megpihenhet a szem,
• különböző kijelzőméreteknél lehetőleg ugyanannyi minta jelenjen meg minden kijelzőn,
• vagy olyan nagy legyen a minta, amennyire lehetséges, hogy ne zavarja a felhasználókat még nagyfelbontású és nagyméretű kijelzőn sem.

Textúrák használata háttérként

A textúrák és a minták abban különböznek, hogy míg előbbiek kicsi, ismétlődő elemek a háttérben, addig a textúrák nagyobbak és nem ismétlődnek. A textúrákat célzottan és átgondoltan érdemes használni a designban. A textúrák képesek vezetni a felhasználók tekintetét, és segítenek a tartalom strukturálásában. Az alábbi példában textúra jelenik meg, mely segíti az információk befogadását, és tökéletesen passzol a weboldal stílusához:

A textúrák arra is alkalmasak, hogy kiemeljenek bizonyos elemeket a weboldalon. Felhívják a figyelmet például egy call to action gombra, vagy egy olyan területre, amire szeretnéd, hogy az emberek odafigyeljenek. Képes elválasztani a tartalmat a weboldal többi részétől, ahogy az alábbi példán is látszik:

Egy textúra a háttérben emellett képes a márka azonosítására és identitása bemutatására. A következő példán látható, ahogy a texturális háttér még inkább előtérbe állítja a szöveget és egy egyedi környezetet teremt a tartalom számára:

Hogyan használd a textúrákat?

Az egyszerű és nem tolakodó textúrák segítenek a tartalom kiemelésében. Egy igazán jó textúrát talán nem is vesznek észre a felhasználók. Egy ilyen textúra javítja a szöveg olvashatóságát, miközben ad egy érdekes hátteret az egész designnak.

Ugyanakkor van, amikor a nagyobb, erőteljesebb textúrák működnek jól egy weboldalon. Ez különösen akkor igaz, ha a felhasználói felület egyszerű, de ismétlődő elemekből áll. Számos tényezőt figyelembe kell venni ennél a megoldásnál, és a mintát hozzá kell tudni illeszteni a felület többi eleméhez. Érdemes figyelni az analitikát és a felhasználói viselkedést az oldalon, mert kiderülhet belőle, hogy a háttér rontja-e a weboldal befogadását. Ha éles esés látszik a konverziókban a textúra használata után, akkor az azt jelzi, hogy át kell gondolni a használatát.

Színátmenetes textúrák alkalmazása mélységet és stílust ad a desginnak. Amikor egy texturális háttérrel párosul, akkor az javíthatja a teljes weboldal hatékonyságát. Létrehozhatók egyedi gradiens-kominációk, melyeknek saját mélysége és mintája van. Az alábbi példán egy olyan többszintes gradiens látható, mely előtérbe tolja az animációkat és a weboldal más elemeit, valamint kiemeli a call to actiont:

Különböző színvariációk is kombinálhatók texturákkal, így még érdekesebbé válik a háttér. Az alábbi példán egy olyan vidám texturális háttér látható, melynél ráadásul két színt kombinált össze annak tervezője. Ez a megoldás segít a felhasználók tekintetét a szövegre irányítani, miközben az egész vizuális design erőteljes és kiegyensúlyozott.

Absztrakt képek

Az absztrakt képek sokszor egyszerű megoldás jelentenek, még ha nem is feltétlenül könnyű a használatuk háttérképként. Jól alkalmazhatók olyan esetben, amikor valami egyedit akarsz adni a minimalista weboldaladhoz, de nem akarod követni a ma olyannyira népszerű, óriási háttérképek trendjét.

Az absztrakt képek az egész weboldalnak adnak egyfajta kreatív kisugárzást, ugyanakkor megmarad a fókusz a szövegeken. Hátránya, hogy a design esetleg unalmassá válhat, a visszatérő látogatók előbb ráunnak, mint egy jó fotóra. Ez persze függ az absztrakt háttérkép összetettségétől, de egy egyszerű megoldásnál gyakorlatilag nincs semmi, ami egy második látogatáskor is érdekes lehet benne. Ha nem tudod mire gondolunk, akkor mutatjuk:

Háttérfotó, hero image

Trendi lett mostanában a teljes kijelzőn terpeszkedő háttérképeket használni a weboldalakon. Ebből a szempontból megkülönböztetünk háttérképet és úgynevezett hero image-et. Utóbbi egy olyan kép, mely a hajtás feletti részben jelenik meg és közvetlenül kapcsolódik az alatta lévő tartalomhoz. Segít abban, hogy megfogalmazza a weboldalad üzenetét, egy fontos funkcióra felhívja a figyelmet. Erről hamarosan részletesebben is beszélünk.

Ezzel szemben a háttérkép akkor jelenik meg a felhasználók számára, amikor elkezdenek görgetni. A háttérképek inkább csak témáját, hangulatát szabják meg a weboldalnak, és nem valamilyen egyedi vonatkozására próbálják felhívni a figyelmet.

De nemcsak egymást birkaként való követése áll a jelenség mögött, hanem a hatásosság és a praktikum is. Hiszen míg teljes erővel nyűgöz le egy asztali gép nagyméretű monitorán a faltól falig tartó fotó, addig értelmezhető marad az okostelefonok kijelzőjén is, merthogy azt is maximális, tehát a lehető legnagyobb szélességben elfoglalja. Minél nagyobb méretű egy kép, annál jobban át tudja adni a felhasználóknak egy márka identitását, de annál hatékonyabban működik a landing oldalakon is.

A háttérképeknek és háttérvideóknak mára kialakult egy felhasználási gyakorlata, mely segíti a felhasználói élmény és a usability optimális kialakítását és a tartalom hatékony megjelenítését. A képnek természetesen összhangban kell lennie a cég imidzsével és a célközönség jellemzőivel is. Ha ezeket pontosan sikerül eltalálni, akkor fogja elérni a megfelelő hatást a felhasználóknál. Egy teljes oldalt betöltő kép választásánál nagyobb a felelősség is, ahogy nagyobb az általa kiváltott hatás is, így érdemes időt szánni rá.

Mire figyelj a háttérképeknél?

Ne kezeld különállóként

a hátteret és az előtérben szereplő információkat! Ezek együttesen képesek elérni egy bizonyos eredményt vagy célt. A legkomolyabb, háttérképekkel kapcsolatos hibák pont abból származnak, hogy külön kezelik a háttérképet, amire aztán attól szinte teljesen függetlenül ráhelyeznek valamit.

Figyelj az egyensúlyra!

Amikor helyesen használod, akkor a háttérkép a megfelelő üzenetet közvetíti az emberek számára. Ugyanakkor, ha túlságosan erős a kép üzenete, akkor elhomályosítja a többi weboldal-elemet. Felborul az egyensúly a hatalmas és kifejező kép és a weboldal többi része között. Ilyenkor ugyan hatással lesz a felhasználókra, azonban elvonja a figyelmet a sokkal fontosabb tartalomról.

Akár hero image-et, akkár háttérfotót használsz, a háttérkép vizuális jelként szolgál az emberek számára, de nem középpontba állítva.

Figyelj az olvashatóságra!

Az még nem elég, hogy választasz egy szép képet. Az első kérdés, amit fel kell tenned magadnak, hogy milyen hatással lesz az olvashatóságra a választott háttérkép? Ha ugyanis a látogatók nem tudják elolvasni a rajta lévő szöveget, akkor az egész weboldalad megbukott. Ezért amikor a szöveg mögé teszel egy háttérképet, megfelelő kontrasztnak kell lennie közöttük.

A szövegnek a háttérképen olvashatónak és könnyen átfuthatónak kell lennie. A kontraszt fontosságáról és kialakításáról egyrészt olvashatsz bővebben a színekről szóló anyagunkban, valamint a betűk kiválasztásáról szóló blogbejegyzésünkben, ahol eszközöket is ajánlunk a megfelelő kontrasztarány ellenőrzésére.

Ha nem vagy biztos abban, hogy jól olvasható a szöveged, viszont ragaszkodsz egy képhez, akkor is vannak lehetőségeid. Képszerkesztő vagy akár CSS révén homályosíthatsz a képen, módosíthatsz a kontraszton, rátehetsz egy layert, hogy olvashatóbbá váljon a szöveg. Emellett persze fontos a megfelelő betűtípus és betűméret választása, hiszen jelentős mértékben hozzájárul az olvashatósághoz.

Legyen a kép releváns és rendezett

Olyan fotót kell választanod háttérképként, mely valamilyen módon kapcsolódik a cégedhez és a weboldaladhoz. Ez azt jelenti, hogy kötődik ahhoz a helyhez, ahol jelen vagy, esetleg a termékedhez vagy a szolgáltatásodhoz. Ugyanakkor abba az irányba is érdemes tapogatóznod, hogy a képpel erősítsd a weboldalad üzenetét. A háttérképre mindig úgy gondolj, mint az átfogó márkastratégiád egy fontos részére.

Az is fontos, hogy a kép ne legyen zsúfolt, mert elvonhatja a figyelmet a tartalomról, még akkor is, ha homályosítod, vagy módosítasz a színén. Ez persze nem azt jelenti, hogy nem használhatsz mozgalmas vagy más nagy hatású képet. Csak azt igyekezz elkerülni, hogy a kép elnyomja a tartalmat!

Figyelj a minőségére!

Csak olyan képeket használj, melyek minősége kiváló, mert egyébként sérül a felhasználói élmény. A felhasználók néhány másodperc alatt eldöntik, hogy a weboldaladon akarnak-e maradni vagy sem. A háttérkép az első olyan elemek között van, melyet megpillantanak. Ezért, ha azt akarod, hogy jó benyomást szerezzenek a weboldaladról, akkor jó minőségű képet kell használnod.

A minél nagyobb, annál jobb elvét kövesd, ha a minőség a cél. Ugyanakkor figyelni kell a méretre is, hiszen egy óriási háttérkép jelentős mértékben lelassíthatja az oldalad. Ami fontos:

• ne tömörítsd olyan mértékben a képet, hogy az torzuljon vagy pixelessé váljon.
• Fotók esetében, illetve olyan képeknél, ahol sokféle szín, illetve színátmenet jelenik meg, jpg-tömörítést használj!
• Mintához használt képeknél viszont válts png-re!
• Ha arra van szükséged, hogy különböző méretekhez igazítsd a képet és megmaradjon a tökéletes megjelenés, akkor SVG-vel érdemes próbálkozni. Az SVG ugyanis lehetővé teszi a képméret változtatását minőségvesztés nélkül.
• Ha teljes képernyőszélességű háttérképet használsz, akkor 1920 pixeles szélességű (full HD) képet alkalmazz!
• 4K kijelzőkre viszont érdemes eltérő háttérképet használni.

Kerüld a stockfotókat!

Ma már egyre kevésbé javasolják a szakemberek a weben mindenhol megjelenő stockfotók használatát a weboldalakon. Eredetiségre és különbözőségre kell törekedni, melyhez nem ártanak a saját, egyedi képek sem. A nagyméretű, és a weboldal imidzsét alapvetően meghatározó háttérképeknél már végképp nem javasolt a stockfotók használata.

Legyen a háttered reszponzív!

Attól függően, hogy milyen kijelzőn nézed a weboldalad, változik az, hogy mennyi látszik a háttérképedből. Ez különösen akkor lényeges kérdés, amikor fotóról van szó, mint háttérképről. Ami esetleg lenyűgözőnek hat egy hatalmas monitoron, az borzalmas hatást válthat ki egy mobilon. A kulcsfontosságú részek ugyanis levágásra kerülhetnek, és a kép értelmezhetetlenné válik. Pedig 2018-ban a felhasználók már azt várják, hogy a tartalom tökéletesen igazodik minden általuk használt eszköz kijelzőjéhez.

Ehhez először is olyan képet kell választanod, mely jól illeszkedik a különböző képarányokhoz (függőleges, vízszintes, négyzet). Egy ilyen fotó várhatóan jól néz majd ki nem csak asztali gépen, hanem mobilon is. Arra is vetned kell egy pillantást, hogy a CSS miként kezeli a képeket a különböző kijelzők esetén. Például a background-size: cover; tulajdonsággal láthatóvá teheted az egész képet. Ugyanakkor valószínű, hogy egy kis igazításra szükség lehet a megfelelő megjelenítéshez minden eszközön.

Három megoldás van arra, hogy a háttérképed reszponzív legyen. Először is, a háttérkép ismétlődhet vízszintesen és függőleges irányban is, hasonlóan ahhoz, ahogy egy minta ismétlődik. De ez alapvetően csak absztrakt képeknél kivitelezhető megoldás.

Lehetséges olyan képet kiválasztani, ami ugyanolyan jól néz ki kicsi és nagy kijelzőn is. Attól függően persze, hogy milyen részletezettségű a háttérképed. Ez a megoldás általában jól működik például tájképeknél, ugyanakkor embereket ábrázoló fotóknál már nem annyira. Nem biztos, hogy egy 4K felbontású monitoron jól mutat egy képernyőt betöltő emberi arc.

Használj okos skálázást! Ez lenne a harmadik megoldás, ami elsőre valószínűleg furcsán hangzik. Ahelyett, hogy a képet mindig a megfelelő kijelzőmérethez igazítanád, úgy kell méretezned, hogy az nagyobb kijelzőknél mindig többet fedjen fel magából. Természetesen a legfontosabb részek minden kijelzőméretnél láthatóak maradnának, tehát a kisebb, okostelefonos kijelzőkön is értelmezhető maradna a háttérkép.

Mindez megoldható CSS-sel, illetve több háttérképpel a megfelelő felbontásokra. Ennek a módszernek a használatánál azonban meg kell győződnöd arról, hogy a felhasználóid mindig a legjobban optimalizált verzióját kapják a háttérképeknek.

Használj finom textúrákat!

Ha maradsz a mintáknál, akkor fontos, hogy olyat válassz, amelynél nem látszik sehol törés az illesztéseknél, vagyis egyetlen nagy képnek látszik az egész oldalon. Arra azonban figyelj, hogy nem minden textúra működik minden kijelzőméretnél, és a nagyméretű képfájlok használata rontani fogja az oldalad betöltési idejét.

Fontos a kifinomultság, hacsak nem brutalista megjelenésre törekszel. És itt is figyelned kell arra, hogy ne terheld túl a mintákkal a felhasználókat. Keress olyan képeket, melyekre a finom vonalak és színek jellemzőek, és amelyek kontrasztosak a tartalmaddal.

Kezdd nagyfelbontású képekkel, aztán vágj!

Amikor letöltesz képeket, hogy azokat felhasználd majd háttérképként, akkor mindig a lehető legnagyobb felbontást válaszd. Ez lehetőséget nyújt számodra a további szerkesztésre, vágásra, hogy végül a megfelelő méretű képet kapd. Hogy mi a megfelelő méret, a weboldaladon használt tároló méretétől függ. Míg bizonyos textúrák megfelelően nyújthatók vagy ismételhetők, más fotóknál ez nem működik, így vágnod kell a megfelelő szélességre. Használhatsz CSS média lekérdezéseket, hogy más kijelzőméretek meghívják a kisebb verziókat.

Végül pedig, amit még fontos észben tartani, hogy minden webdesign munka, így a háttérképek kiválasztása, megalkotása is az “üzenettel” kezdődik, amit a weboldal közvetíteni akar a közönsége felé. Az üzenet pedig alapvetően szavakat jelent. Tehát akármilyen furcsának is tűnik, a háttérképek kiválasztását azzal kezdd, hogy meghatározod mit is akarsz elmondani ezen képek előterében, tehát első körben össze kell állítanod a szöveg első vázlatát.

Ezzel a megoldással lehetsz csak biztos abban, hogy az üzenet és a háttérkép teljes összhangban lesznek egymással. Ha nem így teszel, akkor azt kockáztatod, hogy a háttérkép kívülállóvá válik, és elüt majd a weboldal tartalmától.

Hogyan válaszd ki a főoldali, hajtás feletti nagyméretű képet (hero image-et) a weboldaladra?

Most arról a képről beszélünk, amit angolul hero image-nek hívunk, és általában beteríti az egész, hajtás feletti részt háttérként, vagy legalábbis nagy területet foglal el ott. Erre a képre az jellemző, hogy a legnagyobb méretű kép a weboldalon. Megjelenhet egyetlen ilyen kép, vagy akár karuszelben több is, és lehet statikus vagy dinamikus.

Miért van fontos szerepe egy weboldalon a hero képnek?

• Mert felkelti az érdeklődést és kialakítja az első benyomást – ahogy megérkezik a látogató a weboldaladra, az első vizuális benyomást a hero image-től kapja. Ezt a képet fogja azonosítani a cégeddel, a weboldaladdal. Fontos, hogy ez a kép figyelemfelkeltő legyen, mert különben nem fogod felkelteni a látogató érdeklődését.
• Mert információt ad át – a felhasználók sokkal gyorsabban feldolgozzák a képi információkat, mint a szövegeseket. A hero kép sem csak azt a célt szolgálja, hogy vizuálisan lenyűgözze a látogatót, hanem emellett információt is át kell adnia. Azt az üzenetet, amit el akarsz mondani a cégedről, termékeidről, szolgáltatásaidról.
• Mert irányítja a látogatót – a kép kompozíciója a megfelelő irányba képes vezetni a felhasználót a weboldalon, például a tekintetét a call to action gombra irányítja.
• Mert érzelmet vált ki – mint tudjuk az érzelmek fontos szerepet játszanak a felhasználói élményben, mely által a weboldal és látogatói közötti kommunikáció ember-szerűbbé válik. A hero képek tökéletesen alkalmasak arra, hogy érzelmeket adjanak át a kép tartalmán, a színeken, formákon keresztül, kialakítva már az első pillanatokban a kívánt érzelmi ráhangolódást a weboldalra és a termékre.
• Mert a látogatók szeretik a szép weboldalakat – ha a hero image esztétikailag vonzó, akkor már egy nagy lépést tettél abba az irányba, hogy a weboldalad szép legyen. Miért fontos ez? Mert a látogatók sok hibát megbocsátanak az olyan weboldalaknak, melyek a szépségükkel lenyűgözik őket, így könnyebben kialakíthatod a jó felhasználói élményt.

Milyen típusú képeket használhatsz egy hero image-nél?

Az, hogy milyen típusú kép kerül a hajtás fölötti területre és az mit üzen a látogatóknak, attól függ, hogy az adott oldalnak mi a célja, és milyen típusú weboldalról van szó. Természetesen azonnal meg kell fognia a látogatót, ugyanakkor ki kell fejeznie a weboldalon található ajánlat vagy információ előnyeit természetét.

Éppen ezért a webáruházak jellemzően olyan hero képet használnak, mely a legfelkapottabb terméküket, legjobb ajánlatukat mutatja be. Egy hero image lehet:

• Fotó – melynek az az előnye, hogy egy az egyben képes megmutatni a terméket, vagyis azt, amivel az ügyfél a valóságban is találkozni fog, ha megveszi. A fotók nagyon világosak, könnyen értelmezhetők az emberek számára. Egy weboldalon használva gyorsan, erős asszociációkat kelt, melyek aztán létrehozzák a megfelelő érzelmet a felhasználóban. Ráadásul a webáruházakban a fotó az alapvető termék-bemutatási eszköz, ahol fontos azt az elvet érvényesíteni, hogy „azt kapod, amit látsz”.
• Illusztráció – komoly webdesign-trenddé vált az elmúlt években a rajzolt illusztrációk használata. Grafikákkal remekül át lehet adni információkat amellett, hogy kifejezik a weboldal vizuális eredetiségét.
• 3D-s grafikák – a rajzolt illusztrációk egy egyre népszerűbbé váló típusa a 3D-s grafikáké. Az ilyen képek készítése persze elég költséges lehet, ugyanakkor egy jól elkészített 3D-s grafika erőteljes hatást kelt. Ezért is olyan népszerűek hero image-ként.

Mire figyelj a hero image kiválasztásánál?

A felbontásra

A hero image esetében fontos a minőség, ami persze azzal jár, hogy nő a méret, és ezzel lassulni fog az oldal betöltődése. A lassú betöltődéssel pedig azt kockázatod, hogy a felhasználók idő előtt lelépnek. Fontos tehát a lehető legjobb optimalizálás, és hogy meglegyen az egyensúly a méret és a minőség között.

Legyen értelme

Kirakhatsz a hajtás fölé egy gyönyörű naplementéről készült fotót, de ha mondjuk fogorvosi szolgáltatásokat kínálsz, akkor ennek nem igazán van értelme. A képnek el kell mondania valamit a weboldaladról és a cégedről. A relevanciával adhatsz értéket a látogatóknak, és ezzel tarthatod fenn az érdeklődésüket.

Mutassa meg, miben különbözöl a többiektől

Ne félj megmutatni már a hero image-ben sem, hogy miben vagy jobb a konkurenciánál, mitől vagy más. Ha itt ezt ki tudod fejezni egy képpel, akkor az segít abban, hogy a látogatók előbb megértsék a szolgáltatásod lényegét.

Ne csak egyet válassz

Nagyon valószínű, hogy amikor elképzeled a weboldalad, akkor van egy kép a fejedben arról, hogy milyen képet szeretnél látni a főoldal tetején. Nem árt azonban, ha több lehetőséget is összegyűjtesz, és gondosan mérlegelsz, mielőtt választasz. Mert nem biztos, hogy az a legjobb választás a valóságban, amit Te elsőként annak gondolsz.

Váltson ki érzelmeket

Mindig nagyobb esélyed van a konverzióra, ha a látogatókhoz érzelmi szinten is kapcsolódni tudsz. A képnek azt az érzelmet kell kiváltania, amit érezniük kellene szerinted a látogatóknak a weboldaladon. Túlzásokba ugyanakkor ne ess, mert az visszafelé is elsülhet.

Legyen összhangban a tartalommal

Ha például olyan hero image-et használsz, mely minimalista és sok rajta a whitespace, akkor nem jó, ha a lejjebb görgetve egy zsúfolt tartalommal találja szembe magát a látogató. Ilyenkor összefüggéstelen a designnyelv, és ez csak megzavarja a felhasználót. Fontos tehát, hogy össze legyen hangolva a kép és a weboldal többi része, melyet a hero image kiegészíté és erősít.

Minden kijelzőn jól mutasson

A fotódnak minden méretű kijelzőn egyformán hatásosnak kell lennie. Lehet, hogy ami jól mutat egy PC monitorán, nem értelmezhető okostelefon kijelzőjén, mert kicsiben már nem látszanak jól a részletek.

Emelje ki a CTA-t

Jó pár oldalon a CTA a hajtás feletti részre kerül. Ebben az esetben a kép választásánál a CTA-t is figyelembe kell venni, hiszen a legfontosabb a kattintás. A képnek segítenie kell abban, hogy a látogató figyelme a CTA-ra irányuljon, amikor megérkezik az oldalon, anélkül, hogy erőltetetten nagy vagy feltűnő lenne a gomb.

Erősítse a márkád

Ha a weboldaladon egy bizonyos színsémát használsz, mely passzol a logódban szereplő színekhez, akkor célszerű, ha a fő képen is ezek a színek köszönnek vissza, és dominálnak. Természetesen egy kép teljes színpalettája általában szélesebb, mint a márka színei, de egy overlay-jel vagy egy gradienssel minden kép a márka színéhez igazítható.

Frissítés, 2021.08.02.:

Milyen hibákat ne kövess el a hero image-ed kiválasztásánál?

Ha a hero image-nél elrontasz valamit, akkor az egész weboldalad kárát látja, hiszen ez a fő kép a weboldaladon, a legelső benyomást alakítja ki a látogatóban. De milyen hibák merülhetnek fel?

Túl általános képet választasz

Ha a képed nem mond semmit a felhasználónak, sablonos, nem mutat semmit, vagy pont olyan, mint a konkurenciáé, nem kelti fel a figyelmet, akkor nem is fog igazán működni. Még ha fel is használsz más képeket inspirációként, próbálj meg egyedi lenni, ahelyett, hogy követnéd a tömeget.

Stockfotót használsz

Ha már a semmitmondó, általános képeknél tartunk, akkor meg kell említenünk itt is a stockfotókat, melyek tipikusan ebbe a kategóriába tartoznak. Gyors és olcsó megoldást jelentenek, csak az a baj, hogy a legtöbbön látszik az eredetiség hiánya, ráadásul más weboldalakon is találkozhatnak a te fő képeddel a látogatók. Tehát, ha máshol nem is, legalább a hero image-nél kerüld el a stockfotókat!

Túlzsúfolt képet használsz

Lehet, hogy Te is szeretnéd a lehető legtöbb információt elhelyezni a hajtás felett a weboldalon, de ne tedd! Sokan akarnak túl sokat elmondani a hajtás feletti részen: összetett kép, többféle szöveg, CTA-k, animációk, egyéb weboldalelemek is felkerülnek ide.

Persze hasznos, ha a fontos információk a hajtás fölé kerülnek, azonban nem tesz jót a weboldalad vizuális megjelenésének, így pedig a felhasználói élményre is negatív hatással lehet. Ezért mindig csak a legszükségesebb mértékben bonyolítsd hero image-et és ami rákerül: használj egy egyszerű képet, melyet a másodperc törtrésze alatt felfog a látogató, és a szöveges üzenetet se bonyolítsd túl.

Félreérthető a kép

A hero image nem hazudhat az embereknek, nem vezetheti félre a látogatót azzal, amit kifejez rólad, a cégedről, termékeidről, szolgáltatásodról. Ez az első benyomás a weboldaladról, ezért fontos, hogy ne csak egyedi, hanem őszinte is legyen a lép.

Túl harsány színek

A jó színpaletta és a megfelelő kontraszt a hero image-ednél az egész weboldaladról szerzett benyomást megváltoztathatja. Fontos átgondolni, hogy milyen színeket használsz, azok érzelmi hatása alapján. Sokan az egyediségre, a figyelem felkeltésére törekedve túl sok vagy túl erőteljes színeket használnak a hero image-nél. Pedig, ha rossz a színválasztás, túl harsányak a színek, az elijesztheti az embereket.

Nem gondolsz a weboldalad sebességére

Ha túl nagy fájlméretű képet használsz, az lelassíthatja a weboldalad betöltődését. Ha pedig túl lassan töltődik be a kép és így az oldalad, akkor az negatív hatással lesz a visszafordulási arányra. Hogy mekkora a képfájlod mérete, az több tényező függvénye (a linkelt bejegyzésben sokat írtunk róla), de többek között hatással van rá az is, hogy mi látható a képen. Ezért mindig vedd figyelembe a képválasztásnál a fájl méretét is.

Hogyan használj stockfotókat a weboldaladon?

Webdesign-tanácsként gyakran elhangzik – mint ahogy ebben a bejegyzésben is korábban -, hogy ne használjunk stockfotókat a weboldalunkon, mivel ezek nem eredetiek, mesterkéltnek tűnnek, és nem árulnak el semmit rólad és a cégedről. Ez igaz, de ha mégis ez tűnik az egyetlen járható útnak, akkor mi a legjobb megoldás a használatukra?

A stockfotók jelentős része nagyon sablonos. Mindenkinek felrémlenek a furcsa mosolyra húzódó arcokról vagy az üzletemberek kézfogásairól készült képek. Ugyanakkor jó választás esetén olcsók – akár ingyenesek – és jó minőségűek, sőt még akár jobban is teljesíthetnek, mint azok a fotók, melyeket mi készítünk. Megfelelő használattal segítséget jelenhetnek a weboldalunknak, a hirdetéseinknek, vagy blogbejegyzéseinknek.

Először is: gondosan válassz!

Persze ehhez az kell, hogy ne pusztán egy olyan képet válassz ki, ami “jól néz ki”, hanem egy olyat, amivel érzelmeket válthatsz ki, és ami különbözik azoktól, amit mindenhol máshol megtalálsz a weben.

Az emberek remekül emlékeznek a képekre. Ha valamit hallanak, akkor annak már csak 10 százalékára emlékeznek 3 nap múlva. Ugyanakkor, ha az információ mellé teszel egy képet is, akkor 65 százalékra növeled az arányt. Gondolj a hirdetésekre: benned is inkább a képek maradnak meg, mint a szövegek, nem? Ennek oka, hogy az agykéreg 30 százaléka részt vesz a vizuális jelek feldolgozásában, míg az érintésekre csak 8 százalék jut, a hallásra pedig 3 százalék.

Ha egy általad használt stockfotó ugyanaz, mint amit több más weboldalon is láthattak az emberek, akkor az tudat alatt negatív benyomást kelt bennük. Az emberek korábbi tapasztalataikat vetítik rá a Te fotódra, ami csökkenti a bizalmat, és negatív asszociációkat kelthet. Vagyis ahelyett, hogy erősítenék a tartalmadat ezek a sokat látott képek, inkább rontasz a helyzeten.

A hitelesség fontossága

A közösségi média világában a hitelesség a kulcs. Ma már a közösségi médiához fordulunk, ha valami valódit szeretnénk látni, mely az ismerőseinktől vagy akár a kedvelt márkáinktól érkezik. Általában a legeredetibb és leghitelesebb tartalom a legérdekesebb is. Ez látszik például a Stories sikerénél a Snapchat vagy akár az Instagram esetében.

A legtöbb stockfotóval az a baj, hogy nem hitelesek. Ezekkel a képekkel nem tudsz igazán kapcsolódni a közönségedhez. Túlságosan műviek, mesterkéltek, legtöbbször nem tudják a hitelesség illúzióját kelteni.

A hitelesség rendkívül fontos, mivel az emberek ösztönösen azokat a márkákat kedvelik meg, melyek hitelesebbnek tűnnek, mint a versenytársaik. A hitelesség valami olyasmit jelent, hogy a dolgok, amiket mondunk és teszünk azonosak azzal, mint amiben hiszünk. És nem csak azért mondunk valamit, hogy az segítsen eladni a termékünket vagy szolgáltatásunkat. Amikor egy képre rátekintünk, akkor a másodperc törtrésze alatt eldöntjük, hogy az hiteles vagy sem. Ha egy fotó hamisnak néz, vagy bármi más módon hiteltelennek tűnik, akkor elveszítjük a márka iránti bizalmat.

Másrészt viszont egy hiteles kép bizalmat, megbízhatóságot jelez. De mi kell ahhoz, hogy egy kép hitelesnek tűnjön? Egyrészt valódi emberek legyen rajta. Nyilvánvaló, hogy a stockfotókon látható emberek modellek. Tehát, amikor stockfotót kell választanod, akkor azt kell megfontolnod, hogy

• A képen látható emberek eredetinek vagy pedig modelleknek tűnnek?
• Tökéletes a hajuk, foguk, ruhájuk?

Amikor kiválasztasz egy fotót, akkor olyat keress, ami valóságosnak tűnik. Ehhez tartozik, hogy az általuk bemutatott helyzetek se legyenek mesterkéltek. Az emberek nem vigyorognak a nap 24 órájában, ugyanakkor a stockfotóknál ez nagyon gyakori. Nyilván az emberek szeretnek mosolygó embereket látni, ez pozitív érzéseket kelt bennük, ugyanakkor a természetességnek nem tesz jót a meredt műmosoly. Tehát olyan beállításokat keress, ahol nem pózolnak a szereplők.

Miként találd meg a tökéletes stockfotót?

A stockfotók úgy vannak kitalálva, hogy a tartalmak egy széles skálájához jól passzoljanak. Ez bizonyos szempontból remek dolog, másfelől viszont szerencsétlen. A képek ezáltal túlságosan általánosnak tűnhetnek. Pedig amikor a céges tartalmadhoz képet keresel, akkor az a célod, hogy valahogy kitűnj, megkülönböztesd magad. Ezt figyelembe véve, hogyan választhatod ki  a megfelelő fotót?

Használj olyan képeket, amelyek jól illenek a tartalmadhoz!

A képeknek nem olyannak kell lenniük, mint amelyek teljesen véletlenül csöppentek bele a tartalomba. Ahol lehetséges, a képek egészítsék ki a tartalmadat, minél jobban illeszkedjenek hozzá. Egy blogbejegyzésnél a felhasználók már a kép alapján tudják meg, hogy miről szól a tartalmad.

Gondolj a felhasználóidra!

Amikor a megfelelő képet akarod megtalálni, akkor mindig a közönségedre kell gondolnod először. Nyilván Te is azt szeretnéd, ha egy erős vizuális kapocs alakulna ki a kép és a márkád között, mely az általad kigondolt üzenetet közvetíti.

• Olyan fotót válassz, amelyik megerősíti a márkádat!
• A képed ne csak egyszerűen kitöltse a teret.
• Olyan képet használj, melynek jelentése van, és lehetőséget kínál arra, hogy kapcsolatba lépj a közönségeddel!

Használj új képeket!

A weben általában olyan stockfotók bukkannak fel, melyeket máshol már ezerszer láttunk. Lehet, hogy egyébként ezek a képek a legszebbek és a legjobbak, azonban mégsem a legjobb döntés ezeket használni. Inkább az újabb, frissebb, kevesebbet használt képeket keresd meg. A TinEye segítségével még azt is megállapíthatod, hogy az adott képet már hányszor használtak a weben.

Ellenőrizd a jogokat!

Mielőtt kitennél a weboldaladra vagy a hirdetésedbe egy képet, ellenőrizd, hogy milyen licenc vonatkozik rá, illetve adott esetben azt is, hogy a rajta szereplő személyek engedélyezték-e a fotó felhasználását. Akad néhány olyan oldal, mely ingyenes fotókat kínál, viszont lehetnek feltételeik a használatukra vonatkozóan. Néhány licenc csak a személyes használatot engedi, vagy a fotós hozzájárulását igényli, esetleg nem engedélyezi a kép átalakítását. Ezért mindig gondosan olvasd el, hogy milyen feltételek vonatkoznak egy kép használatára!

Hogyan teheted eredetibbé a stockfotókat?

Írj rá szöveget!

Nagyon gyakori megoldás külföldi blogposztoknál, hogy a képekre ráírják a kapcsolódó bejegyzés címét. Ez kapcsolatot teremt a kép és a szöveg között, miközben eredetibbé tetted a fotót.

Használj overlayt!

A színek rendkívül fontosak a webdesignban, ezért is foglalkoztunk egy külön bejegyzésben velük. A színek segítségével kialakíthatsz hangulatot, atmoszférát, és érzelmeket kelthetsz. Elsősorban olyan színeket használj, melyek kapcsolódnak a márkád image-éhez, mert így a képeket is összekapcsolod a márkáddal.

Vágd meg a képet!

A vágással egy kicsit eredetibb képet készíthetsz magadnak a stockfotókból. De ki is emelheted ezzel a megoldással azt a részt, ami számodra fontos, amire fel akarod hívni a figyelmet.

Változtass a kontraszton!

Kontrasztról akkor beszélünk, amikor két elem a képen különbözik. Tehát például eltérő színű a betű és a háttér. Előbbi lehet sötét, utóbbi világos. Egy fotó esetében is erősítheted a kontrasztot, például azért, hogy felhívd rajta valamire a figyelmet. Hiszen, ha egy dolog kiemelkedik a sötét háttérből a kontraszt révén, akkor mindenki felfigyel rá.

Homályosítsd el a hátteret!

Ezt a trükköt elsősorban akkor vetheted be, amikor feliratot helyezel a képre. Ez lehet a cégneved, de az első pontban említett megoldás, tehát egy kapcsolódó szöveg is. A homályosítással ki tudod emelni az előtérben lévő elemet, ráadásul a szöveg is olvashatóbbá válik általa.

Milyen hibákat követhetsz el stockfotók használatánál?

Habár az eddig leírtakból már sok minden következik a hibákra vonatkozóan is, azért külön is felsorolunk néhányat, hogy biztosan ne ronts el semmit.

Irreleváns képeket használsz

A képek üzenetet hordoznak, kifejezik a márkád identitását. Ezért figyelj arra, hogy az általad választott stockfotók is értéket adjanak a tartalmadhoz, plusz információt kínáljanak, és a megfelelő üzenetet közvetítsék a felhasználók számára. Annak nincs sok értelme, hogy mintegy helykitöltés gyanánt, vagy hogy legyen valami színes rész is a weboldaladon, mindenféle stockfotókat dobálj be az oldaladra. Ez nem javítja a felhasználói élményt, akár zavarja és akadályozza is a látogatókat, miközben nem jó SEO szempontból sem a lassabb betöltődés miatt.

Másolod a konkurenciát

Nagyon sok cég úgy áll hozzá a webdesignhoz, hogy megnézi, mivel állnak elő a versenytársak, majd ugyanazt megismétli a weboldalán, mondván: ha nekik bejött, akkor biztos működik a dolog. Az azonban nem működik a webdesign esetében, és a képek kiválasztásánál sem. Egyrészt nem tudod, hogy van-e bármiféle alapja a választásuknak, hogy tényleg javítják-e felhasználói élményt a fotók, arról nem beszélve, hogy a célközönségnél is lehetnek eltérések. Persze azt nem mondjuk, hogy ne nézd meg a konkurencia weboldalait. Nézd meg, aztán válasz eltérő fotókat, amik jobban passzolnak az image-edhez, az adott tartalomhoz, a márkához, egyedibbek és kiemelkedőbbek!

Megelégszel egy gyenge minőségű fotóval

A stockfotóknak elég széles tárházát találod a neten, elérhetőek mindenféle minőségben és persze árban. Válogathatsz akár ingyenes megoldások közül is, de ebben az esetben még inkább figyelned kell arra, hogy jó minőségű, eredeti és természetesnek tűnő fotót válassz. Lehet, hogy olcsóbban, vagy akár ingyen hozzájutsz egy gyengébb képhez, ez azonban hosszú távon nem biztos, hogy kifizetődik.

Mesterkélt, unalmas stockfotókat használsz

A stockfotók legnagyobb hibája a műfaj jellegéből következik: nem eredetiek, klisét ismételgetnek, hiszen nem a Te cégedre, márkádra, ügyfeleidre jellemző képet mutatnak. Az ilyen fotókat már ezerszer látták a felhasználók, nem ad nekik semmilyen értékes információt, nem kapcsolódik igazán a márkádhoz, inkább csak teher a weboldalon.

Nem használod a kreativitásod

Megoldás lehet az előbbi problémára, hogy a stockfotókat némileg átdolgozod valamilyen képszerkesztő alkalmazás segítségével. Keresel olyan effekteket, melyek egyedivé teszik őket, és amelyek csak a te weboldaladra, márkádra jellemzőek.

Nem figyelsz a felhasználási jogokra

A fotókat kínáló weboldalak mindig jelzik, hogy a képek milyen módon, milyen jelöléssel, hol és hogyan használhatók fel. Jó, ha ezekre figyelsz, mert bizony közülük sokan figyelnek arra, hogy kik használják fel a fotóikat, és hogyan. Ez pedig akár sokba is kerülhet neked.

Mint látható, a stockfotókat ugyan nem szeretjük, de ha jól használod őket, akkor hatékony segítséget jelenthetnek számodra.

Frissítés, 2022.01.27.:

Az 5 stockfotó-típus, amit mindenképpen kerülj el!

Habár a stockfotókkal a legnagyobb probléma az, hogy ugyanazzal a képpel több helyen is találkozhatsz a weben, azonban, ha ezen túlteszed magad, akkor is akad néhány olyan típusuk, amit mindenképpen kerülni érdemes, mert csak magadat járatod le velük.

Nevetséges arckifejezések

Mint korábban láttuk, az embereket, az emberi érzelmeket ábrázoló fotók hatásosak lehetnek, mert befolyásolják a látogatók benyomását a weboldaladról és a cégedről. Ugyanakkor, ha nincs pénzed arra, hogy megfizess egy modellt és egy profi fotóst, akkor a stockfotók között tudsz körülnézni, ahol bőséggel találsz különféle érzelmeket kifejező képeket.

Ezek nagy része azonban nem tűnik igazán természetesnek, tehát nem olyan, mint amikor egy valódi fotós megörökít egy valódi érzelmet. Egy messziről is hamisnak tűnő érzelemnek a sötét árnya pedig az egész weboldaladra rávetül, úgyhogy a legjobb, ha ezeket elkerülöd. Mint például ezt a fotót:

Az „egyenruhás” csoportok

Gyakran találkozni olyan stockfotókkal, melyeknél a mesterkéltség abban is tetten érhető, hogy a rajta szereplő személyek mintha egyenruhában lennének. Ezeken látszik, hogy nem valós karakterekről van szó, hanem egyfajta hangulat kifejezése miatt mindegyik modell ugyanazt a stílusú ruhát kapta magára. Hiányzik belőle az emberek egyénisége, nem látod mögöttük a történetet, hogy milyen preferenciáik vannak, egyáltalán azt, hogy valódi emberekről lenne szó.

Elképesztő illusztrációk

Nem csak érzelmeket, hangulatokat fejezhetünk ki fotókkal, hanem bizonyos cselekvéseket, fogalmakat is ábrázolhatunk a segítségükkel. A stockfotók próbálnak elébe menni minden felmerülő igénynek, azonban a megoldások egy kicsit erőltetettek tudnak lenni.

Túlszerkesztett képek

Sokan esnek abba a hibába, hogy túlszerkesztik a képeket, melyek ezáltal mesterkéltté válnak, elszakadnak a valóságtól, és ez sajnos mindenkinek feltűnik. Ha ilyen fotó jelenik meg a weboldaladon, az ronthatja a hitelességed, a bizalmat az irányodba. Érdemesebb inkább valóságosabbnak ható képeket használni, melyeken apró hibák is feltűnnek, hitelesebbé téve a fotót.

Idétlen grafikák

Végül meg kell említenünk azokat grafikákat, illusztrációkat, melyek megpróbálni kifejezni rajzolt formában valamilyen cselevést, fogalmat. Ezek általában külön kategóriába kerülnek a stockfotós oldalakon, így van rá lehetőség, hogy elkerüljük őket.

Hogyan helyezd el a képeidet a weboldaladon?

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.

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.

Mit kezdj a nagy képekkel a mobilkijelzőkön?

Azok a képek, melyek remekül néznek ki egy monitoron, sokszor elvesztik erejüket egy mobil kijelzőjén, sőt adott esetben képesek tönkretenni az egész designt. Valamit tehát kell velük tenni. De mi a legjobb megoldás?

Alapesetben, amikor mobilbarát weboldalt készítünk, a képeket egyszerűen a kisebb kijelzőre méretezzük át, hogy megfelelően illeszkedjen. Ugyanakkor, ami jól működött a monitoron, az nem biztos, hogy mobilon is jó lesz. Mert a kis méret miatt elveszhet az az üzenet, amit át kívántunk vele adni, értelmetlenné válik a kép egy rossz kivágás miatt, vagy a nagy méret felesleges görgetésre kényszeríti az embereket. Ugyanez persze igaz visszafelé is: ami jól néz ki egy apró kijelzőn, az lehet csapnivaló a számítógéped monitorán. De milyen problémák merülnek a képek mobilos alkalmazhatósága során? Erre adott választ az NNG egy blogbejegyzésében.

A kép tisztasága, és a rajta lévő szöveg olvashatósága

Nagyon sok weboldalon jelenik meg szöveg a képeken. Ez azonban okozhat némi gondot átméretezés esetén. A megváltozó színkontraszt miatt esetleg rosszul olvasható lesz a szöveg, vagy pedig rosszul láthatóvá válik a kép a szöveg miatt. A kisebb kijelzőméret ugyanis azt jelenti, hogy kevesebb hely jut a képnek és a szövegnek is. Amennyiben a szöveg a képen belül szerepel, akkor a kép kisebbítésével a szöveg mérete is csökken.

De még ha a szöveg nem is része a képnek, akkor is adódhatnak gondok, hiszen a szöveg eltérő módon illeszkedik a kisebb kijelzőhöz. Az átméretezés, vágás hatással van mind a kép, mind pedig a szöveg olvashatóságára, valamint a kettő kapcsolatára. Tehát, míg monitoron egy adott szöveg a kép azon részére esik, ahol megfelelő a kontraszt, így jól olvasható a szöveg, mobilon máshová kerülhet. És ha itt kisebb a kontraszt, mindjárt rosszabb lesz az olvashatóság, miközben a kép is értelmezhetetlenné válhat.

Rossz vágás vagy átméretezés

A fő problémát itt az jelenti, hogy míg a desktop kijelzők vízszintes tájolásúak, addig a mobilok a portré módot használják általában. Ennek az az eredménye, hogy egy adott kép nem fog működni mindkét eszközön gondos tervezés nélkül. Ha rosszul kerül megvágásra a kép, akkor megváltozhat vagy értelmetlenné válhat a jelentése, míg ha egyszerűen csak átméretezzük, akkor nem feltétlenül látható, hogy mi is szerepel rajta.

Görgetésre kényszerítés

A képek révén hosszabbá válik a weboldal. Amikor a weboldal felső részére egy képet helyezel, az lefelé tolja a tartalmat, adott esetben a hajtás alá. Ez frusztrációt okozhat a felhasználóknak, különösen abban az esetben, ha a kép nem igazán segít nekik a megcélzott feladata végrehajtásában.

Gyakori megoldás, amikor a képeket rácsba szervezik a weboldalon, és mindegyik kap egy szöveges képaláírást. Ilyenkor a kép a szöveg felett helyezkedik el, és nem mellette, mint a lista alapú elrendezésnél. Kisméretű kijelzőkön ebben az esetben a kép el tud szakadni a kapcsolódó szövegtől. Ez pedig különböző problémákat okozhat.

Az egyik ilyen, hogy a csoportosítás értelmét veszti. Mert nem lehet megállapítani, hogy melyik szöveghez melyik kép tartozik. Az alatta vagy a felette lévő? A designnal persze lehet enyhíteni ezen a problémán, hiszen a távolság növelhető az össze nem kapcsolódó részek és csökkenthető az egybe tartozó részek között. Viszont mobilon ezek a távolságok talán nem is láthatók: hiszen, ha a felhasználó csak egyetlen képet lát és egyetlen szöveget, akkor nem tudja mihez viszonyítani a szöveg és a kép közötti távolságot.

További probléma, hogy többet kell görgetni. A kép tulajdonképpen akadályává válik annak, hogy a felhasználó eljusson az őt érdeklő tartalomhoz. Különösen akkor, ha a kép egyáltalán nem járul hozzá a weboldal tartalmának érthetővé tételéhez. A plusz görgetéssel önmagában nincs gond, viszont általa növekszik az interakciós költség, terhelődik a munkamemória. Hiszen az emberek nem egyszerre, egyben látják az információkat, hanem csak görgetés révén, így fejben kell tartaniuk, amit korábban láttak.

A megoldás

1. A képek eltávolítása

Mindez persze nem azt jelenti, hogy a kisméretű kijelzőkön nem kellene képeket használni. Csak át kell gondolni a használatukat, meg kell vizsgálni az információs értéküket, azaz, hogy mennyi információt adnak hozzá az oldalhoz. Ha ez az érték magas, akkor érdemes megtartani a képet. A következő lépés egy ilyen megtartott képpel, hogy megfelelően kell méretezni, megvágni és elhelyezni. De ha a képnek nincs jelentősége, akkor a felhasználói élmény akkor javul, ha eltávolítod.

De az információs értéken túl akkor is érdemes kidobni a képeket, ha

• értelmezhetetlenné válik egy bizonyos méret alatt
• nem lehet úgy méretre vágni, hogy ne veszítse el a jelentését
• ha a rajta elhelyezett szöveg kitakarná egy jelentős részét
• növeli a görgetés mennyiségét az oldalon

Természetesen, ha egy kép nem tesz hozzá semmit a tartalomhoz, akkor desktop méretben is érdemes megszabadulni tőle. Ami azért is előnyös, mert ezáltal javul a weboldal sebessége, azaz a betöltési ideje.

2. Átméretezés és vágás

Ha viszont a kép segít értelmezni az oldal tartalmát, világos a célja a felhasználó számára, akkor érdemes átméretezni, megvágni. A képnek ugyanis illeszkednie kell a mobil kijelzőjéhez is, mégpedig úgy, hogy ne veszítse el az értelmezhetőségét. A nagy képeknél szokásos eljárás, hogy a legfontosabb részlet kerül csak megjelenítésre kis kijelzőn. A kép orientációja is változhat tájképről portréra.

Rajzolt illusztrációk vagy ikonok esetében lehet, hogy nincs gond az érthetőséggel azonban a felesleges görgetés elkerülése érdekében érdemes lehet csökkenteni a méretüket, valamint változtatni az elhelyezésükön, például a kapcsolódó szöveg mellé helyezni, hogy ezáltal is kevesebb görgetésre legyen szükség a tartalom átfutásához. A legjobb megoldás megtalálásához kísérletezésre van szükség.

3. A képhez tartozó szöveg megváltoztatása vagy eltávolítása

Néha nem elég, ha magát a képet szerkesztjük, a hozzá kapcsolódó szöveget is módosítani kell. Egy rövidebb szöveget könnyebb elhelyezni egy képen, vagy mellette, vagy csak a közelében, miközben minimálisra csökken a befogadáshoz szükséges görgetés mennyisége.

Arra is szükség lehet a képen szereplő szöveg esetében, hogy azt a kép egy más részére helyezzük kis kijelzőn való megjelenésnél. A szövegek jellemzően a kép kevésbé fontos részein szoktak megjelenni, de lehet, hogy mobilos megjelenésnél pont ez a rész kerül levágásra. Így tehát a szöveget máshol kell elhelyezni a képen, esetleg kerül alá vagy mellé is.

A lényeg tehát az, hogy mobilos megjelenésnél minden kép esetében meg kell kérdezned magadtól, hogy szükség van-e az adott képre, hozzájárul-e a tartalom jobb megértéséhez. Ha igen, akkor gondosan kell szerkeszteni a képet a megfelelő méretre úgy, hogy ne veszítse el a jelentését, ne kényszerítse a felhasználót felesleges görgetésre, és ne lassítsa le az oldalt.