Toote kujundamisel on kasutuskogemuse parandamiseks palju võimalusi, sealhulgas isikute määratlemine, hästi struktureeritud teabearhitektuur ja läbimõeldult kirjutatud sisu. Kuid pärast selle kõrgetasemelise struktuuri seadistamist tekib kasutajale rõõmu tekitamine väiksemas suhtluses kujunduse detailid .

Need üksikasjad, tuntud kui mikrointeraktsioonid on toote üksikud hetked, mis on mõeldud ühe ülesande täitmiseks, suurendades samal ajal toote loomulikku voogu. Andmete värskendamiseks üles libistamine, sisu meeldimine või sätte muutmine on kõik mikrointeraktsioonid. Need võivad sisaldada ka lihtsaid kasutajaliidese animatsioone - näiteks seda, kuidas menüü koputades sisse libiseb, või kaart libiseb ekraanilt minema.

Sageli ei märka kasutaja mikrointeraktsioone isegi teadlikult, kuid nende peened detailid muudavad toote veelgi paremaks nauditav ja lihtsam kasutada ja seeläbi oma kasutuskogemust paremaks muuta.

Mikrointeraktsioonide eelised

Mikrointeraktsioonid ja kasutajaliidese animatsioon on nii üliolulised, et nad saavad kujunduse teha või seda rikkuda - või ka nii Charles Eames mööblidisaini ja arhitektuuri kuulsuse kohta ütles:

Detailid pole detailid. Nad teevad kujunduse.

Mikrointeraktsioonide tootele lisamise mõned peamised eelised on:

• Kasutajale positiivse emotsionaalse efekti loomine sujuvama kasutajaliidese interaktsiooni tõttu
• Kasutajale viivitamatu tagasiside andmine nende tehtud toimingute põhjal
• Kasutaja suunamine rakenduse kaudu sujuvamalt ja intuitiivsemalt
• Kasutajate julgustamine rakendusega suhtlema, vastates teatisele või sisu jagades
• Kasutajavigade ennetamine

Mikrointeraktsiooni kujundamise parimad tavad

Nüüd, kui oleme loonud mikrotevaheliste seoste kohta mõne definitsiooni ja konteksti ning andnud näite selle kohta, kuidas need kasutajakogemust parandavad, arutame mikrointeraktsioonide loomise parimaid tavasid.

Tuvastage kasutaja probleem ja mõistke seda

Esimene reegel mis tahes kasutuskogemus disain on kasutaja probleemide avastamine ja mõistmine - see ei erine mikrointeraktsioonide puhul. Parim viis kasutaja vajaduste mõistmiseks on küsitluste või intervjuude korraldamine või käitumise jälgimine kasutajauuringute abil. ApeeScape'i disainer Ivan Annikov tutvub oma artiklis kasutaja vajaduste mõistmisega põhjalikumalt: Guerrilla saamine: taskukohased UX-i uurimise näpunäited ja alternatiivid . '

Hoidke mikrointeraktsioonid loomulikud

Eesmärk on ületada vahe kasutaja ja toote vahel viisil, mis tundub intuitiivne ja loomulik, nii et vältige kummalisi animatsioone, mille laadimine võtab liiga kaua aega või võib kasutaja tähelepanu hajutada. Selle asemel looge kujundused, mis voolavad tootega sujuvalt. Mikrointeraktsioonides on peent peent. Ärge jätke kasutajat hämmingusse ja mõtlesin: 'Mis see oli?'

Kasutajate testimise test- ja korduslehed

Isegi kogenud disainerid harva saavad disainid esimesel katsel täiesti õiged. Sellepärast kasutate protsessi kasutaja testimine ja iteratiivne kujundus on lihtne viis kasutamisvigade vähendamiseks enne toote turule toomist.

Kasutaja testimise etapis testitakse ja analüüsitakse mikrointeraktsioonide kasutatavust ning vaadatakse üle järgmise disaini faasi jooksul. Seda protsessi korratakse seni, kuni kasutatavuse probleemid ja valupunktid on parandatud.

Järgige mikrointeraktsioonide struktuuri

Vastavalt Dan Saffer , vanem personali toodete disainer aadressil Twitter ja autor „Mikrointeraktsioonid: detailidega kujundamine” mikrointeraktsioonil on neli osa.

