Forståelse af mikrointeraktioner i mobilappdesign

Brugervenlighed er en af ​​hovedkomponenterne i mobil UI design. Stor anvendelighed involverer ofte microinteractions som er små svar og adfærd fra en grænseflade dikterer, hvordan brugergrænsefladen skal bruges. Disse mikrointeraktioner definerer adfærd, opmuntrer engagement og hjælper brugere med at visualisere, hvordan en grænseflade skal fungere.

Digitale grænseflader er mellemmændene mellem brugere og deres ønskede mål. Interface designere opretter oplevelser, der hjælper brugerne udføre visse opgaver. For eksempel har en todo list app en grænseflade, der hjælper brugerne med at organisere deres opgaver. Ligesom en Facebook app giver brugerne en grænseflade til at interagere med deres Facebook-konto.

I denne vejledning vil jeg dykke videre ind i mikrointeraktioner til mobile apps. Små interaktioner kan virke trivielle, men de kan have en enorme indvirkning om kvaliteten af ​​en brugers oplevelse. Når det sker korrekt, føles mikrointeraktioner som en ægte del af den overordnede mobilbrugeroplevelse.

Kraften af ​​mikrointeraktioner

I de fleste tilfælde er målet om en mikrointeraktion at give feedback baseret på brugerens handling. Dette kan hjælpe brugere visualisere, hvordan grænsefladen bevæger sig eller opfører sig, selvom det er rent digitalt på en fladskærm.

Mikrointeraktioner har magt, fordi de skabe en illusorisk oplevelse. On / off skydere går ikke rigtig som fysiske omskiftere, men de kan synes at bevæge sig på denne måde gennem animationer.

Jeg fandt et utroligt citat i dette indlæg, der diskuterer den enorme værdi af mikrointeraktioner til mobilapps:

“De bedste produkter gør to ting godt: funktioner og detaljer. Funktioner er, hvad der trækker folk til dit produkt. Detaljer er hvad holde dem der. Og detaljer er, hvad der faktisk gør vores app skiller sig ud fra vores konkurrence.”

Det små detaljer kan virke ubetydelig ud fra et udviklingsmæssigt synspunkt, men fra en brugeroplevelse står de rigtigt op gøre forskellen mellem en OK app-brugergrænseflade og en ekstraordinær app-brugergrænseflade.

Store mikrointeraktioner gør brugeren klar føler sig belønnet for at tage en handling. Disse handlinger kan være gentaget og indblandet i brugerens adfærd. De kan lære at bruge en applikation baseret på disse mindre mikrointeraktioner. Når brugeren udfører en adfærd, signaliserer disse små interaktioner "ja, du kan interagere med mig!"

Se eksemplerne i Googles materiale designspecifikationer. Dokumentationen har faktisk en hel sektion dedikeret til materiel bevægelse. Rumlige forhold er en stor del af denne ligning, men bevægelse kan diktere mere end blot rumlige relationer.

Her er de mest almindelige anvendelser af animation og bevægelse i mobil UI / UX design:

• Vejledende brugere mellem forskellige sider
• Vejledende brugere gennem grænsefladen for at undervise i visse adfærd
• Foreslå handlinger / adfærd, som kan tages på en given side

Mobil apps har meget mindre skærmrum end hjemmesider. Dette kan medføre nogle problemer med at undervise brugere, hvordan man bruger en app. Men det kan være overraskende simpelt, hvis du ved, hvordan du implementerer mikrointeraktioner korrekt.

Hvordan mikrointeraktioner virker

En enkelt mikrointeraktion affyrer, når brugeren indgår i en del af en grænseflade. De fleste mikrointeraktioner er animerede svar på brugerens gestus. Så en swiping motion vil reagere anderledes end et tryk eller en flick.

Blink UX gjorde et stort indlæg, der diskuterede de mindre detaljer om mikrointeraktioner. Disse små animationer skal følge a forudsigelig proces at brugeren kan lære for hver interaktion i ansøgningen.

Mikrointeraktioner styrer brugerne gennem en grænseflade ved tilbyder svar på adfærd. Når brugeren ved, at en on / off skyder kan flytte, ved de, at den er interaktiv. På baggrund af svaret ved de også, om en indstilling blev tændt eller slukket. Når en knap ser ud, kan den klikkes på brugeren instinktivt ved de kan interagere med det.

Ifølge UXPin kan hver grundlæggende mikrointeraktion nedbrydes i fire trin, men jeg har opsummeret processen i tre trin.

1. Handling - det bruger gør noget som flick, swipe, tryk og hold eller en anden interaktion.
2. Reaktion - det grænseflade reagerer baseret på hvad der skal ske. Hvis du skifter en skærm, kan du flytte tilbage i browserens historie, eller ved at trykke på en ON / OFF-skyderen, kan det være muligt at slukke for en indstilling.
3. Feedback - dette er hvad brugeren ser faktisk som et resultat af interaktionen. Når brugeren swipes tilbage i en mobilbrowser, kan det flyde den forrige side op for at blive vist "på toppen" af skærmen. På / fra skyderen kan glide glat eller blive større, når der påtrykkes tryk på skærmen.

Disse meget små handlinger kan udføres uden animation, men store mikrointeraktioner tilbyder a realistisk følelse til den flade digitale grænseflade, som hovedsagelig kommer i form af realistiske animationseffekter. Disse trækker vejret ind i grænsefladen og fremmer mere brugerinteraktion.

Se efter detaljerne

Ved at se på de mindre stykker af et design forstår du, hvordan en app skal svare på en bestemt opførsel.

