Stvaranje upotrebljivosti pokretom: UX u manifestu u pokretu

Sljedeći manifest predstavlja moj odgovor na pitanje - "Kao UX ili korisničko sučelje, dizajner, kako da znam kada i gdje implementirati pokret za podršku upotrebljivosti?"

Tijekom posljednjih 5 godina bila sam privilegija trenirati i mentorati UX & UI dizajnere u preko 40 zemalja te na stotine vrhunskih marki i dizajnerskih konzultacija kroz moje radionice i tutorijale o UI animaciji.

Nakon više od petnaest godina proučavanja kretanja u korisničkim sučeljima, zaključio sam da postoji 12 specifičnih prilika za podršku upotrebljivosti u vašim UX projektima pomoću pokreta.

Te prilike nazivam „12 principa NX-a u pokretu“, a one se mogu slagati i kombinirati na bezbroj inovativnih načina.

Razbio sam manifest na 5 dijelova:

  1. Baviti se temom UI animacije - to nije ono što mislite
  2. Interakcije u stvarnom vremenu i izvan stvarnog vremena
  3. Četiri načina na koja gibanje podržava upotrebljivost
  4. Načela, tehnike, svojstva i vrijednosti
  5. 12 načela NX-a u pokretu

Ako ste zainteresirani da me vodite radionicom pokreta i upotrebljivosti za vaš tim, kliknite ovdje za više informacija: https://uxinmotion.net/creating-usability-with-motion-workshop/

Ne radi se o UI animaciji

Budući da dizajneri tematiku kretanja u korisničkim sučeljima uglavnom shvaćaju kao "UI animaciju" - što nije - osjećam se kao da trebam stvoriti malo konteksta prije nego što uskočimo u 12 principa.

Dizajneri obično "UI Animaciju" dizajnere smatraju nečim što korisničko iskustvo čini ugodnijim, ali sveukupno ne dodaje mnogo vrijednosti. Stoga se UI Animation često tretira kao uspavanka s crvenoglavom pastoricom (isprika se pastorcima sa crvenim glavama). Ako uopće, to obično dođe na kraju, kao završni prolazak ruža za usne.

Pored toga, smatra se da je kretanje u kontekstu korisničkih sučelja pod domenom Disneyjevih 12 principa animacije, čemu se protivim u svom članku "Principi animacije u korisničkom sučelju - Disney je mrtav."

U svom ćemo manifestu praviti slučaj da je UI animacija '12 UX u principima pokreta 'kao što je konstrukcija arhitektura.

Pod tim mislim, iako građevina treba biti fizički izgrađena da bi postojala (koja zahtijeva izgradnju), vodilja koja određuje što se gradi dolazi iz domene Načela.

Animacija je sve o alatima. Načela su praktična primjena ideja koje usmjeravaju uporabu alata i kao takve, Principi pružaju dizajnere visoke mogućnosti utjecaja.

Ono što većina dizajnera smatra "UI animacijom" ustvari je izvedba višeg modaliteta dizajna: vremensko ponašanje sučeljih objekata tijekom događaja u stvarnom i izvan stvarnog vremena.

Interakcije u stvarnom vremenu i izvan stvarnog vremena

U ovom je trenutku važno razlikovati 'stanje' i 'čin.' Stanje nečega u UX-u je u osnovi statično, poput dizajnerskog komp. Radnja nečega u UX-u u osnovi je temporalna i na pokretu. Objekt može biti u stanju maskiranja ili u činu maskiranja. Ako je ovo posljednje, znamo da je gibanje uključeno i na način koji bi mogao podržati upotrebljivost.

Uz to, može se smatrati da se svi vremenski aspekti interakcije događaju u stvarnom ili izvan stvarnog vremena. U stvarnom vremenu znači da korisnik izravno komunicira s objektima u korisničkom sučelju. Ne-stvarno vrijeme znači da je ponašanje objekta post-interaktivno: ono se događa nakon korisničke akcije i prijelazno je.

Ovo je važno razlikovanje.

Interakcije u stvarnom vremenu također se mogu smatrati "izravnom manipulacijom", tako što korisnik izravno i odmah komunicira s objektima sučelja. Ponašanje sučelja događa se dok korisnik to koristi.