1. Päästik - Päästik käivitab mikrointeraktsioonid. Üks päästiku tüüp on lülituslüliti, mis lülitab funktsiooni sisse ja välja.
2. Reeglid - Reegel määrab, kuidas mikrointeraktsioon reageerib päästikule, ja määrab, mis toimub interaktsiooni ajal. Näiteks kasutab taskulambi rakendus päästikuna nuppu, mis lülitab valguse sisse ja välja.
3. Tagasiside - Tagasiside ütleb kasutajale, mis toimub mikrointeraktsiooni ajal. Tagasiside näiteks on sisseehitatud kinnitusega registreerimisvorm - äärise värv muutub roheliseks, kui väli on õigesti täidetud, ja punaseks, kui midagi on valesti. Nii saab kasutaja koheselt teada, et midagi on õige või vale.
4. Silmused ja režiimid - Silmused ja režiimid määratlevad mikrointeraktsiooni metareeglid ja selle, kuidas mikrointeraktsioon korduval kasutamisel muutub. Näiteks e-kaubanduses võib nupp „Osta kohe” asenduks väärtusega „Osta teine”, kui kasutaja on selle toote varem ostnud.

Mikrointeraktsiooni disaini dekonstrueerimine

Mikrointeraktsioonide kujundamise taga oleva mõtteprotsessi näitamiseks dekonstrueerime mikrointeraktsiooni Google : failinime soovituse mikrointeraktsioon Google Docs .

See mikrointeraktsioon võtab dokumendi esimese rea ja soovitab dokumendi nimeks seda tekstitükki, muutes nime loomise protsessi intuitiivsemaks.

Mikrointeraktsiooni kujundamise protsess on sama mis mis tahes disaini ülesande puhul: kasutaja valupunkti tuvastamine ja selle fikseerimine. Varasemaid häid tavasid silmas pidades alustame probleemi tuvastamist.

Kasutaja probleem

Lihtne ja intuitiivne viis dokumentide korrastamiseks on neile lihtsalt kirjeldav nimi. Enamikus tekstiredaktoritest jääb väli „Nimetage oma dokument“ tühjaks, kuigi on suur tõenäosus, et failinimi korreleerub dokumendi sisuga. See on protsess, mida tasub käsitleda mikrointeraktsiooniga.

Google'i lahendus

Google Docs tegeleb sellega kahel viisil, sõltuvalt kasutaja valikutest: 1) Kasutajad saavad enne sisu sisestamist klõpsata nimeväljal ja muuta dokumendi nime ning muuta „Pealkirjata dokument” enda valitud nimeks või 2 ) Kui kasutaja sisestab esimese tekstirea, lisab Google selle dokumendi nimeks automaatselt. Kasutaja saab seda säilitada nii, nagu see on, või seda muuta.

Uurime üksikasju:

Käivitajad

Dokumendi nimetamiseks võib olla mõni võimalik käivitaja Fail> Salvesta nimega menüüfunktsioon või löömine cmd + s Macis ( ctrl + s Windowsis) klaviatuuril nagu töölauarakendustes. Kuid ükski neist ei kasuta ära veebi interaktiivset olemust ega suurenda kasutajavoogu eriti.

Selle asemel on Google Docsi peamine käivitaja lihtsalt dokumendi nime väljal klõpsamine. Väljal hõljutatud olek kuvab tööriista vihje „Nimeta ümber“. Sekundaarne päästik on Fail> Nimeta ümber , mis tõstab esile nime sisestusvälja.

Reeglid

Reeglid määratlevad, mis juhtub pärast päästikul klõpsamist. Sellisel juhul ilmub dokumendi nimena teksti esimene rida. Aga mis siis, kui kasutaja ei soovi, et nimeks oleks esimene tekstirida? Kui kasutaja klõpsab nime sisestusväljal, valitakse kogu tekst ja see kustutatakse mis tahes klahvivajutusega, mis muudab kasutajale uue nime loomise lihtsaks.

Tagasiside

Sisestusvälja piiri värvi muutmine on levinud suhtlusmuster ja seda kasutab Google Docs siin kasutajale viivitamatu tagasiside andmiseks.

Silmused ja režiimid

Kasutaja lõi dokumendi nime edukalt ja päästik jääb paigale ühe peamise erinevusega: Dokumendil on nüüd nimi.

Siinkohal võib kasutaja soovida muuta ainult mõnda tähte või lisada nimele kuupäeva, selle asemel, et muuta kogu varem määratletud nime. Sel juhul on vastupidiselt eelmisele reeglile keelatud kogu dokumendi nime esiletõstmise reegel.

Tulemus

