Slik designer du ett-trykk mikrointeraksjoner
Mikrointeraksjoner er den "hemmelige sausen" som får apper og nettsteder til å skinne for brukere. Disse bittesmå detaljene gjør det enkelt å stille en alarm, trykke på en knapp eller bare forstå hvordan du jobber med et digitalt produkt.
Hemmeligheten er at de beste mikrointeraksjonene er elementer som brukeren sannsynligvis ikke engang tenker på. De skjer på et øyeblikk - ofte med bare ett trykk på en mobilskjerm. Til tross for interaksjonens lille natur, derav "mikro", er verdien enorm for brukerne etter hvert som disse engasjementene blir mer integrerte med daglig aktivitet.
Hvordan designer du ett-trykk mikrointeraksjoner som vil glede brukerne? Her er noen ideer.
Utforsk Envato Elements
Animer en knapp
Husker du første gang du la merke til Facebook som i Messenger? Du banket på "tommelen opp" -ikonet, og det vokste i boksen til personen du chatte med. Gjorde det deg til å smile? Gjorde den lille bevegelsen deg litt glede?
Enkel animasjon, før kranen for å oppmuntre til den eller etter at kranen for å vise at mikrointeraksjonen fungerer, er en sikker-brann måte å lage noe brukere vil trykke på. Små animasjoner gir informasjon om hva som skjer, slik at brukerne føler seg komfortable og trygge på rollene sine i tilbakemeldingssløyfen.
ikke
Animasjonen skal være så enkel som mikrointeraksjonen i seg selv. Hold bevegelser enkle og flytende og raske til start og slutt. Å legge til en rangering på IMDb følger dette prinsippet; hold musepekeren over rangeringen og se raskt antall stjerner du vil legge til når du beveger deg over hver. Trykk for å klikke for å fullføre og bekrefte handlingen.
Gi alternativer
Det er en leksjon i UX som går tilbake til klasseskoler og barnehage kjærlighetsbrev. Liker du meg? Sjekk ja eller nei.
Store mikrointeraksjoner kan utformes ved å bruke det samme konseptet. Gi brukerne to raske valg. Trykk for å sette i gang (eller stoppe) en handling; trykk for å veksle. Brukere ønsker å ta valg og føle seg kontroll over digitale opplevelser, men de ønsker ikke å bli fastlåst med flere skjermer for å komme dit.
Lag øyeblikkelig handling
Den beste måten å sikre at brukere samhandler med mikrointeraksjonen din? Resultatet skal være øyeblikkelig. Det ønskede resultatet skal:
- Skje med et enkelt trykk
- Gi ønsket handling innen 0, 1 sekunder
Umiddelbarheten av mikrointeraksjoner er avgjørende for at de skal lykkes. Fordi arten av disse elementene er liten, vil enhver forsinkelse i handlingen irritere brukerne. (Bare tenk hvor frustrerende det ville være hvis det tok tre trykk for å slå av alarmen eller hvis det var en forsinkelse på 2 sekunder for å stille lyden på en samtale under et møte.)
Den raske vekslingen mellom et lignende (eller ulikt) eller følg på Instagram er et perfekt eksempel. Det er hvor rask mikrointeraksjonen din skal være.
Design for repetisjon
Noe av det som gjør mikrointeraksjon forskjellig fra noen andre interaktive elementer i brukergrensesnittet ditt, er at de vil bli brukt om og om igjen. Mikrointeraksjoner er vanligvis ikke designet for engangsbruk. (Hvor mange ganger har du trykket på den hjerteformede Instagram-knappen på Instagram den siste timen?)
Design for denne repeterende handlingen, men handlingen skal ikke føles som en repeterende bevegelse. Selv om det kan høres ut som mye å ta inn, kommer det ned på kretsens intuitive natur. Er det opplagt og naturlig? Hvis en bruker ikke trenger å tenke på en handling, vil de aldri finne det repeterende å fullføre.
Å bruke ofte aksepterte brukermønstre, animasjoner og ikonstiler vil hjelpe deg med å utforme mikrointeraksjoner. Ikke finn opp hjulet på nytt her; gjør det enkelt for brukere å fullføre oppgaver med ett trykk, og uten å måtte klø seg i hodet over hvordan de skal gjøre det.
Gjør den lesbar og relatabel
Her er trinnet som blir glemt altfor ofte - instruksjoner i mikrointeraksjoner må være lesbare og relatable.
Lesbar refererer til tekst eller instruksjoner når de forholder seg til mikrointeraksjonen. Ord må være enkle å se og skanne. Fra et designperspektiv er det viktig å velge et godt skrifttype og sikre at det er nok plass rundt ord og rikelig med kontrast mellom bokstaver og bakgrunn. Hold deg unna kondenserte, tynne eller nye skrifttyper som ikke er lett å lese med et øyeblikk.
Relatable refererer til tekst som leser på samme måte som folk snakker. Mindre vanlige språk eller vanskelig formulering bør unngås. Instruksjoner i skjemafelt som forsvinner når en bruker begynner å skrive er et flott eksempel. Dette gjelder spesielt når ordlyden bruker en tone eller en stemme som brukeren forventer av merkevaren eller nettstedet de samhandler med.
Fokuser på detaljer
En mikrointeraksjon er en av mange designdetaljer som utgjør grensesnittet ditt. Du må være spesielt forsiktig med hver og en av dem.
Mikrointeraksjoner skal føles som en del av det generelle designet. Men du må tenke på disse bittesmå handlingene på andre måter også. Fra fargevalg til størrelsen på elementer en bruker trenger å samhandle med, vil disse detaljene oppmuntre til handling eller få brukere til å forlate designet for noe annet.
Som du gjør med alle andre designelementer, lager du et sett med stil- og designregler for mikrointeraksjoner i en app eller nettsted, slik at handlingene er konsistente gjennom hele designen og enkle for brukere å finne og engasjere seg i. Jo mindre element - eller samhandling - jo viktigere detaljer blir.
Hold det enkelt
Det er ikke nok å si det en million ganger - hold det enkelt. Det er bare for mange design som er for vanskelige å bruke. Du synes kanskje det er kult, men brukere vil ikke gjøre det. De liker forutsigbarhet, konsistens og enkelhet.
Jo lettere det er å samhandle med noe, desto mer sannsynlig er det at brukere faktisk trykker på en knapp. Det er derfor handlinger med ett trykk er så viktige. Hvordan vet du om designet ditt er enkelt nok? Den trenger en definert struktur med en tilbakemeldingssløyfe for handlinger, enkle instruksjoner og visuelle elementer, og en melding som er kommunisert tydelig og er lett å forstå.
Ikke slutt å utvikle deg
Å designe mikrointeraksjoner er en evolusjonær prosess. Fordi dette er et så nytt konsept, endrer det seg hele tiden. Det er nye ideer og nye måter å lage noe brukere vil trykke på.
Å holde seg på sporet med utviklingen av mikrointeraksjoner går tilbake til det grunnleggende som Dan Saffer først definerte. (Han skrev også en av de mest autoritative bøkene om emnet, "Mikrointeraksjoner: Designe med detaljer.") Mikrointeraksjoner inkluderer en firetrinns prosess som starter med en utløserhandling, regler for hvordan interaksjonen fungerer, en tilbakemeldingssløyfe slik at brukeren vet noe skjedde og sløyfer og moduser som dikterer hvordan fremtidige interaksjoner vil fungere eller hva som kommer videre. Husk det, så er du på vei til suksess med mikrointeraksjoner.
Konklusjon
Det er mange brikker for å designe noe så lite. Så ikke tro at du kan lage en mikrointeraksjon på fem minutter og gå videre. Å designe en mikrointeraksjon tar spesiell vurdering og planlegging.
Husk at de beste mikrointeraksjonene vanligvis fungerer med et enkelt trykk og er elementer som brukerne ikke engang tenker på å engasjere seg i, selv om de vil gjøre det regelmessig.
