Förstå Microinteractions i Mobile App Design

Användbarhet är en av nyckelkomponenterna i mobil UI-design. Stor användbarhet innebär ofta microinteractions vilka är små svar och beteenden från ett gränssnitt dikterar hur användargränssnittet ska användas. Dessa mikrointeraktioner definierar beteenden, uppmuntrar engagemang och hjälper användarna att visualisera hur ett gränssnitt ska fungera.

Digitala gränssnitt är mellanhänder mellan användare och deras önskade mål. Gränssnittsdesigners skapar erfarenheter som hjälper användarna utföra vissa uppgifter. Till exempel har en todo list-app ett gränssnitt som hjälper användare att organisera sina uppgifter. Precis som en Facebook-app ger användarna ett gränssnitt för att interagera med deras Facebook-konto.

I den här guiden kommer jag att dyka vidare in i mikrointeraktioner för mobilappar. Små interaktioner kan tyckas triviala men de kan ha en enorm inverkan på kvaliteten på en användares upplevelse. När det är gjort korrekt känns mikrointeraktioner som en äkta del av den övergripande mobila användarupplevelsen.

Kraften av mikrointeraktioner

I de flesta fall är målet med en mikrointeraktion att ge feedback baserat på användarens åtgärd. Detta kan hjälpa användare visualisera hur gränssnittet rör sig eller beter sig, även om det är rent digitalt på en platt skärm.

Mikrointeraktioner har kraft eftersom de skapa en illusorisk upplevelse. På / av-reglaget rör sig inte riktigt som fysiska omkopplare, men de kan verka för att röra sig här genom animeringar.

Jag hittade ett otroligt citat i det här inlägget och diskuterar det enorma värdet av mikrointeraktioner för mobilappar:

“De bästa produkterna gör två saker bra: funktioner och detaljer. Funktioner är vad dra personer till din produkt. Detaljer är vad håll dem där. Och detaljer är vad som faktiskt gör att vår app står ut från vår tävling.”

De små detaljer kan tyckas obetydligt ur en utvecklingssynpunkt, men från en användarupplevelse ställer de uppriktigt upp göra skillnad mellan ett OK-app-användargränssnitt och en extraordinär app-användargränssnitt.

Stora mikrointeraktioner gör användaren känna sig belönad för att vidta en åtgärd. Dessa åtgärder kan vara upprepad och inblandad i användarens beteende. De kan lära sig hur man använder en applikation baserad på dessa mindre mikrointeraktioner. När användaren utför ett beteende, så signalerar dessa små interaktioner "ja, du kan interagera med mig!"

Ta en titt på de exempel som finns i Googles materialdesignspecifikationer. Dokumentationen har faktiskt en hel del avsedd för materialrörelse. Rumsliga relationer är en stor del av denna ekvation, men rörelse kan diktera mer än bara rumsliga relationer.

Här är De vanligaste användningarna av animering och rörelse i mobil UI / UX-design:

• Vägledande användare mellan olika sidor
• Guida användare genom gränssnittet för att lära sig vissa beteenden
• Föreslå åtgärder / beteenden som kan tas på en viss sida

Mobila appar har mycket mindre skärmutrymme än webbplatser. Detta kan leda till vissa svårigheter att lära användarna hur man använder en app. Men det kan vara överraskande enkelt om du vet hur du implementerar mikrointeraktioner på rätt sätt.

Hur mikrointeraktioner fungerar

En enda mikrointeraktion bränder när användaren engagerar sig med en del av ett gränssnitt. De flesta mikrointeraktioner är animerade svar på användarens gest. Så en swiping motion svarar annorlunda än en knapp eller en flicka.

Blink UX gjorde ett bra inlägg som diskuterar de mindre detaljerna om mikrointeraktioner. Dessa små animationer ska följa a förutsägbar process som användaren kan lära sig för varje interaktion i ansökan.

Mikrointeraktioner leder användarna via ett gränssnitt av erbjuda svar på beteenden. När användaren vet att en på / av-reglaget kan röra sig, vet de att det är interaktivt. Baserat på svaret kommer de också att veta om en inställning var på eller av. När en knapp ser ut kan den klickas på användaren instinktivt vet de kan interagera med det.

Enligt UXPin kan varje grundläggande mikrointeraktion bryta ner i fyra steg, men jag har sammanfattat processen i tre steg.

1. Verkan - de användaren gör något som flick, svep, knacka & håll, eller någon annan interaktion.
2. Reaktion - de gränssnittet svarar baserat på vad som behöver hända. Att byta skärm kan komma tillbaka i webbläsarens historia, eller om du slår på en av / på-reglaget kan det hända att en inställning stängs av.
3. Återkoppling - det här är vad användaren ser faktiskt som ett resultat av interaktionen. När användaren sveper tillbaka i en mobil webbläsare kan det flyta den föregående sidan upp till "överst" på skärmen. På / av-reglaget kan glida smidigt eller växa större när trycket appliceras på skärmen.

Dessa mycket små åtgärder kan utföras utan animering, men stora mikrointeraktioner erbjuder a realistisk känsla till det platta digitala gränssnittet, vilket oftast kommer i form av realistiska animationseffekter. Dessa andas liv i gränssnittet och uppmuntra mer användarinteraktion.

Leta efter detaljerna

Genom att titta på de mindre delarna av en design förstår du hur en app ska svara på ett visst beteende.