Pärast probleemi määratlemist ja keskendumist mikrointeraktsiooni kõigile neljale osale on tulemuseks loomulikum ja kasutajasõbralikum kogemus. Google Docsi failinimede lahendus aitab kasutajal õigesti nimetatud failidega korrastatuna püsida ja lihtsustab dokumentide nimetamise protsessi.

Mikrointeraktsioonid tegevuses: näited reaalses maailmas

Ülesannete loendi ümberkorraldamine

Apple iOS-i meeldetuletused Aidake kasutajatel korrastatuna püsida ja kõrvaldada mitu sammu, lubades neil loendijärjekorra koha muutmiseks puudutada, hoida ja lohistada loendiüksust.

Sotsiaalmeedia postitustele reageerimine

„Meeldib” sisu, klõpsates pöidlahoidmisnupul või ikoonil, on paljudes rakendustes ja veebisaitidel muutunud tavaliseks UX-i kujundusmudeliks. Facebook sellele interaktsioonile tuginedes, lisades peene mikrointeraktsiooni kaudu mitu valikut lisaks meeldimisele.

Kaubamärgiga teksti esiletõstmine

Enamikus brauserites , on võimalik teksti vaikevaliku värv tühistada. IKEA kasutab seda suhtlusmustrit peene kaubamärgi detaili lisamiseks, tõstes esile selle ikoonilises kollases ja sinises värvitoonis.

Teie asukoha jagamine

Google Hangouts eeldab, et üks kord, kui kasutaja soovib oma asukohta jagada, on see, kui keegi saadab sõnumi „Kus sa oled?”

Kui kasutaja seda sõnumit vaatab, kuvatakse kontekstivalikuna nupp „Jaga oma asukohta”. Seejärel saavad nad seda nuppu puudutada, et oma asukohakaart teisele kasutajale automaatselt saata.

Pühkige valikuni

Mikrointeraktsioone saab kasutada rakenduses lihtsatele jah- või ei-küsimustele vastamiseks. Tinder teeb seda nii, et kasutaja libistab vasakule või paremale (ei / jah), sõltuvalt sellest, kas talle nende võimalik vaste meeldib või mitte.

Otsingu laiendamine

The Google'i postkast rakendus mitte ainult arukalt grupeerib kimpudega posti , see on loodud ka häälotsingut võimaldama või valima ühe puudutusega viimaste kontaktide hulgast.

Sõbra kontaktteabe kiire lisamine

SeatGeek lihtsustab vormide täitmise protsessi, täites kasutaja kontaktide teabe automaatselt nupu „Lisa kontaktidest” puudutusega.

Lisateave mikrointeraktsioonide kohta

Mikrointeraktsioonid on programmi täiustamise peamine osa kasutuskogemus ja nende kohta lisateabe saamiseks on saadaval palju ressursse, millest mõned on loetletud allpool.

Mikrointeraktsioonide kohta üldiselt lisateabe saamiseks külastage aadressi Mikrointeraktsioonid , veebisait, mis loodi eelnevalt mainitud raamatu kaaslaseks „Mikrointeraktsioonid: detailidega kujundamine” autor Dan Saffer. Saidil on nii mikrointeraktsioonide üksikasjalikud selgitused kui ka teave tuntud mikrointeraktsioonide päritolu kohta, näiteks automaatne parandus, automaatne täitmine ning lõikamine ja kleepimine. Raamatu esimene peatükk on saadaval ka tasuta allalaadituna.

Mikrointeraktsiooni inspiratsiooni saamiseks külastage Väike suur detail , digitaalsete toodete mikrointeraktsioonide kureeritud kogu. See näitab näiteid, kuidas ettevõtetele meeldib Apple , Trello ja Virna ülevool rakendada mikrointeraktsioone ja kasutajaliidese animatsiooni.

Õppida, kuidas luua mikrointeraktsioone Kaader , loe ApeeScape'i disainer, Wojciech Dobry's artikkel, Kaadrijuhend: 7 lihtsat mikrointeraktsiooni prototüüpide täiustamiseks .

---

Andke meile teada, mida arvate! Palun jätke oma mõtted, kommentaarid ja tagasiside allpool.

• • •

Lisalugemine ApeeScape'i disainiblogist:

• Disaini põhimõtted ja nende tähtsus
• Parimad UX-i disainerite portfellid - inspireerivad juhtumianalüüsid ja näited
• Gestalti disainiprintsiipide uurimine
• Adobe XD vs Sketch - milline UX-i tööriist sobib teile?
• 10 UXi pakutavat tippdisainerit kasutavad