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.
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:
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.
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 . '
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?'
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.
Vastavalt Dan Saffer , vanem personali toodete disainer aadressil Twitter ja autor „Mikrointeraktsioonid: detailidega kujundamine” mikrointeraktsioonil on neli osa.
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.
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 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:
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 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.
Sisestusvälja piiri värvi muutmine on levinud suhtlusmuster ja seda kasutab Google Docs siin kasutajale viivitamatu tagasiside andmiseks.
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.
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.
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.
„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.
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.
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.
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.
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.
SeatGeek lihtsustab vormide täitmise protsessi, täites kasutaja kontaktide teabe automaatselt nupu „Lisa kontaktidest” puudutusega.
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.
• • •