Webshark Blog

Komoly trend a webdesignban most az egyéni egérmutatók vagy egérkurzorok használata, melyek első pillantásra csak a weboldalak egy újabb stíluselemének tűnnek, de ennél több rejlik bennük.

Amikor egy weboldalt monitoron nézel, akkor az egérmutató egy fontos elem, hiszen ez köti össze a felhasználót a weboldallal, ennek használatával tud cselekedni, hozzáférni a weboldal funkcióihoz. Ha elég kreatív vagy, akkor fel tudod használni a megváltoztatott egérmutatót arra, hogy javítsd a weboldalad interaktivitását, illetve további cselekvésre bírd a látogatóidat.

Mi az az egyedi egérmutató?

Egyedi kurzornyílról akkor beszélünk, amikor az egér eredeti nyíl-ikonját megváltoztatjuk. Ezt megteheted az operációs rendszer beállításai között is, de ugyanígy meg lehet tenni a böngészőben is az egyes weboldalak által irányítottan.

Ehhez kell a HTML, a CSS és egy kicsit a JavaScript segítsége, de viszonylag egyszerűen létrehozható egy egyedi kurzor-design a weboldaladra. Az egérmutatón kívül azonban olyan elemeket is megváltoztathatsz a weboldaladon, mint a hover-animációk, a kattintási-effektek, ezáltal pedig jelentősebb hatást gyakorolhatsz a látogatódra a weboldaladdal, mint az alapértelmezett beállítású weboldallal.

Miért érdemes?

Egy egyedi animációkkal, parallax-effektekkel, egyéb mozgó elemekkel szépen felépített oldalon az élményt egy egyedi egérmutatóval tudod igazán teljessé tenni, vagyis a felhasználói élmény javulásával és az erőteljesebb hatással az eredmények is jobbak lesznek.

Egy egyedi egérmutató nem csak figyelemfelkeltőbb vagy szórakoztatóbb lehet az emberek számára, de még abban is segíthet, hogy megmutassa: mikor hová kattintsanak, és ott mit csináljanak. De a lényeg, hogy a weboldaladat kiemeli a tömegből, márpedig a megkülönböztethetőség fontos tényező a marketingben is.

Mire figyelj a tervezésénél?

Mielőtt nekiállnál kitalálni valamilyen egyedi egérmutatót, érdemes néhány szempontot figyelembe venni, hogy ne essél túlzásba, és ne tedd használhatatlanná a weboldaladat.

Összpontosíts az interakciókra!

Az egyedi egérmutatóval nem csak az a célod, hogy megmutasd, milyen kreatív vagy, hanem az, hogy több interakciót érj el. Rá kell bírnod a felhasználókat, hogy többet kattintsanak az oldalon, kattintsanak a hivatkozásokra, gombokra, képekre.

Ezért nem elsősorban az a fontos, hogy az egérmutató különleges legyen, hanem az, hogy a szabványmegjelentéstől való eltérése tovább javítsa a felhasználói élményt. Az ugyanakkor kétségtelen, hogy a legtöbb esetben az eltérő vizuális megjelenés lesz az egyetlen indok, ami egy egyedi egérmutató mögött áll.

Használj többféle designt!

Első pillantásra nagyon szórakoztató lehet neked és a felhasználónak is olyan kurzort használni, aminek rendkívül furcsa a formája, és megmosolyogtatja a látogatókat. Ez az öröm azonban csak addig tart, amíg az első kisebb linkre rá nem kell kattintani.

Egy egyedi mutatóval, ez nem feltétlenül fog menni, ezért a megoldás az, hogy például menük esetében alakuljon át az egérmutató egy egyszerűbb, de jobban használható mutatóvá. Ez segít elkerülni a felhasználói frusztrációt.

Gondold át, hogy érdemes-e!

Az egyedi egérmutatók nem alkalmasak minden weboldalon a használatra. Van oka annak, hogy a nagy weboldalakon soha nem fogsz egyedi kurzorral találkozni, és ez nem az, hogy nem képesek technikailag kivitelezni, vagy nincs elég fantáziájuk.

Az egyedi kurzorok általában olyan, attraktív, egyedi weboldalakon mutatnak jól, vagy hasznosak, melyek egy különleges terméket vagy szolgáltatást mutatnak be, illetve fel akarják hívni a figyelmet a cég egyediségére.

Ne feledd: nem működik mobilon!

Azt ne felejtsd el, hogy mobilon nem használunk egérmutatókat, ezért ne jelenjenek meg, mert csak zavarni fogják az embereket, hiszen nem láthatók jól és feleslegesek.

Néhány példa egyedi egérmutatóra

Az egyik legeredetibb példa a 14islands oldalán látható, ahol a weboldal minden részén átalakul a mutató: ahol videó van, ott lejátszás ikonná, hogy jelezze, kattints a megtekintéshez, ahol pedig további részleteket érhetsz el, ott kiadja erre az utasítást a „View” megjelenítésével. A legjobb azonban az oldal alja, ahol átalakul ceruzává az egérmutató, és rajzolhatsz az oldalra, ami aztán egy idő után eltűnik.

A Komnata kreatív ügynökség weboldalán is hasonló rajzolós megoldással találkozhatsz. Ennél többet ugyan nem tesz az egyedi egérmutató, ezzel viszont elfoglalja magát egy időre a látogató, és mindenképpen emlékezetébe vésődik a cég weboldala.

Az Sssolitaire oldalán nem az egérmutató alakul át, csak megjelenik körülötte egy körben forgó utasítás, mely jelzi, hogy mit lehet tenni az adott oldalon. És persze, ha megteszed, akkor jön a meglepetés.

A felhasználó irányítására használják az egérmutatót ezen az oldalon is, ahol aszerint alakul át, hogy épp milyen funkciót tartalmaz az adott terület a weboldalon, arra ad utasítást, ami elérhető.

A Mutt Agency oldalán a bejegyzés írásakor arra látunk példát, amikor az egérmutató átalakul felfelé mutató nyíllá, amikor felfelé mozdul, illetve lefelé mutató nyíllá, amikor lefelé. Ez segítheti a navigációban a felhasználókat, illetve arra ösztönzi őket, hogy felfedezzék a weboldalt.

A CQQL Records oldalán egy egészen másféle nyíllal találkozol, melynek egyedül az eltérő megjelenés, a weboldal vizuális designjához való igazodás a célja.

Az Andy Warholnak szentelt oldalon nincs igazán többletfunkciója az áttetsző körré alakuló egérmutatónak, csak hogy eltérjen a megszokottól, valami ötletes vizuális megoldást adjon az oldalnak azzal, hogy ellentétes színek jelennek meg alatt.

Hogyan hozd létre az egyedi egérmutatót?

Többféle megoldás is működhet, ha egyedi kurzor létrehozásáról van szó. Használhatod önmagában a CSS-t, de keverheted egy kis JavaScripttel is, ha egy haladóbb megjelenést akarsz elérni animációkkal és effektekkel.

Egy jó megoldás a CSS-ben a „cursor property” beállítása, mely már elég sok lehetőséget kínál számodra. Ennél egyszerűbb lehet, ha kimásolsz egy kódrészletet, például innen, és ezzel gyakorolsz. Ugyanakkor persze a YouTube-on számot tutorial videót is elérhetsz, melyek segítenek ebben.

Összességében elmondható, hogy ha már ismered a CSS-t és a JavaScriptet, akkor rendkívül eredeti és szép egérmutatókat hozhatsz lére a weboldaladra. A kulcs azonban, hogy tudnod kell, mikor használhatod őket, illetve mikor érdemes használnod.