Kuidas animatsioon kujundab kasutajakogemust veebis

Veebianimatsioon kujundab kasutajakogemust rohkem, kui enamik meeskondi moistab. Nupp, mis hooljumise ajal pulseerib, kaart, mis kerimise ajal vaatevalja libiseb, laadimiskeeris, mis annab teada, et midagi toimub -- need ei ole kosmetilised valikud. Need on funktsionaalsed disainiotsused, mis mojutavad seda, kuidas inimesed teie veebisaiti tajuvad, sellega suhtlevad ja seda maaletavad.

Aga siin on see asi: animatsioon on uks veebidisaini koige rohkem vaaarkasutatud toolistu. Olen auditeerinud sadu saite, kus uhked yleminekud kahjustasid aktiivselt joodlust, ajasid kasutajaid segadusse voi lisasid mobiilis laadimisajale sekundeid. Lohe animatsiooni vahel, mis aitab, ja animatsiooni vahel, mis kahjustab, seisneb kavatsuses. Kas teate, miks midagi liigub? Kas saate selgitada iga ylemineku eesmarki oma lehel?

See juhend selgitab, kuidas animatsioon tegelikult kasutajakogemust mojutab -- uuringute, paaarisnumbrite ja praktiliste naapunaaite toel, millele saate sel naadalal tegutseda. Olenemata sellest, kas ehitate sihtlehte voi kujundate ymber ettevotte veebisaiti, ei ole liikumisdisaini moistmine enam vabatahtlik.

Selgitame seda kohe: veebianimatsiooni mote ei ole muuta asju lahedaks. See on kommunikatsioon. Iga liikumistykk lehel peaks vastama yhele neist kusimistest: mis just juhtus? Mida peaksin jargmiseks vaatama? Kust see element tuli ja kuhu laab?

Moelge kulgpaneeli menyyle, mis libiseb vasakult sisse. See libistav liikumine utleb teile, et menyyy 'peitis' end ekraanist valja -- see loob teie peas ruumilise mudeli. Moistate, kus menyyy asub isegi siis, kui see ei ole nahtav. Voordlege seda menyydega, mis ilmub lihtsalt yleminekuta. See toolotab, muidugi, kuid teie aju peab tegema rohkem tood liidese moistmiseks.

Google'i Material Design meeskond nimetab seda kontseptsiooni 'tahenduslikeks yleminekuteks'. Nende uurimistoo leidis, et liikumine aitab kasutajatel luua vaimse mudeli sellest, kuidas liides on organiseeritud. Kui elemendid animeerivad olekute vahel, toolotlevad kasutajad muudatusi 70% kiiremini kui siis, kui olekud lihtsalt vahetuvad.

UI animatsiooni kolm pohifunktsiooni on:

• Tagasiside -- kinnitamine, et toiming registreeriti (nupu vajutamise rippel, vormi esitamise linnuke)
• Orientatsioon -- naitamine, kus olete ja kust tulite (lehe yleminekud, leivapuru avalikustamised)
• Tahelepanu suunamine -- pilgu juhtimine millegi olulise poole (pulseeriv teavitusmaark, libisev yleskutse)

Kui animatsioon ei teeni vaahemalt yht neist eesmaarki dest, ei peaks see toenaoliselt eksisteerima. Olen nainud agentuure, kes lisavad parallaksiefekte ja hooljuvaid elemente, kuna need naavad Dribbble'i shots muljetavaldavad valja. Paarisel veebisaidil paariset kasutajatega, kes pyyyavad paariset ylesandeid taita? See asi on teel.

Parim animatsioon on nahtamatu selles motes, et kasutajad ei pane seda teadlikult tahele -- nad lihtsalt tunnevad, et liides on sujuv ja reageeriv. See on sihtmaark, mille poole pyyyada.

Mikro-interaktsioonid on kasutaja toimingutele vaaiksed animeeritud vastused: libisev lyylitusymberlyyliti, meeldib-nupp, mis puhkeb vaarviga, tekstivaali, mis rapub, kui sisestate kehtetu andme. Dan Saffer kirjutas selle kohta sona otseses motes raamatu (Microinteractions: Designing with Details) ja jagab need neljaks komponendiks: kaivitaja, reeglid, tagasiside ja silmused.

Miks on need nii olulised? Kuna nad taidavad lohe inimese ootuse ja digitaalse vastuse vahel. Kui keeeraksid fyysili se valguse lyyliti, saad kohese kompimis- ja visuaalse tagasiside. Digitaalsetel liidestel seda luksust ei ole, nii et mikro-interaktsioonid simuleerivad seda.

