Mikrovuorovaikutuksen ja käyttöliittymien animaatioiden herättäminen kehittäjien ja suunnittelijoiden yhteistyön kautta

Voimme luoda käyttäjille miellyttävän kokemuksen mikrovuorovaikutuksen ja käyttöliittymäanimaation avulla!

Hei, nimeni on Kyo Kim ja olen työskennellyt tuotesuunnittelijana Capital Onessa noin kaksi vuotta. Olen käyttänyt mikrovuorovaikutuksia ja animaatioita täällä tekemäni työssä, mukaan lukien joissakin mobiilihankkeissa, joita olet ehkä käyttänyt itse. Ennen kuin aloin työskennellä tekniikassa, taustani oli elokuvissa. Elokuvassa painopiste on tarinankerronnassa ja muokkaamisessa tarinan luomiseksi, joka kiinnostaa yleisöä; ja suuri osa siitä saavutetaan käyttämällä siirtymiä. Minusta nämä taidot ovat hyödyllisiä tänään, kun luon kokemuksia ja tarinoita digitaalisille työkaluille.

Suunnitellessani ajattelen tekijöitä, jotka antavat käyttäjille upean, ilahduttavan kokemuksen siirtymisistä ja tarinankerronnasta.

Jotta tuote voi tarjota käyttäjilleen ilahduttavan kokemuksen, sen on tarjottava enemmän kuin esteettisesti miellyttävä muotoilu ja vaikuttavat animaatiotehosteet.

Riippumatta siitä, onko tuote sovelluspohjainen, verkkopohjainen vai muunlainen digitaalinen tuote, sen on kiinnitettävä käyttäjiä sisään, oltava käyttäjille nautinnollinen ja annettava heille mahdollisuus harjoittaa sitä suoraan ja tarkoituksenmukaisesti tapa.

Mikrovuorovaikutusten avulla voimme tehdä käyttökokemuksesta ilahduttavan ja tyydyttävän tavalla, jota monet suunnitteluselementit eivät pysty. Aloitetaan perusasioista ennen kuin aloitamme mikrovuorovaikutuksen tuotesuunnittelun yhteydessä.

Mitä ne ovat? Miksi se on hyödyllinen käyttökokemukselle? Miksi suunnittelijoiden ja kehittäjien tulisi sisällyttää ne työhönsä? Kuinka tuotesuunnittelutiimit voivat työskennellä yhdessä niiden parantamiseksi?

Mitä ovat mikroyhteydet ja miksi meidän pitäisi välittää niistä?

Mitä ovat mikrovuorovaikutukset tai käyttöliittymäanimaatiot? Ihmiset viittaavat heihin usein kauniina animaatioina, liikegrafiikoina tai liikkuvina kuvioina. Ne ovat kuitenkin paljon enemmän.

Toisin kuin muut animaatiomuodot, jotka ovat olemassa vain liikkeen illuusion luomiseksi, mikro-vuorovaikutukset kiinnostavat käyttäjää suoraan, jolloin hän voi suorittaa erilaisia ​​tehtäviä ja olla vuorovaikutuksessa tuotteen kanssa intuitiivisella ja tehokkaalla tavalla.

Jos sitoudumme tämän takaisin hyvän järjestelmän suunnittelun periaatteisiin, tämä parantaa ja mahdollistaa järjestelmän palautteen käyttäjälle. Jos se tehdään oikein, käyttäjät ottavat mikrovuorovaikutukset viestinä käyttäjältä, että se (järjestelmä) tekee mitä pitäisi tehdä vastauksena käyttäjän tarpeisiin.

Vaikka et tiedä mitä mikrovuorovaikutus on, otat heihin yhteyttä säännöllisesti. Aina kun käytät sovellusta tai verkkopohjaista tuotetta tietyn tehtävän suorittamiseen - olipa kyse sitten uutisten lukemisesta, ostosta, pelin pelaamisesta, profiilin luomisesta tai asetusten ja ilmoitusasetusten muuttamisesta - jokainen tekemäsi yksittäinen toimenpide mikrovuorovaikutus. Mikrovuorovaikutukset kudotaan saumattomasti tuotteen alustaksi, mikä tekee niiden toiminnoista avoimia ja helposti saavutettavissa olevia, parantaen tehokkaasti käyttäjän yleistä kokemusta.

