Mobiilirakenduste disaini mikrointeraktsioonide mõistmine

Kasutatavus on üks peamisi komponente mobiilse kasutajaliidese disain. Suur kasutatavus hõlmab sageli mikrointeraktsioonid mis on väikesed vastused ja liidese käitumine dikteerida kasutajaliidese kasutamist. Need mikrointeraktsioonid määratlevad käitumise, soodustavad kaasamist ja aitavad kasutajatel visualiseerida, kuidas liides peaks töötama.

Digitaalsed liidesed on vahendajad kasutajate vahel ja nende soovitud eesmärgid. Liidese disainerid loovad kasutajatele kogemusi täita teatud ülesandeid. Näiteks on rakenduste loendil liides, mis aitab kasutajatel oma ülesandeid korraldada. Just nagu Facebooki rakendus annab kasutajatele liidese oma Facebooki kontoga suhtlemiseks.

Selles juhendis ma lähen edasi mobiilirakenduste mikrointeraktsioonid. Väikesed koostoimed võivad tunduda triviaalsed, kuid neil võib olla tohutu mõju kasutaja kogemuse kvaliteedi kohta. Õige toimimise korral tunnevad mikrointeraktsioonid tõelist osa üldisest mobiilikasutaja kogemusest.

Mikroaktiivsuse võim

Enamikul juhtudel on mikrointeraktsiooni eesmärk tagasisidet andma kasutaja tegevuse põhjal. See võib aidata kasutajatel visualiseerida, kuidas liides liigub või käitub, kuigi see on puhtalt digitaalne lameekraanil.

Mikrointeraktsioonidel on võim, sest nad luua illusoorset kogemust. Sisse / välja liugurid ei liigu nagu füüsilised lülitid, kuid need võivad liikuda sellisel viisil animatsioonide kaudu.

Ma leidsin selles postituses uskumatu hinnapakkumise, milles arutati mobiilirakenduste mikroorganisatsioonide tohutut väärtust:

“Parimad tooted teevad kahte asja hästi: omadused ja detailid. Omadused on see, mis tõmbab inimesi teie toodetesse. Üksikasjad on need, mis neid seal hoiavad. Ja üksikasjad on see, mis tegelikult muudab meie rakenduse meie konkurentidest välja.”

The väikesed detailid võib arenguperspektiivist lähtuvalt tunduda ebaoluline, kuid kasutaja kogemusest lähtuvalt nad tõeliselt teha vahet rakenduse kasutajaliidese ja erakorralise rakenduste kasutajaliidese vahel.

Suured mikrointeraktsioonid muudavad kasutaja tunnen tasu meetme võtmiseks. Need meetmed võivad olla korrata ja kasutaja käitumisse. Nad saavad õppida, kuidas kasutada neid väiksemaid mikrointeraktsioone. Kui kasutaja käitub, siis need väikesed interaktsioonid "jah, te saate minuga suhelda".

Heitke pilk Google'i materjali kujunduse spetsifikatsioonides leiduvatele näidetele. Dokumentatsioonil on tegelikult kogu osa, mis on pühendatud materiaalsele liikumisele. Ruumilised suhted on suur osa sellest võrrandist, kuid liikumine võib dikteerida rohkem kui lihtsalt ruumilisi suhteid.

Siin on animatsiooni ja liikumise kõige tavalisemad kasutused mobiilse UI / UX-i disainis:

• Kasutajate juhtimine erinevate lehtede vahel
• Kasutajate suunamine liidese kaudu teatud käitumise õpetamiseks
• Soovitame tegevusi / käitumisi, mida on võimalik teha mis tahes lehel

Mobiilirakendustel on palju vähem ekraaniruumi kui veebilehed. See võib põhjustada mõningaid raskusi, kuidas õpetada kasutajaid rakendust kasutama. Aga see võib olla üllatavalt lihtne, kui tead, kuidas mikro-interaktsioone õigesti rakendada.

Kuidas Microinteractions toimib

Ühekordne mikrointeraktsioon süttib alati, kui kasutaja kasutab liidese ühte osa. Enamik mikrointeraktsioone on animeeritud vastused kasutaja žestile. Niisiis reageerib liigutusliikumine erinevalt kui kraani või flick.

