Luettavissa 5 minuutissa

Keskusteleeko sivustosi käyttäjän kanssa?

Saavut verkkosivustolle ensimmäistä kertaa. Näet sivun ylälaidassa menun, josta tiedät pystyväsi navigoimaan sivuston eri osiin. Muistat, että joskus menu on jonkinlaisen napin takana piilossa, mutta sekin löytyy ylälaidasta. Tiedät, että firman logoa painamalla pääset takaisin etusivulle ja huomiota herättäviä nappeja seuraamalla pääset eteenpäin. Nopean tiedon tarpeessa osoitteet ja puhelinnumerot löytyvät tuttuun tapaan jokaisen sivun pohjalta omasta laatikostaan. Värit, kuvat ja videot kilpailevat huomiostasi. Liikuttaessasi hiirtä yhden kuvan päälle mietit, että voikohan tätä painaa. Painettuasi lopulta jotakin linkkiä sivu alkaa lataamaan. Sivun latautuessa tuijotat tyhjyyteen – valkoiseen ruutuun. Odotat ja mietit, että tapahtuukohan tässä nyt jotain.

Luontevaa, mutta luonnotonta

Paljoa yleistämättä voidaan sanoa, että ihmiset puhuvat nykyään sujuvasti webin kieltä. Netin selaaminen on niin luonnollinen osa ihmisten elämää, että navigointi on kuin lehden sivuja kääntelisi ja monet interaktiot tehdään sen enempää miettimättä. Webbi on tuttu paikka, mutta välillä se tuntuu kolkolta ja irralliselta. Selaaminen on intuitiivista, mutta sivusto ei aina keskustele käyttäjän kanssa. Kyse on pienistä jutuista, mutta usein pienet jutut ovat niitä tärkeimpiä.

Ihmiset puhuvat sujuvasti webin kieltä.

Vaikka nettiä selataankin fyysisillä laitteilla, siihen ei pääse käsiksi samalla tavalla kuin sanomalehteen. Lehteä on kiva selata, koska siihen liittyy paljon muutakin kuin pelkkää lukemista. Paperin tuntu, tuoksu ja paino tekevät sanomalehden selaamisesta miellyttävää – ne tekevät lehden selaamisesta kokemuksen. Webbi ei tunnu, tuoksu tai paina, minkä vuoksi täytyy käyttää muita keinoja, jotta selaaminen olisi yhtä miellyttävää.

Liikkeellä kohti parempia käyttökokemuksia

Animaatioista voi ensimmäisenä tulla mieleen animaatioelokuvat tai pelit, mutta tässä on kyse hieman pienemmistä jutuista. Alalla käytetään välillä termiä mikrointeraktiot, mutta tuttavallisemmin voidaan puhua animaatioista tai ihan vaan liikkeestä. Motion design on kuuma aihe tällä hetkellä ja sille on syynsä.

Animaatioita on käytetty verkkosivustoilla jo pitkään erilaisiin tarkoituksiin, mutta viime vuosina kyky ja tarve ovat olleet kasvussa. Sitä mukaan, kun ihmisten käytössä olevien laitteiden prosessointiteho on kasvanut, ovat myös kehittäjien käyttämät työkalut kehittyneet. Vanha liitto käytti Flashia ja tätä nykyä hommat hoituvat uusimmalla CSS:llä ja JavaScriptillä.

Ihminen ymmärtää liikettä todella hyvin ja tulkitsee visuaalista informaatiota moninkertaisesti tehokkaammin kuin tekstiä. Hyödyntämällä käyttöliittymissä liikettä ja animaatioita voidaan käyttäjälle paremmin viestiä se, mitä ruudulla tapahtuu ilman, että asiaa tarvitsee ilmaista tekstillä. Pienestä siirtymäanimaatiosta voi olla merkittävästi hyötyä käyttäjälle, joka on juuri painanut linkkiä toiselle sivulle tai nappia avatakseen lomakkeen. Liike viestii mitä juuri tapahtui. Oikean balanssin löytäminen vaatii työtä, mutta lopputuloksena on parempi kokemus käyttäjälle.

Oikeassa maailmassa kaikelle on paino ja tavallinen ihminen ymmärtää fysiikan päälle yllättävän paljon; epäaidosti liikkuva virtuaalinen objekti näyttää välittömästi väärältä. Fyysisen maailman tuntua voidaan matkia menemättä kuitenkaan liiallisuuksiin. Liikkeen tulee aina näyttää ja tuntua hyvältä, muuten se saattaa pilata käyttäjän kokemuksen. Matkimalla aidon tuntuista liikettä voidaan luoda helpommin lähestyttäviä, hyvän tuntuisia ja ilahduttavia käyttöliittymiä.

