Webshark Blog

Ikonok által könnyebben és gyorsabban megértethetjük a lényeget a felhasználókkal. De nem minden esetben jó megoldás az ikonok használata. Mikor nem? És hogyan használjuk az ikonokat a weboldalunkon? (2021.01.13. – Egy új fejezettel bővítettünk: Mi az az ikon font? És hogyan használd?)

Ha körülnézel a weben, az e-mailektől a Facebookig, mindenhol ikonokkal találkozol. Néha segíti a megértésüket egy címke, sokszor azonban nem. Az emberek már régóta – a web indulása előtt is – használtak ikonokat kommunikációs eszközként. Bárhol is kerülnek alkalmazásra, mindig egyetlen célt szolgálnak: hatékonyan elmondani egy üzenetet egy közismert, vizuális nyelv segítségével.

Milyennek kell lennie egy ikonnak?

Az ikonoknak két feltételnek meg kell felelniük:

• széles körűen felismerhetőnek kell lenniük,
• egy bizonyos, jól ismert jelentést kell tartalmazniuk.

Amikor egy ikon ennek a két feltételnek megfelel, akkor kétségtelenül hatékony eszközként kommunikálja az üzenetet. Gondolj csak olyan vallási jelekre, mint például a kereszt vagy a hatágú csillag. Ugyanakkor a digitális világban még nincsenek ennyire jól megalapozott szimbólumok.

Az, hogy egy ikon széleskörűen felismerhetővé tegyünk, nem könnyű munka. Arra is szükség lehet, hogy szabványok határozzák meg a megjelenését. Ellenkező esetben az emberek másként értelmeznek ikonokat, mint ahogy Te szeretnéd, hogy értelmezzék őket. Léteznek olyan kulturális és személyes asszociációk, melyek megváltoztatják egy szimbólum jelentését, ami néha katasztrófához vezet.

Ha egy ikon nem ismerős az emberek számára, akkor a jelentésére korábbi tapasztalataik és kontextuális jelzések alapján következtetnek. Ez néha működik, néha viszont nem. Például a KRESZ-táblák országonként némileg eltérőek, és aki már autózott külföldön, az tudja, hogy ez olykor zavaró tud lenni. Ugyanakkor egy-egy országon belül nem okoz gondot a jelzések értelmezése, mert szabványosítva vannak.

Egy ikon értelmezése esetében ugyanolyan fordítási nehézségekkel kell szembenézni, mint az írott és beszélt nyelv esetében. Egy ikon jelentése kultúránként változó lehet. A nem egyértelmű jelzéseket pedig a webdesignban el kell kerülni.

Ráadásul, mint a kommunikáció minden más eszköze, úgy az ikonok is dinamikusak, a jelentésük folyamatosan módosul. Ahogy tehát az ikonok jelentése változik, úgy a korábbi verziókat mindig el kell tüntetni, hogy egy szabványosított vizuális nyelvet építsünk.

Az emberekkel – akik a weboldalad vagy más digitális terméked használják, és megismerik egy ikonnak a jelentését a használattal -, az ikonok révén kialakult kapcsolatot fenn kell tartani. Ha hirtelen megváltoztatod egy szimbólum jelentését, akkor az rontja a felhasználói élményt.

Ha egy ikont már magyarázni kell, akkor az már nem működik megfelelően. Attól válik ismerőssé, hogy az emberek sokszor találkoztak már vele. Ha eltérünk a megszokottól, akkor az zavart és romló felhasználói élményt okoz. Az rossz megoldás, amikor egy ikon értelmét más designelemek segítségével kell megmagyarázni.

De lássuk az alapelveket!

Érthetőség és egyszerűség

Egy ikon elsődleges célja a mögötte álló tartalom gyors és egyértelmű kommunikációja. Egy érthetetlen ikon rendkívül frusztráló tud lenni a felhasználó számára, sőt bizonyos esetekben megakadályozza a weboldal vagy alkalmazás használatában. Az emberek egyszerűen nem törődnek vele, ha nem értik, innentől kezdve pedig már nem tudja átadni az üzenetet.

