Oprettelse af brugbarhed med bevægelse: UX i bevægelsesmanifest

Følgende manifest repræsenterer mit svar på spørgsmålet - "Som UX eller UI, designer, hvordan ved jeg, hvornår og hvor jeg skal implementere bevægelse for at understøtte anvendeligheden?"

I løbet af de sidste 5 år har det været mit privilegium at coache og mentere UX- og UI-designere i over 40 lande og hos hundreder af de bedste mærker og designkonsulenter gennem mine workshops og tutorials om UI-animation.

Efter over 15 år at studere bevægelse i brugergrænseflader, er jeg kommet til den konklusion, at der er 12 specifikke muligheder for at understøtte brugbarhed i dine UX-projekter ved hjælp af motion.

Jeg kalder disse muligheder 'De 12 principper for UX i bevægelse', og de kan stables og kombineres synergistisk på et utal af innovative måder.

Jeg har opdelt manifestet i 5 dele:

  1. Adressering af emnet UI-animation - det er ikke hvad du synes
  2. Realtime vs ikke-realtime interaktioner
  3. Fire måder, hvorpå bevægelse understøtter brugervenlighed
  4. Principper, teknikker, egenskaber og værdier
  5. De 12 principper for UX i bevægelse

Hvis du er en hurtig plug, hvis du er interesseret i at få mig til at lede et bevægelses- og brugervenligt workshop for dit team, skal du klikke her for mere info: https://uxinmotion.net/creating-usability-with-motion-workshop/

Det handler ikke om UI-animation

Fordi motivets bevægelse i brugergrænseflader for det meste forstås af designere at være 'UI Animation' - hvilket det ikke er - har jeg det lyst til at jeg skal skabe en smule kontekst, før vi springer ind i de 12 principper.

'UI-animation' betragtes typisk af designere som noget, der gør brugeroplevelsen mere dejlig, men samlet set tilføjer ikke meget værdi. Således behandles UI-animation ofte som det rødhovedede stebarn af UX (unnskyldning til rødhovedede stebørn overalt). Hvis det overhovedet kommer, kommer det normalt i slutningen, som en sidste læbestiftpas.

Derudover har bevægelse i forbindelse med brugergrænseflader forståeligt nok været anset for at være under domænet af Disneys 12 Principles of Animation, noget jeg argumenterer for i min artikel 'UI Animation Principles - Disney is Dead.'

I mit manifest vil jeg gøre sagen om, at UI-animation er til '12 UX i bevægelsesprincipper', som konstruktion er for arkitektur.

Med dette mener jeg, at selv om en struktur fysisk skal bygges for at eksistere (kræver konstruktion), kommer den førende hånd, der bestemmer, hvad der bliver bygget, fra princippernes domæne.

Animation handler om værktøjer. Principper er praktisk anvendelse af ideer, der styrer brugen af ​​værktøjer, og som sådan giver principper store gearingsmuligheder for designere.

Hvad de fleste designere synes om som 'UI-animation' er faktisk udførelsen af ​​en højere modalitet af design: grænsefladeobjekternes tidsmæssige opførsel under begivenheder i realtid og ikke-realtid.

Realtime vs ikke-realtime interaktioner

På dette tidspunkt er det vigtigt at skelne mellem 'tilstand' og 'handling'. Tilstanden for noget i UX er grundlæggende statisk, ligesom en designkomp. Handlingen med noget i UX er grundlæggende tidsmæssig og bevægelsesbaseret. Et objekt kan være i en tilstand af at blive maskeret, eller det kan være i handlen om at blive maskeret. Hvis det er sidstnævnte, ved vi, at bevægelse er involveret og på en måde, der kan understøtte anvendeligheden.

Derudover kan alle tidsmæssige aspekter af interaktion betragtes som at ske i realtid eller ikke-realtid. Realtid betyder, at brugeren interagerer direkte med objekterne i brugergrænsefladen. Ikke-realtid betyder, at objektets opførsel er post-interaktiv: Den forekommer efter en brugerhandling og er overgangsperiode.

Dette er en vigtig sondring.

