Egérhatások érintőképernyőn

A látványos weboldalak egyik legkedveltebb eszköze a mutatóra reagáló hatás: a kártya a mutató felé billen, a háttérben fény gyullad ott, ahol az egér jár, a gomb elébe megy a kattintásnak. Asztali gépen ezek szinte játékossá teszik az oldalt. Csakhogy a látogatók jelentős része telefonon érkezik – és ott nincs egér.

Mi történik érintésnél?

Egy érintőképernyőn nincs „fölötte lebegés” állapot: az ujj vagy megérinti a képernyőt, vagy nem. Az egérre tervezett hatások ilyenkor többféleképpen viselkedhetnek:

• egyszerűen nem történnek meg – ez a jobbik eset;
• érintésre beragadnak – a kártya billentve marad, amíg máshová nem koppintanak;
• az első koppintás csak a hatást indítja el, a link csak a másodikra nyílik meg – ez kifejezetten zavaró.

A jó megoldás: képesség szerint

A modern böngészők meg tudják mondani, milyen eszközzel dolgozik a látogató: van-e pontos mutatója (egér, érintőpad), és tud-e „fölé vinni”. Ennek alapján az oldal csak ott kapcsolja be a mutatót követő hatásokat, ahol értelmük van. Érintőképernyőn pedig más ad életet:

• önálló, lassú mozgás: a fény magától vándorol a hálón, a kártyák lassan lebegnek;
• visszajelzés érintésre: egy rövid kiemelés vagy besüppedés a koppintás pillanatában;
• görgetésre induló finom beúszás.

A mi oldalunk is így működik: egérrel a háló fénye a mutatót követi, a logó a mutató felé fordul, a kártyákon fényfolt jár. Telefonon a fény magától vándorol, a kártyák lebegnek – ugyanaz a hangulat, más eszközzel.

Ami soha ne függjön a mutatótól

• Tartalom: ha egy szöveg vagy információ csak egér fölött jelenik meg, telefonon elérhetetlen.
• Navigáció: a legördülő menü nyíljon meg kattintásra vagy koppintásra is.
• Funkció: a gombnak koppintásra azonnal működnie kell.

A mutatóra reagáló hatás mindig ráadás, soha nem az egyetlen út.

És a mozgáscsökkentés?

Aki a rendszerében mozgáscsökkentést kért, annak a mutatót követő hatások sem kellenek. Erről a mozgáscsökkentésről szóló cikkünkben írtunk. A jól megépített oldal egyszerre figyeli az eszközt és a beállítást.

Tervezés két fejjel

Minden egérre reagáló hatásnál érdemes feltenni a kérdést: mi lesz ebből telefonon? Ha a válasz „semmi”, az még rendben van. Ha a válasz „valami furcsa”, azt még a tervezésnél meg kell oldani. Arról, mi változik még kis képernyőn, külön írtunk.

A főoldalunk „Próbálja ki” blokkjában asztalon és telefonon is kipróbálhatja a különbséget. Ha hasonló hatásokat szeretne, az animáció és interakció szolgáltatásunknál írjuk le, hogyan dolgozunk.