Az ikonok esetében is érvényes az az elv, hogy a kevesebb néha több. El kell kerülni azokat az ikonokat, ahol túl sok a részlet, mert rontják az érthetőséget. Ahogy egy webdesignnál, úgy az ikonoknál is érdemes minden olyan felesleget eltávolítani, amire nincs feltétlenül szükség. A cél az, hogy a felhasználó egy pillantással megértse az ikon jelentését. Az egyszerűség különösen fontos az animált ikonoknál.

Ha pedig az ikon sehogy sem képes világosan kifejezni a lényegét, akkor ki kell egészíteni szöveggel, vagy más megoldást kell keresni.

Olvashatóság

Ha sikerült egy érthető ikont találnod, akkor figyelned kell az olvashatóságára is. Egy ikont persze nem olvasunk, de ha túl sok apró, nem elég jó látható részletet tartalmaz, akkor azt nehéz befogadnia a felhasználónak. Nem érdemes túlságosan finom, vékony vonalakat használni az ikonoknál, mert nem veszik észre az emberek.

Egyensúly

Az ikonoknál fontos, hogy egyensúlyban legyenek, optikailag jól legyenek elrendezve az elemek. Ez azt jelenti, hogy nem feltétlenül számok alapján kialakított szimmetriára kell törekedni, mert borulhat az ikon egyensúlya.

Tömörség

Egy gondolat kifejtése néhány szóban mindig hatékony és elegáns. Az ikonoknak azért is kell tömören kifejezniük a lényeget, mert gyakran kisméretű kijelzőn jelennek meg. Mindig csak a megfelelő mennyiségű részletet használd, és ne többet, mint ami feltétlenül szükséges.

Következetesség a vizuális súlynál

A következetlenség az ikonoknál rendkívül zavaró tud lenni, ugyanakkor ezt a hatást egy laikus csak érzi, megmagyarázni nem nagyon tudja. Nyilván Te sem akarod, hogy a látogatóid így érezzenek. Ha egy ikon nagyobbnak tűnik a weboldalon, mint egy másik, akkor „zajossá” válik az oldal, illetve a látvány rontani fogja a cégedről a weboldaladon keresztül szerzett benyomást.

Több ikon használatánál a harmóniát a következetesség biztosítja, vagyis azonos stílusban kell őket megtervezni, valamint azonos vizuális súlyúnak kell lenniük. Minden ikonnak van egy bizonyos vizuális súlya, melyeket olyan paraméterek határoznak meg, mint a kitöltés, a vonalvastagság, a méret, a forma. Ezek azok a paraméterek, melyeknek azonosnak kell lenniük az ikonoknál.

Tehát nem csak az számít, hogy azonos legyen egy ikon szélessége vagy magassága minden esetben, hanem például az is, hogy megegyezzen a formájuk. Ha nem egyénileg tervezel vagy terveznek számodra ikonokat, hanem egy kész ikonszettet választasz, akkor is érdemes ellenőrizni, hogy a vizuális súlyuk megegyezik-e az ikonoknak.

Kontraszt és színek

A megfelelő színek használata az ikonok tervezésének is fontos része. Alapvetően persze a márkaszíneket használjuk az ikonoknál, ugyanakkor, ha az ikonok a weboldaladtól eltérő környezetbe kerülnek – például egy app esetében -, akkor már át kell gondolni a színsémát. A legjobb megoldás, ha minden lehetséges megjelenési helyzetben teszteled az ikonokat, hogy megfelelő-e a kontraszt.

Használj geometrikus formájú ikonokat!

Ha azt szeretnéd, hogy az ikonjaid kellően hatásosak és erőteljesek legyenek, akkor felejtsd el a szabad formájú ikonokat. Ezek lehetnek jópofák, azonban a professzionalizmus és a hitelesség nem tartozik a fő jellemzőik közé. Ezzel szemben egy geometrikus formákkal felépített design stabilitást sugároz, ráadásul valószínűleg egyszerűbbé is válik, ami mint láttuk, fontos szempont az ikonoknál.

Személyiség

Mit tesz egyedivé egy ikont? Mit mond el a márkádról? Milyen hangulatot teremt? Fontos, hogy az ikonok eredetiek legyenek, kapjanak valamilyen személyiséget, hogy felismerhetők, megkülönböztethetők legyenek.