Siin on see, mida uurimistoo naitab. Interaction Design Foundationi uuring leidis, et mikro-interaktsioonid vahendavad tajutavaid ootaegu, andes kasutajatele toolotlemise ajal midagi vaadata. Need vahendavad ka vigade maarasid -- see rapsiv vormivaali on tooghusam kui ainult punane tekstisonumi, kuna see jaalgib fyysili st aistingut 'ei, see on vale'.

Mikro-interaktsioonide praktilised reeglid on yllataval t lihtsad:

• Hoidke need alla 300ms. Koik pikem tundub loid. Enamiku olekumuutuse animatsioonide ideaalne aeg on 150-250ms. Alla 100ms ja see tundub vahetu (mis on tapiuslik tagasiside jaoks nagu nupu vajutused). Yle 400ms ja kasutajad hakkavad moeldlema, kas midagi laaks katki.
• Yhitage interaktsiooni mastaabiga. Vaaikne nupu hooljumisefekt peaks olema peen. Taaisekraani yleminekul voib vootta kauem aega ja olla dramaatilisem. Animatsiooni visuaalne kaal peaks vastama toimingu olulisusele.
• Aarge korrake tarbetult. Konfeti pursatus esimese ostu puhul? Suureparane. Konfeti iga kord, kui keegi kloopsab 'Lisa ostukorvi'? Kurnav. Iga animatsiooni uudsus kulub kiiresti, kui kasutajad sellega korduvalt kokku puutuvad.
• Kasutage loostustfunktsioone, mitte kunagi lineaarset ajastust. Loomulik liikumine kiirendab ja aeglustub. Lineaarne liikumine naeb robotliku valja. CSS ease-out sissepaaside jaoks, ease-in vaaljumiste jaoks ja ease-in-out olekumuutuste jaoks katab 90% teie vajadustest.

Ettevotte veebisaitidel ja SaaS toodetel annavad hasti teostatud mikro-interaktsioonid vaikselt marku, et toode on viimistletud ja usaldusvaarne. Need on kvaliteedi puhverserver -- kui vaaiksed asjad on oigesti tehtud, eeldavad kasutajad, et suured asjad on ka lahendatud.

Kerimispohine animatsioon on liikunud uudsusest legitiimseks disainimusteriks. Pohiidee: kui kasutajad kerivad lehte alla, animeerivad elemendid vastusena kerimisasendile. Edenemisribad taiduvad, pildid tuhmuvad sisse, jaotised libisevad paika ja ambitsioonikamades rakendustes avanevad terviklikud narratiivid.