Vaikka nämä ”toimet” ovat monissa eri muodoissa, joitain yleisiä esimerkkejä ovat:

  • Kun "siirrämme" tuotteen virtuaaliseen ostoskoriin.
  • Kun valitsemme kahden vaihtoehdon CTA: n kaltaisessa vaihtopainikkeessa.
  • Kun “vedetään alas” päivittääksesi uutissyötteen ja nähdäksesi uusimman päivityksen.
  • Kun vieritämme ylös ja alas pitkässä syötössä tai sivulla.

Suunnitellessamme mikrovuorovaikutusta meidän on tutkittava, onko se todella välttämätöntä ja välttämätöntä käyttäjän kokemukselle. Muutoin se voi häiritä käyttäjän lomaketta ja käyttää visuaalista melua.

Mikrovuorovaikutuksen periaatteet

On olemassa kolme periaatetta, jotka otan aina huomioon suunnitellessani mikrovuorovaikutuksia.

  1. Jatkuvuus (ja hienovaraisuus)

Mikrovuorovaikutuselementtien tulisi olla hienoisia, jotta käyttäjän suorittaessa toiminnon hänen kokemuksessaan tapahtuu jatkuva virtaus. Esimerkiksi, jos luomme vierivää animaatiota pitkässä syötteessä, käyttäjän pitäisi voida keskittyä sivun sisältöön kuin itse vierivään animaatioon.

2. Ennakoitavuus

Laadukkaissa mikrovuorovaikutuksissa on ennustettavuus, jonka avulla käyttäjä voi navigoida tuotteessa tehokkaasti. Käyttäjä osaa tarkkaan ennustaa toimintansa vaikutukset, tuntea olonsa mukavaksi kääntää niitä ja olla varma kyvystään suorittaa odotetulla tavalla.

3. Muunnettavuus

Nestesiirtymät useiden näyttöjen välillä ja niiden sisällä olevien eri esineiden hyvin määritellyt muutokset ovat tärkeitä näkökohtia laadukkaalle mikrovuorovaikutukselle. Niiden avulla käyttäjä voi kehittää intuitiivisen ymmärryksen näytöiden ja niiden sisällä olevien elementtien välisistä suhteista.

Kun mikro-vuorovaikutukset suunnitellaan noudattamalla näitä periaatteita, ne luovat kontekstin suunnittelulle auttamalla käyttäjiä tietämään, kuinka olla vuorovaikutuksessa sen kanssa. Mikrovuorovaikutus on hetkellinen tapahtuma, joka suorittaa yhden tehtävän. Väistämättä verkkosivuston tai sovelluksen suunnittelun pienimmät interaktiiviset elementit, mikrovuorovaikutukset ovat tärkeimpiä, koska ne palvelevat erilaisia ​​ydintoimintoja.

Liipaisimet (napauttaminen, pyyhkäiseminen, vetäminen jne.) Käynnistävät kaikki yllä olevassa osassa luetellut toiminnot (jatkuvuus, ennustettavuus ja muunnettavuus). Käyttäjä suorittaa toiminnon verkkosivustolla tai sovelluksessa prosessin aloittamiseksi (vaikka se jatkuu ensimmäisen vaiheen jälkeen). Tämä noudattaa käyttäjän toimintakehotuskuvaa, käyttöliittymän määrittelemiä rajapinnan (mitä tapahtuu ja miten), käyttäjän palautetta (toimiiko se vai ei) ja malleja tai silmukoita (suorittaako toiminta tapahtua kerran tai toista aikataulussa).

-Miten kehittäjät ja suunnittelijat voivat työskennellä yhdessä herättääksesi mikrovuorovaikutuksia elämään

Kuten näette, mikrovuorovaikutuksilla on kriittinen rooli käyttökokemuksen muovaamisessa. Tämän takia heistä on tullut yhä tärkeämpi osa työtäni tuotesuunnittelijana. Olen työskennellyt erilaisissa projekteissa useilla alustoilla ja eri käyttökohteissa. Olen huomannut, että kaikki eivät tiedä näiden elementtien arvoa tai miten luoda ne tehokkaasti. Vielä tärkeämpää on, että usein ryhmän jäsenet eivät tiedä kuinka ilmaista ideoitaan toisilleen siirtymäten suunnittelusta ja mikrovuorovaikutuksesta.