Következetesség a márkánál

Jó esetben minden cégnek, márkának van egy egyedi hangja, vagy személyisége, amit az ikonoknál is meg kell tartani. Ezt úgy kell érteni, hogy minden típusú megjelenésnél azonos ikonokat kell használnod. Ha a felhasználó más ikonokkal találkozik a hirdetésnél, mint a weboldalon, akkor az zavarba ejti. Arra gondol, hogy talán egy másik cég oldalára tévedt.

Elegendő negatív tér

A zsúfoltnak ható ikonok nem a professzionalizmusra utalnak, amit nyilván sugározni szeretnél a cégedről. Ráadásul nem könnyíti meg a felhasználók dolgát a weboldalon. Ezzel szemben az elegendő negatív tér, azaz whitespace javítja a felhasználói élményt és a használhatóságot. Ahhoz persze gondosan kell tervezni, hogy ne akarj mindent bezsúfolni az oldalra, csak azokat az elemeket és ikonokat, melyek elsődleges fontosságúak a látogatóknak.

Mit ronthatsz el az ikonoknál?

1. Vizuálisan túl összetettek

Már Byrne 1993-as tanulmánya is rámutatott arra, hogy az egyszerű ikonok sokkal jobban érthetők az emberek számára. A résztvevők három különböző típusú fájl-ikont kaptak: egy üreset, egy egyszerűt és egy bonyolultat. Az egyszerű ikonok egyértelműen jobban teljesítettek, mint az üres és a komplex ikonok.

Az egyszerűség tehát alapvető tényező az ikonok tervezésénél. Ha túl sok részletet kap egy ikon, az nem segíti az embereket a megértésben, csak hátráltatja őket.

A kevesebb tehát itt is több. Az ikon is vizuális zajként viselkedhet, és egyáltalán nem jelent segítséget a megértésben, ha túl bonyolulttá, túl részletessé tesszük. Túlegyszerűsíteni sem érdemes persze, mert az megint csak rontja az érthetőséget.

2. Túl elvont ikonok

Egy kutatásból kiderült, hogy az absztrakt ikonok értelmezése több kognitív energiát igényel az emberek részéről. Egy pontosan ábrázolt ikon felhasználó-barát, mivel egy való világban létező tárgyra vagy élményre utal vissza.

Amikor tehát lehetséges, törekedj pontos ábrázolásra az ikonoknál! Ez persze nem minden esetben lehetséges, hiszen jelölhet az ikon olyan cselekvést is, amit nem tudsz leképezni a való világot alapul véve. Ilyen például egy „megosztás”. A megosztás fogalma ugyanis önmagában is egy elvont dolog, így ennél ahhoz az ábrázoláshoz kell visszanyúlni, mely általános elfogadottá vált.

3. Össze nem illő szöveg és kép

Az ikonok akkor működnek a legjobban, ha szöveggel párosítják őket. Ez ugyanis segít abban, hogy megelőzzünk minden kétértelműséget az ikonnal kapcsolatban. Ugyanakkor az ikonnak és a szövegnek pontosan illeszkednie kell egymáshoz. Azaz a címkének segítenie kell abban, hogy világosabbá váljon az ikon jelentése, és ezt összehangoltan kell megtennie.

4. Figyelemmel kell lenni az eltérő kultúrákra

Az egyes kultúrák egészen eltérően értelmezhetnek bizonyos szimbólumokat, illetve lehetnek olyan jelzések, melyek bizonyos területeken jelentéssel bírnak, máshol azonban nem. Ha a termékedet a világ minden részéről használják az emberek, akkor olyan ikonokat kell választanod, melyek teljesen általános érvényűek. Ugyanakkor az is igaz, hogy sok esetben a lokalizált ikonok jobban működnek, mint az általános megoldások.

Hogyan válaszd ki a megfelelő ikonokat? És hogyan használd őket?

Ha nem tervezed vagy tervezteted az ikonjaidat a weboldaladra, akkor sincs könnyű dolgod, mert kiválasztani sem olyan egyszerű, mint elsőre gondolhatnád. Sokan elkövetik azt a hibát, hogy bármilyen ikoncsomagba tartozó ikont elfogadnak, mert azzal találkoztak, és így a legegyszerűbb. Úgy gondolják, hogy az ikon csak egy szimpla ikon, nem kell túlgondolni, bármelyik jó lesz. Pedig mivel funkciója van, egy rossz választás rontja a felhasználói élményt a weboldalon. De mire figyelj?