Realtime-interaktioner kan også betragtes som 'direkte manipulation', idet brugeren interagerer direkte med interfaceobjekterne direkte. Grænsefladens opførsel sker, når brugeren bruger det.

Ikke-realtidsinteraktioner sker kun efter input fra brugeren og har den virkning, at brugeren kort låses ud af brugeroplevelsen, indtil overgangen er afsluttet.

Disse sondringer giver os gearing, når vi fortsætter vores rejse ind i verdenen af ​​de 12 principper for UX i bevægelse.

Bevægelse understøtter brugervenlighed på fire måder

Disse fire søjler repræsenterer de fire måder, hvor den tidsmæssige opførsel af brugeroplevelser understøtter anvendeligheden.

Forventning

Forventningen falder i to områder - hvordan brugere opfatter, hvad et objekt er, og hvordan det opfører sig. En anden måde at sige dette på er, at vi som designere ønsker at minimere afstanden mellem, hvad brugeren forventer, og hvad de oplever.

kontinuitet

Kontinuitet taler både til brugerstrømmen og 'konsistensen' i brugeroplevelsen. Kontinuitet kan tænkes på i form af 'intra-kontinuitet' - kontinuiteten i en scene og 'inter-kontinuitet' - kontinuiteten i en række scener, der udgør den samlede brugeroplevelse.

narrative

Fortælling er den lineære progression af begivenheder i brugeroplevelsen, der resulterer i en tidsmæssig / rumlig ramme. Dette kan betragtes som en række diskrete øjeblikke og begivenheder, der forbinder sig gennem brugeroplevelsen.

forholdet

Forhold henviser til de rumlige, tidsmæssige og hierarkale repræsentationer mellem interface-objekter, der styrer brugerforståelse og beslutningstagning.

Principper, teknikker, egenskaber og værdier

Tyler Waye siger det så godt som enhver, når han skriver: ”Principper… er de underliggende premisser og funktionsregler, der giver anledning til et hvilket som helst antal teknikker. Disse elementer forbliver konsistente, uanset hvad der sker. ”Det gentager, at principper er agnostiske i design.

Derfra kan vi forestille os et hierarki med principper øverst, teknikker længere nede, egenskaber under det og værdier i bunden.

Teknikker kan betragtes som de forskellige og ubegrænsede henrettelser af principper og / eller kombination af principper. Jeg tænker på teknik som beslægtet med 'stil'.

Egenskaber er de specifikke objektparametre, der animeres for at oprette teknikken. Disse inkluderer (og er ikke begrænset til) position, opacitet, skala, rotation, ankerpunkt, farve, slagbredde, form osv.

Værdier er de faktiske numeriske egenskabsværdier, der varierer over tid for at skabe det, vi kalder 'animation'.

Så for at lande flyet her (og springe lidt foran), kunne vi sige, at en hypotetisk UI-animationsreference bruger Obscuration-princippet med en 'sløret glas'-teknik, der påvirker egenskaberne for sløring og opacitet til en værdi af 25px og 70% henholdsvis.

Nu har vi nogle værktøjer til at arbejde med. Og endnu vigtigere er, at disse sproglige værktøjer er agnostiske for ethvert specifikt prototype-værktøj.

De 12 principper for UX i bevægelse

Lettere og offset & forsinkelse vedrører timing. Forældreforhold vedrører objektforhold. Transformation, værdiændring, maskering, overlay og kloning vedrører alle objektkontinuitet. Parallax vedrører tidsmæssigt hierarki. Uklarhed, dimension og Dolly & Zoom relaterer begge til den rumlige kontinuitet.

Princip 1: Lindring

Objektadfærd er i overensstemmelse med brugerens forventninger, når tidsmæssige begivenheder opstår.

Alle interfaceobjekter, der udviser tidsmæssig adfærd (hvad enten det er realtid eller ikke-realtid), er lette. At lette skaber og forstærker 'naturalismen', der er forbundet med problemfrihed af brugeroplevelser, og skaber en følelse af kontinuitet, når objekter opfører sig, som brugerne forventer, at de skal. I øvrigt refererer Disney til dette som 'langsomt ind og langsomt ud.'