Tajusin, että kaikki kääntyi kommunikointiin - käännöksessä hukkui jotain, kun selitin suunnittelun ideoitasi kehittäjilleni. Olet ehkä kuullut tämän Konfutse-tarjouksen aiemmin: ”Kerro minulle, ja unohdan. Näytä minulle, ja ehkä muistan. Ota mukaan, ja ymmärrän. ”Ja juuri osallistumisen kautta me suunnittelijoiden ja kehittäjien tiiminä luomme hyviä kokemuksia.

Ensin käydään läpi kuvaus suunnitteluprosessista nopeasti ...

Ihanteellisessa tilanteessa, kun suunnittelija esittää idean mikrovuorovaikutuksesta, perinteinen työnkulku etenee seuraavassa järjestyksessä:

  1. Suunnittelija kehittää visuaalisia elementtejä ja animaatiotehosteita, jotka ovat tarpeen ajatuksensa toteuttamiseksi.
  2. Suunnittelija esittelee lopullisen mallin ja sen taustalla olevat konseptit muille ryhmän jäsenille.

Mutta entä jos suunnitteluprosessi ei pelaa käytännössä kuten teoriassa? Entä jos esittelemme kuvakäsikirjoitusta tai epätäydellistä mallia? Tai joku muu joukkue suunnittelee mallia?

Kun tämä tapahtuu, ongelmia esiintyy todennäköisesti esittämisessä tai kehittämisessä. Nämä ongelmat jakautuvat tyypillisesti yhteen kolmeen luokkaan:

  1. Animaatioideaa ei välitetä riittävän selvästi.

Jos yrität kuvata animaatiokonseptia sanoilla tai still-kuvilla, saatat nähdä irvistys yleisön kasvoilla. Tämä tarkoittaa, että he yrittävät parhaansa mukaan ymmärtää ideasi, mutta he eivät todellakaan saa sitä. Vaikka he ymmärtäisivätkin peruskonseptin, heidän mielessään loisteltu kuva on todennäköisesti ristiriidassa suunnittelemasi kanssa. Koska ihmisillä on taipumus havaita liikkuvia kuvia, still-kuvia ja sanallisia kuvauksia eri tavoin, luottamalla sanoihin tai kuviin animaatioidean välittämiseksi, luodaan tilaa väärään viestintään ja usein tarpeettomaan jännitteeseen ryhmäsi jäsenten keskuudessa.

2. Suunnittelija ei tiedä, toimiiko animaatio hyvin, ennen kuin he tarkistavat ja testaavat kehittäjän prototyypin.

Kun suunnittelijoilla ei ole prototyyppitaitoja, he rajoittuvat vain ideoimaan keksijöitä kuvakäsikirjoituksella. Vaikka suunnittelija uskoo vahvasti mikrovuorovaikutusmalliin, hän ei voi sanoa, toimiiko se täysimääräisesti, ennen kuin kehittäjä on valmistanut prototyypin. Tämä on ongelmallista monista syistä, joista tärkein on väärän viestinnän todennäköisyys, jonka tällainen lähestymistapa tuo prosessiin. Lisäksi se avaa oven ryhmän jäsenten epäilyille ja johtaa kysymyksiin idean toteutettavuudesta. Tämä voi olla kallista ajallisesti kehityksen kannalta.

3. Suunnittelija ja kehittäjä eivät ole samalla sivulla

Kun suunnittelijat tekevät käyttöliittymäanimaatioita tai mikrovuorovaikutuksia, he yrittävät sisällyttää monimutkaisia ​​suunnittelutietoja, kuten mukautetut kehykset, skriptit, lausekkeet ja muut tehosteet. Esittäessään näitä ideoita kehittäjille, he saattavat kuulla: ”Tätä ei voida tehdä aikajanallamme” tai ”Emme voi tehdä siitä täsmälleen samaa, mutta yritämme.” Tässä vaiheessa he saattavat yrittää hajottaa selvittää erilaiset yksityiskohdat ja tekniset ongelmat kehittäjien kanssa. Nämä keskustelut voivat kuitenkin päätyä tuloksettomiin, jos suunnittelijalla ei ole työskentelytaitoja kehittäjien käyttämistä työkaluista tai kielistä. Nämä tekijät tulisi ottaa huomioon muotoillessaan ja keskustellessamme ideoista, jotta mikrovuorovaikutukset ovat yhteensopivia kehittäjien oletusasetusten kanssa, mikä lisää todennäköisyyttä, että lopputuote vastaa suunnittelijan (ja kaikkien muiden) normeja.

