"De beste produktene gjør to ting bra: funksjoner og detaljer. Funksjoner er det som trekker folk til produktet ditt; detaljer er det som holder dem der, sier Dan Saffer. Betydningen av detaljer kan ikke overbelastes. Detaljer gjør at brukerne elsker eller hater en app eller et nettsted. Mikrointeraksjoner er disse detaljene. De kan lett overses i den globale designordningen, men de holder faktisk hele opplevelsen sammen.

I denne artikkelen vil jeg forklare hva som er en mikrointeraksjon, hvorfor de er viktige og gi noen gode eksempler.

Hva er en mikrointeraksjon

Mikrointeraksjoner er subtile øyeblikk sentrert rundt å oppnå en enkelt oppgave. Nesten alle applikasjoner rundt oss er fylt ut med mikrointeraksjoner.

Det mest kjente eksemplet på en mikrointeraksjon har eksistert lenge før datamaskiner ble oppfunnet. På / av bryteren er ofte den første mikrointeraksjonen folk møter med et produkt.

Noen andre eksempler på spesifikke mikrointeraksjoner inkluderer:

  • Vibrasjonsvarselet sammen med lydmodusikonet vises når du slår på iPhone for å dempe.
  • Oppgraderings-UI-mønsteret. Ved å forbinde brukerens ønske om å finne mer innhold med forfriskende tiltak, blir opplevelsen mer sømløs.

pull-down-refresh-iphone-app-interface-UX-design-ramotion
Bilde kreditt: Ramotion

  • Den "like" -knappen på sosiale nettverk som fremhever endringer ved hjelp av interaktive animasjoner. Slik tilbakemelding informerer brukerne om at de er i listen over de som likte innlegget.

fueled-07032014-cb_2x
Bilde kreditt: Dribbble

Hvorfor de jobber

Kort sagt, mikrointeraksjoner forbedrer UX ved å gjøre brukergrensesnittet mindre maskin og mer menneskelig. Mange ganger tenker vi på utseendet og hvordan det handler om design. Når vi tenker på mikrointeraksjoner, utgjør de stort sett en balanse hvordan brukerne føler seg om produktet, tjenesten eller merket. Mikrointeraksjoner finjusterer menneskelig sentrert design av:

  • Tilbyr umiddelbar tilbakemelding - Visuell tilbakemelding appellerer til brukerens naturlige ønske om anerkjennelse. Brukeren vet øyeblikkelig at handlingen ble akseptert, og de ønsker å glede seg over en visuell belønning.
  • Fungerer som tilrettelegger for interaksjon - Mikrointeraksjoner har muligheten til å oppmuntre brukerne til faktisk å samhandle. De kan veilede brukere i hvordan de skal arbeide med appen.
  • Bring glede - Mikrointeraksjoner er den perfekte sjansen for en liten ekstra glede i designet uten at det påvirker hovedopplevelsen.

Ekstra fordeler

Fordi mikrointeraksjoner er korte i naturen, må de utformes for gjentatt bruk. Veldesignede mikrointeraksjoner er i stand til å skape:

Habitløkke

Mikrointeraksjoner er nøkkelkomponentene i vaneløkker. Vaner dannes når folk utfører de samme handlingene gjentatte ganger. Typisk vanesløkke består av tre elementer:

  1. Cue - Trigger som initierer handling
  2. Rutinemessig - Som svar på køen utfører du en handling
  3. Belønning - En fordel du får fra å fullføre rutinen, grunnen til å fullføre handlingen

Jo sterkere belønningen, desto sterkere blir vanen.

Facebooks varsling om ny vennsforespørsel er et godt eksempel på vane: rødt merke og hvitt ikon ( cue ) indikerer at det er en ny forespørsel, som gjør at brukeren klikker på ikonet ( rutine ) for å se informasjon om personen ( belønning ). Etter en stund klikker brukerne automatisk på ikonet når de ser det røde merket.

Signatur øyeblikk

Hvis det gjøres bra, kan mikrointeraksjoner være signatur øyeblikk som øker kundeloyaliteten. Signatur øyeblikk er mikrointeraksjoner som har blitt forhøyet for å være en del av merkevaren. Tenk på Facebook's Like-knappen. Det blir naturlig del av Facebook-grensesnittet. Hvis Facebook plutselig fjerner denne funksjonen, vil brukerne legge merke til det og vil tro at appen er ødelagt.

Identifisere muligheter

En del av skjønnheten i mikrointeraksjoner er at de kan settes inn på en rekke steder, rundt enhver potensiell handling. Mikrointeraksjoner er gode for:

Fremhever endringer

Mikrointeraksjoner kan lede brukerens oppmerksomhet . I mange tilfeller brukes animasjoner for å tiltrekke brukerens oppmerksomhet til viktige detaljer (dvs. meldinger).

notification_animation03
Bildekreditter: Dribbble

Minimerer brukerinnsatsen

Autofullføring er et godt eksempel på mikrointeraksjon. Typing har høy interaksjonskostnad; Det er feilaktig og tidkrevende selv med et fullt tastatur (og enda mer på en berøringsskjerm). Autofullføring hjelper brukeren til å gi riktig svar raskere og uten typografiske feil. Når du skriver hvert brev, vil systemet gjøre sine beste gjetninger til ordene du prøver å finne.

fancy
Bildekreditter: fancy.surge.sh

Tilbyr tilbakemelding for å vise hva som er oppnådd

Mikrointeraksjoner kan styrke handlingene en bruker utfører. Ved å følge prinsippet " show, do not tell" , kan du bruke animert tilbakemelding for å vise hva som er oppnådd. I Stripes eksempel , når brukeren klikker "Betal", vises en spinner kort før appen viser suksessstaten. Sjekkeanimasjon gjør at brukeren føler at de lett gjorde betalingen og brukerne setter pris på slike viktige detaljer.

Gi statusinformasjon

Det første brukervennlige heuristiske prinsippet av Jakob Nielsen sier: Systemet bør alltid holde brukerne informert om hva som skjer. Typing indikator i chat er et godt eksempel på mikrointeraksjoner som gir statusinformasjon. Den vises på vennens skjerm mens du skriver en melding i chat.

typing
Bildekreditter: Dribbble

Bekreft brukerdata

En av de viktigste og ofte oversett aspekter av formdesign er feilhåndtering . Det er menneskelig natur å gjøre feil selv, og skjemaet ditt er sannsynligvis ikke fritatt for menneskelig feil. Brukere misliker når de går gjennom prosessen med å fylle ut et skjema for å finne ut ved innsending, at de har gjort en feil. Det er her validering mikrointeraksjon spiller det er en del i en brukervennlig form. Real-time inline validering informerer omgående brukerne om korrektheten av dataene som er oppgitt. Denne tilnærmingen lar brukerne rette feilene de gjør raskere uten å måtte vente til de trykker på send-knappen for å se feilene. Når det er gjort riktig, kan det forvandle en tvetydig samhandling til en klar en.

form_validation

studiepoeng: Dribbble

Konklusjon

Design er i detaljene. Selv små detaljer fortjener nøye, fordi alle disse små øyeblikkene gir opp følelsen, de kommer sammen for å danne et vakkert, helhetlig produkt.

"Forskjellen mellom produkter vi elsker og de vi bare tolererer, er ofte de mikrointeraksjonene vi har med dem." - Dan Saffer

Hvis du bryr deg om brukeropplevelse, må du bryr deg om mikrointeraksjoner. Fordi produktet ditt bare er like bra som den minste mikrointeraksjonen som folk har med den.