Tuotetta suunniteltaessa on monia tapoja parantaa käyttökokemusta, mukaan lukien henkilöiden määrittely, hyvin jäsennelty tietoarkkitehtuuri ja harkitusti kirjoitettu sisältö. Mutta kun tämä korkean tason rakenne on asetettu, ilon luominen käyttäjälle tapahtuu pienemmässä vuorovaikutuksessa suunnittelun yksityiskohdat .

Nämä yksityiskohdat tunnetaan nimellä mikro-vuorovaikutukset , ovat yksittäisiä hetkiä tuotteessa, joka on suunniteltu suorittamaan yksi tehtävä ja samalla parantamaan tuotteen luonnollista virtausta. Tietojen päivittäminen pyyhkäisemällä ylöspäin, sisällön tykkääminen tai asetuksen muuttaminen ovat kaikki mikrovaikutuksia. Ne voivat sisältää myös yksinkertaisia ​​käyttöliittymäanimaatioita - esimerkiksi tavan, jolla valikko liukuu napautettaessa, tai kortti liukuu pois näytöltä pyyhkäisemällä.

Usein käyttäjä ei edes huomaa mikro-vuorovaikutusta, mutta niiden hienovaraiset yksityiskohdat tekevät tuotteesta enemmän nautittavaa ja helpompi käyttää ja siten parantaa sen käyttökokemusta.

Mikrovaikutusten edut

Mikroyhteydet ja käyttöliittymän animaatio ovat niin tärkeitä, että ne voivat tehdä tai rikkoa mallin - tai niin Charles Eames , huonekalujen suunnittelusta ja arkkitehtuurin maineesta, sanoi:

Yksityiskohdat eivät ole yksityiskohtia. He tekevät suunnittelun.

Joitakin keskeisiä etuja mikro-vuorovaikutusten sisällyttämisestä tuotteeseen ovat:

• Positiivisen emotionaalisen vaikutuksen luominen käyttäjälle sujuvamman käyttöliittymävuorovaikutuksen ansiosta
• Välitön palaute käyttäjälle tekemiensä toimien perusteella
• Ohjaa käyttäjää sovelluksen läpi sujuvammin, intuitiivisemmin
• Kannustetaan käyttäjiä toimimaan sovelluksen kanssa vastaamalla ilmoitukseen tai jakamalla sisältöä
• Käyttäjävirheiden estäminen

Mikrovaikutussuunnittelun parhaat käytännöt

Nyt kun olemme luoneet jonkin määritelmän ja kontekstin mikrointeraktioiden ympärille ja antaneet esimerkin siitä, miten ne parantavat käyttökokemusta, keskustellaan parhaista käytännöistä mikrointeraktioiden luomiseksi.

Tunnista ja ymmärrä käyttäjän ongelma

Ensimmäinen sääntö missään käyttäjäkokemus Suunnittelun tarkoituksena on paljastaa ja ymmärtää käyttäjien ongelmia - se ei ole erilainen mikro-vuorovaikutuksessa. Paras tapa ymmärtää, mitä käyttäjä tarvitsee, on tehdä kyselyjä tai haastatteluja tai tarkkailla käyttäytymistä käyttäjätutkimuksella. ApeeScape-suunnittelija Ivan Annikov syventää käyttäjien tarpeiden ymmärtämistä artikkelissaan, Going Guerrilla: Edullisia UX-tutkimusvinkkejä ja vaihtoehtoja '

Pidä mikroyhteydet luonnollisina

Tavoitteena on poistaa kuilu käyttäjän ja tuotteen välillä tavoilla, jotka tuntuvat intuitiivisilta ja luonnollisilta, joten vältä outoja animaatioita, joiden lataaminen kestää liian kauan tai voivat häiritä käyttäjää. Luo sen sijaan malleja, jotka kulkevat saumattomasti tuotteen mukana. Herkkyys on avain mikrointeraktioissa. Älä jätä käyttäjää hämmentyneeksi ajattelemaan: 'Mikä se oli?'

Testaa ja toista havainnot käyttäjien testauksesta

Jopa kokenut suunnittelijat harvoin saa mallit täysin heti ensimmäisellä kokeilulla. Siksi käytetään prosessia käyttäjän testaus ja iteratiivinen suunnittelu on yksinkertainen tapa vähentää käytettävyysvirheitä ennen tuotteen lanseerausta.

Käyttäjätestausvaiheessa mikrovaikutusten testaus ja analysointi käytettävyyden suhteen ja niiden tarkistaminen seuraavan suunnitteluvaiheen aikana. Tätä prosessia toistetaan, kunnes käytettävyysongelmat ja kipupisteet korjataan.

Seuraa mikroyhteyksien rakennetta

Mukaan Dan Saffer , vanhempi henkilöstön tuotesuunnittelija, Viserrys ja kirjan kirjoittaja 'Mikroyhteydet: Suunnittelu yksityiskohtien avulla' mikro-vuorovaikutuksessa on neljä osaa.