Mitkä ovat ratkaisuja näihin ongelmiin?

Vaikka kaikilla suunnittelijoilla ja kehittäjillä on oma tapa kommunikoida animaatiokonseptiensa kanssa, haluan kertoa yhdestä ryhmäni käyttämistä menetelmistä. Tämä menetelmä on ollut menestyksekäs, ja se on johtanut vähemmän kokouksiin ja parantanut dramaattisesti ryhmämme viestintää.

Nyt emme enää kiistu siitä, sisällytetäänkö mikrovuorovaikutus vai ei, tutkimme tapoja tehdä niistä vieläkin parempia!

Luurankojen vuorovaikutuskonsepti ja vuorovaikutusopas

”Luurankojen vuorovaikutuskonsepti ja vuorovaikutusoppaat eivät jätä tulkinnanvaraa, jonka avulla voin aloittaa työn heti ja olla varma sopivasta suunnittelijan visioon.” - Jesse M Majcher / johtava IOS-insinööri

Tavanomainen prosessi, jota kommunikoimme UX-mallien suhteen, ei käännä hyvin käyttöliittymäanimaatioita varten. Ensinnäkin UX-mallit ja -virtaukset suunnitellaan edelleen näytöllä näytöltä ja ovat staattisia. Käyttöliittymäanimaatiot ovat itsessään virtauksia, ne ovat sujuvia ja perustuvat ajoitukseen. Kun luot staattisen mallin, teemme karkean kehyskehyksen, jotta voimme ymmärtää idean ja keskustella virtauksesta. Tämän avulla voimme helposti tarkistaa ja hienosäätää mallia ennen lopullisen version luomista. Kun jokainen tiimin jäsen on yhtä mieltä siitä, että malli on valmis luovuttamaan kehittäjille, suunnittelija toimittaa kehittäjälle tyyli-oppaan ja punaisen viivan, joka sisältää yksityiskohdat, tekniset tiedot ja muut tärkeät tiedot suunnittelusta.

Jos käyttäisimme samanlaista prosessia animaatioihin, prosessimme saattaa olla paljon nopeampi ja parempi.

  1. Luurankojen vuorovaikutuskonsepti (liiketutkimus)

Luurankojen vuorovaikutuskonsepti on samanlainen kuin kehys, jonka voit luoda virtausta suunniteltaessa, tärkein ero on, että tämä on pelattava / napsautettavissa oleva prototyyppidemo. Jos tuomme tämän tapaamiseen, ryhmämme jäsenten ei tarvitse käyttää mielikuvitustaan ​​ymmärtääksesi konseptia. Suunnittelija voi käyttää toistettavaa / napsautettavissa olevaa demoa tai staattista tarinataulua suoraan viitaamaan suunnittelun visuaalisiin ja animaatiotielementteihin. Tämä antaa jokaiselle selkeän ja tarkan kuvan ideasta. Kumppanit puolestaan ​​voivat antaa palautetta, joka on erittäin tarkkaa ja siten arvokasta suunnittelijalle. Samanaikaisesti tuotejohtamis- ja kehitysryhmät saavat tietoa, jonka avulla he voivat parantaa sisäistä viestintää ja aika-arvioita projektille.

2. Vuorovaikutusopas

Kun joukkue on sopinut konseptista, suunnittelija luo vuorovaikutusoppaan. Tämä on samanlainen kuin tyyliopas, koska siinä hahmotellaan elementtien sijainti, kierto, mitta ja ajoitus. Voimme lisätä kaikki yksityiskohdat animaatioista, mikä auttaa kumppaneitamme ymmärtämään sen selvästi. Kun suunnittelija näyttää vuorovaikutusoppaan kumppaneilleen, hän voi olla entistä selkeämpi animaatiokonseptin liikkeessä ja mittauksessa. Tämä on erittäin hyödyllinen työn viimeistelyyn yhteistyön kautta. Se auttaa myös suunnittelijoita olemaan harkittuja animaation / mikrovuorovaikutuksen suunnittelussa.

