Keresés
Header Háttér

Webshark Blog

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

2017-06-070 komment

Mit kezdj a nagy képekkel a kis kijelzőkön? Törölj, méretezz, átrendezz?

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 egy 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?

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.

(A szöveg az NNG bejegyzése alapján készült.)

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.