A témához illő ikonokat használj!

Olyan ikonokat válassz a weboldaladra, melyek illeszkednek az iparágadhoz, a weboldalad tartalmához, témájához. Ha az ikonok erősítik a kontextust, könnyebben megértik az emberek az oldalt.

Legyen összhangban a márkáddal és a stílusoddal!

Az a jó, ha az ikonjaid hozzátesznek valamit a weboldalad stílusához, nem pedig elvesznek belőle. Egy komoly, szakmai weboldalon nem használhatsz vicces, színes, kézzel rajzolt ikonokat. Ugyanez igaz fordítva is.

Gondold át, hogy hány ikonra van szükséged!

Sok ikoncsomagnál gondot jelent, hogy nem található bennük elegendő ikon. Legalábbis a Te igényeid kielégítésére túl kicsi a választék. Erre azonban sokszor utólag jössz rá. Érdemes tehát még a választás előtt átgondolni, hogy hány ikont szeretnél használni, mert az nem lesz jó, ha később más stílusú ikonokkal kényszerülsz kiegészítésre.

Gondold át a méretet és a szerkeszthetőséget!

Vannak olyan ikonok melyek vektor formátumúak, ezáltal bármilyen méretűek lehetnek, és könnyű őket szerkeszteni. Ugyanakkor vannak olyanok is, melyek adott felbontásúak, és csak abban a méretben tudod őket használni. Ez fontos lehet, amikor a megfelelő megoldást keresed a weboldaladra.

Szavakkal egészítsd ki az ikonokat!

Az ikonok jobb megértése érdekében célszerű őket szavakkal is kiegészíteni. Az emberek ugyan a vizuális jelzéseket gyorsabban befogadják, mint a szövegeket, különösen, ha már ismerik az adott jelzés jelentését, mégsem szabad mindent egyetlen ikonra alapozni. Általában a szavak teszik világossá egy ikon jelentését, és ezek alakítják ki a bizalmat azzal kapcsolatban, hogy egy interakció a várt eredményt hozza. A növekvő bizalom pedig jelentős javulást eredményez a kulcsfontosságú mutatóknál.

Óvatosan a trendekkel!

A divatos ikonokkal érdemes óvatosnak lenni, mert ezek nem maradnak velünk tartósan. Egy-egy rövid életű projektnél jópofa megoldás lehet a használatuk, de a hosszú életűnek tervezett felhasználói felületeknél érdemes a klasszikus ikonok használatánál maradni. A designereknek vigyázni kell a trendek követésére, amikor a használhatóság is fontos tényező.

A klasszikus ikonok azért klasszikusak, mert időtállóak, és következetes a használatuk. A következetes használat eredménye pedig az, hogy az emberek számára ismerősnek tűnnek. Megszokták azt, hogy interakcióba lépnek velük, így tudják, hogy mire számíthatnak, ha megint találkoznak velük. A trendi ikonoknál hiányzik a felismerhetőség, ami pedig elengedhetetlen, ha jól használható felületet akarunk.

Mindig gondosan válassz tehát ikont és legyél tisztában azzal, hogy ha ismeretlen ikont választasz, akkor annak következményei lesznek. A megszokottól való minden eltérésnek szándékosnak kellene lennie, melytől további előnyöket remélhetsz, nem pedig negatív hatásokat. A hagyományos ikonok könnyebben felismerhetők egy széles közönség számára, ezáltal magabiztosabbá téve a használatot.

Teli vagy körvonalas ikonokat használj? Melyik a hatékonyabb?

Ha azt gondolod, hogy egy ikon esetében mindegy, hogy az színnel kitöltött vagy csak a körvonala van meghúzva, akkor tévedsz. Egy ikon stílusa befolyásolja a felhasználói élményt és a hatékonyságot.