Eksemplet til venstre har lineær bevægelse og ser 'dårligt ud'. Det første eksempel på toppen har lettet bevægelse og ser 'godt ud'. Alle tre eksempler ovenfor har det nøjagtige antal rammer og finder sted i nøjagtigt den samme tidsperiode. Den eneste forskel er i deres lempelse.

Som designere, der er opmærksomme på brugervenlighed, er vi nødt til at kræve os selv strenghed og forhøre os, bortset fra æstetik, hvilket eksempel understøtter brugervenligheden mere?

Den sag, jeg præsenterer her, er, at en vis grad af skeuomorfisme er forbundet med at lempe. Du kan forestille dig en "lempende gradient", hvor adfærd, der falder uden for brugerens forventninger, resulterer i mindre brugbare interaktioner. I tilfælde af korrekt lettet bevægelse oplever brugerne selve bevægelsen som sømløs og stort set usynlig - hvilket er en god ting i og med at den ikke er distraherende. Lineær bevægelse er synlig åbenlyst og føles på en eller anden måde off, uafsluttet og skurrende og distraherende.

Nu vil jeg helt modsige mig selv her og tale om eksemplet til højre. Bevægelsen er ikke sømløs. Faktisk har det en 'designet' fornemmelse af det. Vi lægger mærke til, hvordan genstanden lander. Det føles anderledes, men alligevel føles det stadig mere 'korrekt' end eksemplet med lineær bevægelse.

Kan du anvende lempelse og stadig ikke have det (eller i værre tilfælde undergrave) brugbarhed? Svaret er ja, og der er flere måder. En måde er timing. Hvis din timing er for langsom (grødet at låne fra Pasquele), eller for hurtig, kan du bryde forventningen og distrahere brugerens opmærksomhed. På samme måde, hvis din lempelse er forkert tilpasset mærket eller den samlede oplevelse, kan dette også have negativ indflydelse på forventning og sømløshed.

Det, jeg vil åbne dig for, er en verden af ​​muligheder, når det kommer til lettere bevægelse. Der er bogstaveligt talt et uendeligt antal 'lettelser', som du som designer kan oprette og implementere i dine projekter. Alle disse lettelser har deres eget forventningsrespons, de udløser hos brugerne.

For at opsummere: hvornår skal man bruge lempelse? Altid.

Du kan lære mere om min lempelse hypotese i min artikel, 'Ironien om brugervenlighed og lineær bevægelse.'

Princip 2: Offset og forsinkelse

Definerer objektforhold og hierarkier, når der introduceres nye elementer og scener.

Offset & forsinkelse er den anden af ​​kun to UX i bevægelsesprincipper, der er påvirket af Disneys animationsprincipper, i dette tilfælde fra 'Follow Through and Overlapping Action'.

Det er imidlertid vigtigt at bemærke, at implementeringen, selv om den er i udførelse, adskiller sig i formål og resultat. Mens Disneys principper resulterer i 'mere tiltalende animationer', resulterer UI-animationsprincipperne i mere brugbare oplevelser.

Nytten af ​​dette princip er, at det forbevidst sætter brugeren op til succes ved at "fortælle" brugeren noget om arten af ​​objekterne i grænsefladen. Fortællingen i ovenstående henvisning er, at de to øverste objekter er samlet, og det nederste objekt er adskilt. Måske kan de to øverste objekter være et ikke-interaktivt billede og tekst, mens det nederste objekt er en knap.

Allerede før brugeren registrerer, hvad disse objekter er, har designeren allerede kommunikeret til hende - gennem bevægelse - at objekterne på en eller anden måde er 'separate'. Dette er ekstremt kraftfuldt.

Kredit: InVision

I ovenstående eksempel omdannes den flydende handlingsknap (FAB) til headernavigationselementer, der består af tre knapper. Fordi knapperne er 'forskudt' fra hinanden midlertidigt, ender de med at understøtte brugbarheden gennem deres 'adskillelse.' . Dette har den effekt at fortælle brugeren, helt uafhængig af det visuelle design, en del af arten af ​​objekterne i interface.

For bedre at vise dig, hvordan dette fungerer, viser jeg dig et eksempel, der bryder Offset & Forsink-princippet.

Kredit: Jordi Verdu