Træk for at opdatere er et godt eksempel på en nu populær mikrointeraktion. Det var ikke en integreret del af iOS, da den blev lanceret, men mange apps tog denne ide og begyndte at flytte med det. Nu er træk til opdatering en velkendt adfærd, som de fleste brugere bare ved at bruge, når de gennemser et feed-brugerinterface. Det samme kan siges om mobile hamburger menuer, der er vokset vildt i popularitet.

Lav enhver mikrointeraktion realistisk og enkel. Overdrive ikke animationer, fordi de kan bliver kedelig hvis de er for detaljerede og bruges ofte. Brugeren ønsker ikke, at gnister vises hver gang de trykker på et menupunkt. Find en balance med ægte værdi, der kommunikerer hvordan grænsefladen skal fungere uden at gå overbord.

Ser på nogle eksempler

Jeg synes, at den bedste måde at lære noget på er at gøre det, og den anden bedste måde er at studere andres arbejde. Jeg har samlet en lille håndfuld af UI / UX mikrointeraktion animationer fra dygtige Dribbble-brugere til at vise dig, hvordan disse ser ud i en ægte mockup.

Hver applikation vil være anderledes og have forskellige behov baseret på, hvad appen gør. I sidste ende vil de fleste brugere have det samme: en app der er intuitiv og leverer en høj kvalitet brugeroplevelse med mikrointeraktioner i forhold til brugeradfærd.

1. Animeret hændelsesapp-brugergrænseflade

Det første eksempel er en nifty kort animation funktion lavet af Ivan Martynenko. Du vil bemærke en håndfuld mikrointeraktioner i dette design, især kort swiping og flytte gennem detaljer.

Når du banker på kortet, vokser den i størrelse. Og når du trykker på knappen Abonner, glider brugerens profilbillede ind i listen over abonnenter. Alt føles meget intuitivt og helt naturligt til grænsefladen.

2. Interaktiv træningsskærm

Denne kreative mobile motion animation kommer fra designer Vitaly Rubtsov. Det demonstrerer en bruger, der redder deres træning for et sæt squats.

Bemærk, at hver animation har det samme elastisk studseffekt når menuerne åbner og snapper lukket. Dette gælder også, når aktiviteten er markeret som "Udført". Konsistens er nøglen med mikrointeraktioner, fordi de alle skal føle forbundet til samme interface.

3. Søg App Microinteractions

Kort, sød og til punktet. Jeg synes, at dette bedst beskriver disse søgemaskine mikrointeraktioner designet af Lukas Horak. Hver animation er hurtig men stadig mærkbar.

Sådan skal du designe mikrointeraktioner til undgå overkompleksitet. Hvis grænsefladen vil indlæses hurtigere uden animationen, så hvorfor genere at tilføje den? Hurtige animationer Hold brugeren ved at bevæge sig igennem uden at hæve oplevelsen.

4. Fitness Mål Microinteraction

Jeg tror Jakub Antalà ????? K virkelig ramte denne ene ud af parken med hans fitness mål mikrointeraktion. Skærmen har alle denne følelse af jiggly jell-o fordi figurer bevæger sig så fluidt.

Men grænsefladen føles også solid og anvendelig. Det viser at mikrointeraktioner udformet med et formål kan stadig være sjovt og underholdende, men også funktionelt og pragmatisk.

5. Træk for at opdatere animationen

Her er en af ​​mine absolutte favorit pull-to-refresh animationer skabt af holdet på Ramotion. Dette ikke kun efterligner en væske med pull action, men respons animation forbinder jævnt fra et stænk af væske til en belastningscirkel.

Dette meget opmærksomhed på detaljer er det, der bringer den sande skønhed ud i mobilapps mikrointeraktioner.

6. Tab Microinteraction

Tabbed widgets er ret almindelige for mobile apps på grund af de mindre skærme. Jeg kan virkelig godt lide denne mikrointeraktion skabt af John Noussis, selv om jeg tror, ​​at det ville være mere effektivt med en hurtigere hastighed, men selve animationen er strålende og gennemtænkt.

Fanebladet ankerpil glider over til højre lige som nyt indhold springer ind fra højre. Det giver illusionen af hele skærmen bevæger sig fysisk til højre. Animationen er udsøgt, men da det er så langsomt, tror jeg de fleste brugere vil blive irriteret efter et par dage.

7. Preloading Animation

Jeg har ikke sagt meget om loading bars i dette indlæg, men de er lige så værdifulde for den samlede oplevelse. De fleste brugere ønsker ikke at vente på data, der skal indlæses, men de vil bestemt ikke stirre på en tom skærm, mens den laster.

Bret Kurtz gjorde denne fantastiske preloading skærm, der er både sjov og informativ. Brugeren kan faktisk være underholdt ser denne lille animation gentage. De kan også være beroliget at ansøgningen er Indlæser stadig deres data og har ikke styrtet.

Afslutter

Alle disse eksempler viser brilliantly værdien af ​​mikrointeraktioner. Mobilapper får meget mere værdi fra mikrointeraktioner, fordi brugere fysisk berøre skærme med deres fingre Brugere må ikke trykke på deres skærmbilleder eller deres bærbare skærme, men alle tapper deres smartphones, fordi det er det standard tilstand for interaktivitet.

Det er en meget mere personlig oplevelse, hvorfor mobil app design kan være sådan en nyanserede proces. Når det gøres rigtigt, kan tilsætningen af ​​store mobile mikrointeraktioner opbygge en kraftig illusorisk brugeroplevelse ud af ingenting, men pixel og bevægelse.