Sokan vannak, akik pusztán ízlésbeli kérdésnek tekintik, hogy milyen ikonstílust használnak. Pedig a kutatások azt mutatják, hogy egyik vagy másik típusú ikont eltérő gyorsasággal képesek feldolgozni a felhasználók. Ha egy adott stílusú ikont könnyebben képesek értelmezni, akkor az azt jelenti, hogy egyszerűbben érik el a céljukat, végzik el a feladatukat egy alkalmazásban vagy egy weboldalon.

A Uxmovement egy olyan kutatásra hívta fel a figyelmet, melyben az úgynevezett színnel teljesen kitöltött, illetve az üres, csak körvonalat megjelenítő ikonokat hasonlított össze. A kutatás megállapította, hogy az ikonstílus hatással van egy feladat végrehajtására. Utóbbit az ikon felismerésének és kiválasztásának sebessége és pontossága alapján mérték.

Ami alapvetően kiderült, hogy a telibe színezett ikonok hatékonyabbak: könnyebben felismerhetők, mint a körvonalas ikonok. Ugyanakkor akad néhány kivétel, valamint vannak olyan ikonok is, ahol nem fedezhető fel különbség a feladat végrehajtásának sebességét tekintve.

Utóbbi elsősorban a karakterisztikus jellemzők jelenlétével függött össze. Ha ezek a jellemzők hiányoztak, vagy nehezen voltak észrevehetők, akkor nem tudták azonosítani az ikont a felhasználók. Mit ezek a meghatározó részletei egy-egy ikonnak?

Mint a fenti ábrán látható, ha hiányzik a kis farok a hozzászólás-buborékról, akkor már nem lehet hozzászólásra utaló ikonként értelmezni. Egyszerűen csak egy fekete folt. Ugyanez figyelhető meg a lakat ikonnál: ha eltávolítjuk a kulcslyukat, akkor már inkább egy táskára hasonlít. Ahogy a fogaskerék is csak egy lyukas körré válik fogak nélkül.

A kutatásból kiderült, hogy a kulcslyuk nélküli lakat tévesztette meg leginkább az embereket, a hibák negyedét okozva. A kulcslyuk itt egy meghatározó részlete az ikonnak, mely szükséges ahhoz, hogy a felhasználók azonosítani tudják.

Tehát, amikor ikonokat használsz, mindig győződj meg arról, hogy az ikon minden olyan meghatározó részletet tartalmaz, mely által könnyen azonosítható. Ha egy ikon egy másik tárgyra hasonlít, akkor egy olyan karakterisztikus jellemzőt kell elővenni, mely által önmagává válik.

Ez úgy kapcsolódik a körvonalas ikonok hatékonyságának kérdéséhez, hogy a karakterisztikus jellemzőnek könnyen észrevehetőnek, jól láthatónak kell lennie. Márpedig akadnak olyan ikonok, amikor ez a részlet sokkal feltűnőbb egy körvonalas ikonon, mint egy színnel kitöltöttnél.

A fenti képen látszik, hogy melyik az a három ikon, melyeknél a körvonalas stílus hatékonyabb. A körvonalak ugyanis a karakterisztikus jellemzőket sokkal határozottabban kirajzolták. Egy színnel kitöltött hozzászólásbuboréknál nehezebb felfigyelni a kis farokra, mint a körvonalasnál, de a szemetes fedelénél is ugyanez a helyzet.

Mindebből az az általános következtetés vonható le, hogy amikor a karakterisztikus jellemző nem elég erőteljes, és a forma szélén helyezkedik el, akkor egy körvonalas ikon a hatékony megoldás. Ezáltal hangsúlyosabbá válik a karakterisztikus jellemző és gyorsabban feldolgozható az ikon.

Ugyanakkor persze, amikor ikonokat használsz, akkor egyfajta stílust kell következetesen használni az alkalmazásban vagy a weboldalon. Vagyis nem keverhető a körvonalas és a színnel kitöltött ikon stílus. Ezért, ha a színnel kitöltött ikonok mellett döntesz, akkor olyan ikonokat kell használnod, melyeknél jobban látható a karakterisztikus jellemző: élesebb szögben és jobban kiemelkedik.

A fenti képen tisztán látható, hogy miként lehet ezt megoldani.

Mikor rossz választás egy körvonalas ikon?