Blink UX tegi suure postituse, kus arutati mikrointeraktsioonide väiksemaid üksikasju. Need väikesed animatsioonid peaksid järgima a prognoositav protsess mida kasutaja saab õppida iga rakenduse interaktsiooni kohta.

Microinteractions suunab kasutajaid kasutajaliidese kaudu käitumisele reageerimise pakkumine. Kui kasutaja teab, et sisse / välja liugur saab liikuda, teavad nad, et see on interaktiivne. Vastuse põhjal teavad nad, kas seade oli sisse või välja lülitatud. Kui nupp näeb välja nagu saab kasutajale klõpsata instinktiivselt teab nad saavad sellega suhelda.

UXPini sõnul võib iga põhiline mikrointeraktsioon jaotuda neljaks etapiks, kuid olen selle protsessi kokku võtnud kolm etappi.

1. Meede - the kasutaja teeb midagi nagu libistage, pühkige, koputage ja hoidke või mõni muu suhtlus.
2. Reaktsioon - the liides vastab mis peaks toimuma. Ekraani pühkimine võib brauseri ajaloos tagasi minna või ON / OFF-liuguri puudutamine võib sätte välja lülitada.
3. Tagasiside - just see on see kasutaja tegelikult näeb koostoime tulemusena. Kui kasutaja sirvib mobiilibrauseris tagasi, võib see eelmise lehe ülespoole ilmuda, et kuvada ekraani peal. Sisselülitamise / väljalülitamise liugur võib ekraani surve rakendamisel sujuvalt sujuda või kasvada.

Need väga väikesed toimingud on teostatavad ilma animatsioonita, kuid suurepärased mikrointeraktsioonid pakuvad a realistlik tunne digitaalsele liidesele, mis on enamasti kujul realistlikud animatsiooniefektid. Need hingavad elusse liidesesse ja julgustavad rohkem kasutajate suhtlemist.

Otsige üksikasju

Vaadates väiksemaid kujundeid, saate aru, kuidas rakendus peaks reageerima konkreetsele käitumisele.

Värskendamiseks tõmmake on hea näide nüüdsest populaarsest mikrointeraktsioonist. See ei olnud iOSi lahutamatu osa, kui see esmakordselt käivitati, kuid paljud rakendused võtsid selle idee ja hakkasid sellega koos liikuma. Nüüd värskendamiseks tõmmake on hästi tuntud käitumine, mida enamik kasutajaid teab, et kasutada sööda kasutajaliidese sirvimisel. Sama võib öelda ka mobiilsete hamburgerite menüüde kohta, mis on populaarselt kasvanud.

Tehke iga mikrointeraktsioon realistlik ja lihtne. Ära liiguta animatsioone, sest nad saavad seda teha saada tüütu kui nad on liiga üksikasjalikud ja kasutavad sageli. Kasutaja ei taha, et iga kord, kui nad puudutavad menüüikooni, ilmuvad sädemed. Tasakaalustage tõelise väärtusega, mis suhtleb kuidas liides peaks töötama ilma pardale minemata.

Vaadates mõningaid näiteid

Ma arvan, et parim viis midagi õppida on seda teha ja teine ​​parim viis on õppida teiste tööd. Olen kogunud väikese käputäis UI / UX mikrointeraktsiooni animatsioonid andekatelt Dribbble'i kasutajatelt, et näidata teile, kuidas need reaalses makettis näevad.

Iga rakendus on erinev ja neil on erinevad vajadused, mis põhinevad rakendusel. Lõpuks soovivad enamik kasutajaid sama asja: rakendust intuitiivne ja pakub kvaliteetset kasutaja kogemust kasutajate käitumisega seotud mikrointeraktsioonidega.

1. Animeeritud sündmuse rakenduse kasutajaliides

Esimene näide on Ivan Martynenko poolt loodud vahva kaardi animatsioonifunktsioon. Te märkate käputäis mikrointeraktsioone selles disainilahenduses, eelkõige kaardi pühkimine ja detailide liikumine.

Kaardi puudutamisel kasvab see suurus. Ja kui klõpsate nupule Tellimine, siis kasutajaprofiili slaidid tellijate nimekirja. Kõik tunneb liidesele väga intuitiivset ja üsna loomulikku.

