4 tapaa käyttää funktionaalista animaatiota UI-suunnittelussa
Vain kymmenen vuotta sitten käytettyjä käyttöliittymiä, joissa käytettiin animaatioita, välittyivät useimmiten ponnahdusikkunoiden ja vilkkuvien mainosten yhteydessä, mutta tämä on muuttunut. Nykyään vuorovaikutussuunnittelun ja animaation yksityiskohdat ovat tärkeä ero nykyaikaisissa verkkosivustoissa ja nykyaikaisissa sovelluksissa. Tämä ajattelutapa muuttuu selkeästi Zurbin lausunnossa:
Emme enää ole vain staattisten näyttöjen suunnittelua. Suunnittelemme siitä, miten käyttäjä näistä näytöistä voi katsella sisältöä.
Jos haluamme suunnitella parempia digitaalisia tuotteita, meidän on omaksuttava sovelluksen ja verkkosivustojen interaktiivinen luonne alusta alkaen.
Miksi animaatio toimii
Liikkeellä on luonteeltaan korkein näkyvyys käyttöliittymässä. Sekä tekstinkopio tai staattiset kuvat eivät voi kilpailla liikkeen kanssa. Silmämme on kiinnitetty huomiota liikkuviin esineisiin - se on melkein refleksi. Voimme hyödyntää tätä toiminnallisella animaatiolla.
Mikä on funktionaalinen animaatio?
Toiminnallinen animaatio on rajallinen animaatio, joka on upotettu käyttöliittymään osana kyseisen mallin toimivuutta. Se on hyvin selkeä ja looginen tarkoitus:
- Vähennä kognitiivista kuormitusta
- Estä muutos sokeus
- Parempi muistelu tilapoliittisista suhteista
Ihmiskeskeisessä suunnitteluprosessissa, jossa käyttäjä on ensisijainen kohde, käyttöliittymän on oltava intuitiivinen, reagoiva ja inhimillinen. Toiminnallinen animaatio auttaa sinua saavuttamaan nämä tavoitteet.
Kuinka toimiva animaatio parantaa UX: ää
Kokemuksemme ja vaikutelman sovelluksesta tai sivustosta muotoillaan tekijöiden yhdistelmällä, ja vuorovaikutuksella on keskeinen rooli. Liikkeen lisääminen suunnitteluun voi olla tarkoituksenmukaista ja toimivaa, kun löydämme oikeat olosuhteet. Hyvin harkitulla ja testatuilla toiminnallisilla animaatioilla on mahdollisuus täyttää useita toimintoja, kuten:
1. Visuaalinen palaute
Hyvä vuorovaikutussuunnittelu antaa palautetta. Palaute tunnustaa, että järjestelmä on saanut käyttäjän toiminnan ja osoittaa vuorovaikutuksen tuloksen, oliko se onnistunut vai ei. Tämän ryhmän animaation on oltava erittäin hienovarainen ja sen pitäisi olla suunniteltu reagoimaan.
Nappi palaute
Tosielämässä painikkeet toimivat vuorovaikutuksessa, ja näin odotamme asioiden toimivan. Jotta käyttäjä olisi ennustettavissa, digitaalisen käyttöliittymän pitäisi toimia samalla tavoin.
Lähde: Jaron Pulver
Tarkastele toiminnan lopputulosta
Seuraamalla periaatekehitystä , älä kerro , voit käyttää animoitua palautetta korostaa, että jokin meni vikaan. Esimerkiksi visuaalinen ravistelu animaatio vääränlaisen salasanan merkinnässä. Se on kuin päätä tärinää kuin sanoa "ei, yritä uudelleen". Käyttäjä huomaa animaation ja ymmärtää heti nykyisen tilan.
Voit myös vahvistaa toimia, joita käyttäjä suorittaa. Alla olevassa esimerkissä, kun käyttäjä napsauttaa "Lähetä", spinner ilmestyy hetkeksi, ennen kuin sovellus näyttää menestystilan. Valintaruudun animaation ansiosta käyttäjä tuntee, että prosessi on päättynyt onnistuneesti.
Kuvahinta: Colin Garven
2. Pehmentävät tilan muutokset
Muut hyvät paikat animaation lisäämiseksi muotoiluun ovat muutoksen hetkenä. Valtion muutokset käyttöliittymässä, erityisesti verkossa, sisältävät usein kovaa leikkausta, mikä voi vaikeuttaa niiden noudattamista. Mikään ei tunnu luonnollisemmalta kuin äkillinen muutos. Käyttäjän käsittelemät käyttöliittymän nopeat muutokset ovat vaikeita. Nämä muutospyyhkeet pitäisi pehmentää lisäämällä animaatiota käyttöliittymään.
Yhteyksien luominen
Animoidut siirtymät toimivat välittäjinä käyttöliittymän eri osavaltioiden välillä, mikä auttaa käyttäjiä ymmärtämään, mitä tapahtuu näytön tilan muuttuessa. Käyttäjä yksinkertaisesti seuraa liikkeitä ja ymmärtää, miten kaksi käyttöliittymän tilaa liittyy.
Kuvahaku: Anish Chandran
Se toimii myös pienoiskuvien ja yksityiskohtien yhdistämisessä:
Kortti animoi alkuperäisestä asemastaan modaalissa olevalle paikalle, mikä tekee selväksi, että se on sama kohde vain tarkemmin.
Kuvahaku: Charles Patterson
Huomio muutoksista
Animaatio voi auttaa silmää näkemään, mihin uusi kohde tulee sen paljastamasta tai piilotetusta esineestä menee, ja sitä voidaan löytää uudelleen. Voimme käyttää sitä kiinnittämään huomiota muutoksiin, jotka piilottavat tai paljastavat tietoja, kuten sisällön sivupohjien avaaminen. Alla olevassa esimerkissä tärkein navigointi liukuu tieltä, kun napsautat hampurilaiskuvaketta. Tämä liike kertoo, että päävalikko ei ole kadonnut.
Kuvahaku: Tamas Kojo
3. Järjestelmän tilan näkyvyys
Jakob Nielsenin 10 käyttökelpoisuuden heuristisesta alkuperästä on järjestelmän tilan näkyvyys edelleen tärkeimpiä periaatteita käyttöliittymäsuunnittelussa. Käyttäjille on erittäin tärkeää tietää ja ymmärtää niiden nykyiset yhteydet järjestelmään milloin tahansa.
Edistymisindikaattorit
Tietojen lataaminen ja lataaminen ovat hyviä mahdollisuuksia toiminnalliselle animaatiolle. Animoidut latauspalkit asettavat odotuksen siitä, kuinka nopeasti toiminto käsitellään. Animaatio voi olla hyödyllistä epäonnistumisen tapahtuessa. Jopa miellyttävää ilmoitusta, kuten tietojen lataamista epäonnistuvat, pitäisi toimittaa mukavalla tavalla.
Kuvahaku: xjw
Vedä Päivitä
Käyttäjän odotusaika alkaa hetkeä, jolloin he alkavat toimia, ja pahimmassa tapauksessa on, että heillä ei ole mitään merkkejä siitä, että järjestelmä on saanut sen. Vedä virkistää toimintaa pitäisi olla välitön reaktio . On välttämätöntä antaa visuaalista palautetta heti, kun käyttäjä on vastaanottanut pyynnön osoittamaan, että prosessi on aloitettu. Animaatio auttaa sinua tämän kanssa.
Kuvahaku: Tony Babel
4. Selittävä animaatio
Joskus käyttäjät tarvitsevat hieman lisäapua ymmärtääkseen käyttäjän virtausta tai vuorovaikutuksessa tiettyjen rajapintaelementtien kanssa. Tämä koskee erityisesti käyttöliittymiä, jotka sisältävät uusia tai tuntemattomia ominaisuuksia tai vuorovaikutuksia käyttäjälle.
perehdytyksessä
Käyttäjä onboarding vaatii virheetöntä UX: tä, ja animaatiot onboard-virtauksella vaikuttavat valtavasti siihen, miten ensimmäiset käyttäjät sitoutuvat sovellukseen. Animaatio antaa sinulle rajoittamattoman vapauden välittää mitä tahansa, vaikka kuinka monimutkainen tai kuinka kuiva asia, viihdyttävällä tavalla.
Kuvahaku: Anastasiia Andriichuk
Visuaaliset vihjeet
Animaatio voi tarjota hyödyllisiä visuaalisia vihjeitä. Selventävä animaatio näkyy useimmiten sivun ensimmäisen kerran avaamisen yhteydessä ja animaatio näyttää, kuinka tietyn sivun osia käytetään. Tällainen animaatio löytyy peleistä, jotka usein käsittelevät hyvin progressiivista paljastamista paljastaen pelimekaniikan, kun siirryt edelleen peliin. Tällaiset vihjeet alkavat vain, kun käyttäjä saavuttaa sopivan pisteen kokemuksestaan.
johtopäätös
Animaatio on tehokas työkalu, kun sitä käytetään hienostuneesti.
Meidän on omaksuttava liike alusta alkaen ja ajateltava sitä luonnollisena osana suunnittelumme, koska muotoilu on enemmän kuin pelkkä visuaalinen esitys. Kuten Steve Jobs sanoi suunnittelusta: Ei ole vain, miltä se näyttää ja tuntuu. Suunnittelu on, miten se toimii.