Ei mikään muoti-ilmiö

Vielä jokin aika sitten web-kehittäjät pystyivät käyttämään responsiivisuutta myyntivalttina, mutta nykyään käyttäjät vaativat, että verkkosivusto toimii laitteella kuin laitteella. Enää ei puhuta responsiivisesta web-suunnittelusta, puhutaan vain web-suunnittelusta. Samanlainen elinkaari on monilla uusilla jutuilla webissä, vaikka ne eivät saisi niin paljoa huomiota kuin responsiivisuus aikanaan sai. Ymmärrys GDPR:stä tai saavutettavuus ovat nyt siinä, missä responsiivisuus oli vielä muutama vuosi sitten – harva ymmärtää, mutta muutaman vuoden päästä voidaan jo olettaa, että kaikki ymmärtävät. Animaatioista puhutaan vielä hyvin vähän, mutta muutaman vuoden päästä animaatiota kaivataan ja vaaditaan entistä enemmän. Ilman animaatioita käyttöliittymät tuntuvat keskeneräisiltä.

Googlen Android-käyttöjärjestelmästä tuttu animaatio LÄHDE: Google Material Design

Animaatiot eivät ole ilmiö pelkästään verkkosivuilla ja ovatkin pitkään olleet näkyvämmin esillä mobiilisovelluksissa ja käyttöjärjestelmissä. Apple on tunnettu hyvin toimivista käyttöliittymistään ja omenafirma onkin panostanut viime aikoina entistä enemmän käyttöliittymien sulavuuteen, jotta ne olisivat luonnollisempi osa ihmisten arkea. Monesti se on nähty: Mihin omena menee, muut tulee perässä.


Animaatiot ovat webissä vielä sekä väärin ymmärrettyjä että paljolti väärin käytettyjä. Visuaalisesti näyttäviä animaatioita ei tulisi koskaan tehdä käytettävyyden kustannuksella vaan animaatio on työkalu, joilla verkkosivuston käyttökokemusta voidaan parantaa. Ensisijaisesti sivuston täytyy kuitenkin olla toimiva, saavutettava ja lähtökohtien täytyy olla kunnossa.

Animaatiot oikein käytettyinä

  • Herättävät mielenkiintoa
  • Ohjaavat käyttäjää
  • Rytmittävät kerrontaa
  • Auttavat ymmärtämään sisältöä
  • Viestivät laatua
  • Jäävät mieleen
  • Ilahduttavat
  • Parantavat käyttökokemusta

Niin kuin kuvat, videot ja tekstisisältö, myös liike on kieli, jolla voidaan keskustella käyttäjän kanssa.

Viimeisimmät artikkelit

