Microinteracties begrijpen in ontwerp van mobiele apps

Usability is een van de belangrijkste componenten van mobiel UI-ontwerp. Grote bruikbaarheid gaat vaak gepaard microinteractions welke zijn kleine reacties en gedragingen van een interface dicteren hoe de gebruikersinterface moet worden gebruikt. Deze microinteracties definiëren gedragingen, stimuleren betrokkenheid en helpen gebruikers te visualiseren hoe een interface zou moeten werken.

Digitale interfaces zijn de tussenpersonen tussen gebruikers en hun gewenste doelen. Interface-ontwerpers creëren ervaringen die gebruikers helpen bepaalde taken uitvoeren. Een app met een todolijst heeft bijvoorbeeld een interface die gebruikers helpt bij het organiseren van hun taken. Net zoals een Facebook-app geeft gebruikers een interface om te communiceren met hun Facebook-account.

In deze gids zal ik dieper ingaan microinteracties voor mobiele apps. Kleine interacties lijken misschien triviaal, maar ze kunnen een immense impact over de kwaliteit van de gebruikerservaring. Mits goed gedaan, voelen micro-interacties als een echt onderdeel van de overkoepelende mobiele gebruikerservaring.

De kracht van microinteracties

In de meeste gevallen is het doel van een micro-interactie om geef feedback gebaseerd op de actie van de gebruiker. Dit kan gebruikers helpen visualiseren hoe de interface beweegt of zich gedraagt, ook al is het puur digitaal op een flatscreen.

Micro-interacties hebben kracht omdat zij creëer een illusoire ervaring. Aan / uit-schuifregelaars verplaatsen zich niet echt als fysieke schakelaars, maar ze lijken op deze manier door animaties te bewegen.

Ik vond een ongelofelijke quote in dit bericht waarin ik de immense waarde van microinteracties voor mobiele apps bespreek:

“De beste producten doen twee dingen goed: functies en details. Functies zijn wat mensen naar uw product trekken. Details zijn wat hen daar houdt. En details zorgen ervoor dat onze app zich onderscheidt van onze concurrentie.”

De kleine details lijkt misschien onbelangrijk vanuit een ontwikkelingsstandpunt, maar vanuit het oogpunt van gebruikerservaring zijn ze echt waar Maak het verschil tussen een OK-app UI en een buitengewone app-gebruikersinterface.

Grote micro-interacties maken de gebruiker voel me beloond voor het nemen van een actie. Deze acties kunnen zijn herhaald en ingebakken in het gedrag van de gebruiker. Ze kunnen leren hoe ze een applicatie kunnen gebruiken op basis van deze kleinere micro-interacties. Wanneer de gebruiker een gedrag vertoont, signaleren deze kleine interacties: "Ja, u kunt met mij communiceren!"

Bekijk de voorbeelden in de specificaties voor materiaalontwerp van Google. De documentatie heeft eigenlijk een hele sectie gewijd aan materiële beweging. Ruimtelijke relaties zijn een groot deel van deze vergelijking, maar beweging kan meer dicteren dan alleen ruimtelijke relaties.

Hier zijn de meest voorkomende toepassingen van animatie en beweging in mobiel UI / UX-ontwerp:

Gebruikers begeleiden tussen verschillende pagina's
Gebruikers door de interface leiden om bepaalde gedragingen te leren
Suggesties voor acties / gedragingen die op een bepaalde pagina kunnen worden uitgevoerd

Mobiele apps hebben veel minder schermruimte dan websites. Dit kan ertoe leiden dat gebruikers moeite hebben om een app te gebruiken. Maar het kan verrassend eenvoudig zijn als u weet hoe u microinteracties correct kunt implementeren.

Hoe microinteracties werken

Een enkele micro-interferentie vuurt telkens wanneer de gebruiker een onderdeel van een interface gebruikt. De meeste micro-interacties zijn geanimeerde reacties op het gebaar van de gebruiker. Dus een veegbeweging reageert anders dan een tik of een tik.