Interakcije u stvarnom vremenu događaju se samo nakon unosa od korisnika i rezultiraju kratkim isključenjem korisnika iz korisničkog iskustva dok prijelaz ne završi.

Ova će nam razlikovanja pružiti prednost dok nastavljamo put u svijet 12 principa UX-a u pokretu.

Motion podržava upotrebljivost na četiri načina

Ova četiri stupa predstavljaju četiri načina na kojima vremensko ponašanje korisničkih iskustava podržava upotrebljivost.

Očekivanje

Očekivanje pada na dva područja - kako korisnici percipiraju što je objekt i kako se on ponaša. Drugi način da to kažemo jest da kao dizajneri želimo smanjiti jaz između onoga što korisnik očekuje i onoga što doživljavaju.

neprekidnost

Kontinuitet govori kako o protoku korisnika, tako i o "dosljednosti" korisničkog iskustva. Kontinuitet možete zamisliti u smislu "kontinuiteta" - kontinuiteta unutar scene i "interkontinuiteta" - kontinuiteta u nizu scena koji čine ukupno korisničko iskustvo.

pripovijest

Narativno je linearno napredovanje događaja u korisničkom iskustvu koje rezultira vremenskim / prostornim okvirom. Ovo se može smatrati nizom diskretnih trenutaka i događaja koji se povezuju kroz korisničko iskustvo.

Odnos

Odnos se odnosi na prostorne, vremenske i hijerarhalne reprezentacije između objekata sučelja koje usmjeravaju korisnika razumijevanje i odlučivanje.

Načela, tehnike, svojstva i vrijednosti

Tyler Waye kaže da je to dobro kao i svaki drugi put kada piše: "Načela ... su temeljne premise i pravila funkcioniranja koja rađaju bilo koji broj tehnika. Ti elementi ostaju dosljedni, bez obzira na to što se događa. "To ponavlja kako načela agnosticiraju u dizajnu.

Odatle možemo zamisliti hijerarhiju s Načelima na vrhu, Tehnike dalje prema dolje, Svojstvima ispod toga i Vrijednostima na dnu.

Tehnike se mogu smatrati različitim i neograničenim izvršavanjem Načela i / ili kombinacijom Načela. Mislim da je tehnika slična 'stilu'.

Svojstva su specifični parametri objekta koji se animiraju za stvaranje tehnike. Oni uključuju (i nisu ograničeni na) položaj, neprozirnost, mjerilo, rotaciju, točku sidra, boju, širinu hoda, oblik, itd.

Vrijednosti su stvarne numeričke vrijednosti svojstava koje se s vremenom mijenjaju kako bi stvorile ono što nazivamo "animacija".

Dakle, za slijetanje zrakoplova ovdje (i malo skakanje naprijed) mogli bismo reći da hipotetička referenca animacije UI koristi princip opskuracije tehnikom 'zamagljenog stakla' koja utječe na svojstva zamućenja i neprozirnosti u vrijednosti od 25 px i 70% odnosno.

Sada imamo nekoliko alata za rad. I što je još važnije, ti su jezični alati agnostici bilo kojeg posebnog alata za izradu prototipa.

12 načela NX-a u pokretu

Easing i offset & kašnjenje odnose se na vrijeme. Roditeljstvo se odnosi na objektni odnos. Transformacija, promjena vrijednosti, maskiranje, prekrivanje i kloniranje sve se odnosi na kontinuitet objekta. Paralelaksi se odnose na vremensku hijerarhiju. Obskulacija, dimenzija i Dolly & Zoom odnose se na prostorni kontinuitet.

Načelo 1: olakšanje

Ponašanje objekta usklađuje se s očekivanjima korisnika kada se dogode vremenski događaji.

Svi objekti sučelja koji pokazuju vremensko ponašanje (bilo u stvarnom ili izvan stvarnog vremena), jednostavnost. Easing stvara i jača „naturalizam“ svojstven bešavnosti korisničkih iskustava i stvara osjećaj kontinuiteta kad se predmeti ponašaju onako kako ih korisnici očekuju. Usput, Disney ovo naziva "usporavanje i usporavanje".

Primjer na lijevoj strani ima linearno kretanje i izgleda "loše". Prvi primjer gore odozgo je olakšao kretanje i izgleda "dobro". Sva tri gornja primjera imaju točan broj okvira i odvijaju se točno isto vrijeme. Jedina je razlika u njihovom ublažavanju.

