Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2018-03-010 komment

Hogyan használd a képeket, fotókat, stockfotókat a weboldaladon?

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.

  • 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.

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

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.

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.

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.

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!

katicabogar

Javítsd velük a webáruházad designjá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.

Fejezd ki a képekkel 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 taget!

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 tagek a képek szöveges megfelelői, ha a böngésző nem jeleníti meg a képet. Az alt tag 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.

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

Az emberekről készült képek 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. 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.

Kerüld a “hamis” arcokat!

Mint kiderült, az emberi arcokról készül fotók hatékony eszközt jelenthetnek számodra, ugyanakkor el kell kerülnöd a teljesen életidegen stockfotókat. Erről hamarosan beszélünk, amikor a stockfotók használatáról lesz szó. Lehet elfogadható képet is választani közülük, azokat viszont mindenáron kerüld el, ahol a modell egy mesterkélt cselekvés közben teli szájjal vigyorog, és az egész szituáció valószerűtlennek tűnik!

Az arcok ugyanis csak akkor tudnak bizalmat kelteni és érzelmi kapcsolatot kialakítani, ha valóságosnak tűnnek. Tehát, ha te is azt tervezed, hogy beveted az arcokról készül fotókat a weboldaladon, akkor olyan fotókat kell készítened, amelyek képviselni tudják a márkádat. A stockfotók is alkalmasak lehetnek erre, de óvatosnak kell lenni velük.

A lényeg tehát, hogy az emberek szeretnek más embereket látni. Részesei akarnak lenni valaminek. Ez áll az egész jelenség mögött, és ez az oka annak, hogy működik a technika. Mutass olyan embereket, akik kapcsolatba kerülnek veled, a termékeddel, szolgáltatásoddal, mutasd be a csapatodat, hogy hiteles legyél, és kapcsolatot alakíthass ki a weboldalad látogatóival!

III. Hogyan válassz háttérképet a weboldaladra?

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, vagy a többi elem a weboldalon. 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 azonban eltorzíthatod azt az üzenetet, amit a látogatóid felé akarsz közvetíteni, sőt UX problémák is felmerülhetnek.

Milyen lehetőségek közül választhatsz?

1. Egyszínű háttér

Ha nem az a típus vagy, akinek a trendek határozzák meg az életét, hanem komolyan, megfontoltan intézed a dolgokat, akkor választhatod a régről megszokott megoldást: az egyszínű hátteret. Ez néhány éve még alapvető 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.

Ugyanakkor persze technikailag az egyszínű háttér legalább nem okoz majd sok gondot neked. 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. Mivel egy fotón jellemzően sokféle szín látható, ezért nem annyira egyszerű az érzelmi hatás.

2. Minták használata

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. A mintáknál is ki lehet használni a színek erejét, vagyis kiválthatók velük a megfelelő érzelmek, ugyanakkor a minta révén különlegessé tehető a megjelenés.

Itt alig látszik a minta a háttérben, pedig van.

Itt alig látszik a minta a háttérben, pedig van.

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 egy kisfelbontású kijelzőn más lehet a hatása, 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.

3. 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:

Egy absztrakt háttér.

Egy absztrakt háttér.

4. 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 header 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.

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.

IV. 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.

Egy viszonylag kevésbé mesterkéltnek tűnő stockfotó

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.

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.

V. 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 helyre kerül a szöveg, így a kép nem értelmezhető és a szöveg is nehezebben olvasható

Rossz helyre kerül a szöveg, így a kép nem értelmezhető és a szöveg is nehezebben olvasható

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.

Amikor a kép a rossz vágás miatt értelmezhetetlenné válik

Amikor a kép a rossz vágás miatt értelmezhetetlenné válik

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.

Mi lehet 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.

Amikor az a legjobb megoldás, ha eltávolításra kerül a fotó

Amikor az a legjobb megoldás, ha eltávolításra kerül a fotó

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.

A szöveg megfelelő elhelyezése egy megváltozott tájolásnál

A szöveg megfelelő elhelyezése egy megváltozott tájolásnál

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.

Kategória: Design | Címke: , , ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.