3. Suunnittelijoiden prototyyppitaito

Kokemukseni mukaan onnistuneen suunnitteluyhteistyön luomiseksi tuotesuunnittelijan tulisi olla animaation ohjaaja ja kehittäjän tulee tarjota tukea. Tämä tarkoittaa, että tuotesuunnittelija kantaa suurimman osan vastuusta kumppanuudessa. He eivät vain ole vastuussa ideoidensa selkeästä selittämisestä, vaan heidän on osoitettava, että ne ovat toteutettavissa todistamalla ideasta. Se tarkoittaa myös, että tuotesuunnittelijoiden on kyettävä tekemään omia animaatioprototyyppejä. Jos tuotesuunnittelija voi luoda prototyypin ja esitellä sen kokouksen aikana, seuraava keskustelu on selkeämpää ja vähemmän aikaa vievää, mikä johtaa yleisesti tehokkaampaan viestintäprosessiin.

Millaisilla prototyyppityökaluilla suunnittelijoiden tulisi tutustua? Siellä on monia työkaluja, mutta kaikki eivät tiedä, mikä toimii parhaiten tietyissä mikrovuorovaikutustehtävissä. Tässä ovat suositukseni, jotka perustuvat henkilökohtaiseen kokemukseeni näiden elementtien suunnittelusta.

Jos tunnet koodauksen:

  • Mobiili: Xcode, Android-studio
  • Mobiili tai verkko: Framer
  • Web: CSS-animaatio

Jos haluat suunnitella vuorovaikutuksen näytön kaltaisen työn ja moduulin välillä:

  • Invisio ja Marbel

Jos haluat luoda yksityiskohtaisempia vuorovaikutuksia:

  • Periaate, Adobe CC, origami Studio ja Pixate

Jos haluat luoda yksityiskohtaisen vuorovaikutuksen + animaation:

  • Jälkivaikutukset

Olen tällä hetkellä fani siitä, että käytän After Effectä prototyyppinäni. Vaikka se ei olisi vuorovaikutteinen (ts. Napsautettava), se on täydellinen tapa esitellä animaatiokonsepti. Myöskään vaikutukselle ei ole rajoituksia ja pystyt hallitsemaan yksityiskohtien liikkumista. Se on jopa mahdollista käyttää vuorovaikutukseen 3D-tilassa, kuten AR: n ja VR: n kanssa.

Ihastuttava tiimin välinen vuorovaikutus tekee ilahduttavista tuotteista

Mikrovuorovaikutuksista on tullut yhä tärkeämpi - ellei kriittinen - osa verkkoa, mobiilisuunnittelua ja muuta. Vaikka suunnittelijat ja kehittäjät tunnustavat käyttöliittymäanimaation arvon ja ovat motivoituneita luomaan niitä, he usein kamppailevat yhteistyöhön tehokkaalla ja vaikuttavalla tavalla. Hyvän mikrovuorovaikutuksen lähettäminen ajoissa vaatii vahvan joukkueen; Tällaiset ryhmät vaativat selkeän roolien rajaamisen, tehokkaat viestintätaidot ja oikeat prototyyppityökalut käsillä oleviin tehtäviin.

Jos haluat asettaa mikrovuorovaikutuksesi menestykseen, varmista, että tiimilläsi on nämä ominaisuudet ja sitoutuminen näihin prosesseihin. Ja onnea omalle mikrovuorovaikutuksellesi!

ILMOITTAMISLAUSELMA: Nämä mielipiteet ovat kirjoittajan mielipiteet. Ellei tässä viestissä toisin mainita, Capital One ei ole sidoksissa mihinkään mainittuihin yrityksiin, eikä myöskään tue sitä. Kaikki käytetyt tavaramerkit ja muut immateriaalioikeudet ovat omistajiensa omistamia. Tämä artikkeli on © 2017 Capital One.

Lisätietoja Capital One -sovellusliittymistä, avoimen lähdekoodin tapahtumista, yhteisötapahtumista ja kehittäjäkulttuurista saat DevExchange-palvelusta, joka on yhden luukun kehittäjäportaali: developer.capitalone.com.