"Paras tuote tekee kahta asiaa hyvin: ominaisuuksia ja yksityiskohtia. Ominaisuudet ovat, mitä ihmiset vetävät tuotteeseen; yksityiskohdat pitävät ne siellä ", sanoo Dan Saffer. Yksityiskohtien merkitystä ei voida korostaa liikaa. Tiedot lisäävät käyttäjien rakastamista tai vihaan sovellusta tai verkkosivustoa. Mikro-interaktiot ovat näitä yksityiskohtia. Ne saattavat helposti unohtaa maailmanlaajuisessa suunnitteluohjelmassa, mutta ne kokevat koko kokemuksen yhdessä.

Tässä artikkelissa kerron, mikä on mikrointeraktio, miksi ne ovat tärkeitä ja tarjoavat hyviä esimerkkejä.

Mikä on mikrointeraktio

Mikro-vuorovaikutukset ovat hienovaraisia ​​hetkiä, jotka keskittyvät yhden tehtävän suorittamiseen. Lähes kaikki ympärillämme olevat sovellukset on täytetty mikrointeraktioilla.

Tunnetuin esimerkki mikrointeraktiosta on ollut jo kauan ennen kuin tietokoneet keksittiin. On / off-kytkin on usein ensimmäinen mikroyhteisö, jonka ihmiset kohtaavat tuotteen kanssa.

Joitakin muita esimerkkejä erityisistä mikrointeraktioista ovat:

  • Värähtelyilmoitus ja äänetön tila -kuvake näkyvät, kun kytket iPhonen mykistämään.
  • Pull-to-refresh UI -kuvio. Yhdistämällä käyttäjän halu löytää enemmän sisältöä virkistystapahtumalla, kokemus muuttuu saumattomammaksi.

pull-down-refresh-iphone-app-rajapinta-UX-suunnittelu-ramotion
Kuvahinta: Ramotion

  • Sosiaalisten verkkojen "like" -painike, joka korostaa muutoksia vuorovaikutteisilla animaatioilla. Tällainen palaute ilmoittaa käyttäjille, että he ovat luettelossa henkilöistä, jotka pitivät virkaa.

fueled-07032014-cb_2x
Kuvahinta: Dribbble

Miksi he työskentelevät

Lyhyesti sanottuna mikrointeraktiot parantavat UX: ää tekemällä käyttöliittymästä vähemmän koneita ja ihmisiä. Paljonko ajattelemme ulkoasua ja miten se liittyy suunnitteluun. Kun ajattelemme mikrointeraktioita, ne melkein muodostavat tasapainon, miten käyttäjät tuntevat tuotteesta, palvelusta tai brändistä. Mikroyhteistyö hienosäätää ihmiskeskeistä muotoilua:

  • Välittömän palautteen tarjoaminen - Visuaalinen palaute vetoaa käyttäjän luonnolliseen kuunteluun. Käyttäjä tietää heti, että toiminta hyväksytään, ja he haluavat ilahduttaa visuaalinen palkkio.
  • Toimivat vuorovaikutuksen ohjaajina - Mikroyhteistyöllä on valtuudet rohkaista käyttäjiä toimimaan vuorovaikutuksessa. He voivat ohjata käyttäjiä työskentelemään sovelluksen kanssa.
  • Miellyttävän ilon - Mikro-interaktiot ovat täydellinen mahdollisuus pieneen ylimääräiseen iloisuuteen suunnittelussa ilman, että hemmottelevat pääkokemusta.

Lisäedut

Koska mikrointeraktiot ovat luonteeltaan lyhyitä, ne on suunniteltava toistuvaan käyttöön. Hyvin suunnitellut mikrointeraktiot voivat luoda:

Habit loop

Mikro-vuorovaikutukset ovat tapana silmukoiden keskeisiä osia. Tottumukset syntyvät, kun ihmiset tekevät samoja toimia toistuvasti. Tyypillinen tapana silmukka koostuu kolmesta elementistä:

  1. Cue - Trigger, joka käynnistää toiminnon
  2. Rutiini - Vastauksena vihjeeseen teet toimenpiteen
  3. Palkitseminen - Etu, josta saat rutiinin täydennyksen, syyn toimien suorittamiseen

Mitä voimakas palkkio on, sitä vahvempi tapana on.

Facebookin ilmoitus uudesta ystäväpyynnöstä on hyvä esimerkki tavan silmukasta: punainen tunnus ja valkaistu kuvake ( cue ) osoittavat, että on uusi pyyntö, joka tekee käyttäjältä napsauttamalla kuvaketta ( rutiini ) nähdäksesi henkilötiedot ( palkkio ). Jonkin ajan kuluttua käyttäjät napsauttavat automaattisesti kuvaketta, kun he näkevät punaisen tunnuksen.

