Definícia

Hover effect je vizuálny alebo funkčný efekt v digitálnom rozhraní, ktorý sa aktivuje v momente, keď používateľ umiestni kurzor myši nad konkrétny prvok. Najčastejšie ide o zmenu farby, tvaru, veľkosti, tieňa, animáciu alebo zobrazenie doplnkovej informácie.

Popis

Hover effect patrí medzi základné interakčné prvky pri webdizajne a UX dizajne. Jeho hlavnou úlohou je informovať používateľa, že daný prvok je aktívny alebo napr. klikateľný. Pomáha znižovať neistotu pri navigácii a zlepšuje celkovú čitateľnosť rozhrania.

Najčastejšie sa hover effect používa pri odkazoch, tlačidlách, navigačných položkách, obrázkoch, ikonách alebo produktových kartách. V e-commerce prostredí sa často využíva na zobrazenie sekundárnych informácií, ako je rýchly náhľad produktu, cena, dostupnosť alebo výzva k akcii.

Z pohľadu použiteľnosti hover effect podporuje intuitívne ovládanie bez potreby dodatočných textových vysvetlení. Používateľ okamžite vidí reakciu rozhrania na svoj pohyb, čo zvyšuje pocit kontroly a plynulosti práce so stránkou.

Funguje hover effect aj na mobilných zariadeniach?

Na mobiloch sa klasický hover effect nepoužíva, keďže používateľ nepracuje s kurzorom myši. Jeho funkcia sa nahrádza klikom alebo dotykom, prípadne sa efekty zobrazujú až po tapnutí na prvok. Pri návrhu responzívneho dizajnu je preto dôležité s hover efektmi pracovať opatrne.

Príklad hover effectu

Na e-shope sa pri nabehnutí kurzora na produktovú kartu zmení farba pozadia a zobrazí sa tlačidlo „Pridať do košíka“. Používateľ tak okamžite vidí, že ide o interaktívny prvok a akú akciu môže vykonať.