I ovenstående eksempel fortæller det statiske visuelle design, at der er ikoner over en baggrund. Antagelsen er, at ikonerne alle er adskilt fra hinanden og gør forskellige ting. Bevægelsen modsætter sig imidlertid dette.

Midlertidigt grupperes ikonerne i rækker og opfører sig som et enkelt objekt. Deres titler er ligeledes grupperet i rækker og opfører sig også som et enkelt objekt. Bevægelsen fortæller brugeren noget andet end hvad hendes øjne ser. I dette tilfælde kan vi sige, at den tidsmæssige opførsel af objekterne i interface ikke understøtter anvendeligheden.

Princip 3: Forældre

Opretter rumlige og tidsmæssige hierarkiske forhold, når de interagerer med flere objekter.

Forældre er et stærkt princip, der 'relaterer' objekter i brugergrænsefladen. I ovenstående eksempel er egenskaben "skala" og "position" for det øverste eller "underordnede" objekt pareret til "position" -egenskabet for bunden eller "overordnede" objektet.

Forældre er linkingen af ​​objektegenskaber til andre objektegenskaber. Dette skaber objektforhold og hierarkier på måder, der understøtter brugervenlighed.

Forældre giver også designere mulighed for bedre at koordinere tidsmæssige begivenheder i brugergrænsefladen, samtidig med at de kommunikerer til brugerne arten af ​​objektforholdene.

Husk, at objektegenskaber inkluderer følgende - Skala, opacitet, placering, rotation, form, farve, værdi osv. Enhver af disse egenskaber kan knyttes til alle andre egenskaber for at skabe synergistiske øjeblikke i brugeroplevelsen.

Kredit: Andrew J Lee, Frank Rapacciuolo

I dette ovenstående venstre eksempel er 'y-aksens' egenskab for 'ansigt' -elementet 'barnet' til 'x-aksens' egenskab for den runde indikatoroverordnede. Når det runde indikatorelement bevæger sig langs den horisontale akse, bevæger dets 'barn'-element sig sammen med det vandret og lodret (mens det maskeres - et andet princip).

Resultatet er en hierarkal tidsmæssig narrativ ramme, der forekommer på samme tid. Bemærk er, at 'ansigter' -objektet fungerer som en serie af 'lockups', ved at 'ansigtet' ved hvert nummer er fuldt og ikke delvis synligt. Brugeren oplever dette problemfrit, skønt vi kan hævde, at der er et subtil 'brugervenligt snyderi' i dette eksempel.

Forældresamhed fungerer bedst som en 'realtime' interaktion. Idet brugeren direkte manipulerer interfaceobjekterne, kommunikerer designeren til brugeren - via bevægelse - hvordan objekterne er forbundet, og forholdet mellem dem.

Forældreforekomst forekommer i 3 former: 'direkte forældremyndighed' (se ovenfor to eksempler, 'forsinket forældremyndighed' og 'omvendt forældremåde', se nedenfor).

Forsinket forældremyndighed (kredit: AgenceMe) & inverse forældre (kredit: AgenceMe)

Princip 4: Transformation

Opretter en kontinuerlig tilstand af fortællingsstrøm, når objektværktøjet ændres.

Der er allerede skrevet meget om UX i bevægelsesprincippet 'transformation'. På nogle måder er det den mest åbenlyse og gennemtrængelige af animationsprincipperne.

Transformation er den mest synlige, stort set fordi den skiller sig ud. En 'indsende' knap, der ændrer form for at blive en radial fremdriftslinje og endelig ændre form igen for at blive et bekræftelsesmærke, er noget, vi bemærker. Det griber vores opmærksomhed, fortæller en historie og er færdig.

Kredit: Colin Garven

Hvad Transformation gør er problemfrit at overføre brugeren gennem de forskellige UX-tilstande eller 'er' (som i dette er en knap, dette er en radial fremdriftslinje, dette er et afkrydsningsfelt), som til sidst resulterer i et ønsket resultat. Brugeren er trukket gennem disse funktionelle rum til den ultimative destination.

Transformation har den effekt, at 'chunking' kognitivt adskilte nøglemomenter i brugeroplevelsen til en sømløs og kontinuerlig række af begivenheder. Denne sømløshed resulterer i bedre brugerbevidsthed, fastholdelse og opfølgning.

