ikonka šipky nahoru

Zvýšení uživatelského prožitku webu použitím animace bez javascriptu, UX animací

Vtáhněte návštěvníky více do webu pomocí animací prvků jako jsou tlačítka, otáčení ikonek, fotek, textu atd. Přidáním animace nebude web působit tak suše. Uživatelé zpozorní a pravděpodobněji popřemýšlí, že by mohli kliknout tam, kam oni i vy chcete. Na webu se budou cítit lépe.

CSS3 animace na webových stránkách

Dříve se pro animace prvků na webu používal především JavaScript. Ten však pro animaci chování prvků na stránce nebyl navržen. Proto se některé složitější animace museli řešit pomocí Flashe či animovaných Gifů.

Animování není jen zábava, jde i o peníze

Doplnění webu animovanými prvky v CSS3 zvýší pozornost uživatele webu

Animace zvyšují uživatelský prožitek a vyvolávají fokus efekt – zacílení pozornosti na určitý element na webu. Zlepšuje se tak i použitelnost webu. Stránky nepůsobí tak nudně a uživatele na stránce zaujmou, mohou zvýšit šanci k provedení nějaké akci. 

Pseudoselektor hover způsobí změnu vlastností prvku, když nad něj najedeme myší. Jeho použití většinou signalizuje aktivní prvek odkazující na zobrazení obsahu. Snažíte se jím na webu zaujmout a vést návštěvníka k tomu, aby udělal nějakou akci – klikl. 

Tyto animace se nejčastěji spouští:

  • hover efektem po najetí myší do oblasti elementu
  • kliknutím na ikony – ikonu menu (hamburgeru) na mobilním zařízení atp.
  • kliknutím na tlačítka – zobrazí například popup okno s formulářem
  • načtením stránky
  • scrollováním stránky

CSS animace 

rozšiřují možnosti pseudoselektoru hover, který působí jako spouštěč

Transitions – animované přechody

Užívá se pro animaci téměř jakékoliv CSS vlastnosti např. přechodu z jedné barvy na jinou. podtržení odkazu, zprůhlednění obrázku atp a to včetně pozicování a transformací. Udává se v milisekundách a označuje dobu, po kterou se animace bude provádět. Nejde použít na display.

Defaultní hodnoty:

  • transition-delay: 0s
  • transition-duration: 0s
  • transition-property: all
  • transition-timing-function: ease

Animation – plnohodnotné animace

Animaci je potřeba nejdřív nadefinovat pomocí at rule (@zavináčové funkce) @keyframes. Pak ji lze kdekoliv zavolat a nastavit:

@keyframes _nazev_animace_ {
_cas_ { _definování_vlastnosti_ }
_cas_ { _definování_vlastnosti_ }
}

div {
animation: _nazev_animace_ 5s infinite;
}

Defaultní hodnoty:

  • animation-name: none
  • animation-duration: 0s
  • animation-timing-function: ease
  • animation-delay: 0s
  • animation-iteration-count: 1
  • animation-direction: normal
  • animation-fill-mode: none
  • animation-play-state: running

UX animací, nebuďte otravní

Jedna klientka mi k animacím řekla, že má pocit, že má web více “pod kontrolou” a působí na ni díky animacím příjemněji. Samozřejmně je jasné, že vše záleží na vkusu, a jaké animace se použijí a na jaké prvky. 

Je důležité dbát na správné nastavení zpoždění a rychlosti animace (není nic horšího než rychlé problikávání submenu při letmém přejetí navigace myši). Některé hover efekty je nutné zpomalit.

Například podle Nielsena pro oko je příjemnější, když prvek připlouvající do viditelné oblasti před zastavením zpomaluje (animation-timing-function: ease-in). A naopak když oblast opouští zrychluje (vlastnost animation-timing-function: ease-out). Lineární rovnoměrný pohyb považuje za nepřirozený.

Správným zacházením s animacemi vtáhnete návštěvníka do webu, k jeho větší interaktivitě se stránkami. Lze dosáhnout zajímavých někdy až spektakulárních efektů. Změny se pak dějí plynule a nikoliv skokově. 

Případy, kde se dají animace na webu využít:

  • plynulá změna stavu po najetí myší na menu
  • plynulá změna stavu barvy tlačítka/odkazu atp.
  • plynulá změna stavu po najetí myší na box s produktem v e-shopu a zobrazení dalších informací
  • plynulá změna (její otočení) po kliknutí na ikonu se šipkou
  • plynulé rozbalení/skrytí po najetí myší do oblasti elementu
  • plynulé vyjíždění nahoru ze spodní části po kliknutí myší na ikonu na webu
  • vyjíždění doleva/doprava na webu po kliknutí/najetí myší nebo zobrazení stránky
  • vyjíždění nahoru/dolu na webu po kliknutí/najetí myší nebo zobrazení stránky
  • plynulé transformace a otáčení

Ukázky použití:

Závěrem

Animace dokáží web oživit, dají se dobře využít pro fokus efekt – tedy zaměří pozornost návštěvníka webu na konkrétní element (např. tlačítko pro vložení do košíku na stránce produktu).

Využít se dají pro plynulejší rozbalení skrytých informací a formulářů na webu, které z nějakého důvodu (např. z důvodu úspory místa, snaze o přehlednost a jednoduchost skrýváme atp.).

Správnou volbou prvků pro animaci a jejím správným provedením zabráníte nudě a dezorientaci uživatelů na webu a zlepšíte návštěvníkům ovládání webu.

Líbí? Pošlete to do světa. Díky