Kao dizajneri koji se bave upotrebljivošću, trebamo od sebe zahtijevati strogost i raspitivanje se, osim estetike, koji primjer više podržava upotrebljivost?

Slučaj koji vam ovdje predstavljam je da je određeni stupanj skeuomorfizma svojstven ublažavanju. Možete zamisliti 'gradijent ublažavanja' gdje ponašanja koja nadilaze očekivanja korisnika rezultiraju u manje upotrebljivim interakcijama. U slučaju pravilno olakšanog pokreta, korisnici doživljavaju sam gibanje kao bešavno i uglavnom nevidljivo - što je dobra stvar jer ne ometa. Linearno kretanje je vidljivo očigledno i osjeća se nekako skroz, nedovršeno, posrćući i odvlačeći pažnju.

Sada ću se potpuno suprotstaviti ovdje i govoriti o primjeru s desne strane. Pokret nije bešavan. U stvari, prema njemu ima 'dizajniran' osjećaj. Primjećujemo kako objekt slijeće. Osjeća se drugačije, a opet se osjeća ispravnije od primjera s linearnim gibanjem.

Možete li zaposliti olakšavanje i još uvijek to ne podržava (ili još gore može narušiti) upotrebljivost? Odgovor je da i postoji nekoliko načina. Jedan od načina je određivanje vremena. Ako je vrijeme previše sporo (pretjerano za posudbu od Pasquelea) ili prebrzo, možete slomiti očekivanja i odvratiti pažnju korisnika. Slično tome, ako se vaše olakšavanje neusklađuje s markom ili ukupnim iskustvom, to također može negativno utjecati na očekivanja i neprimjerenost.

Ono što vam želim otvoriti je svijet prilika kada je riječ o olakšanom kretanju. Doslovno postoji beskonačan broj 'olakšanja' koje vi kao dizajner možete stvoriti i implementirati u svoje projekte. Sva ta olakšanja imaju svoj odgovor očekivanja koji pokreću kod korisnika.

Da sumiram: kada koristiti olakšanje? Stalno.

O mojoj hipotezi o olakšanju možete saznati više u mom članku, "Ironija upotrebljivosti i linearnog gibanja."

2. načelo: Pomak i odgoda

Definira odnose objekata i hijerarhije prilikom uvođenja novih elemenata i scena.

Offset & Delay je drugo od samo dva UX u principima pokreta na koje utječu Disneyeva načela animacije, u ovom slučaju iz „Slijedite kroz i preklapajuće radnje.“

Važno je, međutim, napomenuti da se implementacija, iako slična u izvedbi, razlikuje u svrsi i ishodu. Dok Disneyeva načela rezultiraju „privlačnijim animacijama“, UI načela za animaciju rezultiraju korisnijim iskustvom.

Korisnost ovog načela je u tome što on svjesno postavlja korisnika na uspjeh tako što će "korisniku" reći nešto o prirodi objekata u sučelju. Naracija u gornjoj referenci je da su gornja dva objekta sjedinjena, a donji objekt odvojen. Možda bi gornja dva objekta mogla biti neinteraktivna slika i tekst, dok je donji objekt gumb.

Još prije nego što je korisnik registrirao što su ti predmeti, dizajner joj je već rekao - pokretom - da su predmeti nekako 'odvojeni'. To je izuzetno moćno.

Zasluge: InVision

U gornjem primjeru, plutajući gumb akcije (FAB) pretvara se u navigacijske elemente zaglavlja koji se sastoje od tri gumba. Budući da se tipke vremenski međusobno "odmiču", na kraju podržavaju upotrebljivost kroz njihovu "zasebnost". Rečeno je drugačije, dizajner koristi vrijeme da kaže - čak i prije nego što korisnik registrira što su predmeti - da su predmeti odvojeni , To znači da korisniku, potpuno neovisnom od vizualnog dizajna, govori o prirodi objekata u sučelju.

Da bih vam bolje pokazao kako to radi, prikazat ću vam primjer koji probija načelo pomaka i odgode.

Zasluge: Jordi Verdu

U gornjem primjeru, statički vizualni dizajn govori nam o postojanju ikona preko pozadine. Pretpostavka je da su sve ikone međusobno odvojene i rade različite stvari. Međutim, prijedlog je u suprotnosti s tim.

