Animaatiot voivat selkeyttää käyttöliittymän toiminnallisuutta. Mobiilisovelluksissa animaation käyttö on jo aika pitkällä ja se on kovassa kasvussa verkkosivuillakin. Muista toki, että animaatioita ei kannata lisätä vain huvin vuoksi. Niiden pitäisi olla tarkkaan mietittyjä ja oikeasti antaa sivustolle lisäarvoa.

Tommi varoitteli animaatioiden ylikäytöstä jo aikaisemmin meidän blogissa:

Jos sais toivoo, niin animaatioiden käyttö olisi hillittyä. Animaatio on mainio tehokeino ja huomionherättäjä. Ne vinkkaavat, että täällä on jotain merkittävää, katso tänne. Mutta ne on helppo vetää överiksi ja raja on melko ohut.

Animaatiolla täytyy olla selkeä käyttötarkoitus. Animaatioita ei myöskään voi lisätä sivustolle jälkikäteen, vaan niiden pitää olla suunnitelmissa mukana ajoissa. Oikein suunniteltuna animaatiot parantavat käyttökokemusta ja toiminnallisuutta – ja tekevät sivustosta vielä vähän siistimmän.

Mikä se sellainen käyttöliittymäanimaatio on?

Animaatioita on ollut jo ennen nykyaikaisia käyttöliittymiä. Kit Oliynyk kirjoittaa artikkelissaan Jedi Principles of UI Animation:

One of the first animations I ever saw was a cursor blinking in the MS-DOS command prompt. It was friendly and inviting — like, “go ahead, type something”. But it was also functional — if the blinking stopped, that meant the system halted and possibly caught fire.

Siis tämä on yksi ensimmäisiä käyttöliittymäanimaatioita:

Animaatiot ovat olleet pitkään mukana käyttöliittymien suunnittelussa. Suuri osa näistä jää kuitenkin huomaamatta, ehkä tarkoituksellakin, koska parhaita animaatioita ovat juuri ne pienet ja huomaamattomat. Käyttöliittymien animaatiot voidaan jakaa pariin ryhmään, vaikka useasti yksi hyvin valittu animaatio voi täyttää monta käyttötarkoitusta.

Toiminnalliset ja tietoa lisäävät animaatiot

  • antaa tietoa järjestelmän tilasta
  • selkeyttää mitä tapahtui sivustolla
  • antaa palautetta tehdyistä valinnoista
  • pienentää kognitiivista kuormaa
  • estää muutossokeutta.

Visuaalisuudella palautetta vahvistavat animaatiot

  • luovat miellyttävämmän käyttökokemuksen
  • vahvistavat yrityksen tai organisaation brändiä
  • lisäävät sivuston hienostuneisuutta ja vähentävät tylsyyttä.

Seuraavassa muutama hyvä esimerkki animaatioista, joilla voi parantaa sivuston käyttöliittymää.

Latausindikaattorilla odotusaika lyhyemmäksi

Yksi selkeä esimerkki järjestelmän tilasta kertovista animaatioista on latausindikaattori, joka visualisoi kävijälle tai käyttäjälle, että jotain on tapahtumassa. Täytyy vain odottaa hetki. Kuten tiedetään, tuntuma latausajan pituudesta on merkittävä sivuston käytettävyyteen vaikuttava seikka.

Latausindikaattoreita löytyy laidasta laitaan, mutta jos latautumisen visualisointiin käyttää hieman enemmän aikaa, panostaa sen animaatioon ja tekee siitä vähän siistimmän, niin sillä voi hyvin saada sivuston tuntumaan hieman nopeammalta. Animaatio ei kuitenkaan saisi käyttää enemmän aikaa kun lataus vaatii – käyttäjä on tullut katsomaan sisältöä, ei animaatiota.

Pelkkää latausindikaattoria parempi tapa onkin ladata sisältöä sivulle osittain. Tämä on nykyään jo käytössä monella sivulla ja kun osittainen lataus yhdistetään animaatioon, saadaan aikaan todella hyvä lopputulos. Sivuston lataus tuntuu erittäin nopealta. Tälle metodille löytyy myös oma englanninkielinen termi: skeleton screen.