Blogi
13.11.2018
Työnantaja­mielikuva perse edellä puuhun
Lue lisää
Rekry
31.10.2018
Haussa markkinointi­alalla kokenut projektipäällikkö / asiakaspäällikkö
Lue lisää
Case
30.10.2018
Nokian Raskaat Renkaat & Valtra: Snowrace ja suomalainen kylähulluus
Lue lisää
Ihmiset
26.10.2018
Venla Paanila
Lue lisää
Case
04.10.2018
Husky Intelligence: kansainvälistä brändinostetta
Lue lisää
Ihmiset
04.10.2018
Petteri Laakso
Lue lisää
Blogi
22.09.2018
Mitä maksaa? Osa 4 : Nopea ja hidas markkinointidata
Lue lisää
Ihmiset
20.09.2018
Lotta Pesonen
Lue lisää
Ihmiset
14.09.2018
Heidi Luukkonen
Lue lisää
Ihmiset
10.09.2018
Anssi Kosonen
Lue lisää
Case
10.09.2018
Tays tukisäätiö: Lahjoitussivustolla arvostetaan elämää
Lue lisää
Ihmiset
09.09.2018
Joona Valkeala
Lue lisää
Blogi
04.09.2018
Taysin uudelle lastensairaalalle kerätty jo yli puoli miljoonaa euroa
Lue lisää
Case
29.08.2018
TeacherGaming: Visuaalista identiteettiä etsimässä
Lue lisää
Blogi
21.08.2018
Lastensairaala-golf jo toistamiseen Tampereella
Lue lisää
Uutiset
06.08.2018
OpenStudios 24.8. – Avoimet ovet Bermudalla
Lue lisää
Blogi
06.08.2018
Markkinointityö yläkoululaisen näkökulmasta
Lue lisää
Blogi
13.06.2018
Mitä maksaa? Osa 3: Lisäkustannusten ennaltaehkäisy
Lue lisää
Case
01.06.2018
Injeq: Mullistavalla älyneulalla maailmalle
Lue lisää
Blogi
23.05.2018
B2B-myyntimiehen taivas ja helvetti
Lue lisää
Uutiset
14.05.2018
GDPR ja nettisivustosi
Lue lisää
Blogi
18.04.2018
Mitä maksaa? Osa 2: Markkinointitoimistojen vertailu ja kilpailutus
Lue lisää
Blogi
24.03.2018
Behind the Scenes – Bermudan logo
Lue lisää
Blogi
14.03.2018
Mitä maksaa? Osa 1: Tarve ja tahto
Lue lisää
Ihmiset
23.02.2018
Anni Ylinen
Lue lisää
Case
09.02.2018
Pirte: Mitattavaa työhyvinvointia
Lue lisää
Ihmiset
29.01.2018
Tiia Forselius
Lue lisää
Blogi
26.01.2018
Luovuus on yliarvostettua?
Lue lisää
Case
18.01.2018
Etelän Kebab House: Legendaarisen ravintolan uusi aika
Lue lisää
Blogi
28.12.2017
Miksi sivustosi ei ole koskaan valmis
Lue lisää
Case
21.12.2017
Javasko: Vastuullisen koneenrakentajan uusi ilme
Lue lisää
Blogi
05.12.2017
Normaalista poikkeavat ideatkaan eivät erotu ilman veroistansa tarinaa
Lue lisää
Blogi
23.11.2017
Kasvuyritykset, Slush ja erottautuminen. Ei niin simppeli juttu.
Lue lisää
Blogi
22.11.2017
Uusi saitti, miten niitä oikein tehdään?
Lue lisää
Blogi
28.09.2017
Somemanagerin kolme kirousta
Lue lisää
Uutiset
20.09.2017
Turpaan vaan! Business Battle pe 13.10.
Lue lisää
Ihmiset
19.09.2017
Anu Mäki
Lue lisää
Blogi
15.09.2017
Miten mainostoimistossa ideoidaan?
Lue lisää
Ihmiset
02.09.2017
Toimistokana
Lue lisää
Uutiset
01.09.2017
TTY:n tuore brändijohtaja katsoo Bermudaa asiakkaan silmin
Lue lisää
Uutiset
17.08.2017
Avoimet ovet Bermudassa 30.8.
Lue lisää
Rekry
16.08.2017
Miksi ja miten hakea Bermudalle töihin?
Lue lisää
Case
05.08.2017
Wirepas lunastaa lupauksia
Lue lisää
Case
03.08.2017
Cargotec Kalmar: Huipputeknologiasta selkeästi
Lue lisää
Ihmiset
31.07.2017
Ulpu-Maria Lehtinen
Lue lisää
Ihmiset
31.07.2017
Anne Niemi
Lue lisää
Ihmiset
31.07.2017
Jimi Heitto
Lue lisää
Ihmiset
31.07.2017
Matti Tanskanen
Lue lisää
Case
28.07.2017
Edupoli: verkkovertailun voittaja
Lue lisää
Blogi
06.07.2017
Aatteleppa omalle kohalles – viisi vinkkiä arkipäivän empatiaan
Lue lisää
Blogi
16.06.2017
Trubaduurin henkisiä työkaluja toimistokäyttöön. Ehkä.
Lue lisää
Case
08.06.2017
Telatek Service: heittäydy tarinoiden vietäväksi
Lue lisää
Uutiset
05.06.2017
Bermudalaisten lounasmatka 5.–16.6.
Lue lisää
Uutiset
26.05.2017
TTY:n brändijohtaja katsoo Bermudaa asiakkaan silmin
Lue lisää
Ihmiset
20.05.2017
Jarkko Caven
Lue lisää
Uutiset
08.05.2017
Berjantai 19.5. – tiedonjanon sammutusta ja muutenkin
Lue lisää
Ihmiset
14.04.2017
Katja Uvarova
Lue lisää
Case
27.02.2017
Visura: perheyrityksen uudet kasvot verkossa
Lue lisää
Blogi
07.02.2017
Miksi sivustosi repsottaa?
Lue lisää
Ihmiset
25.01.2017
Timo Tuomola
Lue lisää
Case
17.01.2017
Nordic Caraway: maailman suurimman uusi ilme
Lue lisää
Case
22.12.2016
Kuninkaankulma: Ruokakaupan markkinointia ilman tarjouksia
Lue lisää
Ihmiset
20.12.2016
Sami Partanen
Lue lisää
Blogi
15.12.2016
Bermudalaiset hyvänteossa. Vielä ehdit sinäkin mukaan!
Lue lisää
Uutiset
08.12.2016
Bermuda ja Tampereen Lastenklinikan Tuki Ry haluavat joululahjasi!
Lue lisää
Uutiset
06.12.2016
Bermuda ja Pirkanmaan rakentaja Visura Oy yhteistyöhön
Lue lisää
Blogi
02.12.2016
Asiakas on aina oikeassa
Lue lisää
Ihmiset
23.11.2016
Maiju Ylikoski
Lue lisää
Ihmiset
09.11.2016
Tommi Sani
Lue lisää
Ihmiset
09.11.2016
Ukko Järvinen
Lue lisää
Blogi
09.11.2016
Miksi muutosjohtaminen epäonnistuu aina – tai ainakin melkein aina?
Lue lisää
Uutiset
04.11.2016
Kaksi uutta tekijää, monta uutta tarinaa
Lue lisää
Case
26.10.2016
Ultimes Business Garden: Lippulaivalle sivusto
Lue lisää
Ihmiset
25.10.2016
Timo Harju
Lue lisää
Uutiset
04.10.2016
Tiedämme, mitä teit viime kesänä 27.10.2016
Lue lisää
Ihmiset
03.10.2016
Heikki Hujala
Lue lisää
Case
07.09.2016
Vilkas: kampanjoita verkkokauppojen verkkokaupalle
Lue lisää
Uutiset
10.08.2016
Bermudan ja Inspiration aamiaistilaisuus tarjoaa lihaa asiakasdatan ympärille
Lue lisää
Blogi
09.08.2016
Data on hyvä renki, mutta huono isäntä
Lue lisää
Uutiset
07.08.2016
Open Studios 1.9.2016
Lue lisää
Blogi
09.06.2016
Tunne * Järki * Asenne = X
Lue lisää
Case
06.06.2016
Orbis: tuotekauppiaasta ratkaisevaksi kumppaniksi
Lue lisää
Case
17.05.2016
VAAO: Yksi sivusto – tuhansia käyttäjiä
Lue lisää
Blogi
12.05.2016
Työnäytepalvelu – ilmaisen työvoiman loputon lähde?
Lue lisää
Uutiset
26.04.2016
Kaikki tiet vievät Bermudaan – Maiju ja Katja esittäytyvät
Lue lisää
Blogi
13.04.2016
Huominen on tänään
Lue lisää
Blogi
06.04.2016
Saako mainostoimiston kuriin silittelemällä vai olemalla bitch?
Lue lisää
Blogi
01.04.2016
Häiritsevä totuus mainostekstien takana
Lue lisää
Ihmiset
23.03.2016
Mika Kihlakaski
Lue lisää
Blogi
09.03.2016
Revi meistä kaikki irti!
Lue lisää
Ihmiset
26.02.2016
Jon Judén
Lue lisää
Blogi
24.02.2016
Tiesitkö: päättäjäkin on ihminen
Lue lisää
Blogi
12.02.2016
Juuri oikeanlaista kemiaa
Lue lisää
Uutiset
10.02.2016
Suutarin lapselle uusi sivusto, video ja lehti
Lue lisää
Uutiset
03.02.2016
Know-hau tuli Bermudalle
Lue lisää
Case
03.02.2016
Hella: Bermuda toi valoa sisävalaisinbrändiin
Lue lisää
Case
03.02.2016
Skanska Luminary: Brändi ensin, monttu sitten
Lue lisää
Case
03.02.2016
Savox: Kypärä tulevaisuuden taistelijalle
Lue lisää
Case
03.02.2016
ISS-palvelut: Duunihoroskooppi
Lue lisää
Uutiset
29.10.2015
Karut naapurit vievät Tommin työt
Lue lisää
Blogi
26.10.2015
Videon keittiötesti
Lue lisää
Blogi
04.08.2015
Hirvittävä tunnustus
Lue lisää
Blogi
29.04.2015
Selaushistoria ja markkinoinnin automaatio
Lue lisää
Uutiset
19.03.2015
Ex nihilo nihil – Käyttäjäkokemuksia tyhjästä?
Lue lisää
Uutiset
10.03.2015
Wirepas rikkoi maailmanennätyksen
Lue lisää
Blogi
01.12.2014
Rakkaudesta tarinoihin
Lue lisää
Blogi
11.11.2014
Hypen lapset
Lue lisää
Blogi
30.10.2014
Videoproduktio, tarina ja herpes
Lue lisää
Blogi
16.10.2014
Torilla tavataan!
Lue lisää
Uutiset
08.10.2014
”No saitteko tästä mitään tolkkua?”
Lue lisää
Blogi
26.09.2014
Näkyvyys nolla, tuuli itäkaakosta…
Lue lisää
Blogi
22.09.2014
Tuntemattomia kaveripyyntöjä Facebookissa
Lue lisää
Blogi
03.09.2014
Suutareista, lapsista ja kengistä
Lue lisää