Vremenski se ikone grupiraju u redove i ponašaju se kao jedan objekt. Njihovi su naslovi također grupirani u redove, a također se ponašaju kao jedan objekt. Gibanje govori korisniku nešto drugo nego ono što njezine oči vide. U ovom slučaju, možemo reći da vremensko ponašanje objekata u sučelju ne podržava upotrebljivost.

3. načelo: Roditeljstvo

Stvara prostorne i vremenske hijerarhalne odnose pri interakciji s više objekata.

Roditeljstvo je moćan princip koji 'odnosi' objekte u korisničkom sučelju. U gornjem primjeru, svojstvo 'razmjera' i 'pozicija' vrha ili 'djeteta' objekta nadređeno je svojstvu 'položaja' donjeg ili 'roditeljskog' objekta.

Roditeljstvo je povezivanje svojstava objekta s drugim svojstvima objekta. To stvara objektne odnose i hijerarhije na načine koji podržavaju upotrebljivost.

Roditeljstvo također omogućuje dizajnerima da bolje koordiniraju vremenske događaje u korisničkom sučelju, a korisnicima istovremeno priopćavaju prirodu objektnih odnosa.

Podsjetimo da svojstva objekta uključuju sljedeće - Ljestvica, Neprozirnost, položaj, rotacija, oblik, boja, vrijednost itd. Bilo koja od ovih svojstava može se povezati s bilo kojim drugim svojstvima kako bi se stvorio sinergijski trenutak u Korisničkom iskustvu.

Zasluge: Andrew J Lee, Frank Rapacciuolo

U gornjem gornjem lijevom primjeru, svojstvo 'y-osi' elementa 'face' je 'dijete' u svojstvu 'x-osa' nadređenog nadređenog kruga. Kada se okrugli element pokazivača kreće duž vodoravne osi, njegov se "dječji" element pomiče vodoravno i okomito (dok je maskiran - drugo načelo).

Rezultat toga je hijerarhalni vremenski okvir pripovijedanja koji se događa sve u isto vrijeme. Treba napomenuti da objekt 'lica' djeluje kao niz 'zaključavanja', pri čemu je na svakom broju 'lice' potpuno i djelomično vidljivo. Korisnik to doživljava bez problema, mada možemo tvrditi da u ovom primjeru postoji suptilna „korisnost varanja“.

Roditeljstvo najbolje funkcionira kao interakcija u stvarnom vremenu. Kako korisnik izravno manipulira objektima sučelja, dizajner komunicira s korisnikom - pokretom - kako su objekti povezani i odnos između njih.

Roditeljstvo se odvija u 3 oblika: 'izravno roditeljstvo' (vidi iznad dva primjera, 'odgođeno roditeljstvo' i 'obrnuto roditeljstvo', vidi dolje).

Odgođeno roditeljstvo (kredit: AgenceMe) i obrnuto roditeljstvo (kredit: AgenceMe)

Načelo 4: Transformacija

Stvara kontinuirano stanje narativnog toka kad se promijeni uslužni objekt.

Mnogo je toga već napisano o „transformaciji UX-a u principu pokreta“. Na neki je način to najočitije i najdostupljivije načelo animacije.

Transformacija je najvidljivija, uglavnom zato što se ističe. Ono što primjećujemo je gumb „pošalji“ koji mijenja oblik kako bi postao radijalna traka napretka i konačno promijenio oblik da bi postao potvrdni kvač. Privuče našu pažnju, priča priču i završava je.

Zasluge: Colin Garven

Transformacija je jednostavno prelazak korisnika kroz različita UX stanja ili "je" (kao što je ovo gumb, ovo je radijalna traka napretka, ovo je kvačica) što na kraju rezultira željenim ishodom. Korisnik je kroz te funkcionalne prostore uvučen do krajnjeg odredišta.

Transformacija ima za posljedicu ‘zbližavanje’ kognitivno razdvojenih ključnih trenutaka u korisničkom iskustvu u bešavni i kontinuirani niz događaja. Ova bešavnost rezultira boljom svjesnošću korisnika, zadržavanjem i ponovnim praćenjem.

Načelo 5: Promjena vrijednosti

Stvara dinamičan i kontinuiran narativni odnos kada se mijenja subjekt vrijednosti.

Tekstualni objekti sučelja, to jest brojevi i tekst mogu mijenjati svoje vrijednosti. Ovo je jedan od tih "neuhvatljivih očiglednih" koncepata.

Promjene teksta i broja toliko su česte da nas prolaze mimo nas, a da mi njima ne razlikujemo i strogost da procijenimo svoju ulogu u podržavanju upotrebljivosti.

Pa što korisnik doživljava kada se vrijednosti mijenjaju? U korisničkim iskustvima, 12 UX-ova u principu pokreta prilika su za podršku upotrebljivosti. Tri su prilike da se korisnik poveže sa stvarnošću koja stoji iza podataka, koncepta agencije i dinamičke prirode samih vrijednosti.

Pogledajmo primjer korisničke nadzorne ploče.

Kada se objekti sučelja na temelju vrijednosti učitavaju bez „promjene vrijednosti“, ono što korisniku prenosi je da su brojevi statički objekti. Oni su poput obojenih znakova koji prikazuju ograničenje brzine od 55 mph.

Brojevi i vrijednosti su prikazi stvari koje se događaju u stvarnosti. Ta stvarnost može biti vrijeme, prihod, rezultati igre, poslovna metrika, praćenje fitnessa, itd. Ono što razlikujemo kretanjem jest da je 'vrijednost subjekta' dinamična i da vrijednosti odražavaju nešto iz tog dinamičkog skupa vrijednosti.

Ne samo da se taj odnos gubi sa statičkim objektima koji se sastoje vizualno od vrijednosti, već se gubi i druga dublja prilika.

Kad upotrijebimo prikaze dinamičkih sustava u obliku vrijednosti temeljenih na pokretu, aktivira svojevrsnu "neurofeedback". Korisnici, shvatanje dinamičke prirode njihovih podataka, sada mogu uzrokovati promjene tih vrijednosti i oni mogu biti agenti. Kad su vrijednosti statičke, manje je povezanosti sa stvarnošću koja stoji iza vrijednosti, a korisnici gube agenciju.

Zasluge: Barthelemy Chalvet, Gal Shir, nepoznato

Princip promjene vrijednosti može se dogoditi i u stvarnim i izvan stvarnih događaja. U stvarnim događajima korisnik interaktivno djeluje s objektima za promjenu vrijednosti. U događajima koji nisu u stvarnom vremenu, kao što su utovarivači i prijelazi, vrijednosti se mijenjaju bez korisničkog unosa kako bi se odražavala dinamična pripovijest.

Načelo 6: Maskiranje

Stvara kontinuitet u sučelju objekta ili skupine objekata kada je korisnost određena kojim se dijelom objekta ili skupine otkriva ili skriva.

Čin maskiranja pitajući može se smatrati odnosom oblika objekta i njegove korisnosti.

Budući da su dizajneri upoznati s "maskiranjem" u kontekstu statičkog dizajna, nameće nam se razlika u UX-u u principu pokreta "Maskiranje" kako se pojavljuje u vremenu, kao čin, a ne kao država.

Kroz vremensku uporabu područja otkrivanja i prikrivanja objekta, uslužni prijelazi neprekidno i neprimjetno. To također ima za posljedicu očuvanje narativnog toka.

Zasluge: Anish Chandran

U gornjem primjeru, slika zaglavlja mijenja ograničavajući oblik i položaj, ali ne i sadržaj, i postaje album. To rezultira promjenom onog što je objekt, uz očuvanje sadržaja unutar maske - prilično uredan trik. To se događa u nerealnom vremenu, kao prijelaz, koji se aktivira nakon što korisnik poduzme neku akciju.

Imajte na umu da se načela animacije UI-ja odvijaju vremenski i podržavaju upotrebljivost kroz kontinuitet, pripovijedanje, odnos i očekivanje. U gornjem referatu, iako sam objekt ostaje nepromijenjen, on također ima granicu i mjesto, a ova dva faktora određuju što je objekt.

Načelo 7: prekrivanje

Stvara prostorni odnos pripovijedanja i objekta u vizualnom ravnini kada slojeviti objekti ovise o lokaciji.

Prekrivanje podržava upotrebljivost omogućujući korisnicima da koriste svojstva ravninskog uređenja kako bi prevladali nedostatak neprostornih hijerarhija.

Kako bi malo sletio na ravninu, Overlay omogućava dizajnerima da koriste pokret za komuniciranje objekata ovisnih o lokaciji koji postoje iza ili ispred drugih ljudi koji nisu u 3D prostoru.

Zasluge: Bady, Javi Pérez

U primjeru na lijevoj strani, prvi plan ide prema desnoj strani da bi se otkrilo mjesto dodatnih pozadinskih objekata. U primjeru s desne strane cjelokupna scena klizi prema dolje radi otkrivanja dodatnog sadržaja i opcija (dok pomoću Offset & Delay Princip komunicirate o individualnosti fotoobjekata).

U određenoj mjeri, kao dizajneri, ideja 'slojeva' je tako očita da bi mogla biti razumljiva. Dizajniramo sa slojevima, a koncept slojeva je duboko internaliziran. Međutim, moramo biti oprezni da razlikujemo postupak korištenja stihova.

Kao dizajneri koji su kontinuirano uključeni u proces izrade, intimno smo upoznati sa svim komadima predmeta (uključujući skrivene komade) koje dizajniramo. Međutim, kao korisnik, ti ​​nevidljivi dijelovi su po definiciji i praksi skriveni i vizualno i kognitivno.

Princip prekrivanja omogućava dizajnerima da komuniciraju odnos između slojeva smještenih na osi i na taj način promoviraju prostornu orijentaciju svojim korisnicima.

Načelo 8: Kloniranje

Stvara kontinuitet, odnos i pripovijedanje, kada novi predmeti nastaju i odlaze.

Kad se stvore novi objekti u trenutnim scenama (i iz trenutnih objekata), važno je narativno uzeti u obzir njihov izgled. U ovom manifestu snažno tvrdim za važnost stvaranja narativnog okvira za podrijetlo i odlazak predmeta. Jednostavno neprozirnost ne postiže ovaj rezultat. Maskiranje, kloniranje i dimenzionalnost su tri pristupa koji se zasnivaju na upotrebljivosti kako bi se proizvele snažne naracije.

Zasluge: Jakub Antalík, Jakub Antalík, nepoznat

U gornja tri primjera, novi se objekti stvaraju od postojećih herojskih objekata tijekom vremena kada je pažnja korisnika usmjerena na te objekte. Ovaj dvostruki pristup - usmjeravanje pozornosti, a zatim vođenje oka kroz stvaranje kloniranog novog predmeta - ima snažan učinak komuniciranja jasnog i nedvosmislenog lanca događaja: ta radnja „x“ ima rezultat „y“ stvaranje novih dječjih objekata.

Načelo 9: opskulacija

Omogućuje korisnicima da se prostorno orijentiraju u odnosu na predmete ili prizore koji nisu u primarnoj vizualnoj hijerarhiji.

Slično kao UX u principima kretanja u maskiranju, opskuracija živi i statički i vremenski.

Ovo može biti zbunjujuće za dizajnere koji nemaju iskustva s vremenskim razmišljanjem - tj. Trenucima između trenutaka. Dizajneri obično dizajniraju zaslon na zaslon ili postavljaju zadatak. Mislite na opskuru kao na čin zatamnjenosti, a ne na stanje zatamnjenosti. Statički dizajn predstavlja stanje prikrivanja. Predstavljamo vrijeme daje nam se čin zatamnjenja objekta.

Zasluge: Virgil Pana, Apple

Iz gornja dva primjera možemo vidjeti da je zamračenje, koje izgleda poput prozirnih predmeta ili slojeva, također vremenska interakcija koja uključuje više svojstava u vremenu.

Različite uobičajene tehnike uključuju efekte zamagljivanja i podučavanje cjelokupne transparentnosti objekta. Korisnik postaje svjestan dodatnog ne-primarnog konteksta u kojem djeluje - da postoji neki drugi svijet, koji je „iza“ njezine hijerarhije primarnog objekta.

Obskulacija omogućuje dizajnerima da nadoknade jedno jedinstveno vidno polje ili "objektivni pogled" u korisničkom iskustvu.

Načelo 10: Paraleksa

Stvara prostornu hijerarhiju u vizualnoj ravnici kada se korisnici kreću.