Az előbb láttuk, hogy mikor teljesítenek jobban a körvonalas ikonok. Ugyanakkor vannak olyan tipikus esetek, amikor a színnel kitöltött ikonok a hatékonyabbak. Elsősorban akkor, ha az ikonok valamilyen valós tárgyat ábrázolnak, melynek van egy határozott sziluettje. Ilyenkor a körvonalas ábrázolás nem annyira valószerű, hiszen eltér attól, mint amivel a valóságban találkozunk.

Természetesen az emberek ezekben az esetekben is képesek értelmezni a körvonalas ikonokat, a különbség csak annyi, hogy a feldolgozás lassabb, amikor az ikon formáját adó vonalak túlságosan közel kerülnek egymáshoz. A fenti képen látható körvonalas ikonok azért értelmezhetők nehezebben, mert a túl keskennyé váló belső tér miatt vizuális zaj keletkezik.

Következtetésként levonható, hogy színnel kitöltött ikonokat érdemes használni olyan ikonok esetén, ahol szűk belső terek jelennének meg a vonalak között. Az árnyképes megjelenítés ilyenkor egy egyszerűbb formát mutat, így az ikon könnyebben értelmezhető.

Mikor nincs különbség?

A tanulmány olyan ikonokat is talált, melyeket mindkét stílus esetén ugyanolyan könnyen lehetett azonosítani. Ilyen volt például a csillag, a bevásárlókocsi vagy a zászló.

Ezeknél látszik, hogy nincs olyan keskeny rész, melynél a körvonal vizuális zajt okozhatna.

Amire még érdemes kitérni, hogy sokan úgy használják a színnel kitöltött és a körvonalas ikonokat, hogy előbbi az aktív, utóbbi az inaktív állapotot jelzi.

Ezt azonban pont fordítva lenne érdemes használni. Itt abból kell kiindulni, hogy az emberek könnyebben felismernek egy olyan ikont, melyet már használtak. Vagyis, mivel a színnel kitöltött ikonok általában könnyebben értelmezhetők, ezért a nem aktív ikonoknál kellene őket használni. Ugyanakkor, ha egy ikon aktív, azt már nyugodtan lehet körvonalas ikonnal jelezni. Emellett persze egy megváltozó színnel is utalni kell arra, hogy melyik ikon aktív, mert nem elegendő, ha csak átváltunk teliről körvonalasra.

Honnan szerezhetsz be ikonokat?

Ha nem saját magad készítesz ikonokat, vagy készít számodra egy designer, akkor kész ikonokat is letölthetsz. Erre mutatunk néhány ingyenes forrást:

• Swifticons – jelenleg 2680 ikont vonultat fel, így elfogadhatónak mondható a kínálata. Ezek közül ezret ingyenesen is letölthetsz. 24 kategóriából válogathatsz, mindenféle stílusban: színes, körvonalas, teli ikonok közül.
• Streamline Icons – egy nagy weboldal, több mint 30 ezer ikonnal, és gyakori frissítésekkel. Ha regisztrálsz, akkor PNG fájlként menthetsz le ikonokat ingyenesen, habár vissza kell linkelned a Streamline weboldalára. Mindenesetre 53 téma és 720 kategória közül választhatsz.
• Tilda Icons – előnye, hogy még csak nem is kell regisztrálnod ahhoz, hogy letöltsd bármelyik ikont az oldalon, ugyanakkor, ha felhasználod őket, akkor hivatkoznod kell linkkel.
• Graphic Burger – az oldalon nem csak ikonokat, hanem például mockupokat, háttereket, stb. lehet találni. Ugyanakkor az ikonválaszték is jelentős. A letöltéshez nem kell regisztrálnod, ráadásul nem is kell hivatkoznod az alkotókra.
• Fontisto – szintén egy jól elrendezett, könnyen használható oldal, remek ikonokkal. Kereshetsz kulcsszavakkal, vagy átnézheted a kategóriákat egyesével.
• Boxicons – a letöltéshez csak kattints egy ikonra, ekkor megjelenik egy rakás személyre szabhatósági lehetőség, így letöltés előtt pontosan meghatározható, hogy mit is akarsz használni. Megváltoztathatod a színt, a stílust, animálhatod, stb. Az ikonok PNG és SVG formátumban is elérhetők, de a kódot is kimásolhatod és beillesztheted az oldaladba.
• Remix Icon – több mint kétezer nyitott forráskódú ikont találsz az oldalon, körvonalas és teli verzióban. Ha kiválasztottad a megfelelő ikont, akkor meghatározhatod a színét, a formátumát és a méretét.
• Iconscout – az oldal jelentős mennyiségű, több mint 114 ezer ikont vonultat fel mindenféle stílusban. Az ikonok csomagokba vannak rendezve, de ha nincs szükséged az egészre, akkor egyet is kiválaszthatsz, majd megadhatod a paramétereket. Ingyen letölthetők, de ha felhasználod, akkor hivatkoznod kell.
• IcoFont – kétezer ikont találsz az oldalon, melyek csomagokban letölthetők, de saját magad is összeállíthatsz kollekciót, melyet egyben tölthetsz le.
• Eva Icons – 480 nyitott forráskódú ikon közül válogathatsz ingyen. Minden ikon teljesen reszponzív, négy animáció-típust találsz hozzájuk, és két fajtából (teli és körvonalas) választhatsz.
• Icons8 – szintén egy óriási, több mint 120 ezer ikont tartalmazó oldal, melyek 32 stílusban jelennek meg, és teljes mértékben testre szabható letöltés előtt. A letöltés ingyenes, felhasználni a weboldalra hivatkozással lehet az ikonokat.

