Forstå Microinteractions i Mobile App Design

Brukervennlighet er en av hovedkomponentene i mobil UI design. Stor brukervennlighet innebærer ofte microinteractions som er små svar og oppførsel fra et grensesnitt dikterer hvordan brukergrensesnittet skal brukes. Disse mikrointeraksjonene definerer atferd, oppfordrer engasjement, og hjelper brukere å visualisere hvordan et grensesnitt skal fungere.

Digitale grensesnitt er mellommenn mellom brukere og deres ønskede mål. Grensesnittdesignere lager opplevelser som hjelper brukere utføre visse oppgaver. For eksempel har en todo list-app et grensesnitt som hjelper brukerne med å organisere sine oppgaver. Akkurat som en Facebook-app gir brukerne et grensesnitt for å samhandle med sin Facebook-konto.

I denne veiledningen vil jeg dykke videre inn i mikrointeraksjoner for mobilapper. Små interaksjoner kan virke trivielle, men de kan ha en enorm innvirkning på kvaliteten av brukerens opplevelse. Når det er gjort riktig, føles mikrointeraksjoner som en ekte del av den overordnede mobilbrukeropplevelsen.

Kraften til mikrointeraksjoner

I de fleste tilfeller er målet om en mikrointeraksjon å gi tilbakemelding basert på brukerens handling. Dette kan hjelpe brukerne visualisere hvordan grensesnittet beveger seg eller oppfører seg, selv om det er rent digitalt på en flatskjerm.

Mikrointeraksjoner har kraft fordi de skape en illusorisk opplevelse. På / av-glidebryterne beveger seg ikke akkurat som fysiske brytere, men de kan se ut til å bevege seg på denne måten gjennom animasjoner.

Jeg fant et utrolig tilbud i dette innlegget, og diskuterer den enorme verdien av mikrointeraksjoner for mobilapper:

“De beste produktene gjør to ting bra: funksjoner og detaljer. Funksjoner er det som trekker folk til produktet ditt. Detaljer er hva holde dem der. Og detaljer er hva som faktisk gjør at appen vår skiller seg ut fra konkurransen vår.”

De små detaljer kan virke ubetydelig ut fra et utviklingsperspektiv, men fra en brukeropplevelse er de virkelig opptatt gjøre en forskjell mellom en OK app brukergrensesnitt og en ekstraordinær app brukergrensesnitt.

Store mikrointeraksjoner gjør brukeren føler deg belønnet for å ta en handling. Disse handlingene kan være gjentas og innblandet i brukerens oppførsel. De kan lære å bruke et program basert på disse mindre mikrointeraksjonene. Når brukeren utfører en oppførsel, signaliserer disse små interaksjonene "ja, du kan samhandle med meg!"

Ta en titt på eksemplene som finnes i Googles materialdesignspesifikasjoner. Dokumentasjonen har faktisk en hel del dedikert til materiell bevegelse. Romlige relasjoner er en stor del av denne ligningen, men bevegelse kan diktere mer enn bare romlige relasjoner.

Her er De vanligste bruken av animasjon og bevegelse i mobil UI / UX-design:

• Veiledende brukere mellom ulike sider
• Veiledende brukere gjennom grensesnittet for å undervise i bestemte oppføringer
• Foreslå handlinger / atferd som kan tas på en gitt side

Mobilappene har mye mindre skjermplass enn nettsteder. Dette kan føre til problemer med å lære brukere å bruke en app. Men det kan være overraskende enkelt hvis du vet hvordan du implementerer mikrointeraksjoner på riktig måte.

Hvordan Microinteractions Work

En enkelt mikrointeraksjon branner når brukeren engasjerer seg med en del av et grensesnitt. De fleste mikrointeraksjoner er animerte svar på brukerens gest. Så en swiping bevegelse vil reagere annerledes enn en trykk eller en flick.

Blink UX gjorde et flott innlegg som diskuterte mindre detaljer om mikrointeraksjoner. Disse små animasjonene bør følge a forutsigbar prosess som brukeren kan lære for hver interaksjon i søknaden.

Mikrointeraksjoner styrer brukere gjennom et grensesnitt av Tilbyr svar på atferd. Når brukeren vet at en på / av-glidebryter kan bevege seg, vet de at den er interaktiv. Basert på svaret, vil de også vite om en innstilling ble slått av eller på. Når en knapp ser ut, kan den klikkes på brukeren kjenner instinktivt de kan samhandle med den.

Ifølge UXPin kan hver grunnleggende mikrointeraksjon brytes ned i fire trinn, men jeg har oppsummert prosessen i tre trinn.

1. Handling - de bruker gjør noe som flick, sveip, trykk og hold, eller noe annet interaksjon.
2. Reaksjon - de grensesnittet reagerer basert på hva som må skje. Bytting av en skjerm kan flytte tilbake i nettleserloggen, eller ved å trykke på en av / på-skyveknappen, kan det hende at en innstilling slås av.
3. Tilbakemelding - dette er hva brukeren ser faktisk som et resultat av samspillet. Når brukeren svinger tilbake i en mobil nettleser, kan det flyte forrige side opp til å vises "på toppen" av skjermen. På / av-glideren kan glide glatt eller bli større når trykk påføres skjermen.

Disse svært små handlinger kan oppnås uten animasjon, men gode mikrointeraksjoner tilbyr a realistisk følelse til det flate digitale grensesnittet, som for det meste kommer i form av realistiske animasjonseffekter. Disse puster liv i grensesnittet og oppmuntre til mer brukerinteraksjon.

Se etter detaljene

Ved å se på de mindre delene av et design, forstår du hvordan en app skal svare på en bestemt oppførsel.