Allekirjoituksen hetket

Jos tehdään hyvin, mikrointeraktiot voivat olla allekirjoitushetkiä, jotka lisäävät asiakasuskollisuutta. Allekirjoituksen hetket ovat mikrointeraktioita, joita on korotettu osaksi tuotemerkkiä. Ajattele Facebookin Like -painiketta. Se on luonnollinen osa Facebook-käyttöliittymää. Jos Facebook poistaa tämän ominaisuuden yhtäkkiä, käyttäjät huomaavat sen ja ajattelevat, että sovellus on rikki.

Mahdollisuuksien tunnistaminen

Osa mikrointeraktioiden kauneudesta on se, että ne voidaan sijoittaa monenlaisiin paikkoihin mahdollisten toimenpiteiden ympärille. Mikroyhteistyö on hyvä:

Korosta muutoksia

Mikroyhteistyö voi ohjata käyttäjän huomiota . Monissa tapauksissa animaatioita käytetään houkuttelemaan käyttäjän huomio tärkeisiin yksityiskohtiin (eli ilmoituksiin).

notification_animation03
Kuvahaku: Dribbble

Vähentää käyttäjän vaivaa

Automaattinen täydennys on erinomainen esimerkki mikrointeraktioista. Tyylillä on suuret vuorovaikutuskustannukset; se on virheetön ja aikaa vievää jopa täyden näppäimistön (ja vielä enemmän kosketusnäytöllä). Automaattisen täydennyksen avulla käyttäjä voi antaa oikean vastauksen nopeammin ja ilman typografisia virheitä. Kun kirjoitat jokaisen kirjaimen, järjestelmä tekee parhaan arvan siitä, mitä sanoja yrität löytää.

mieltymys
Kuvahaku: fancy.surge.sh

Anna palautetta näyttämään, mitä on saavutettu

Mikroyhteistyö voi vahvistaa toimia, joita käyttäjä suorittaa. Noudattamalla periaatetta " Näytä, älä kerro" , voit käyttää animoitua palautetta osoittaaksesi, mitä on saavutettu. Sisään Stripe: n esimerkki , kun käyttäjä napsauttaa "Pay" -työkalua, spinner ilmestyy hetkeksi, ennen kuin sovellus näyttää menestystilan. Checkmark-animaation ansiosta käyttäjä tuntee helposti maksun ja käyttäjät arvostavat näitä tärkeitä yksityiskohtia.

Anna tilatiedot

Jakob Nielsenin ensimmäinen käytettävyysheuristinen periaate: järjestelmä pitää aina pitää käyttäjät ajan tasalla siitä, mitä tapahtuu. Kirjautumisindikaattori chatissa on erinomainen esimerkki mikroyhteistiedoista, joka tarjoaa tilatietoja. Se näkyy ystäväsi näytössä, kun kirjoitat viestiä keskustelussa.

konekirjoitus
Kuvahaku: Dribbble

Vahvista käyttäjätiedot

Yksi tärkeimmistä muotoilun tärkeimmistä ja usein huomaamattomista osa-alueista on virheenkäsittely . Ihmisluonto on kuitenkin tekemättä virheitä, ja lomasi luultavasti ei ole vapautettu ihmisvirheestä. Käyttäjät eivät pidä, kun he suorittavat lomakkeen täyttöprosessin vain selvittääkseen, että he ovat tehneet virheen. Tässä on validointimikroyhteistyö, joka on osa käyttäjäystävällistä muotoa. Reaaliaikainen inline-validointi ilmoittaa välittömästi käyttäjille toimitettujen tietojen oikeellisuudesta. Tämän lähestymistavan avulla käyttäjät voivat korjata virheet, joita he tekevät nopeammin ilman, että heidän on odotettava, ennen kuin he painavat lähetyspainiketta nähdäksesi virheet. Kun se tehdään oikein, se voi muuttaa epäselvä vuorovaikutus selkeiksi.

form_validation

Laajuus: Dribbble

johtopäätös

Suunnittelu on yksityiskohdissa. Jopa pienet yksityiskohdat ansaitsevat suurta huomiota, koska kaikki nämä pienet hetket muodostavat tunnelman, ne yhdistyvät muodostamaan kauniin kokonaisvaltaisen tuotteen.

"Erona rakastettujen tuotteiden ja niistä, jotka me yksinkertaisesti sietävät, ovat usein mikro-interaktiot, joita meillä on." - Dan Saffer

Jos välität käyttökokemusta, sinun on huolehdittava mikrointeraktioista. Koska tuotteesi on vain yhtä hyvä kuin pienin mikrointeraktio, jolla ihmiset ovat mukana.