Princip 5: Ændring af værdi

Opretter et dynamisk og kontinuerligt narrativt forhold, når værdiemne ændres.

Tekstbaserede interfaceobjekter, det vil sige tal og tekst, kan ændre deres værdier. Dette er et af disse 'undvigende indlysende' begreber.

Ændringer i tekst og antal er så almindelige, at de går forbi os uden at vi bringer dem sondring og strenghed for at vurdere deres rolle i at støtte anvendeligheden

Så hvad oplever brugeren, når værdier ændres? I brugeroplevelser er de 12 UX i bevægelsesprincipper muligheder for at støtte brugervenlighed. De tre muligheder her er at forbinde brugeren med virkeligheden bag dataene, agenturbegrebet og til den dynamiske natur af værdierne selv.

Lad os se på eksemplet på et brugerdashboard.

Når værdibaserede interfaceobjekter indlæses uden 'værdiændring', overfører dette brugeren, at tallene er statiske objekter. De er som malede skilte, der viser en hastighedsgrænse på 55 mph.

Tal og værdier er repræsentationer af ting, der sker i virkeligheden. Den virkelighed kan være tid, indkomst, spilresultater, forretningsmetrik, fitness tracking osv. Det, vi adskiller gennem bevægelse, er, at 'værdiemnet' er dynamisk, og værdierne afspejler noget fra det dynamiske værdisæt.

Ikke kun går dette forhold tabt med statiske genstande, der visuelt består af værdier, men en anden dybere mulighed går også tabt.

Når vi anvender repræsentationer af dynamiske systemer i form af bevægelsesbaserede værdier, aktiveres det en slags 'neurofeedback.' Brugere, der griber den dynamiske karakter af deres data, kan nu være årsag til at ændre disse værdier og er bemyndiget til at blive agenter. Når værdierne er statiske, er der mindre forbindelse til virkeligheden bag værdierne, og brugere mister deres agentur.

Kredit: Barthélemy Chalvet, Gal Shir, ukendt

Princippet om værdiforandring kan forekomme både i realtid og ikke-realtidsbegivenheder. I realtidsbegivenheder interagerer brugeren med objekterne for at ændre værdier. I ikke-realtidsbegivenheder, såsom loaders og overgange, ændres værdierne uden brugerinput for at afspejle en dynamisk fortælling.

Princip 6: Maskering

Opretter kontinuitet i et interfaceobjekt eller en objektgruppe, når hjælpeprogrammet bestemmes af hvilken del af objektet eller gruppen, der afsløres eller skjules.

Handlingen med at maskere at spørge kan betragtes som et forhold mellem formen på objektet og dets anvendelighed.

Fordi designere er bekendt med 'maskering' i forbindelse med statisk design, er det nødvendigt at vi skelner UX i bevægelsesprincippet 'Maskering', som det forekommer i tid, som en handling og ikke som en stat.

Gennem den tidsmæssige brug af at afsløre og skjule regioner af et objekt overgår nyttigheden på en kontinuerlig og sømløs måde. Dette har også effekten af ​​at bevare fortællingsstrømmen.

Kredit: Anish Chandran

I ovenstående eksempel ændrer overskriftsbilledet afgrænsende form og placering, men ikke indholdet, og bliver til et album. Dette har den virkning at ændre, hvad objektet er, samtidig med at man bevarer indholdet i masken - et ret pænt trick. Dette sker i ikke-realtid som en overgang, der aktiveres, når en bruger har truffet en handling.

Husk, at UI-animationsprincipper opstår midlertidigt og understøtter brugbarhed gennem kontinuitet, fortælling, forhold og forventning. I ovenstående henvisning, selv om objektet selv forbliver uændret, har det også grænse og placering, og disse to faktorer bestemmer, hvad objektet er.

Princip 7: Overlay

Opretter narrativt og objekt rumligt forhold i det visuelle fladland, når lagdelte objekter er placeringsafhængige.

Overlay understøtter brugervenlighed ved at give brugerne mulighed for at bruge flatland-ordreregenskaber til at overvinde en mangel på ikke-rumlige hierarkier.

For at lande flyet lidt giver Overlay designere mulighed for at bruge bevægelse til at kommunikere placeringsafhængige objekter, der findes bag eller foran andre i ikke 3D-rum.

Kredit: Bady, Javi Pérez

I eksemplet til venstre glider forgrundsobjektet til højre for at afsløre placeringen af ​​yderligere baggrundsobjekter. I eksemplet til højre glider hele scenen ned for at afsløre yderligere indhold og muligheder (mens du bruger offset & forsinkelsesprincippet til at kommunikere fotoobjekternes individualitet).

I en vis grad, som designere, er ideen om 'lag' så indlysende, at den er indlysende. Vi designer med lag, og konceptet med lag er dybt internaliseret. Vi skal dog være omhyggelige med at skelne mellem processen med at "gøre" vers "ved hjælp af."

Som designere, der kontinuerligt er engageret i processen med at 'fremstille', er vi tæt bekendt med alle de stykker af objektet (inklusive de skjulte stykker), vi designer. Som bruger er de ikke synlige stykker imidlertid pr. Definition og praksis, skjult både visuelt og kognitivt.

Overlay-princippet giver designere mulighed for at kommunikere forholdet mellem ‘z-aks’ positionerede lag og på den måde fremme rumlig orientering til deres brugere.

Princip 8: Kloning

Opretter kontinuitet, forhold og fortælling, når nye objekter stammer fra og går ud.

Når nye objekter oprettes i aktuelle scener (og fra aktuelle objekter), er det vigtigt at fortælle om deres udseende. I dette manifest argumenterer jeg kraftigt for vigtigheden af ​​at skabe en narrativ ramme for objektets oprindelse og afgang. Enkel opacitet falmer ofte ikke dette resultat. Maskering, kloning og dimension er tre anvendelighedsbaserede tilgange til at producere stærke fortællinger.

Kredit: Jakub Antalík, Jakub Antalík, Ukendt

I de ovenstående tre eksempler oprettes nye objekter fra eksisterende helteobjekter i det tidsrum, hvor brugerens opmærksomhed er fokuseret på disse objekter. Denne tofoldede tilgang - retningen af ​​opmærksomheden og derefter fører øjet gennem oprettelsen af ​​et klonet nyt objekt - har den stærke virkning af at kommunikere en klar og utvetydig kæde af begivenheder: denne handling 'x' har resultatet 'y' af oprettelse af nye børnemner.

Princip 9: Uklarhed

Tillader brugere at rumligt orientere sig i forhold til objekter eller scener, der ikke er i det primære visuelle hierarki.

I lighed med UX i bevægelsesprincipper for maskering lever obscuration både som statiske og tidsmæssige fænomener.

Dette kan være forvirrende for designere, der ikke har erfaring med at tænke midlertidigt - det vil sige øjeblikke mellem øjeblikke. Designere designer typisk skærm til skærm eller opgave til opgave. Tænk på Uklarhed som en handling til at blive tilsløret og ikke som at være tilsløret. Et statisk design repræsenterer tilstanden af ​​at blive skjult. At introducere tid giver os handlingen om et objekt, der bliver skjult.

Kredit: Virgil Pana, Apple

Fra de to ovenstående eksempler kan vi se, at tilsløring, der ligner gennemsigtige objekter eller overlejringer, også er en tidsmæssig interaktion, der involverer flere egenskaber i tiden.

Forskellige almindelige teknikker til dette involverer sløreffekter og en mindskelse af den generelle objektgennemsigtighed. Brugeren gøres opmærksom på en ekstra ikke-primær kontekst, som hun opererer i - at der som sådan var en anden verden 'bag' hendes primære objekthierarki.

Uklarhed giver designere mulighed for at kompensere for et enkelt samlet synsfelt eller 'objektiv syn' i brugeroplevelser.

Princip 10: Parallax

Opretter rumligt hierarki i det visuelle fladland, når brugerne ruller.

'Parallax', som en UX i bevægelsesprincip beskriver forskellige interfaceobjekter, der bevæger sig i forskellige hastigheder.

Parallax giver brugeren mulighed for at fokusere på primære handlinger og indhold, samtidig med at designintegritet opretholdes. Baggrundselementer 'trækker' sig perceptuelt og kognitivt for brugeren under en Parallax-begivenhed. Designere kan bruge Parallax til at skille umiddelbar indhold fra omgivende eller understøttende indhold.

Kredit: Austin Neill, Michael Sevilla

Effekten dette har på brugeren er at klart definere for varigheden af ​​interaktionen, de forskellige objektforhold. Forgrundsobjekter eller objekter, der bevæger sig 'hurtigere' vises for brugeren som 'tættere'. Ligeledes opfattes baggrundsobjekter eller objekter, der bevæger sig 'langsommere, som at være' længere væk '.

Designere kan oprette disse forhold ved hjælp af selve tiden for at fortælle brugeren, hvilke objekter i grænsefladen der er højere prioriteret. Derfor er det fornuftigt at skubbe baggrund eller ikke-interaktive elementer længere 'tilbage'.

Brugeren opfatter ikke kun interfaceobjekterne som nu med et hierarki ud over det, der bestemmes i det visuelle design, men dette hierarki kan nu udnyttes til at få brugeren til at forstå karakteren af ​​brugeroplevelsen, før han bevidst er opmærksom på designet / indhold.

Princip 11: Dimensionalitet

Tilvejebringer en rumlig fortællingsramme, når nye objekter stammer fra og afgår.

Kritisk for brugeroplevelser er fænomenet kontinuitet såvel som følelsen af ​​placering.

Dimensionalitet giver en kraftfuld måde at overvinde flatland-ikke-logikken i brugeroplevelser.

Mennesker er bemærkelsesværdige dygtige til at bruge rumlige rammer til at navigere både i den virkelige verden og i digitale oplevelser. At give rumlige oprindelses- og afgangsreferencer hjælper med at styrke mentale modeller for hvor brugere befinder sig i UX.

Derudover overvinder dimensionelitetsprincippet lagdelingsparadokset i det visuelle fladland hvor objekter, der mangler dybde, findes på det samme plan, men forekommer som 'foran' eller 'bag' andre objekter.

Dimensionalitet præsenterer sig på tre måder - Origami-dimension, flydende dimension og objektdimensionalitet.

Origami-dimension kan tænkes på i form af 'foldning' eller 'hængslede' tredimensionelle interfaceobjekter.

Eksempler på Origami-dimension (kredit: Eddie Lobanovskiy, Virgil Pana)

Da flere objekter kombineres i 'origami' strukturer, kan de skjulte objekter stadig siges at 'eksistere' rumligt, selvom de ikke er synlige. Dette gør brugeroplevelsen effektivt som en kontinuerlig rumlig begivenhed, hvor brugeren navigerer og skaber en driftsmæssig kontekst både i selve interaktionsmodellen og i den tidsmæssige opførsel af selve interfaceobjekterne.

Flydende dimension giver interfaceobjekter en rumlig oprindelse og afgang, hvilket gør interaktionsmodellerne intuitive og meget fortællende.

Eksempel på flydende dimension (Kredit: Virgil Pana)

I ovenstående eksempel opnås dimensionalitet ved brug af 3D ‘kort’. Dette giver en stærk fortællende ramme, der understøtter det visuelle design. Fortællingen udvides ved at 'vende' kortene for at få adgang til yderligere indhold og interaktivitet. Dimensionalitet kan være en kraftfuld måde at introducere nye elementer på måder, der minimerer pludselig.

Objektdimensionalitet resulterer i dimensionelle objekter med ægte dybde og form.

Eksempler på objektdimensionalitet (kredit: Issara Willenskomer, Creativedash)

Her er flere 2D-lag arrangeret i 3D-rum for at danne rigtige dimensionelle objekter. Deres dimensionalitet afsløres i realtids- og ikke-realtidsovergangs-øjeblikke. Værktøjet med objektdimensionalitet er, at brugerne udvikler en skarp bevidsthed om objektværktøjet baseret på ikke-synlige rumlige placeringer.

Princip 12: Dolly & Zoom

Bevarer kontinuitet og rumlig fortælling, når du navigerer mellem interfaceobjekter og rum.