Blink UX heeft een goed bericht gegeven over de kleine details van micro-interacties. Deze kleine animaties moeten a volgen voorspelbaar proces die de gebruiker kan leren voor elke interactie in de applicatie.

Microinteracties leiden gebruikers door een interface van het aanbieden van reacties op gedrag. Zodra de gebruiker weet dat een aan / uit-schuifregelaar kan worden verplaatst, weten ze dat deze interactief is. Op basis van het antwoord weten ze ook of een instelling is in- of uitgeschakeld. Wanneer een knop eruit ziet, kan erop worden geklikt instinctief weet ze kunnen ermee communiceren.

Volgens UXPin kan elke basismicinteractie in vier stappen worden afgebroken, maar ik heb het proces samengevat in drie stappen.

Actie - de gebruiker doet iets zoals vegen, vegen, tikken en vasthouden, of een andere interactie.
Reactie - de interface reageert gebaseerd op wat er moet gebeuren. Het vegen van een scherm kan teruggaan in de browsergeschiedenis, of door op een AAN / UIT-schuif te tikken, wordt mogelijk een instelling uitgeschakeld.
terugkoppeling - dit is wat de gebruiker ziet het echt als het resultaat van de interactie. Wanneer de gebruiker terugveert in een mobiele browser, zweeft de vorige pagina omhoog om 'boven' het scherm te verschijnen. De aan / uit-schuifregelaar kan soepel glijden of groter worden wanneer er druk op het scherm wordt uitgeoefend.

Deze zeer kleine acties kunnen worden uitgevoerd zonder animatie, maar geweldige microinteracties bieden een realistisch gevoel naar de platte digitale interface, die meestal wordt geleverd in de vorm van realistische animatie-effecten. Deze brengen de interface tot leven en moedigen meer gebruikersinteractie aan.

Zoek naar de details

Door naar de kleinere delen van een ontwerp te kijken, zult u begrijpen hoe een app op een bepaald gedrag moet reageren.

Trek om te vernieuwen is een goed voorbeeld van een populaire microinteractie. Het was geen integraal onderdeel van iOS toen het voor het eerst werd gelanceerd, maar veel apps namen dit idee en begonnen ermee door te gaan. Nu is 'pull to refresh' een bekend gedrag dat de meeste gebruikers gewoon weten te gebruiken bij het bladeren in een gebruikersinterface van een feed. Hetzelfde kan gezegd worden over mobiele hamburgermenu's die enorm in populariteit zijn gegroeid.

Maak elke micro-interactie realistisch en eenvoudig. Overdrijf geen animaties omdat ze dat wel kunnen saai worden als ze te gedetailleerd zijn en vaak worden gebruikt. De gebruiker wil niet dat sparkles verschijnen telkens wanneer ze op een menupictogram tikken. Sla een balans met echte waarde die communiceert hoe de interface zou moeten werken zonder overboord te gaan.

Sommige voorbeelden bekijken

Ik denk dat de beste manier om iets te leren is door het te doen, en de tweede beste manier is om het werk van anderen te bestuderen. Ik heb een handjevol verzameld UI / UX-microinteractie-animaties van getalenteerde Dribbble-gebruikers om u te laten zien hoe deze eruitzien als een echte mockup.

Elke applicatie zal anders zijn en verschillende behoeften hebben op basis van wat de app doet. Uiteindelijk willen de meeste gebruikers hetzelfde: een app die dat is intuïtief en levert een gebruikerservaring van hoge kwaliteit met micro-interacties ten opzichte van gebruikersgedrag.

1. Gebruikersinterface voor geanimeerde evenementen

Het eerste voorbeeld is een handige kaartanimatiefunctie gemaakt door Ivan Martynenko. Je zult het merken een handvol microinteracties in dit ontwerp, met name kaarten vegen en details verplaatsen.

Als u op de kaart tikt, wordt deze groter. En wanneer u op de knop Abonneren tikt, schuift de profielfoto van de gebruiker in de lijst met abonnees. Alles voelt heel intuïtief en heel natuurlijk aan op de interface.