2. Interaktiivne harjutusekraan

See loominguline liikuv animatsioon on disainer Vitaly Rubtsovilt. See demos kasutajale, kes oma treeningu salvestab ühe komplekti jaoks.

Pange tähele, et igal animatsioonil on sama elastne põrgatöö kui menüüd on avatud ja suletud. See kehtib ka siis, kui tegevus on kontrollitud kui "Valmis". Järjepidevus on väga oluline mikrointeraktsioonidega, sest nad peaksid kõik tundma ühendatud sama liidesega.

3. Otsi rakenduse Micro-interaktsioone

Lühike, magus ja punkt. Ma arvan, et see kirjeldab kõige paremini Lukas Horaki projekteeritud otsingu rakenduste mikrointeraktsioone. Iga animatsioon on kiire, kuid siiski märgatav.

Nii peate mikrointeraktsioone kujundama vältida liigset keerukust. Kui liides laadib kiiremini ilma animatsioonita, siis miks seda vaevata? Kiire animatsioon hoidke kasutajat liikumatult, ilma et kogemusi maha lööks.

4. Fitness Eesmärk Microinteraction

Ma arvan, et Jakub Antalâ? Ekraanidel on see tunne jiggly jell-o, sest kujundid liiguvad nii vedelalt.

Samas tundub ka liides tahke ja kasutatav. See näitab, et eesmärgiga loodud mikrointeraktsioonid võivad endiselt olla lõbusad ja lõbusad, kuid ka funktsionaalsed ja pragmaatilised.

5. Tõmmake animatsiooni värskendamiseks

Siin on üks minu absoluutsetest lemmik-värskendavatest animatsioonidest, mille meeskond on loonud Ramotionis. See mitte ainult imiteerib vedelikku tõmbetegevusega, kuid vastuse animatsiooniga ühendab sujuvalt vedeliku pritsimisest laadimisringi.

See palju tähelepanu detailidele on see, mis toob esile tõelise ilu mobiilirakenduste mikrointeraktsioonides.

6. Vahekaart Microinteraction

Vahetatud vidinad väiksematel ekraanidel on mobiilirakenduste puhul üsna tavalised. Mulle meeldib see John Noussis loodud mikrointeraktsioon, kuigi arvan, et see oleks kiiremini kiirem, kuid animatsioon ise on kuulsusrikas ja läbimõeldud.

Vahekaardi ankur nool liigub paremale, kui uus sisu põrkab paremale. See annab illusiooni kogu ekraan füüsiliselt liigub paremale. Animatsioon on peen, kuid kuna see on nii aeglane, arvan, et enamik kasutajaid oleks mõne päeva pärast pahane.

7. Animatsiooni eellaadimine

Ma pole palju rääkinud laadimisribad selles postituses, kuid nad on sama väärtuslikud üldisele kogemusele. Enamik kasutajaid ei soovi andmete laadimist oodata, kuid nad ei taha kindlasti laadida tühja ekraani, kui see laaditakse.

Bret Kurtz tegi selle hämmastava eelsalvestusekraani, mis on nii lõbus kui ka informatiivne. Kasutaja võib tegelikult olla meelelahutust vaadates seda väikest animatsiooni kordamist. Nad võivad olla ka kindel et rakendus on ikka nende andmete laadimine ja ei ole kukkunud.

Pakkimine üles

Kõik need näited näitavad suurepäraselt mikrointeraktsioonide väärtust. Mobiilirakendused saavad mikrointeraktsioonidest palju rohkem kasu, sest kasutajad puudutage ekraane füüsiliselt sõrmedega. Kasutajad ei puuduta oma töölaua monitore ega nende sülearvuti ekraane, kuid igaüks puudutab oma nutitelefoni, sest see on interaktiivsuse vaikimisi olek.

See on palju rohkem isiklikku kogemust, seetõttu võib mobiilirakenduse disain olla selline nüansseeritud protsess. Kui see on tehtud korralikult, võib suure mobiilse mikrointeraktsiooni lisamine luua a võimas illusoorne kasutaja kogemus ainult pikslitest ja liikumisest.