Webshark Blog

A weboldaladon képként nem csak fotókat használhatsz, hanem rajzolt illusztrációkat is. De miért érdemes illusztrációkat használni, és hol vetheted be őket a weboldaladon? (Frissítés, 2020.05.11. – Egy új fejezettel bővítettünk: Hogyan válaszd ki az illusztrációid színeit?)

A jó webdesignnak jelentős hatása van a potenciális ügyfelekre, hiszen az emberek a weboldaluk alapján ítélik meg a cégeket. Az nem számít, hogy ez az ítélet helyes-e vagy sem, csak a benyomás számít. Ezért a designerek folyamatosan megpróbálnak új megoldásokkal javítani a felhasználói élményen. Ennek érdekében – ahogy a való életben is – elsősorban a vizuális elemekhez nyúlnak. És itt lépnek a képbe az illusztrációk.

Miért érdemes illusztrációkat használni a weboldaladon?

A rajzolt illusztrációk hatékony eszközt adnak a designerek kezébe. Az illusztrációk a modern designban funkcionális elemek, a kommunikáció eszközei. A céljuk persze ugyanaz, mint bármilyen fotónak: segíteni a weboldal üzenetének átadásában, fokozni annak hatását. Az illusztráció egy olyan olyan vizuális elem, mely a szöveget támogatja. Célja az, hogy kibontsa és világossá tegye a szövegben lévő gondolatot. Lehet egy kép, de akár egy táblázat, grafikon is. Egy illusztráció akkor működik, ha a látogató a segítségével jobban megérti a verbális üzenetet. Az illusztráció az érzékszervi élményre építve magyarázza a szövegben szereplő gondolatot.

Manapság a web tele van szövegekkel, melyek legtöbbjének elolvasására nincs időnk. Ugyanakkor a vizuális információk befogadása teljesen függetlenül zajlik a verbális információktól.

Ahhoz azonban, hogy a rajzolt illusztráció működjön, a képeknek könnyen felismerhetőnek kell lenniük, és az általuk hordozott információt a felhasználók különböző csoportjainak is tudniuk kell dekódolni. De lássuk a funkcióikat részletesen!

Könnyebben elmagyarázhatod velük a lényeget

Az illusztrációk jól használhatók abból a célból, hogy valamit megmagyarázz, világossá tegyél a felhasználók számára. A rajzolt illusztrációk vizuális segítséget nyújtanak a felhasználóknak. Képesek megértetni velük egy üzenetet, leegyszerűsítve a dolgokat könnyen felfogható ábrákká. A képek “hangosabbak”, mint a szavak, és a befogadásuk is sokkal gyorsabb. Ez az oka annak, hogy miért olyan népszerűek a rajzolt illusztrációk a felhasználók elindításánál egy appban vagy egy weboldalon.

Bevetheted őket abban az esetben, amikor a látogató megérkezik a weboldaladra vagy a mobil alkalmazásodba, és el kell magyaráznod neki, hogyan is működik az oldal. Illusztrációk használatával elkerülheted a túl sok szöveg használatát. A belépő oldalak illusztrációkkal kiegészítve kiválóan bemutatják a felhasználók számára a legfontosabb funkciókat és előnyöket. Jelzik számukra a kontextust, világossá teszik a helyzetet, vagy akár vezethetik is a felhasználót a következő lépés megtétele felé. Ha egy minimál felülettel kombinálod a rajzolt illusztrációkat, akkor rendkívül hatékonyan képesek segíteni a fontos üzenetek eljuttatásában, anélkül, hogy túl sok szöveget kellene használnod.

Egy jól sikerült, interaktív beszálló oldal automatikusan felkelti az emberek érdeklődését a weboldal iránt. Arra készteti őket, hogy kezdjék el használni azt. Egy képes használati utasítást sokkal könnyebben és gyorsabban megértenek, mint a hosszú, szöveges magyarázatokat. Még azoknak az oldalaknak vagy appoknak is érdemes a rajzolt illusztrációk eszközéhez nyúlnia, ha el kell magyarázni valamit az embereknek, melyek egyébként más esetekben nem használják ezt.

Ugyancsak jól alkalmazható egy rajzolt illusztráció akkor is, ha különböző csomagok közötti választást kell bemutatnod:

Szintén használható, amikor a felhasználó belefut egy problémába. Ilyenkor a humor eszközét felhasználva tehető emberközelibbé a probléma és annak megoldása.

Emlékezetes a felhasználó számára

Webböngészés közben számtalan weboldallal találkozunk, azonban csak néhány olyan van, mely valóban emlékezetes lesz számunkra. Amikor az emberek valamilyen élményre visszaemlékeznek, akkor nem a teljes élmény ugrik be nekik az elejétől a végéig, hanem annak egyes kulcsfontosságú elemei, egy-egy kép, benyomás. Egy illusztráció pont ilyen kulcseleme lehet a weboldaladnak, és így a márkád is sokkal jobban megragad az emberek emlékezetében