CSS Scroll-Driven Animations spetsifikatsioon (nyyyd toetatud Chrome'is, Edgeis ja Safaris) on siin maaangu muutnud. Varem nooudis kerimisega seotud animatsioon JavaScripti teeke nagu GSAP ScrollTrigger voi Intersection Observer haakkimisi. Nyyyd saate siduda animatsioone otse kerimise edenemisega puhtas CSS-is scroll-timeline ja view-timeline omadustega. See on tohutu joodluse võit, kuna CSS animatsioone saab teha komposiidis GPU-l ilma pohilonnga puudutamata.

Aga raagigem sellest, millal kerimisanimatsioon tegelikult toolotab versus millal see tagasi lyyob.

See toolotab, kui:

• See avaldab sisu progressiivselt loogilises jaarestuses (moelge: tootefunktsiooni juhend, mis avaldab iga jaotise kerimise ajal)
• See loob parallaksi kihtide kaudu sygavustunnet loetavust ohverdamata
• See pakub edenemise tagasisidet (naaiteks lugemise edenemisriba)
• See kaivitab laisalt laaditud sisu visuaalselt graatsiliselt, mitte aakitselt ilmuvate piltide asemel

See lyyyob tagasi, kui:

• See kaaperdab kerimisratta (scroll-jacking), sundides kasutajaid eelnevalt maarratletud kerimissammudesse -- see on uks kasutajauuringute kohaselt enim vihatuid UX mustreid
• See loob nii palju visuaalset tegevust, et kasutajad ei suuda tegelikult sisu lugeda
• See lisab markimisvaarse JavaScripti koormuse lihtsalt turunduslehekuljel dekoratiivse parallaksi jaoks
• See ei arvesta erinevaid kerimiskiirusi voi puuteplaadi versus hiire sisendi

Sihtlehtede puhul voivad moodukad kerimispohised avalikustamised tooeliselt kaasatust parandada. A/B testimine mitmest agentuurist, kellega olen toolotanud, naitab, et progressiivsed avalikustuse paigutused kipuvad olema 10-15% madalama poikemaaaraga vorreldest taelikult staatiliste lehtedega -- kuid ainult siis, kui animatsioon on peen ega viivita sisule juurdepaaasule.

Igal animatsioonil on hind. See tarbib CPU tsyykleid, GPU maaluü, aku tooliga ja ribalaiust (kui laadite animatsiooni teeke voi raskeid varasid). Kusimus ei ole selles, kas saate endale animatsiooni lubada -- see on selles, kas UX-i kasu oiguistab joodluskulud.

Siin on numbrid, mis loevad:

• 60 kaadrit sekundis on sujuva animatsiooni eesmaark. See annab teile umbes 16,67ms kaadri kohta koigi paigutus-, krundi- ja komposiitoperatsioonide teostamiseks. Langege sellest allapoole ja kasutajad tajuvad toolemist -- kogelust, rebestust voi mahajaamust.
• Animatsiooni teegid lisavad koormuse. GSAP kaalub umbes 25KB gzipituna. Framer Motion on umbes 32KB. Lottie maangija on umbes 40KB, pluss teie JSON animatsioonifail. Kiirel uhendusel on see taahtsusetu. 3G mobiiliuhendusel areneval turul? Need kilobaidid liiduvad kiiresti.
• Valed CSS omadused kaivitavad kallid paigutuse ymbrerarvutused. Laiuse, korguse, ylemise, vasaku, veeriste voi polstri animeerimine sunnib brauserit ymber arvutama paigutuse potentsiaalselt iga elemendi jaoks lehel. Teisenduse ja laabipaistvuse animeerimine on peaaegu tasuta, kuna neid omadusi saab taelikult kaasitelda GPU komposiitor.

MDN-i animatsiooni joodlusjuhend soovitab jargmist hierarhiat: eelistage CSS yleminekuid lihtsatele olekumuutustele, kasutage CSS animatsioone keyframe-jaarestuste jaoks ja reserveerige JavaScripti animatsioon (requestAnimationFrame) keeruka, dynaamilise liikumise jaoks, mis soltub kasutaja sisendist voi kaaitusaegsetest andmetest.

Praktiline animatsiooni joodluseelarve voiks valja naaha nii:

• Animatsiooniga seotud JavaScript kokku: alla 50KB gzipituna
• Animatsioonifailide varad (Lottie JSON, spriidi lehed): alla 200KB kokku
• Yhkski animatsioon ei tohiks blokeerida pohilonnga rohkem kui 10ms yhes kaadris
• Koik dekoratiivsed animatsioonid peaksid olema peatatavad prefers-reduced-motion kaudu

Olen nainud paarisat projekte, kus Lottie animatsioon kangelasjaotises lisas mobiilis Suurimale Sisuplaadile 800ms. Kliendile meeldis, kuidas see naagi valja. Kasutajad poorkasid enne laadimise lopetamist. See on kompromiss, mida alati haldate.

See ei ole pyha sooda -- see on tehniline otsus. Nii CSS-il kui ka JavaScripti animatsioonidel on konkreetsed tugevused ja oige valik soltub sellest, mida pyyyate saavutada.

CSS animatsioonid ja yleminekud on suureparased, kui:

• Animatsioon on eelnevalt maarratletud ega muutu kaaitusaegsetel tingimustel pohinevalt
• Animeerite teisendust, laabipaistvust, filtrit voi loikamisteed
• Soovite, et brauser optimeeriks komposiitimine automaatselt
• Animatsioon kaaivitatakse olekumuutusega (hooljutamine, fookus, klassi lyylitamine)

JavaScripti animatsioonid (requestAnimationFrame, GSAP voi Framer Motion kaudu) on paremad, kui:

• Animatsioon soltub dynaamilistest vaartustest (kerimisasend, hiirekordinaadid, API andmed)
• Vajate tapsut jaarestust konkreetsete punktide juures tagasihelistustega
• Orkestrreeerite keerukat mitmeelemendilise koreograafia
• Peate toetama funktsioone, mida CSS veel ei suuda kaasitelda (naaiteks vedruufyyysika)

Siin on muster, mida kasutan enamikus projektides: CSS kaasitelleb koiki mikro-interaktsioone (hooljutamised, fookusseisundid, lyylitused, lihtsad yleminekud). JavaScript kaasitelleb kerimispohiseid jaarestusi ja koike, mis reageerib reaalajalis kasutaja sisendile. See annab korgessa sagedusega asjade jaoks CSS-i joodluse eelise, hoides JavaScripti paindlikkuse keeruka orkestrreerimise jaoks.

Uued CSS animatsiooni funktsioonid (scroll-timeline, view-timeline, yksikud teisenduse omadused) sulgevad lohhe kiiresti. Kaks aastat tagasi vajasid peaaegu koigi kerimisanimatsiooni jaoks GSAP-i. Taana hindan, et 60-70% kerimispohiste efektide saab teha puhtas CSS-is parema joodlusega. Jaalgiige spetsifikatsiooni edenemist -- CSS toologryhm laiendab aktiivselt JavaScriptita voimaluste ringi.

Raagigem rahast. Kas animatsioon tegelikult konversioonides naab, voi on see lihtsalt 'tore omada'?

Andmed on segased, kuid trendid on positiivsed -- suure hoiatusega. Animatsioon parandab konversioone, kui see vahendab hoordumist ja suurendab selgust. See kahjustab konversioone, kui aeglustab lehekylgi voi hajutab tegevusele kutsumiselt tahelepanu.

Siin on see, mida numbrid utlevad:

• Ettevotted, kes optimeerisid animatsiooni ligipaasetavuse ja kiiruse jaoks, naagid konversioonimaaara parandusi 15-20%, vastavalt Educational Voice uurimistoo poolt kogutud andmetele animatsiooni ROI kohta.
• Forbes on teatanud, et parem UX disain ylaldiselt (mis hosisaldab laabimoldeld ud liikumist) suudab konversioonimaarasid suurendada kuni 400% vorra. Animatsioon on osa sellest mootmisest, mitte kogu asi.
• A/B testid mitmest agentuurist naitavad, et animeeritud tegevusele kutsumised (peen pulsatsioon, vaarvinihe kerimisvaatevalja sisenemisel) yletavad staatilisi tegevusele kutsumisi keskmiselt 5-12%. Vootmesoon on 'peen' -- agressiivselt vilkuvatel voi poorkuvatel nuppudel on vastupidine mojju.
• Lehe laadimisanimatsioon, mis viivitab sisu nahtavust rohkem kui 1 sekund, korreleerub 7% poikemaaara suurenemisega iga lisaksse viivituse sekundi kohta.

Muster on selge: animatsioon, mis vahendab kognitiivset koormust ja annab selget tagasisidet, aitab konversioonidele. Animatsioon, mis lisab visuaalset myyra voi aeglustab asju, kahjustab neid.

Sihtlehtedel soovitan animatsiooni eelarve koondamist kolmele suure mojuga valdkonnale: kangelasjaotise sisenemine (kohese kvaliteedimulje loomiseks), tegevusele kutsumise ala (peen tahelepanu suunav liikumine) ja sotsiaalse toendi elemendid (animeeritud loendid voi iseloomustuste karuselid sujuvate yleminekutega). Koik muu peaks olema staatiline voi minimaalselt animeeritud.

Veebiportaalide ja armatuurlaua stiilis liideste puhul on konversioonilugu erinev. Siin seisneb animatsiooni vaartus ylesande taitimise kiiruses. Animeeritud olekuyleminekud (andmete laadimine, filtri muutused, kirjete uuendused) aitavad kasutajatel operatsioonide ajal konteksti sailita. 'Konversioon' on saada kasutajad oma toolovoo lopetamiseni segaduse voi frustratsiooni ta.

See on jaotis, mida enamik animatsiooniartikleid vahele jaatab, ja see on vaieldamatult koige olulisem.

Umbes 35% yle 40-aastastest taaiskasvansutest kogevad mingil maaral vestibulaarseid haareid, mis voivad poojustada liikumistundlikkust. Nende kasutajate jaoks ei ole animeeritud sisu lihtsalt tyytav -- see voib kaivitada iiveldust, pearinglust, migreeni voi krampe. See ei ole niishiprobleem. See on kolmandik teie taaiskasvanud sihtgrupist, kes voib teie saidil kohutava kogemuse saada.

Prefers-reduced-motion meediapaaing on olemas tapselt sellel pohjusel. Iga kaasaegne brauser toetab seda ja see yhendub otse operatsioonisyysteemi ligipaasetavussaatetesse. Selle rakendamine on lihtne:

Minimaalselt peaksite koik dekoratiivsed animatsioonid meediapaaringu kontrollimise sisse maassima. Kui prefers-reduced-motion on seatud 'vahendamisele', keelake animatsioon taaeilikult voi asendage see lihtsamate alternatiividega (naaiteks pleek libistamise asemel). Funktsionaalsed animatsioonid -- nagu laadimiskeeris -- voivad jaada, kuid neid tuleks lihtsustada.

Lisaks meediapaaringule on siin veebianimatsiooni ligipaasetavusjuhised:

• Automaatselt maangiva videot voi animatsiooni, mida ei saa peatada, ei tohiks olla. WCAG 2.2 edukriteerium 2.2.2 noudab, et automaatselt algav liikuv, vilkuv voi kerimissisu oleks peatatav, peatatav voi peidetav.
• Midagi ei tohiks vilkuda rohkem kui kolm korda sekundis. See on kova reegel -- kolm vilkumist sekundis on WCAG 2.2 edukriteeriumis 2.3.1 tuvastatud krampide laavi.
• Pakkuge juhtimisseadmeid. Kui teie lehel on markimisvaarne animatsioon, kaaluge nahtava lyyliti lisamist, mis voimaldab kasutajatel liikumist saidiuleselt vahendada voi keelata. Apple.com teeb seda hasti oma tootelehekylgedel.
• Testige paarisate kasutajatega. Automaatsed ligipaasetavustoolid suudavad mooned liikumisprobleemid tuvastada, kuid miski ei asenda testimist inimestega, kellel on tegelikult liikumistundlikkus.

Ligipaasetavus ei ole funktsioon, mida lopus lisada. See on disainikitsendus, mis peaks kujundama teie animatsioonistrateeegiat algusest peale. Vezertis kaasitellab meie UX/UI disainiprotsess liikumise ligipaasetavust esmajaargulise noudena, mitte jarelemdelduna.

Sihtlehed on koht, kus animatsioon oma vaartuse teenib voi poletab. Eesmaark on uks: panna kulastaja yht konkreetset toimingut tegema. Iga disainilement kas toetab seda eesmarki voi oneustab seda.

Parast kymne te sihtlehtede ehitamist ja testimist on siin see, mis tegelikult toolotab:

Kangelasjaotise sisenemine (0-2 sekundit) Pealkirja, alapealkirja ja tegevusele kutsumise nupu jaarestikune tuhmuvus loob tahtliku disaini tunde. Kogu animatsioon: 800ms-1,2s 100-200ms vahega elementide vahel. See ei tohiks sisu blokeerida -- kasutage CSS animatsiooni animation-fill-mode: backwards, et elemendid oleksid ekraanilugejatele algusest nahtavad.

Kerimispohised jaotise avalikustamised Kui kasutajad kerivad, tuhmub ja libiseb iga sisujaotis veidi yless (translate Y 20-30px-st 0-ni, laabipaistvus 0-st 1-ni). See loob meeldiva rytmi ja annab marku, et uus sisu laaditakse. Hoidke kaivituspunkt umbes 15-20% elemendist vaateaknas nahtaval, nii et animatsioon lopeb enne, kui kasutaja sisu lugema peab.

Animeeritud sotsiaalne toend Loenduri animatsioonid ('500+ projekti teostatud'), mis kaivituvad kerimise ajal, on tooghusad, kuna need toombavad tahelepanu teie usaldusvaaarsuse moodikutele. Kasutage kiiret loenduri animatsiooni (1-1,5 sekundit), mitte aeglast roomamist.

Tegevusele kutsumise tahelepanumehhanismid Vaaga peen pulseeriv vari voi kerge mastaabi nihe (1,0-st 1,02-ni) peamise tegevusele kutsumise nupul, kui see esimest korda vaatevalja siseneb. Kaivitage see uks kord -- aarge kunagi silmustage. Tegevusele kutsumiste silmustatud animatsioonid testivad halvasti, kuna need loovad survetunde kutsumise asemel.

Mis ei toolota:

• Taustavideo, mis lyykab Suurima Sisuplaadi yle 2,5 sekundi
• Osakeste efektid voi hooljuvad elemendid, mis konkureerivad tekstiga tahelepanu parast
• Kerimiste kaaperdamine, mis takistab kasutajatel lehte omasel tempos skaneerida
• Laadimisekraanid voi sissejuhatuse animatsioonid enne sisu naitamist (leht peaks olema kasulik 1 sekundi jooksul)

Sihtlehe animatsiooni ideaalpunkt on see, mida nimetan 'vaevalt olemasolevaks' -- kasutajad peaksid tundma, et leht on reageeriv ja viimistletud, ilma et suudaksid konkreetseid animatsioone valja tuua. Kui keegi kommenteerib, kui lahedad teie sihtlehe animatsioonid on, olete toenaoliselt yle pingutanud.

Olen nainud neid mustreid korduvalt klientide auditites, agentuuride portfooliotes ja isegi suurkaubamaaarkide veebisaitidel. Vaeldige neid.

1. Paigutuse omaduste animeerimine teisenduste asemel. Veeriste, polstri, laiuse voi korguse animeerimine kaivitab paigutuse ymber arvutuse kogu lehel. Jaage transform (translate, scale, rotate) ja laabipaistvuse juurde. See uks muudatus suudab kogeleva animatsiooni viia 15fps-lt sujuva 60fps-ni.

2. Animatsiooni kasutamine laadimise asendajana. Uhked sissejuhatuse animatsioonid, mis viivitavad sisu nahtavust, ei muuda aeglaseid laadimisaegu kiiremaks -- need muudavad need kujundatuks, mis on halvem. Kui teie leht votab 3 sekundit interaktiivseks muutumiseks, parandage joodlusprobleem. Aarge kaunistage seda poorgeva logoga.

3. Prefers-reduced-motion ignoreerimine. See on ligipaasetavuse ebaonnestamine, mitte eelistus. Umbes 35% yle 40-aastastest taaiskasvanustest on mojutatud vestibulaarsetest haareidest. Selle meediapaaringu ignoreerimine tahendab, et teie sait voib poojustada toelikku fyyysilist ebamugavust.

4. Animatsiooni kohustusliku moistmise jaoks tegemine. Kui kasutajad ei suuda teie liidest moistsa ilma animatsiooni lopetamist ootamata, on teil teabearhitektuuri probleem. Animatsioon peaks moistmist taustama, mitte asendama.

5. Esimese renderduse ylekoormus. Mitu samaaegset sissejuhatuse animatsiooni (logo keerleb sisse, navigatsioon libiseb alla, kangelane tuhmub yles, osakesed hooljuvad ringi) loovad visuaalse kaose. Jagage oma sissejuhatuse jaarestusi ja hoidke samaaegsed animatsioonid maksimaalse 2-3 elemendini.

6. Ebayhtsed loostusfunktsioonid ja ajastus. Pooorke, elastse, lineaarse ja ease korvade segunemine samas liideses loob lahknevat kogemust. Valige uks voi kaks lostusfunktsiooni ja kasutage neid jaarejekindlalt. Teie liikumisel peaks olema kogu saiti laabi tunnetatav 'tunne'.

7. Madala vooimusega seadmetele varuplaani puudumine. See sujuv GSAP ajaskaala naab teie M3 MacBookil suureparane valja. Kolme aasta vanuses Android-telefonis 3 GB RAM-iga? See on slaidiesitlus. Testige paariset seadmetel, seadistage joodluseelarve ja olge valmis graatsiliselt halvenema.

Veebianimatsioon on kasvanud kaugemale ajastust 'lisage parallaksi ja nimetage seda kaasaegseks'. 2026. aastal on liikumine funktsionaalne disainitooeriist, millel on moodeetav mojju kasutajakogemusele, konversioonimaaradele ja ligipaasetavusele.

Pohimotted on lihtsad: animeerige eesmaagiparaselt, optimeerige joodluse jaoks, austage kasutaja eelistusi ja testige paariset seadmetel. Iga yleminekul peaks vastama kusimisele 'miks see liigub?' Kui te ei suuda pohjust selgitada, eemaldage animatsioon.

Kaubamaargi d ja tooted, kes seda oigesti teevad, loovad liideseid, mis tunduvad vaevata. Mitte selleeparast, et neil pole keerukust, vaid kuna liikumine sildab keerukuse yle viisil, mis tundub loomulik. See on eesmaark -- mitte muljet avaldada kasutajatele oma animatsioonieksioskuste, vaid panna neid unustama, et nad kasutavad uldse liidest.

Kui ehitate voi kujundate ymber veebisaiti ja soovite animatsiooni, mis tegelikult toolotab teie aari eesmaaarkide jaoks, vootke meie meeskonnaga yhendust. Laheneme igale projektile -- sihtlehtedest ettevotte veebisaitideni kuni veebiportaalideni -- sama pohimottega: liikumine peaks teenima oma koha lehel, voi see ei kuulu sinna.