Animaatioilla nettisivujen ulkoasu laadukkaaksi

Animaatioilla nettisivujen ulkoasu laadukkaaksi

 

Vain vuosikymmen sitten sellaisia sivuja, joilla oli animaatioita, vältettiin, sillä ne tarkoittivat lähinnä välkkyviä mainoksia ja esiin hyppiviä tarjouksia. Nykyään asia on kuitenkin toisin ja vuorovaikutteinen, sekä animaatioihin perustuva, suunnittelu on pohjana moderneille nettisivuille sekä applikaatioille. Nettisivuja ei nähdä enää vain ruutuina koneessa, vaan niiden tulee aktiivisesti pystyä antamaan käyttäjälle tietoa ja toimimaan tämän kanssa sujuvasti, luoden miellyttävän käyttökokemuksen, sekä ulkomuodon. Jos tavoitteena on luoda yhä parempia digitaalisia tuotteita, näytyy nettisivujen ja applikaatioiden vuorovaikutteisia piirteitä arvostaa heti suunnittelusta alkaen.

Miksi animaatiot toimivat?

Liike jo luonnostaan on huomattavassa asemassa sivuston ja asiakkaan vuorovaikutuksessa. Teksti eikä staattiset kuvat oysty kilpailemaan liikkeen kanssa, sillä ihmisten silmät on ohjelmoitu lähes refleksinomaisesti vastaamaan liikkeeseen. Toimivalla animaatiolla saadaan tämä piirre hyödynnettyä.

Mitä toimiva animaatio on?

Toimiva animaatio on huomaamaton animaatio, joka on upotettu sivuston ulkoasuun, osana suunnittelua ja käyttäjäystävällisyyttä. Sillä on hyvin selkeät ja loogiset tarkoitukset:

⦁ Vähentää latausaikaa
⦁ Estämään sokaistumista
⦁ Parantaa alueellisten suhteiden muistamista

Kun suunnittelussa keskitytään ihmisten piirteisiin, jossa käyttäjä on suunnittelun keskiössä, täytyy alustan olla intuitiivinen, reagoiva ja inhimillinen. Näissä asioissa toimiva animaatio auttaa saavuttamaan tavoitteet.

Kuinka toimiva animaatio parantaa nettisivun ulkoasua?

Nettisivun tai applikaation käyttökokemus muovautuu useista eri asioista, joihin kuuluu vahvasti vuorovaikutteisuus. Liikeen lisääminen suunnitteluun voi olla tarkoituksellista ja toimivaa, kun löyetään oikeat olosuhteet. Hyvin toteutettu ja testattu toimiva animaatio voi parhaimmillaan tehdä useimmista toiminnoista ja ominaisuuksista paljon parempia, kuten:

Visuaalinen palaute

Visuaalinen palaute

Hyvän vuorovaikutuksen suunnitteleminen tuo palautetta. Palaute kertoo että järjestelmä on saanut käyttäjän tekemään toimintoja ja osoittaa nämä vuorovaikutuksen tulokset, olivat ne sitten onnistuneita tai eivät. Animaatioiden tässä kategoriassa tulee olla hyvin huomaamattomia ja niiden kuuluisi sulautua suunnitteluun.

⦁ Nappien palaute
Oikeassa elämässä napit vastaavat vuorovaikutukseemme ja näin asioiden oletetaan toimivan. Jotta niiden käyttö olisi myös digitaalisessa alustassa ennustettavaa, tulee niiden käyttäytyä samalla tavalla.

⦁ Toiminnan visuaalinen tulos
Tietyn toiminnon jälkeen animaatioilla voidaan kertoa onnistuiko, vai epäonnistuiko tietty toiminto. Esimerkiksi visuaalinen heilahdus puhelimessa, kun pin koodi on syötetty väärin on hyvä esimerkki animaatiosta joka osoittaa toiminnan visuaalisen tuloksen. Tämä on kuin pään kääntäminen sanoen “ei, yritä uudelleen”. Käyttäjä huomaa animaation ja ymmärtää heti tilanteen. Samalla tavalla käyttäjien toimintoja voidaan vahvistaa. Esimerkiksi “liity” napin jälkeen voi ilmestyä animaatio, mikä niin sanotusti lähettää pyynnön eteenpäin ja myöhemmin ruunulle voi ilmestyä “liittyminen onnistui” teksti. Tämä animaatio kertoo käyttäjälle että toiminto suoritettiin onnistuneesti.

Animaatioiden käyttö netissäan

Tilanteiden muutosten pehmentäminen

Yksi erinomainen paikka lisätä animaatioita suunnitteluun, on muutosten aikoina. Tilanteiden muutokset alustalla, erityisesti netissä, sisältävät usein kovia leikkauksia, joita käyttäjän on hankala seurata. Mikään ei tunnu yhtä luonnottomalta kuin yhtäkkiset muutokset ja käyttäjien on vaikea sulattaa niitä. Suunnittelemalla animaatio pehmentämään toimintaa saadaan sivustosta paljon miellyttävämpi käyttää ja katsoa.