A weboldalad főoldalán elhelyezett illusztrációk az egész weboldalról alkotott képet meghatározzák a felhasználók számára. Beindítják az emberek fantáziáját, és sokkal erősebb személyes kapcsolatot alakíthatsz ki rajzolt illusztrációkkal, mint a fotókkal. Emellett az egyedi, kizárólag a Te weboldaladhoz készült rajzolt illusztrációk hatékonyabban képesek megkülönböztetni a konkurenciától.

A különböző rajzolt karakterek is azért hasznosak, mert maradandóbb emlékeket hozhatsz létre általuk. Ezekre a márkaelemekre jobban vissza tudnak emlékezni az emberek, azonosítják őket a márkával, kapcsolatot tudnak kialakítani a felhasználó és a termék között.

A közvetlen kommunikáció illúzióját nyújtja

Minden termékhez kapcsolódó felhasználói interakció egy úttá áll össze. Minden egyes út mögött található egy cél, melyet a felhasználó szeretne elérni a termék használata révén. Bizonyos esetekben pedig lehetséges a felhasználói út történetté alakítása. Az illusztrációk ilyenkor kapcsolatot alakítanak ki a felhasználó és a weboldal között annak érdekében, hogy belevonják a folyamatba. Például egy rajzolt karakter lesz az, amely végigvezeti a felhasználót egy felületen, hogy megismerje annak működését.

A játékos, vidám, rajzolt karakterek sokkal hitelesebbé, megbízhatóbbá tehetik a termékedet, miközben könnyebben elérheted általuk a felhasználói elköteleződést is. Ilyen karakterek lehetnek például az állatfigurák, mint a Mailchimp esetében Freddie, a csimpánz. Ezek a figurák a felhasználói élmény emlékezetes elemei, melyek kapcsolatot hoznak létre a felhasználók és a weboldalad között, életet lehelnek az interakciós folyamatokba, és fenntartják az emberek érdeklődését. Ha el akarod kötelezni az embereket a weboldalad, céged, terméked iránt, akkor teremts meg egy rajzolt karaktert a márkád számára!

A Mailchimp csimpánza persze emellett jelentős szerepet játszik a felhasználó élmény javításában is. Különböző szerepekben megjelenik az oldalain, felhívva a figyelmet egy adott elemre, vagy csak egy viccet elsütve, hogy csökkentse a felhasználók feszültségét ott, ahol szükség lehet rá.

Megerősíti a stílust

Az illusztrációkat arra is használhatod a felületeidnél, hogy vizuális támogatást adj a weboldalad stílusának. Más márka-elemekkel szemben – mint a logó, betűtípus, színséma – az illusztrációknak jelentős hatásuk van a termék stílusára is. Amikor egy illusztráció egy adott stílusban készül el, akkor természetesen és harmonikusan illeszkedik a termékedhez és a márkádhoz. Ehhez persze az is kell, hogy az illusztrációk összhangban legyen egymással is, még ha különböző forrásból is származnak.

Alkalmazhatod a jutalom-oldalaknál

Nyilván mindenki találkozott már jutalmakkal a játékoknál. Ezek rendkívül erős hatás képesek gyakorolni az emberekre. Hogy mi az oka ennek? Mert úgy tűnik, mintha egy ember állna a másik oldalon, nem pedig egy számítógép. A jutalmazás emocionális interakció: a pozitív érzések révén elköteleződés alakul ki a felhasználók részéről. Az emberek képesek elfelejteni még a hibákat is akkor, ha pozitív érzésekkel ajándékozza meg őket egy app.

Amikor megjutalmazod az embereket valamilyen teljesítmény esetén, akkor az azt jelzi számukra, hogy törődsz velük. Tehát jutalmazd meg őket egy animációval, amikor teljesítenek egy személyes célt!

Összességében tehát elmondható, hogy az illusztrációk erőteljes és fontos eszköznek számítanak a felhasználói élmény javítása során, illetve a felület vonzóbbá és hatékonyabbá tételénél. Miközben nincsenek szabályok arra, hogy miként használhatsz rajzolt illusztrációkat a weboldaladon, azt mindenképpen érdemes észben tartani, hogy csak akkor alkalmazd őket, ha a felhasználók számára hasznosak. Ilyenkor az illusztrációk segítenek a céged és a terméked üzenetének hatékonyabb átadásában.

Amire figyelj

Élénk színek