Trekk for å oppdatere er et godt eksempel på en nå populær mikrointeraksjon. Det var ikke en integrert del av iOS da den først ble lansert, men mange apper tok denne ideen og begynte å flytte med den. Nå drar for å oppdatere er en kjent oppførsel som de fleste brukere bare vet å bruke når du surfer på et feed-brukergrensesnitt. Det samme kan sies om mobile hamburger menyer som har vokst vilt i popularitet.

Gjør alle mikrointeraksjoner realistisk og enkel. Ikke overdriv animasjoner fordi de kan bli kjedelig hvis de er for detaljerte og brukes ofte. Brukeren ønsker ikke at glitter skal vises hver gang de trykker på et menyikon. Finne en balanse med ekte verdi som kommuniserer hvordan grensesnittet skal fungere uten å gå over bord.

Ser på noen eksempler

Jeg tror den beste måten å lære noe på er å gjøre det, og den nest beste måten er å studere andres arbeid. Jeg har samlet en liten håndfull av UI / UX mikrointeraksjons animasjoner fra dyktige Dribbble-brukere for å vise deg hvordan disse ser ut i en ekte mockup.

Hver applikasjon vil være annerledes og har forskjellige behov basert på hva appen gjør. Til slutt vil de fleste brukere ha det samme: en app som er intuitiv og leverer en kvalitetsbrukeropplevelse med mikrointeraksjoner i forhold til brukeroppførsel.

1. Animert hendelse App UI

Det første eksemplet er en nifty kort animasjon funksjon opprettet av Ivan Martynenko. Du vil legge merke til en håndfull mikrointeraksjoner i dette designet, spesielt kortsvep og beveger seg gjennom detaljer.

Når du klikker på kortet vokser det i størrelse. Og når du trykker på knappen Abonner, slår brukerens profilbilde inn i listen over abonnenter. Alt føles veldig intuitivt og ganske naturlig for grensesnittet.

2. Interaktiv treningsskjerm

Denne kreative mobile treningsanimasjonen kommer fra designeren Vitaly Rubtsov. Det demoer en bruker som sparer trening for et sett med knep.

Legg merke til at hver animasjon har det samme elastisk spretteffekt når menyene åpnes og knuses lukket. Dette gjelder også når aktiviteten er merket som "Ferdig". Konsistens er nøkkelen med mikrointeraksjoner fordi de alle burde føle seg koblet til samme grensesnitt.

3. Søk App Microinteractions

Kort, søtt og til poenget. Jeg synes dette best beskriver disse søkeapp-mikrointeraksjonene designet av Lukas Horak. Hver animasjon er rask men fortsatt merkbar.

Slik skal du designe mikrointeraksjoner til unngå overkompleksitet. Hvis grensesnittet vil laste raskere uten animasjonen, så hvorfor plage å legge den til? Raske animasjoner sørg for at brukeren beveger seg gjennom uten å legge ned opplevelsen.

4. Fitness Mål Microinteraction

Jeg tror Jakub Antalà ????? K virkelig truffet denne ut av parken med sin fitness mål mikrointeraksjon. Skjermene har alle denne følelsen av jiggly jell-o fordi former beveger seg så flytende.

Men grensesnittet føles også solid og brukbar. Det viser at mikrointeraksjoner laget med en hensikt fortsatt kan være morsomme og underholdende, men også funksjonelle og pragmatiske.

5. Trekk for å oppdatere animasjon

Her er en av mine absolutt favoritt pull-to-refresh animasjoner laget av teamet på Ramotion. Dette ikke bare etterligner en væske med trekkaksjonen, men responsanimasjonen kobles jevnt sammen fra et sprut av væske til en lastesirkel.

Dette mye oppmerksomhet på detaljer er det som bringer ut den sanne skjønnheten i mobilapp-mikrointeraksjoner.

6. Tab Microinteraction

Tabbed widgets er ganske vanlig for mobilapper på grunn av de mindre skjermbildene. Jeg liker denne mikrointeraksjonen skapt av John Noussis, selv om jeg tror det ville være mer effektivt med en raskere hastighet, men selve animasjonen er strålende og godt gjennomtenkt.

Tablet ankerpil glir over til høyre akkurat som nytt innhold spretter inn fra høyre. Det gir illusjonen av hele skjermen beveger seg fysisk til høyre. Animasjonen er utsøkt, men siden det er så sakte tror jeg de fleste brukere vil bli irritert etter noen dager.

7. Preloading Animasjon

Jeg har ikke sagt mye om laster barer i dette innlegget, men de er like verdifulle for den samlede opplevelsen. De fleste brukere vil ikke vente på at data skal lastes, men de vil definitivt ikke stirre på en tom skjerm mens den laster.

Bret Kurtz gjorde denne fantastiske forhåndsbelastningsskjermen som er både morsom og informativ. Brukeren kan faktisk være holdt ser på denne lille animasjonsrepetisjonen. De kan også være beroliget at søknaden er laster fortsatt inn dataene sine og har ikke krasjet.

Innpakning

Alle disse eksemplene demonstrerer briljant verdien av mikrointeraksjoner. Mobilapper får mye mer verdi fra mikrointeraksjoner fordi brukere fysisk berøre skjermene med fingrene. Brukerne tapper ikke på sine bordskjermer eller deres bærbare skjermer, men alle tapper sine smarttelefoner fordi det er det standard tilstand for interaktivitet.

Det er en mye mer personlig opplevelse, Det er derfor mobilappdesign kan være slik nyansert prosess. Når det er gjort riktig, kan tillegg av flotte mobile mikrointeraksjoner bygge en kraftig illusorisk brukeropplevelse ut av ingenting, men piksler og bevegelse.