Yhteyksien muodostaminen

Animoitujen siirtojen tulisi toimia välittäjinä alustan ja käyttäjän välillä, auttaen käyttäjää ymmärtämään mitä ruudulla tapahtuu, muutosten välissä. Käyttäjä yksinkertaisesti seuraa liikettä ja ymmärtää kuinka tietyt tilanteet ovat kytköksissä toisiinsa.

Kohdistaa huomion muutoksiin

Animaatiot voivat auttaa silmää näkemään, mistä uudet kohteet tulevat, tai minne piilotetut kohteet menevät, jotta ne voidaan löytää uudestaan. Animaatioilla voidaan kohdistaa käyttäjän huomio muutoksiin jotka piilottavat tai paljastavat tietoa, kuten avaamalla sivuvalikon, josta päästään eri linkkeihin. Tietty animaatio voi esimerkiksi avata valikon, tai piilottaa sen.

Statuksen näkyvyys
Järjestelmän statuksen näkyvyys

Edelleen tärkeimpiä periaatteita sivuston suunnittelussa on järjestelmän statuksen näkyvyys. Käyttäjien kannalta on erittäin tärkeää ymmärtää saatavilla oleva konteksti jäjrestelmässä, oli tilanne mikä tahansa.

Prosessin indikaattorit
Datan lataaminen ja latautumisen prosessit ovat mahtava tilaisuus animaatioille. Animoidut lataus palkit kertovat käyttäjälle kuinka kauan aikaa toiminnon suorittamiseen kuluu. Animaatiot voivat olla myös tarpeen mikäli toiminto keskeytyy tai epäonnistuu. Vaikka tämänkaltainen viesti ei ole koskaan käyttäjän puolesta toivottu, tulisi sekin tiedottaa toimivalla tavalla.

Sivun päivittäminen
Käyttäjä alkaa odottamaan heti jokaisen toiminnon jälkeen vastausta ja pahimmillaan sivustosta, tai applikaatiosta, on unohtunut merkki, joka kertoo sivuston reagoivan toimintoon. Esimerkiksi “vedä päivittääksesi” toiminnon tulisi tehdä heti reaktio. Visuaalinen palaute on kaikkein tärkeintä heti toiminnon jälkeen, sillä muuten käyttäjä ei tiedä toimineensa oikein. Animaatiot sopivat tähän hyvin.

Image: https://cdn-images-1.medium.com/max/800/1*KGOGQ2mroeFjFYNm3_FVZQ.gif
CTA: Selittävät animaatiot

Selittävät animaatiot

Joskus käyttäjät tarvitsevat hiukan lisää apua ymmärtääkseen sivuston toimivuutta ja käyttämistä, esimerkiksi tiettyjen elementtien kanssa. Tämä pätee varsinkin sellaisia alustoja, jotka sisältävät uutta, tai harvinaisempaa ominaisuutta, tai vuorovaikutustapaa.

Perehdytys
Käyttäjien perehdytys vaatii moitteettoman ulkoasun suunnittelun ja animaatiot perehdytyksessä voivat tehdä suuren vaikutuksen, varsinkin kun kyseessä on applikaatiota ensimmäistä kertaa käyttävä henkilö. Animaatio antaa loputtoman vapauden välittää mitä tahansa tietoa viihdyttävällä tavalla, oli se sitten kuinka monimutkaista, tai kuivaa tahansa.

Visuaaliset vihjeet
Animaatiot voivat tarjota käytännöllisiä ja käteviä visuaalisia vihjeitä. Selittävät animaatot ovat usein näkyvillä kun sivu avataan ensimmäistä kertaa ja animaatio kertoo kuinka tiettyjä sivun elementtejä ja ominaisuuksia tulisi käyttää. Tämänlaisia animaatioita voidaan löytää peleistä, joissa toimii erittäin hyvin progressiivinen julkaistaminen, eli pelin mekaniikka paljastuu vähitellen kun pelissä edetään. Nämä vinkin ilmestyvät esille ainostaan kun käyttäjä pääsee tiettyyn pisteeseen kokemuksessaan.

Yhteenveto

Animaatiot ovat siis tehokas työväline nettisivujen ja applikaatioiden visuaalisuuden suunnittelussa, kunhan niitä käytetään laadukkaalla tavalla. Liikettä pitää korostaa ja arvostaa heti alusta alkaen, osana luonnollista suunnittelua, koska suunnittelu on paljon enemmän, kuin pelkästään visuaalista esittämistä. Suunnitteluun ei pidä myöskään liittää ainoastaan sitä, miltä joku tuntuu ja näyttää, vaan sitä, miten se toimii.

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *