Kun käyttäjät avaavat verkkosivuston tai sovelluksen, he huomaavat ensin ilmeiset suunnitteluelementit: logon, värit, kuvakkeet, kuvitukset ja kuvat. Vaikka nämä elementit vaikuttavatkin yleiseen käyttäjäkokemukseen, ne ovat itse asiassa osia suuremmasta palapelistä: vuorovaikutussuunnittelusta. Tämä käsite voi olla loppukäyttäjille hienovaraisempi kuin räikeä, uusi kotisivu, mutta se on olennaisen tärkeä mukaansatempaavan, intuitiivisen digitaalisen käyttökokemuksen luomisessa.

Mitä on vuorovaikutussuunnittelu?

Vuorovaikutussuunnittelussa on kyse siitä, että helpotetaan vuorovaikutussuhteita käyttäjien ja tuotteiden (useimmiten nämä tuotteet ovat sovelluksia tai verkkosivustoja) välillä. Interaction Design Foundationin mukaan ”vuorovaikutussuunnittelun tavoitteena on luoda tuotteita, joiden avulla käyttäjä voi saavuttaa tavoitteensa (tavoitteensa) parhaalla mahdollisella tavalla”. Toisin sanoen vuorovaikutussuunnittelijat ovat vastuussa jokaisen näytöllä olevan elementin luomisesta, jonka kanssa käyttäjä voi olla vuorovaikutuksessa, olipa kyse sitten klikkaamisesta, pyyhkäisystä, napauttamisesta tai jostain muusta toiminnasta.

Vuorovaikutussuunnittelun viisi ulottuvuutta toimivat hyödyllisenä mallina sen ymmärtämiseksi, mitä siihen sisältyy. Vuorovaikutussuunnittelun akateemikko Gillian Crampton Smith esitteli mallin ensimmäisenä, ja se sisälsi vain neljä ulottuvuutta. IDEXX Laboratoriesin johtava vuorovaikutussuunnittelija Kevin Silver lisäsi viidennen.

1D: Sanojen tulisi olla helppotajuisia, ja niiden tulisi välittää käyttäjälle oikea määrä tietoa (liian yksityiskohtaiset tiedot voivat hukuttaa, kun taas liian vähäinen informaatio voi aiheuttaa sekaannusta).

2D: Visuaalisten esitystapojen, kuten kuvien, typografian ja kuvakkeiden, tulisi täydentää sanoja, jotta ne voivat välittää tietoa käyttäjälle.

3D: Fyysisillä objekteilla tai tilalla viitataan varsinaiseen laitteistoon ja objekteihin, joiden kanssa käyttäjä vuorovaikutteisesti toimii. Käyttääkö hän esimerkiksi älypuhelinta vai kannettavaa tietokonetta, jossa on hiiri? Ja missä he ovat, työpöydällään vai täpötäydessä metrossa?

4D: Aika viittaa siihen, miten käyttäjät voivat mitata edistymistä, esimerkiksi äänen ja animaation avulla, sekä siihen, kuinka kauan he käyttävät aikaa vuorovaikutukseen kolmen ensimmäisen ulottuvuuden kanssa.

5D: Käyttäytyminen on Kevin Silverin lisäämä, ja se sisältää sen, miten edelliset ulottuvuudet määrittävät tuotteen vuorovaikutusta. Se sisältää myös käyttäjien ja tuotteen reaktiot.

Related: 6 syytä, miksi UX-suunnittelijoiden tulisi tutkia eleitä hyödyntävää vuorovaikutusta

10 esimerkkiä vuorovaikutussuunnittelusta

Miltä suunnittelun vuorovaikutus näyttää tosielämässä? Tässä muutamia suosikkiesimerkkejämme, jotka olemme löytäneet Dribbblestä.

By Jony vino. Laskun jakaminen ystävien kanssa ei ole aina niin helppoa kuin miltä se näyttää, varsinkin jos olet enemmän visuaalinen kuin numeroihminen. Tämän sovelluskonseptin avulla voit syöttää laskun loppusumman, valita juomarahaprosentin ja nähdä sitten, kuinka paljon kukin maksaa. Ja mikä parasta? Sen sijaan, että säätäisit manuaalisesti jokaisen henkilön osuutta ja joutuisit jatkuvasti päivittämään kaikkien osuutta, voit yksinkertaisesti muuttaa kunkin henkilön osuuden kokoa sovelluksessa, ja luvut lasketaan automaattisesti uudelleen kaikille.

Kirjoittanut Prem Gurusamy. Useimmilla verkkokauppasivustoilla sinun on navigoitava täysin eri osaan verkkosivustoa tai sovellusta, jotta voit tarkastella ostoskoria. Tämän vuorovaikutuksen avulla näet heti, kuinka tuotteesi ”lentävät” ostoskoriin heti, kun napsautat ”Lisää ostoskoriin”-painiketta. Ostoskori jatkaa tuotteiden visuaalista näyttämistä, vaikka tutustuisit sivuston muihin osiin.