Dolly og Zoom er filmiske koncepter, der henviser til bevægelse af objekter, der er relevante for kameraet, og størrelsen på selve billedet i rammen, der skiftende ændres fra et langskud til et nærbillede (eller omvendt).

I visse sammenhænge er det umuligt at se, om et objekt zoomer, om det bevæger sig mod kameraet i 3D-rum, eller om kameraet bevæger sig mod objektet i 3D-rum (se referencer nedenfor). Nedenstående tre eksempler illustrerer de mulige scenarier.

Gør det dolly, zoom, eller bevæger kameraet sig?

Som sådan er det hensigtsmæssigt at behandle forekomsterne af 'dollying' og 'zooming' som separate, men lignende, idet de involverer kontinuerlige element- og sceniske transformationer og opfylder kravene i UX i bevægelsesprincipper: de understøtter brugervenlighed gennem bevægelse.

De to billeder til venstre klynges, mens billedet til højre zoomer

Dolly er et filmudtryk og gælder også for kamerabevægelse enten mod eller væk fra et motiv (det gælder også horisontal ‘tracking’ bevægelse, men er mindre relevant i en brugervenlighedskontekst).

Kredit: Apple

Rumligt i UX kan denne bevægelse enten henvise til en ændring i seerperspektivet eller til det perspektiv, der forbliver statisk, mens objektet ændrer position. Dolly-princippet understøtter brugervenlighed gennem kontinuitet og fortælling og problemfri overgang mellem interfaceobjekter og destinationer. Dolly kan også inkorporere dimensionelitetsprincippet, hvilket resulterer i en mere rumlig oplevelse, mere dybde og kommunikere til brugeren yderligere områder eller indhold, der er 'foran' eller 'bag' den aktuelle visning.

Zoom henviser til begivenheder, hvor hverken perspektivet eller objektet bevæger sig rumligt, men snarere objektet selv skalerer (eller vores syn på det falder, hvilket resulterer i, at billedet forstørres). Dette kommunikerer til seeren, at yderligere interfaceobjekter er 'inde' i andre objekter eller scener.

Kredit: Apple

Dette giver mulighed for problemfri overgange - både realtid og ikke-realtid - som understøtter brugervenlighed. Denne sømløshed, der anvendes i Dolly & Zoom-princippet, er ret stærk, når det kommer til at skabe rumlige mentale modeller.

Hvis du har nået det så langt, tillykke! Det var et manifest af et manifest. Jeg håber, at alle gifs, der er indlæst til dig, og ikke dræbte din browser. Jeg håber også, at du har en vis værdi for dig selv og nogle nye værktøjer og gearing i dine interaktive projekter.

Jeg opfordrer dig til at lære mere om, hvordan du kan begynde at bruge bevægelse som et designværktøj til at understøtte anvendeligheden.

Sidste stik - hvis du er interesseret i at få mig til at lede et motion- og brugervenhedsværksted for dit team, skal du klikke her for mere info: https://uxinmotion.net/creating-usability-with-motion-workshop/

Dette manifest ville ikke have været muligt uden det generøse og tålmodige bidrag og konstante feedback fra Kateryna Sitner fra Amazon - tak! Særlig tak til Alex Chang for hans brainstorming og insistering på, at jeg lander flyet, Bryan Mamaril hos Microsoft for hans ørneøje, Jeremey Hanson for hans redigeringsnotater, Eric Braff for at være den vanvittige UI-bevægelsesguru, han er, Rob Girling på Artefact for hans tro på mig for alle disse år siden, Matt Silverman for sin inspirerende tale om UI-bevægelse på After Effects-konferencen, Bradley Munkowitz for at være en fantastisk værelseskammerat og fik mig inspireret i UI, Pasquale D'Silva for hans utrolige bevægelsesartikler, Rebecca Ussai Henderson for hendes fantastiske artikel om UI-koreografi, Adrian Zumbrunnen for hans fantastiske bidrag til emnet UI og bevægelse, Wayne Greenfield og Christian Brodin for at være mine mastermind-brødre og altid skubbe mig til at stige op, og alle jer tusinder af UI-animatører, der holder sprænge inspirerende gifs ud.