http://babich.biz/popular-web-animation-techniques/

Tabin animaatioilla huomio sisällön muutoksiin

Animaatio auttaa myös selkeyttämään kävijälle sitä, miten jokin asia tapahtui. Niiden avulla käyttäjä näkee tapahtuman keskellä paremmin mistä tullaan ja mihin mennään, kunhan animaation liikerata on tarkoin mietitty. Animaatiot ovat myös helppo ja hyvä tapa kiinnittää huomiota sisällön muutoksiin.

Animaatioita käytetään esimerkiksi tabien eli välilehtien yhteydessä. Välilehteä klikkaamalla sisältö vaihtuu usein silmänräpäyksessä. Jos tämä muutos tapahtuu ilman mitään liikettä, se voi joskus johtaa siihen, että käyttäjä ei edes huomaa sisällön muutosta tai jää ihmettelemään, että miten minä tähän päädyin. Selkeällä pienellä liikeellä voi käyttäjälle havainnollistaa, että nyt olet vaihtanut välilehteä ja tässä on uuden tabin sisältö.

Efektit viihdyttävät ja ilahduttavat

Kaikilla animaatioilla ei ole vahvaa viestinnällistä tehtävää, vaan osan rooli on lisätä sivustolle yksityiskohtia, jota tekevät sivuston käyttökokemuksen mukavammaksi. Usein silti myös enemmän visuaalisuuteen keskittyvät animaatiot yhdistetään toiminnallisuuksia parantaviin animaatioihin.

Pienet efektit ovat hyvä tapa antaa käyttäjälle palautetta vaikkapa painikkeen klikkauksesta. Esimerkkinä kuvassa näkyvä Twitterin tykkäysefekti, joka antaa selkeämmän kuvan tapahtuneesta. Se on myös näyttävämpi vaihtoehto sille, että sydämen väri vain täyttyisi.

Nämä on tärkeä muistaa

Animaatiot pitäisi ottaa huomioon jo aikaisin sivuston suunnitteluvaiheessa. Animaatioille on hyvä myös luoda yhtenäinen linja, joka tukee sivuston tarkoitusta ja yrityksen brändiä. Tässä lyhyt muistilista.

  • Älä ylikäytä: vähemmän on todellakin enemmän.
  • Valikoi: animaatiot eivät sovi jokaiseen kohtaan tai ratkaise jokaista ongelmaa.
  • Selkeys on tärkeää: animaation pitäisi vähentää kognitiivista kuormaa, ei lisätä sitä.
  • Pidä animaatiot nopeina: liian pitkät animaatiot saavat sivuston tuntumaan hitaammalta.
  • Ole tarkkana liikeradan kanssa: animaation pitäisi yhdistää elementtejä ja tapahtumia.

Animaatio on voimakas apuväline, kun sitä käytetään hyvin ja hienostuneesti. On tärkeätä käyttää aikaa ja miettiä tarkkaan, milloin animaatio on sovelias ja milloin ei. Animaatiot täytyy myös testata oikeilla laitteilla ja eri selaimilla, että ne eivät tee sivustosta epäkäytännöllistä.

Animaatio on luonnollinen osana käyttöliittymän suunnittelua ja suunnittelu on paljon enemmän kuin pelkkä visuaalinen esitystapa. Niin kuin Steve Jobs sanoi suunnittelusta:

“It’s not just what it looks like and feels like. Design is how it works.

Meillä suunnitteluosasto ja kehitysosasto tekevät tiiivistä yhteistyötä myös animaatioiden suunnittelun kanssa. Käy katsomassa esimerkiksi, mitä tapahtuu Isännöintiliiton mobiilinavigaatiossa. Haluatko sinäkin sujuvoittaa sivustoasi animaatioilla? Ota yhteyttä niin katsotaan, miten se tapahtuu.