2. Interactief oefenscherm

Deze creatieve mobiele oefening-animatie komt van ontwerper Vitaly Rubtsov. Het demonstreert een gebruiker die zijn training voor één set squats opslaat.

Merk op dat elke animatie hetzelfde is elastisch stuiterend effect wanneer de menu's openen en vastklikken. Dit geldt ook als de activiteit wordt gecontroleerd als "Gereed". Consistentie is de sleutel tot microinteracties omdat ze allemaal moeten voelen verbonden met dezelfde interface.

3. Zoek App Microinteracties

Kort, lief en ter zake. Ik denk dat dit de micro-interacties in de zoek-app, ontworpen door Lukas Horak, het beste beschrijft. Elke animatie is snel maar toch merkbaar.

Dit is hoe je microinteracties moet ontwerpen vermijd over-complexiteit. Als de interface sneller zou worden geladen zonder de animatie, waarom zou u dan moeite doen om het toe te voegen?? Snelle animaties laat de gebruiker doorgaan zonder de ervaring te verzanden.

4. Doelgroepinteractie

Ik denk dat Jakub AntalÃ ?? Â ?? Ã'Â-k deze echt uit het park heeft geraakt met zijn microinteractie in fitnessdoelen. De schermen hebben allemaal het gevoel van jiggly jell-o omdat het vormen bewegen zo vloeiend.

Toch voelt de interface ook solide en bruikbaar. Het laat zien dat micro-interacties gemaakt met een doel nog steeds leuk en vermakelijk kunnen zijn, maar ook functioneel en pragmatisch.

5. Trek om Animatie te vernieuwen

Hier is een van mijn absolute favoriete pull-to-refresh-animaties gemaakt door het team van Ramotion. Dit niet alleen bootst een vloeistof na met de pull-actie, maar de responsanimatie maakt soepel verbinding van een scheutje vloeistof in een laadcirkel.

Deze veel aandacht voor detail is wat de ware schoonheid in mobiele app-microinteracties naar voren brengt.

6. Tabblad Microinteractie

Widgets met tabbladen zijn vrij gebruikelijk voor mobiele apps vanwege de kleinere schermen. Ik hou echt van deze micro-interactie die is gemaakt door John Noussis, hoewel ik denk dat het effectiever is bij een hogere snelheid, maar de animatie zelf is glorieus en goed doordacht.

De tab-ankerpijl glijdt naar rechts, net zoals nieuwe inhoud van rechts naar binnen stuitert. Het geeft de illusie van de volledig scherm dat fysiek beweegt naar rechts. De animatie is prachtig, maar omdat het zo traag is, denk ik dat de meeste gebruikers na een paar dagen geïrriteerd raken.

7. Preloading Animation

Ik heb er niet veel over gezegd balken laden in deze post, maar ze zijn net zo waardevol voor de algehele ervaring. De meeste gebruikers willen niet wachten tot de gegevens worden geladen, maar ze willen absoluut niet naar een leeg scherm kijken terwijl het wordt geladen.

Bret Kurtz heeft dit geweldige preloadingscherm gemaakt dat zowel leuk als informatief is. De gebruiker kan dat ook zijn vermaakt deze kleine animatieherhaling bekijken. Dat kunnen ze ook zijn gerustgesteld dat de applicatie is nog steeds hun gegevens laden en is niet gecrasht.

Afsluiten

Al deze voorbeelden laten op briljante wijze de waarde van microinteracties zien. Mobiele apps krijgen veel meer waarde van microinteracties omdat gebruikers fysiek de schermen aanraken met hun vingers. Gebruikers tikken niet op hun desktopmonitors of hun laptopschermen, maar iedereen tikt op hun smartphones omdat het de standaardstatus van interactiviteit.

Het is een veel meer persoonlijke ervaring, daarom kan het ontwerp van mobiele apps zo zijn genuanceerd proces. Als het goed is gedaan, kan de toevoeging van geweldige mobiele micro-interacties een krachtige illusoire gebruikerservaring uit niets anders dan pixels en beweging.