Mi az az ikon font? És hogyan használd?

Az ikon fontok egy gyakran felmerülő problémát oldanak meg, segítségükkel hatékonyabban és gyorsabban jeleníthetők meg ikonok a weboldaladon.

Ma már rengeteg megoldás található ikon fontok kiválasztására és használatára, nem muszáj neked összehozni egyet teljesen az alapoktól. De mi is pontosan egy ikon font?

Az ikon fontok olyan betűtípusok, melyek apró képeket ábrázolnak betűk helyett. Legnagyobb előnyük – ugyanúgy, mint a betűknél – az, hogy méretezhetők, valamint CSS használatával módosíthatók. Itt tehát arról van szó, hogy változtatható a nagyságuk, a színük, a formájuk. Mivel alapértelmezetten átlátszóak, ezért bármilyen színt vagy hátteret kaphatnak.

Mindez CSS segítségével megoldható, vagyis nincs szükség egyedi képekre minden esetben, amikor ikon kerül a designba. Ez pedig csökkenti a weboldal, illetve a kód méretét is. 

Az ikonfontok vektorképek, ebből következik a méretezhetőségük. Mint bármely betű, olyan nagy méretet vehet fel, ami csak elfér a kijelzőn. Ugyanígy bármekkorára összezsugorítható. Használhatók önállóan, mintegy dekorációs elemként, vagy akár a szövegbe ágyazva is.

Miért érdemes ikon fontokat használni?

• Könnyen méretezhetők, mindaddig, amíg a megfelelő osztályok léteznek a CSS-ben
• Hatalmas ikonkönyvtárakhoz férhetsz hozzá elég egyszerűen
• Könnyű megváltoztatni az ikonok tulajdonságait, és teljesen mindegy, miként épült fel a weboldalad
• Egyszerű hozzáadni egy-egy ikont bármely oldaladhoz
• WordPress felhasználók plugin segítségével használhatnak ikon fontokat, vagy átmásolhatják a könyvtárat a kódba
• Létrehozhatod a saját ikon fontodat, ha valami egyedire van szükséged

Mikor nem érdemes ikon fontokat használni?

• Az ikonokat általában egyetlen színben vagy gradienssel kapod meg, és többet kell fizetni azért, ha többet akarsz
• Gyakran nincs szükség egy teljes ikonkészletre
• Néhány képernyőolvasó nem tudja kezelni az ikonfontokat
• Elképzelhető, hogy nem találsz olyan csomagot, mint amire szükséged lenne

Hogyan használd az ikonfontokat?

A használat attól függően változhat, hogy kitől szerzed be az ikonfont-készletet. Ugyanakkor az alapok mindenhol ugyanazok. Általában három lehetőséged van (hacsak nem tervezed, hogy nagyobb kódolásba vágsz bele):