Igor Pavlinski. Sosiaalisen median sovellukset ovat pahamaineisia tiedon ylikuormituksesta, sillä ne näyttävät sinulle kerralla kaikki suosituimmat jutut, trendikkäät videot tai artikkelit ja ajankohtaiset uutiset. Tämä uuden sosiaalisen median sovelluksen konsepti antaa hallinnan takaisin käyttäjän käsiin järjestämällä sisällön lähteittäin (kuten YouTube, Vimeo, Twitter tai Reddit) ja antamalla sinun valita, mitä kanavaa haluat tutkia. Korttimaisen ulkoasun ansiosta suosikkisisällön käyttäminen ei myöskään edellytä sovellusten välillä hyppimistä. Sen sijaan on helppo vuorotella lähteiden välillä saman kokemuksen sisällä.

By tubik. On miljoona ja yksi tapaa muokata hampurilaistasi. Ja kun tilaat älypuhelimella, jokaisen yksittäisen ainesosan valitseminen pieneltä näytöltä voi olla näppäryysharjoitus. Tämä Tasty Burger -sovelluksen käyttöliittymäkonsepti yksinkertaistaa tilauskokemusta jakamalla ainesosat tyypin mukaan. Sen sijaan, että näytetään pitkä luettelo kaikista mahdollisista juusto-, tuote-, liha- tai sämpylävaihtoehdoista, napsautetaan ensin ainesosaluokkaa (kuten juustoa), minkä jälkeen näytetään eri tyypit, kuten gouda tai comte.

By Rahul.Design. Jos olet asuntoa etsimässä etkä voi nähdä kiinteistöä henkilökohtaisesti, seuraavaksi paras vaihtoehto on hankkia virtuaalikierros. Tämä kiinteistösovelluksen, Specin, konsepti hyödyntää luonnollista käyttäytymistämme, kun katsomme uutta tilaa. Voit klikata mitä tahansa huonetta, kuten keittiötä tai olohuonetta, ja liikuttaa puhelintasi saadaksesi 360 asteen näkymän. Huoneiden välillä on helppo siirtyä yhdellä napautuksella.

Forest Plasencia. Suodattimet tarjoavat tehokkaan ja helpon tavan tuoda pinnalle erilaisia tietoviipaleita. Mutta monien suodattimien vuorovaikutuksen ongelmana on, että ne avaavat sovelluksessa ponnahdusikkunan tai uuden sivun, joka piilottaa juuri sen tiedon, jonka haluat suodattaa. Tämä mikrovuorovaikutus pitää kaiken samassa näkymässä, vaikka suodatat. Näin näet tietojen muuttuvan välittömästi, kun valitset erilaisia suodatuskriteerejä.

Dmitro Petrenko. Älypuhelinsovellusten ansiosta talosi virittäminen ja valvominen on helpompaa kuin koskaan, mutta välillä 94%-99%

Related: Käyttäjien vuorovaikutusta tallentavan työkalun luominen

By Gil. Tämä yksinkertainen sivuvuorovaikutus parantaa käyttäjäkokemusta paikan päällä ja auttaa yritystä pitämään kävijät sivuillaan pidempään. Sivuston päätarkoituksena on esitellä, miten näitä ominaisuuksia voidaan käyttää luonnossa, toimistona ja laajennuksina. Sen sijaan, että luodaan erillisiä kokemuksia kutakin käyttötarkoitusta varten, tämä sivu jäljittelee käyttäjävirtaa, jossa eri käyttötarkoituksia verrataan ja asetetaan vastakkain ja siirrytään saumattomasti niiden välillä.

Kirjoittanut Dominik Martin. Vuorovaikutuksen ei tarvitse olla rohkeaa ja silmiinpistävää tehdäkseen vaikutuksen. Tämä sovelluskonsepti yksinkertaistaa käyttäytymistä, jota me kaikki halveksimme – asuinmaamme valitsemista pitkästä luettelosta. Sen sijaan, että käyttäjät joutuisivat selaamaan luetteloa ja etsimään maansa, tässä mikrointeraktiossa käyttäjä valitsee ensin maansa alkukirjaimen ja etsii sen sitten paljon pienemmästä, kohdennetusta maaluettelosta.

Kirjoittanut Mykolas Puodziunas. Yhä useammat vähittäismyyntisivustot helpottavat kohteen ”pikakatselua” sen sijaan, että napsauttaisit jokaista yksityiskohtaista sivua ja joutuisit sitten palaamaan takaisin hakutuloksiin selataksesi lisää kohteita. Tässä konseptissa mennään askeleen pidemmälle, ja voit tarkastella jokaista tuotetta sen eri saatavilla olevissa väreissä ilman, että sinun tarvitsee poistua kategoriasivulta.

Jäikö suosikkiesimerkkisi vuorovaikutussuunnittelusta näkemättä? Jaa se kanssamme Twitterissä: @InVisionApp.