Amikor a felhasználók valamit keresnek egy weboldalon, akkor átfutják azt. Ugyanakkor az erős vizuális jelzések felkeltik a figyelmüket. Ha ez megtörténik, akkor talán a szöveg is érdekelni kezdi őket. A fekete-fehér vagy a pasztell színek ugyan lehetnek művésziek, vagy jól mutathatnak otthonodban, de a weben nem ezekre számítanak az emberek. Ha körülnézel a weben, akkor az illusztrációknál általában élénk színekkel találkozol: élénk sárgával, zölddel, pirossal, kékkel és ezek kombinációival. Ezek azok a színek, melyek kiemelkednek a fekete, szürke, fehér szövegek és hátterek közül.

Kontraszt

Az még nem feltétlenül elegendő, hogy élénk színeket használsz. A kontraszt biztosítja azt, hogy egy kép tényleg kiemelkedjen egy weboldal tartalmából. Az illusztráció színeit úgy kell megválasztani, hogy erős kontrasztot alkosson a weboldal szövegével, hátterével és egyéb elemeivel.

Vizuális hierarchia

Az rendben van, hogy az illusztrációk magukra vonják a figyelmet, azonban fontos, hogy a weboldal más elemei ne törekedjenek ugyanerre, ugyanilyen mértékben, kivéve persze a CTA-t. Figyelj a vizuális hierarchiára és ne terheld túl a felhasználókat színekkel és formákkal a weboldalon!

Ne használj szöveget a képeken belül!

Sokan szeretnek beleírni a képekre, például egy blogbejegyzésnél egy címet. Azonban az ilyen szövegek sokszor megzavarják a kép által hordozott fő üzenet befogadását. Kivételt jelentenek az infografikák vagy a képeken megjelenő idézetek, melyeknél a kép azt a szöveget erősíti, ami rá lett helyezve. Ugyanakkor, ha a szöveg önmagában nem áll meg a saját lábán, nem fog működni képpel sem.

Képletes ábrázolás

Akadnak olyan témák, amelyeknél nem igazán hozhatók létre olyan képek, melyek segíthetnének az üzenet átadásában. Nem tudod a képek által közvetíteni a mondanivalód lényegét. Milyen illusztrációk használhatók ezeknél a szövegeknél? Olyanok, melyek egy kicsit elrugaszkodnak a téma eredeti jelentésétől és csak távolról utalnak rá. Tehát, amikor például linképítésről szól egy cikk, akkor nem egy lánc lesz a címlapi képed, hanem mondjuk egy egymás kezét fogó emberekből álló sor. Ezzel máris érdekesebbé teszi az illusztráció a szöveget, miközben utal is annak lényegére.

Hogyan válaszd ki az illusztrációid színeit?

Mint talán az előbbiekből is látható, az illusztrációk esetében fontosak a színek. De nem mindegy, hogy milyen színeket választasz. Mit vegyél figyelembe?

Az illusztráció kontextusa

A színek kiválasztásakor nem csak arra kell figyelni, hogy jól mutasson egy illusztráció, hanem arra is, hogy közvetítse az elvárt üzenetet. Fontos, hogy összhangban legyenek a színek a kiváltani kívánt érzésekkel.

Céges weboldalakon, ha már vannak meghatározott márkaszínek, akkor érdemes azokhoz ragaszkodni, hogy erősítsd a márkaüzenetet. Azt ugyanakkor látni kell, hogy ettől egy kicsit egyhangúak lehetnek az illusztrációk, és adott esetben nagyon beolvadhatnak a többi elem közé, elveszítik figyelemfelhívó funkciójukat. Érdemes lehet tehát egy kicsit elrugaszkodni a céges színektől, esetleg új színekkel próbálkozni.

Kevés színnel indíts!

Mindenesetre érdemes mindig csak 3-4 színt használni, és a későbbiekben bővíteni a palettát, ha szükséges. Ezáltal könnyebben meglátod a színek közötti kapcsolatokat, gyorsabban meg tudod mondani, hogy egy adott szín működik-e. Ha pedig nem, akkor tudni fogod, hogy melyiket kell lecserélni.

Ezután továbbléphetsz abba az irányba, hogy újabb színeket jelenítesz meg: 8-10 színnel érdemes próbálkozni, esetleg szokatlan, merész színkombinációkat próbálgatsz. Arra viszont figyelj, hogy minél több színt használsz, annál nehezebb lesz elérni a színharmóniát.

Ne feledkezz meg a kontrasztról!

Ha már megvannak a színek, akkor azt is meg kell vizsgálnod, hogy a kontraszt is megfelelő-e. Enélkül ugyanis nem tudod vezetni az emberek tekintetét. Érdemes lehet szürkeskálás megjelenésre váltani, és megnézni, hogy még mindig értelmezhető-e az illusztráció. Ha kell, akkor egyes színeket sötétebbre, erősebbre, másokat világosabbra kell venni, esetleg egyszerűsíteni kell a színpalettán.