"Parallax", kao UX u načelu pokreta, opisuje različite objekte sučelja koji se kreću različitim brzinama.

Parallax omogućava korisniku da se usredotoči na primarne radnje i sadržaj uz održavanje integriteta dizajna. Elementi pozadine perceptivno i kognitivno se prikazuju za korisnika tijekom Parallax događaja. Dizajneri mogu koristiti Parallax za odvajanje neposrednih sadržaja od ambijentalnih ili pratećih sadržaja.

Zasluge: Austin Neill, Michael Sevilla

Učinak koji to ima na korisnika je da se jasno definiraju tijekom trajanja interakcije, različiti odnosi objekata. Predmeti prednjeg plana ili objekti koji se kreću „brže“ korisniku se prikazuju kao „bliže.“ Isto tako, pozadinski predmeti ili objekti koji se kreću „sporije“ doživljavaju se kao „dalje“.

Dizajneri mogu stvoriti ove odnose pomoću samog vremena kako bi korisniku rekli koji su objekti u sučelju veći prioritet. Stoga ima smisla gurati pozadinske ili ne interaktivne elemente dalje 'natrag'.

Korisnik ne samo da doživljava objekte sučelja kao sada već hijerarhiju koja je veća od one utvrđene u vizualnom dizajnu, već tu hijerarhiju može iskoristiti i nakon što korisnik shvati prirodu korisničkog iskustva prije nego što svjesno osmisli dizajn / sadržaj.

11. načelo: Dimenzionalnost

Pruža prostorni narativni okvir kada novi predmeti nastaju i odlaze.

Kritično za korisničko iskustvo je fenomen kontinuiteta kao i osjećaj lokacije.

Dimenzionalnost pruža moćan način za prevladavanje nelogičnosti korisničkog iskustva ravnice.

Ljudi su izrazito vješti u korištenju prostornih okvira za navigaciju kako u stvarnom svijetu, tako i u digitalnim iskustvima. Pružanje prostornog podrijetla i reference odlaska pomaže u jačanju mentalnih modela mjesta na kojima se korisnici nalaze u UX-u.

Uz to, Načelo dimenzionalnosti prevladava slojeviti paradoks u vizualnom ravnini gdje objekti koji nemaju dubinu postoje na istoj ravnini, ali se javljaju kao "ispred" ili "iza" drugih objekata.

Dimenzionalnost se predstavlja na tri načina - Origami dimenzionalnost, plutajuća dimenzija i dimenzija objekta.

Origami dimenzionalnost može se zamisliti u smislu "savijanja" ili "zglobnih" trodimenzionalnih sučelja.

Primjeri dimenzije Origamija (kredit: Eddie Lobanovskiy, Virgil Pana)

Budući da je više objekata kombinirano u „origami“ strukture, za skrivene objekte još uvijek se može reći da „postoje“, prostorno iako nisu vidljivi. Ovo učinkovito čini Korisničko iskustvo kao kontinuirani prostorni događaj kojim korisnik navigira i stvara operativni kontekst, kako u samom interakcijskom modelu, tako i u vremenskom ponašanju samih objekata sučelja.

Plutajuća dimenzija objektima sučelja daje prostorno podrijetlo i odlazak, čineći modele interakcije intuitivnim i visoko narativnim.

Primjer plutajuće dimenzije (kredit: Virgil Pana)

U gornjem primjeru, dimenzionalnost se postiže upotrebom 3D 'kartica'. To pruža snažan narativni okvir koji podržava vizualni dizajn. Narativa se proširuje "prebacivanjem" karata za pristup dodatnom sadržaju i interaktivnosti. Dimenzionalnost može biti moćan način uvođenja novih elemenata na načine koji smanjuju naglost.

Dimenzija objekta rezultira dimenzionalnim objektima s pravom dubinom i oblikom.

Primjeri dimenzije objekta (kredit: Issara Willenskoer, Creativedash)

Ovdje je višestruki 2D sloj raspoređen u 3D prostoru radi stvaranja stvarnih dimenzionalnih objekata. Njihova se dimenzionalnost otkriva u prijelaznim trenucima stvarnog i izvan stvarnog vremena. Korisnost objektne dimenzije je u tome što korisnici razvijaju oštru svijest o korisnosti objekta na temelju nevidljivih prostornih lokacija.

12. načelo: Dolly & Zoom