1. Trigger - Liipaisin käynnistää mikrointeraktiot. Yksi laukaisintyyppi on vaihtokytkin, joka kytkee toiminnon päälle ja pois päältä.
2. Säännöt - Sääntö määrittää, kuinka mikrointeraktio reagoi liipaisimeen, ja määrittää, mitä tapahtuu vuorovaikutuksen aikana. Esimerkiksi taskulamppuohjelma käyttää nappia liipaisimena, joka sytyttää ja sammuttaa valon.
3. Palaute - Palaute kertoo käyttäjälle, mitä tapahtuu mikrointeraktion aikana. Esimerkki palautteesta on sisäänkirjautumislomake, joka sisältää sisäisen vahvistuksen - reunuksen väri muuttuu vihreäksi, jos kenttä on täytetty oikein, ja punaiseksi, jos jokin on väärä. Tällä tavalla käyttäjä tietää heti, että jokin on oikein tai väärin.
4. Silmukat ja tilat - Silmukat ja tilat määrittelevät mikrovaikutuksen metasäännöt ja miten mikrointeraktio muuttuu toistuvassa käytössä. Esimerkiksi verkkokaupassa 'Osta nyt' -painike saattaa muuttua 'Osta toinen' -painikkeeksi, kun käyttäjä on ostanut tuotteen aiemmin.

Mikrovaikutussuunnittelun purkaminen

Esittelemään mikrointeraktioiden suunnittelun taustalla oleva ajatusprosessi dekonstruoidaan mikrointeraktio Google : tiedostonimen ehdotuksen mikrointeraktio Google Docs .

Tämä mikrointeraktio vie asiakirjan ensimmäisen rivin ja ehdottaa kyseistä tekstikappaletta asiakirjan nimeksi, mikä tekee nimen luomisprosessista intuitiivisemman.

Mikrointeraktion suunnitteluprosessi on sama kuin minkä tahansa suunnittelutehtävän: käyttäjän kipupisteen tunnistaminen ja korjaaminen. Aloitetaan ongelman tunnistaminen pitäen mielessä aikaisemmat parhaat käytännöt.

Käyttäjäongelma

Helppo ja intuitiivinen tapa pitää asiakirjat järjestyksessä on yksinkertaisesti nimetä ne kuvailevasti. Useimmissa tekstieditorissa 'Nimeä asiakirjasi' -kenttä on tyhjä, vaikka tiedoston nimi korreloi lopulta asiakirjan sisällön kanssa. Tämä on prosessi, johon kannattaa puuttua mikrointeraktiolla.

Googlen ratkaisu

Google-dokumentit käsittelee tätä kahdella tavalla käyttäjän valinnan mukaan: 1) Käyttäjät voivat napsauttaa nimikenttää ja muuttaa asiakirjan nimen heti ennen minkään sisällön kirjoittamista ja vaihtaa 'Nimetön asiakirja' valitsemallesi nimelle, tai 2 ) Kun käyttäjä kirjoittaa ensimmäisen tekstirivin, Google lisää sen automaattisesti asiakirjan nimellä. Käyttäjä voi pitää tämän sellaisenaan tai muuttaa sitä.

Tarkastellaan yksityiskohtia:

Liipaisimet

Voi olla muutama mahdollinen laukaisija asiakirjan nimeämiseksi käyttämällä Tiedosto> Tallenna nimellä valikkotoiminto tai lyöminen cmd + s Macissa ( ctrl + s Windowsissa) näppäimistöllä kuten työpöytäsovelluksissa. Mutta mikään näistä ei hyödynnä verkon interaktiivista luonnetta, eivätkä ne edistä erityisesti käyttäjävirtaa.

Sen sijaan Google-dokumenttien pääkäynnistin on yksinkertaisesti napsauttaa asiakirjan nimen kenttää. Kentän hiiren osoitin näyttää 'Nimeä uudelleen' -työkaluvihjeen. Toissijainen liipaisin on Tiedosto> Nimeä uudelleen , joka korostaa nimen syöttökentän.

Säännöt

Säännöt määrittelevät, mitä tapahtuu laukaisimen napsauttamisen jälkeen. Tässä tapauksessa tekstin ensimmäinen rivi näkyy asiakirjan nimellä. Entä jos käyttäjä ei halua nimen ensimmäisen tekstirivin olevan? Kun käyttäjä napsauttaa nimen syöttökenttää, kaikki teksti valitaan ja se poistetaan millä tahansa näppäimen painalluksella, jolloin käyttäjän on helppo luoda uusi nimi.

Palaute

Syöttökentän reunan värin muuttaminen on yleinen vuorovaikutuskuvio, ja Google Docs käyttää tätä tässä antaakseen käyttäjälle välitöntä palautetta.

Silmukat ja tilat

Käyttäjä loi asiakirjan nimen onnistuneesti ja laukaisu pysyy paikallaan yhdellä keskeisellä erolla: Asiakirja on nyt nimetty.

Tässä vaiheessa käyttäjä voi haluta muuttaa vain muutaman kirjaimen tai lisätä päivämäärän nimeen sen sijaan, että muuttaisi koko aiemmin määrittelemäänsä nimeä. Tässä tapauksessa, toisin kuin edellinen sääntö, koko asiakirjan nimen korostussääntö on poistettu käytöstä.

