Rychlost webu vs. vizuální efekty: WOW efekt s rozumem

Jistě jste na ně již narazili. Vizuální efekty vládnou světu. A tomu virtuálnímu obzvláště. V dnešní době již nestačí, že máte, co říct. Dnes své sdělení musíte umět obléct do zajímavého kabátu. Statické obrázky příliš netáhnou, a tak jsou na řadě videa a další animace, které ozvláštňují každý online vzkaz.

Zvláště při tvorbě webových stránek, či při jejich redesignu, musíte s animacemi a dalšími vizuálními prvky pracovat. Grafik vám pomůže s jejich podobou. A vývojář je ten, který představy převede do skutečnosti. 

Obtíž u vizuálních efektů je ta, že pokud se použijí nesprávně, či v příliš velkém množství, vůbec vašim stránkám nepomohou. Proto jsme pro vás vybrali několik typů efektů a upozorníme vás na jejich výhody a nevýhody.

Animace spouštěné posouváním stránky (scroll-triggered animation)

Jak název napovídá, tuto animaci spouštíte svým skrolováním po webové stránce. Když sjíždíte po stránce níž, obsah není dopředu zobrazený, nýbrž se různě objevuje či vyskakuje. Nebo jinak reaguje na scroll pozici na webu.

Příkladem mohou být námi vytvořené stránky pro pivo Proud. Při sjíždění dolů po stránce si všimnete lahví, které se obrací, sklenice a textu, které vyjíždí ze strany, či obrázků, které se vyměňují v závislosti na scrollu. 

V této kampani mají animace za cíl doplnit slogan “Obrať proud”, a proto se lahve v několika různých případech otáčí vzhůru nohama.

Obecně tento vizuální efekt podporuje zejména atraktivitu stránek. Má za cíl pobavit návštěvníka a upoutat jeho pozornost. V čem je zádrhel? 

Často využívané, ale problematické mohou být tzv. slide-in animace, kdy se obsah postupně objevuje na stránce při scrollování. U takových animací je ale kritické správné načasování a nastavení rychlosti animací. Tedy pokud něco rychle hledáte, může se stát, že musíte čekat, než se daná část stránky zobrazí.

Animace pro hloubkový efekt (Parallax scrolling)

Část webů člení jednotlivé stránky do různě formátovaných celků. To znamená, že hlavičku a úvodní baner mohou mít jako pozadí fotografii, kdežto další textová část bude na jednobarevném pozadí. Aby nebyly přechody mezi sekcemi ostré, používá se parallax scrolling. 

To je efekt, kdy sepozadí pohybuje pomaleji než popředí při rolování stránky, což vytváří iluzi hloubky a trojrozměrného prostoru. Parallax scrolling jsme použili např. pro web addict.cz. Na úvodní stránce si ho můžete všimnout v kombinaci s úvodním videem.

Tato animace je bohužel poměrně náročná na výkon, takže je vždy třeba promyslet, zda ji můžete použít. Myslete na to, že každý vizuální efekt by měl podporovat uživatelský zážitek. A pokud se kvůli nižšímu výkonu technického řešení budou stránky zasekávat, uživatelský zážitek to nezlepší.

Video na pozadí

Abyste do webu dostali pohyb, můžetevyužít video. Poměrně velkým trendem na prezentačních webech je využití videa jako podkladu pro menu a bannery. Díky videu můžete sdělit více informací, než jedním obrázkem. Navíc na sebe strhává pozornost, protože oči podvědomě pohyb vyhledávají.

Jednou z firem, pro které jsme programovali tento efekt je Skyr. Po otevření úvodní stránky se objeví video, které vás upoutá svým příběhem a podpoří claim Žij zdravě, žij Skyr. Zároveň je zde i pečlivě domyšlenáviditelnost menu, která je v každý moment dostatečně kontrastní k pozadí.

Aby byl tento vizuální efekt působivý, musí se načítat zcela plynule a zároveň být ve vysoké kvalitě. K tomu je třeba samotné video dobře datově zoptimalizovat a streamovat.

Malé animace pro velký efekt (mikrointerakce)

Znáte to? Kliknete na tlačítko na webu. A chvilinku se nic neděje. A vám v tom kratičkém čase probleskne hlavou, jestli jste se neuklikli.

A přesně pro tyto situace tu jsou mikrointerakce. To jsou animace, kterých si pomalu ani nevšimnete, ale zajišťují lepší uživatelský zážitek. Některé z nich si můžete prohlédnout na stránkách firmy Mylord Premium. V těch jsme pracovali s tím, aby tento drobný vizuální efekt doplnil interaktivitu stránky.

Můžete si tak všimnout, že produkty, na které najedete myší se podsvítí modrou barvou. Nebo bílé pozadí, které je klikatelné, změní kurzor myši na ručičku. A vy tak víte, že můžete kliknout a dostanete se k více informacím. Či šipečka vedle odkazu naznačující pohyb na další stránku. A nebo zesvětlení a přiblížení obrázku, na který zabrousíte myší.

Každá z těchto drobnostízlepšuje váš dojem z celého webu. Stránky jsou přehlednější a vy lépe tušíte, co se stane, pokud kliknete levým tlačítkem.

Ovšem - pozor je třeba dát na konzistentnost. Efekty jsou malé, ale významné. A měly by jít vzájemně ruku v ruce. A vždy by měly znamenat totéž. Pokud se při najetí myší tlačítko/odkaz/obrázek barevně podsvítí, vždy by to mělo znamenat jednu věc, např. přechod na detail. A na celém webu by to mělo být stejné. 

Optimalizace vizuálních efektů

Každý projekt, který vytváříme, je individuální. A každý klient má jiné potřeby. S vizuálními efekty se setkáváme dnes a denně. A abychom zbytečně nezpomalovali načítání našich webů, tak se vždy pečlivě rozhodujeme, jestli vůbec chceme efekt použít (čti: jestli bude mít přínos), a pokud ano, každý prvek optimalizujeme.

Na rozdíl od šablonových webů, které často zbytečně načítají knihovny efektů, které třeba ani nepotřebují, my přesně víme, proč který efekt na danou stránku zařazujeme. Stejně tak víme, že výkonové weby (například e-shopy) potřebují jiný typ animací a v jiném množství, než weby prezentační.

Věříme, že vizuální efekty mají za úkol zvýšit úspěšnost webu. Každý efekt má své místo. A samozřejmě důvod, proč ho na stránky programujeme. Protože základním cílem každých webovek je podat informace. A k těm by se měl každý návštěvník rychle a jednoduše dostat.

Co napsat závěrem? Používejte vizuální efekty, vaše weby díky nim budou atraktivnější. A při jejich plánování myslete na vaše návštěvníky. Vždy si klaďte otázku, zda efekt pomůže nejen k atraktivitě, ale i k přehlednosti stránek. A jak ovlivní rychlost načítání. Protože vše by mělo být v rovnováze a mělo v konečném důsledku přispívat k co nejlepšímu uživatelskému zážitku.

A jak to máte vy? Všímáte si vizuálních efektů na cizích stránkách? A který se vám vryl živě do paměti?

Promyšlený web - to je OptimWeb.