• Keresel egy plugint, ami mindent installál, így csak ki kell választanod, hogy milyen ikonokra van szükséged. 
• A CMS-ed vagy weboldal-építőd beépített ikon fontjait használod. Ez jól működik abban az esetben, ha nem valami egyedi weboldalad van, vagy nincsenek speciális igényeid.
• Manuálisan linkelsz egy kívül tárolt ikonfontot. (Ez egy bonyolultabb verziója a plugin használatának).

Ikon font vagy SVG?

Az igazi vita ott van, hogy vajon ikon fontot vagy inkább SVG képet kellene használnod abban az esetben, ha valami kis képet szeretnél megjeleníteni a weboldaladon. Mindkét megoldás működhet, elsősorban az egyéni preferenciáid határozhatják meg, hogy melyiket választod.

Egy SVG, azaz a méretezhető vektor formátum mindenesetre kicsit nagyobb mozgásteret ad. Például, nem vagy egy színre korlátozva, de animációt is adhatsz hozzá. A kicsi, méretezhető fájlokat egyből a médakönyvtárba töltheted, és innen könnyen dolgozhatsz velük. Ez tehát egy jó megoldás, ha csak néhány ikonra van szükséged.

Ezzel szemben az ikonfontok gyorsabban töltődnek be hosszú távon, ugyanis gyorsítótárazásra kerülnek. Ugyanakkor a különbség nem túl nagy. Az ikonfontok pozicionálása is okozhat gondot, mivel a betűkre vonatkozó szabályok érvényesek rá a méret, a sortávolság és a függőleges elrendezés kapcsán. Ez az oka annak is, hogy sokan egy szolgáltatótól szerzik be az ikonfontokat, és nem sajátot készítenek.

Amit még érdemes tudni, hogy az SVG-k tartalmaznak alt textet is, ami által hozzáférhetőbbek, mint az ikon fontok, melyek egyszerű betűkként jelennek meg a szövegfelolvasók számára. 

Viszont az ikonfontokat könnyebb megtalálni és használni a legtöbb ember számára. A könyvtárak mindenhol elérhetők, és nem bonyolult megérteni a használatukat. Az SVG ikonokat ezért olyan felhasználók preferálják inkább, akik nagyobb befolyást szeretnének a designjuk felett, illetve komolyabb személyre szabhatóságra törekszenek. 

Azt kell tehát mérlegelned, hogy melyik megoldás a kényelmesebb számodra, illetve melyik illeszkedik jobban a designodhoz és a felhasználói felülethez.

Összességében tehát az ikon fontokról elmondható, hogy népszerűségük fő oka, hogy rugalmasan és könnyen használhatók. A méretezhető formátum és bármely tartalomkezelő rendszerbe való telepíthetőség miatt szinte bárki könnyen elkezdhet használni ikonfontokat. A legnagyobb előnye viszont az, hogy nem egy független képfájl, ezáltal csökken a weboldalméret, így javul a betöltődési idő. Ráadásul méretezhető, ezért bármekkora méretben megjelenítheted a későbbiekben.

Végül

Mint a nyelv, az ikonok is túlmutatnak saját magukon. Erősítsd meg az ikonjaid egy jó designnal, ami a környezet révén kiemeli őket. Például egy nyíl egy digitális könyv jobb oldalán bármit jelenthet, de az elhelyezés miatt az emberek arra fognak gondolni, hogy valószínűleg a lapozásban vehetik hasznát. Persze ebben az esetben kicsi a kockázat, hiszen az emberek könnyen visszatérhetnek az előző oldalra, ha az ikonból mást néztek ki. Sokkal veszélyesebb például egy közösségi médiás állapotfrissítésnél vagy e-mail küldésnél kísérletezni. Ezek nem ideális helyek arra, hogy kipróbálj valami újat.

Összességében tehát elmondható, hogy az ikonokat megfontoltan, átgondoltan kell használni. A jól működő ikonok széles körben ismertek, és világos, érthető üzenteket közvetítenek. De ekkor is lehetőleg szöveggel kiegészítve célszerű használni őket. És végül arról sem szabad megfeledkezni, hogy az ikon környezete megerősítheti vagy gyengítheti a jelentését.