Když se po zaplacení stav objednávky změní na potvrzený, krátká animace může ukázat návaznost. Když stejný prvek bez důvodu poskakuje vedle formuláře, soupeří s ním o pozornost. Motion design potřebuje účel: vysvětlit změnu, nasměrovat pozornost nebo ukázat postup.
Motion graphics jsou pohyblivá typografie, tvary, ilustrace a další grafické prvky. Mohou se kombinovat s natáčeným videem i animovanými postavami. Hranice mezi těmito postupy není ostrá.
Co se vyplatí animovat
Postup. U rezervace ukažte výběr termínu, potvrzení a výsledek. Nezobrazujte současně tři pohyby, když má divák pochopit jednu návaznost.
Proměnu. Složený a rozložený produkt, změnu stavu zásilky nebo rozdělení platby. Pohyb propojuje dva stavy; konečné informace musejí být čitelné i po jeho skončení.
Důležitý detail. Jemné zvýraznění ovládacího prvku může pomoci v návodu. Nekonečné pulzování všech tlačítek však nerozlišuje, co je hlavní.
Data. Animovaný graf může postupně vysvětlit souvislost. Uveďte zdroj, jednotky a měřítko, nechte čas na přečtení. Efekt nesmí předstírat větší rozdíl, než ukazují hodnoty.
Storyboard před animací
Pro každou scénu napište sdělení, viditelný text a akci. V jednoduchém modelovém spotu na rezervační službu může jít o problém s domluvou, výběr termínu a potvrzení. Tři srozumitelné scény jsou lepším zadáním než „hodně moderních přechodů“.
Čtený komentář si nahrajte nanečisto a stopněte ho. Rychlost řeči se liší podle jazyka, pauz a obtížnosti tématu. Pevný přepočet slov na minutu proto berte jen jako pracovní odhad. Nejprve schvalte obsah a statické kompozice, až potom náročné pohyby.
Čitelnost je součást stylu
Na mobilu kontrolujte velikost textu, kontrast a čas, po který zůstává ve scéně. Dlouhý odstavec v rychlém přechodu se nestane srozumitelným přidáním hudby. Rozdělte ho nebo nabídněte textový doprovod.
Připravte verzi s titulky a ověřte význam bez zvuku. U reklamy držte důležité informace mimo ovládací prvky cílové aplikace. Neplatí „Instagram vždy vertikálně a YouTube vždy horizontálně“; rozhoduje konkrétní umístění. Například YouTube bumper má nejvýše šest sekund, nikoli patnáct. Aktuální typy uvádí Google Ads.
Pohyb na webu potřebuje ovládání
Animace rozhraní má doprovázet funkci, nikoli zdržovat kliknutí. Respektujte nastavení omezeného pohybu a u důležitého stavu ponechte i text. Rotující ikonka sama neřekne, zda se objednávka skutečně odeslala.
U automatického pohybu trvajícího déle než pět sekund vedle dalšího obsahu počítá WCAG s možností pozastavit, zastavit nebo skrýt, s výjimkou nezbytného pohybu. Je to jiné pravidlo než obecné doporučení používat méně animací.
Interaktivní ukázku se změnou stavu můžete otevřít v článku o webdesignu. Sledujte, zda je výsledek srozumitelný i při vypnutém pohybu.
Co určuje cenu
V mé nabídce je animace loga jako doplněk od 3 000 Kč, Short spot od 5 000 Kč a motion graphics / explainer od 12 000 Kč. Nejde o sazbu za sekundu. Rozhoduje scénář, původní grafika, počet scén, hlas, zvuk, verze a revize. Rozsah potvrzuje nabídka reklamních videí.
Praktický příklad: Stejných 20 sekund, jiná práce
AUTORSKÁ UKÁZKA · FIKTIVNÍ DATA
| Položka | Jednoduchý spot | Vysvětlující animace |
|---|---|---|
| Scénář | Jeden produkt a CTA | Postup objednání |
| Grafika | Existující lampa | Vlastní stavy rozhraní |
| Pohyb | Krátké přechody | Návaznost více stavů |
| Předání | Jeden formát | Formáty a jazykové verze |
Model porovnává rozsah; samotná délka cenu neurčuje.
Jak zadat připomínky a vyhodnotit výsledek
Napište čas a konkrétní problém: „v 00:08 nestihnu přečíst datum“ nebo „pohyb tlačítka vypadá jako chyba“. Rozlište opravu textu od změny celého stylu. Než přijmete výstup, pusťte ho člověku, který nezná scénář, a požádejte ho, aby popsal hlavní sdělení.
Po zveřejnění sledujte výsledek podle účelu: porozumění postupu, dokončení úkolu či vhodné poptávky. Počet přehrání sám nepotvrzuje vyšší prodej. Ani animace není automaticky účinnější než dobře zvolený statický obrázek.