Čuva kontinuitet i prostornu narativnost tijekom navigacije sučeljima i prostorima.

Dolly i Zoom su filmski pojmovi koji se odnose na kretanje objekata relevantnih za kameru, a veličina same slike u kadru glatko se mijenja od dugog kadra do velikog kadra (ili obrnuto).

U određenim je kontekstima nemoguće odrediti povećava li se objekt, ide li prema kameri u 3D prostoru ili se kamera kreće prema objektu u 3D prostoru (vidi dolje reference). Donja tri primjera ilustriraju moguće scenarije.

Je li prelijevanje sloja, zumiranje ili se pomiče kamera?

Kao takav, prikladno je tretirati slučajeve "kočenja" i "zumiranja" kao zasebne, ali slične jer uključuju kontinuirane elementarne i scenske transformacije i udovoljavaju zahtjevima UX-a u Načelima pokreta: podržavaju upotrebljivost kroz kretanje.

Dvije slike s lijeve strane su dolling, dok se slika na desnoj strani zumira

Dolly je filmski pojam i primjenjuje se na kretanje kamere bilo prema objektu ili prema njemu (također se odnosi i na horizontalno kretanje "praćenja", ali je manje relevantno u kontekstu upotrebljivosti).

Zasluge: Apple

Prostorno u UX-u, ovaj se pokret može odnositi ili na promjenu perspektive gledatelja ili na perspektivu koja ostaje statična dok objekt mijenja položaj. Dolly princip podržava upotrebljivost kroz kontinuitet i narativ, neprimjetno prelazeći između objekata i odredišta sučelja. Dolly također može uključiti načelo dimenzionalnosti, što rezultira prostornijim doživljajem, dubinom i priopćavanjem korisniku dodatna područja ili sadržaj koji je "ispred" ili "iza" trenutnog prikaza.

Zumiranje se odnosi na događaje u kojima se ni perspektiva ni objekt ne kreću prostorno, već se sam objekt skalira (ili se naš pogled na njega smanjuje, što rezultira povećanjem slike). To gledatelju priopćuje da su dodatni objekti sučelja 'unutar' drugih objekata ili scena.

Zasluge: Apple

To omogućava bešavne prijelaze - i u stvarnom i u stvarnom vremenu - koji podržavaju upotrebljivost. Ova neprimjerenost korištena u principu Dolly & Zoom prilično je snažna kada je u pitanju stvaranje prostornih mentalnih modela.

Ako ste uspjeli do sada, čestitam! To je bila zvijer manifesta. Nadam se da su svi gif-ovi učitani za vas i nisu ubili vaš preglednik. Također se nadam da ste dobili neke vrijednosti za sebe i neke nove alate i utjecaje u svojim interaktivnim projektima.

Potičem vas da saznate više o tome kako možete započeti koristiti pokret kao dizajnerski alat za podršku upotrebljivosti.

Završni plug - ako ste zainteresirani da vodim radionicu pokreta i upotrebljivosti za vaš tim, kliknite ovdje za više informacija: https://uxinmotion.net/creating-usability-with-motion-workshop/

Ovaj manifest ne bi bio moguć bez velikodušnog i strpljivog doprinosa i stalnih povratnih informacija Kateryne Sitner iz Amazona - hvala! Posebna zahvala Alexu Changu za njegov brainstorming i inzistiranje da sletim u avion, Bryan Mamaril u Microsoftu za njegovo orao, Jeremey Hanson za bilješke o uređivanju, Eric Braff za bezobrazni guru pokreta UI, on je Rob Girling u Artefactu za njegov Vjera u mene prije svih tih godina, Matt Silverman za svoj nadahnjujući razgovor o pokreta UI na konferenciji After Effects, Bradley Munkowitz zbog toga što je sjajan cimer i koji me inspirirao za korisničko sučelje, Pasquale D'Silva za svoje nevjerojatne članke o pokretu, Rebecca Ussai Henderson za njezin sjajan članak o UI koreografiji, Adrian Zumbrunnen za svoje fantastične doprinose temi korisničkog sučelja i pokreta, Wayne Greenfield i Christian Brodin zbog toga što su moja braća mastermind i uvijek me guraju na razinu, i svih vas tisuća UI Animatora koji držite izvijajući nadahnjujuće gifs.