Dra för att uppdatera är ett bra exempel på en nu populär mikrointeraktion. Det var inte en integrerad del av iOS när den lanserades, men många appar tog den här idén och började flytta med den. Att dra till uppdatering är nu ett välkänt beteende som de flesta användare bara vet att använda när du surfar på ett flödesgränssnitt. Samma sak kan sägas om mobila hamburger menyer som har vuxit vildt i popularitet.

Gör varje mikrointeraktion realistiskt och enkelt. Överdriv inte animeringar eftersom de kan bli tråkig om de är för detaljerade och används ofta. Användaren vill inte ha gnistrar att visas varje gång de knackar på en menyikon. Slå en balans med äkta värde som kommunicerar hur gränssnittet ska fungera utan att gå överbord.

Titta på några exempel

Jag tycker att det bästa sättet att lära sig något är att göra det, och det näst bästa sättet är att studera andras arbete. Jag har samlat en liten handfull av UI / UX mikrointeraktion animeringar från begåvade Dribbble-användare för att visa dig hur dessa ser ut i en riktig mockup.

Varje applikation kommer att vara annorlunda och ha olika behov baserat på vad appen gör. I slutändan vill de flesta användare ha samma sak: en app som är intuitiv och ger en användarupplevelse av hög kvalitet med mikrointeraktioner i förhållande till användarbeteenden.

1. Animerad händelseapp-användargränssnitt

Det första exemplet är en snygg kortanimeringsfunktion skapad av Ivan Martynenko. Du kommer att märka en handfull mikrointeraktioner i denna design, i synnerhet kortsvepning och rörelse genom detaljer.

När du knackar på kortet växer den i storlek. Och när du trycker på knappen Prenumerera glider användarens profilfoto i listan över abonnenter. Allt känns väldigt intuitivt och ganska naturligt för gränssnittet.

2. Interaktiv träningsskärm

Denna kreativa mobilövningsanimering kommer från designern Vitaly Rubtsov. Det demonstrerar en användare som sparar sin träning för en uppsättning knep.

Observera att varje animering har samma elastisk studseffekt när menyerna öppnas och snäpp stängs. Detta gäller även när aktiviteten är markerad som "klar". Konsistens är nyckeln till mikrointeraktioner eftersom de alla ska känna ansluten till samma gränssnitt.

3. Sök App Microinteractions

Kort, söt och till den punkten. Jag tycker att det här bäst beskriver dessa sökapps mikrointeraktioner som designats av Lukas Horak. Varje animering är Snabb men fortfarande märkbar.

Så här ska du utforma mikrointeraktioner till undvika överkomplexitet. Om gränssnittet skulle ladda snabbare utan animeringen, varför bry sig om att lägga till den? Snabba animationer Håll användaren i rörelse genom att inte lägga ner erfarenheten.

4. Fitness Mål Microinteraction

Jag tycker att Jakub Antalà ????? k hit verkligen den här ut ur parken med hans fitness mål mikrointeraktion. Skärmarna har alla denna känsla av jiggly jell-o eftersom former rör sig så flytande.

Men gränssnittet känns också fast och användbar. Det visar att mikrointeraktioner skapade med ett syfte fortfarande kan vara roliga och underhållande men också funktionella och pragmatiska.

5. Dra till Uppdatera Animation

Här är en av mina absoluta favorit drag-to-refresh animationer skapade av laget på Ramotion. Detta inte bara efterliknar en vätska med dragåtgärden, men svaranimationen ansluts smidigt från ett stänk av vätska till en lastcirkel.

Detta mycket uppmärksamhet på detaljer är det som ger den sanna skönheten i mobilapps mikrointeraktioner.

6. Flik Microinteraction

Tabbad widgets är ganska vanliga för mobilappar på grund av de mindre skärmarna. Jag gillar verkligen den här mikrointeraktionen som skapats av John Noussis, även om jag tycker att det skulle vara effektivare i en högre hastighet, men animationen själv är strålande och väl genomtänkt.

Fliken för ankarspetsen glider över till höger precis som det nya innehållet studsar in från höger. Det ger illusionen av hela skärmen flyttar fysiskt till höger. Animationen är utsökt, men eftersom det är så långsamt tror jag att de flesta användare skulle bli irriterad efter några dagar.

7. Preloading Animation

Jag har inte sagt mycket om det laddningsstänger i det här inlägget, men de är lika värdefulla för den övergripande upplevelsen. De flesta användare vill inte vänta på att data laddas, men de vill absolut inte stirra på en tom skärm medan den laddas.

Bret Kurtz gjorde denna fantastiska preloading skärm som är både roligt och informativt. Användaren kan faktiskt vara hyste tittar på den här lilla animationsrepetionen. De kan också vara lugnade att ansökan är laddar fortfarande sina data och har inte kraschat.

Avslutar

Alla dessa exempel visar briljant värdet av mikrointeraktioner. Mobila appar får mycket mer värde från mikrointeraktioner eftersom användare fysiskt röra skärmarna med sina fingrar. Användare knackar inte på sina skrivbordsskärmar eller sina bärbara skärmar, men alla kränger sina smartphones eftersom det är standardstatus för interaktivitet.

Det är en mycket mer personlig erfarenhet, vilket är anledningen till att mobilappdesign kan vara en sådan nyanserad process. När det görs korrekt kan tillägget av stora mobila mikrointeraktioner bygga en kraftfull illusorisk användarupplevelse av ingenting annat än pixlar och rörelse.