Tulos

Kun ongelma on määritelty ja keskitytty mikro-vuorovaikutuksen kaikkiin neljään osaan, tuloksena on luonnollisempi, käyttäjäystävällisempi kokemus. Google Docs -tiedostojen nimeämisratkaisu auttaa käyttäjää pysymään järjestyksessä oikein nimettyjen tiedostojen kanssa ja yksinkertaistaa asiakirjojen nimeämistä.

Mikroyhteydet toiminnassa: esimerkkejä reaalimaailmasta

Tehtäväluettelon järjestäminen uudelleen

Apple iOS -muistutukset Auta käyttäjiä pysymään järjestäytyneinä ja poistamaan useita vaiheita antamalla heille napauttaa, pitää painettuna ja vetää luettelokohtaa muuttaakseen sen paikkaa luettelojärjestyksessä.

Reagointi sosiaalisen median viesteihin

Sisällön tykkäämisestä napsauttamalla peukkupainiketta tai -kuvaketta on tullut yleinen UX-suunnittelumalli monissa sovelluksissa ja verkkosivustoissa. Facebook rakennettu tähän vuorovaikutukseen lisäämällä useita vaihtoehtoja 'tykkäämisen' lisäksi hienovaraisen mikrovaikutuksen kautta.

Merkkitekstien korostus

Useimmissa selaimissa , on mahdollista ohittaa oletustekstin valintaväri. IKEA käyttää tätä vuorovaikutuskuviota hienovaraisen tuotemerkin yksityiskohtien lisäämiseksi korostamalla tekstiä sen ikonisissa keltaisissa ja sinisissä väreissä.

Sijaintisi jakaminen

Google Hangouts olettaa, että yksi tapa, jolloin käyttäjä voi haluta jakaa sijaintinsa, on, kun joku lähettää tekstiviestin 'Missä olet?'

Kun käyttäjä tarkastelee tätä viestiä, Jaa sijaintisi -painike näkyy asiayhteyteen. Sitten he voivat napauttaa tätä painiketta lähettääksesi sijaintikartansa automaattisesti toiselle käyttäjälle.

Pyyhkäise Valitse-kohtaan

Mikrovaikutuksia voidaan käyttää vastaamaan yksinkertaisiin kyllä ​​tai ei kysymyksiin sovelluksessa. Tinder tekee tämän pyytämällä käyttäjää pyyhkäisemällä vasemmalle tai oikealle (ei / kyllä) riippuen siitä, pitävätkö he mahdollisesta ottelustaan ​​vai eivät.

Hakulaajennus

Google-postilaatikko sovellus paitsi älykkäästi ryhmittelee postin niput , se on myös suunniteltu sallimaan äänihaku tai valitsemalla uusimmat yhteystiedot yhdellä napautuksella.

Nopea lisääminen ystävän yhteystietoihin

IstuinGeek yksinkertaistaa lomakkeiden täyttämisprosessia täyttämällä tiedot automaattisesti käyttäjän kontakteista napauttamalla Lisää yhteystiedoista -painiketta.

Lisätietoja mikro-vuorovaikutuksista

Mikroyhteydet ovat avainasemassa käyttäjäkokemus , ja niistä on saatavana monia resursseja, joista muutamat on lueteltu alla.

Lisätietoja mikro-vuorovaikutuksista yleensä on osoitteessa Mikroyhteydet , verkkosivusto, joka on luotu aiemmin mainitun kirjan kumppanina 'Mikroyhteydet: Suunnittelu yksityiskohdilla' kirjoittanut Dan Saffer. Sivustolla on yksityiskohtaisia ​​selityksiä mikrointeraktioista sekä tietoa tunnettujen mikrointeraktioiden alkuperästä, kuten automaattinen korjaus, automaattinen täydennys sekä leikkaus ja liittäminen. Kirjan ensimmäinen luku on saatavana myös ilmaiseksi ladattavana.

Jos haluat saada mikrovaikutuksia, käy osoitteessa Pikku iso yksityiskohdat , kuratoitu kokoelma digitaalisten tuotteiden mikrointeraktioita. Se näyttää esimerkkejä siitä, miten yritykset pitävät Omena , Trello ja Pino ylivuoto toteuttaa mikrointeraktioita ja käyttöliittymän animaatiota.

Opi luomaan mikrointeraktioita Framer , lukea ApeeScape-suunnittelija, Wojciech Dobry's artikla, Framer-opas: 7 yksinkertaista mikrointeraktiota prototyyppiesi parantamiseksi .

---

Kerro meille mitä mieltä olet! Jätä ajatuksesi, kommenttisi ja palautteesi alla.

• • •

Lue lisää ApeeScape Design Blogista:

• Suunnittelun periaatteet ja niiden merkitys
• Parhaat UX-suunnittelijoiden salkut - inspiroivia tapaustutkimuksia ja esimerkkejä
• Gestaltin suunnitteluperiaatteiden tutkiminen
• Adobe XD vs. Sketch - mikä UX-työkalu sopii sinulle?
• 10 UX-toimitettavaa huippusuunnittelijaa käyttää