UX som beveger

En gang i et land langt borte, for lenge lenge siden – forsto jeg at jeg gladelig kunne bruke resten av livet på å jobbe i krysningspunktet mellom grafisk design og animasjon.  Med andre ord: Jeg begynte å jobbe med motion-design

Aller mest hadde jeg lyst til å lage introsekvenser for spillefilm - gjerne for Pedro Almodovar. Eller for James Bond. Slik gikk det ikke helt - i stedet lagde jeg en del musikkvideoer, allehånde informasjonsfilmer, dokumentar, eksperimentell kortfilm og etterhvert reklamefilm. Alle disse filmprosjektene har hatt elementer av animasjon i seg, med hele bøtteballetten av teknikker: stop motion, 3D, kinetisk typografi, leireanimasjon, papirbretting eller håndtegning. I 2005 dro jeg til London og Central St. Martins der jeg brukte to år på å finne ut om det var mulig å lage animert 3D-film helt uten budsjett eller et kobbel assistenter og medhjelpere. Det var mulig.

Det som er mellom
Samtidig, eller parallelt - har vi grafiske designere gått skoa av oss for å henge med på hvordan nettsider og andre digitale løsninger best skal utformes. Vi har gått fra å skisse nettsider med papir og blyant via wireframes til prototyping i Sketch og andre mer eller mindre gode og heldigitale verktøy.

Jeg har alltid syntes det har vært frustrerende å lage slike skisser, blant annet fordi de ikke viser det som skjer mellom handlinger (eller mellom to states). Når jeg lager storyboards for en animert film, eller film i det hele tatt - så tar jeg i bruk et eget språk som viser bevegelse. Det språket består i høy grad av piler. Bøyde piler, stiplede piler, tjukke piler og bittesmå piler. Her zoomes det inn, der beveger kamera seg sideveis - og ooops! der er det noen som hopper ut av et vindu. Film erbevegelse, og i animasjon er det utrolig viktig å beskrive hva som skjer før, under og etter en handling - man må overdrive for å skape den ønskede effekten. Helt sentralt er de 12 Disney-prinsippene. Det blir for mye å gå gjennom disse prinsippene i detalj, men her er en liten snutt hvor alt blir forklart på en forbilledlig måte. 

 

I tillegg komponerer jeg bilder slik at publikums blikk ledes dit jeg vil at det skal gå. Da bruker jeg gjerne bokser på storyboardet for å vise hvor fokuset skal være, og kanskje hvor det skal bevege seg videre. Det er en herlig svartekunst. Faktisk bruker jeg tryllekunsterens hovedprinsipp "Sleight of Hand" hele tiden. Som barn hadde jeg en bok om trylling der det var mye snakk om "palmering", altså om hvordan du skjuler en mynt i hånda ved å klemme den fast i håndflata. Samme hvor mye jeg trente fikk jeg det ikke til. Fordi - det sto nemlig ikke i boka (utgitt 1957) at det er langt vanskeligere for en barnehånd enn en voksenhånd å skjule et kronestykke.

Men i alle fall - det viktigste for en tryllekunstner er å kunne styre blikket til et godtroende publikum. Hvis du veiver med et rosa tørkle er det ingen som legger merke til hva du gjør med den andre hånda. Sånn kompetanse kan motion-designere og animatører gjøre god nytte av.

giphy-magiker-oktan-oslo

Alle som har hatt en iphone i hendene vet at animasjon har mye med brukeropplevelse å gjøre. Hver gang du trykker på home-knappen setter du i gang en liten animasjon som slynger ikonene dine rundt på en feiende frisk måte. Men hvordan skal man jobbe for å lage tilsvarende opplevelser på nett? Det har vært et åpent spørsmål for meg. Derfor ble jeg så glad da jeg oppdaget Sarah Drasner. Hennes hjertesak er UX og animasjon. Hun er helt fantastisk god til å tegne, hun koder fletta av de fleste og er i stand til å tenke helt nytt om hvordan brukeropplevelse skal lages. Fra nå av.

Sarah snakker om koreografi - at alle elementer på siden er som karakterer på en scene. Inn i UX tar hun med seg metaforer og prinsipper hentet fra scenekunst, film og ikke minst animasjon.

conect-dots-oktan-oslo

Så hva er det bevegelse tilfører brukeropplevelsen? Sarah sier at det viktigste i UX er å ha empati med brukeren.

  • Hva får brukeren til å føle at han/hun er i trygge hender?
  • Hva kan jeg gjøre med designet for å være sikker på at jeg har brukerens hele og fulle oppmerksomhet?

Sarah bruker ofte som eksempel kontaktskjemaet på nettsider, som ofte er helt avgjørende for om virksomheten tjener penger eller ikke. Å gi brukeren en tydelig respons på at nå er alt gjort alt riktig - understreket med små bevegelser (for eksempel inspirert av origami) - fargebruk (grønt) gode ordvalg (success!) Det å bruke tid og ressurser på å lage en kontaktside som virkelig funker, og som gir brukeren en varm, positiv opplevelse skulle man tro var helt forretningskritisk - men altfor ofte går det fort i svingene, og man velger standardløsninger. Sarah vil at kontaktskjemaet skal være som en skuespiller på en scene. Noe man kan forholde seg til, engasjere seg i, og glede seg over.

Jeg tror hun har rett. Hvis du synes dette høres spennende ut vil jeg anbefale at du setter av en halvtime og lar Sarah Drasner kjøre showet sitt. Du kommer ikke til å bli dummere, i hvert fall. Det er verdt å huske på at i denne sammenhengen snakker hun til frontend-utviklere. De av oss som ikke er hardbarka kodere kan falle av, men hold ut - det er mye her som er relevant for designere. Som en liten bonus snakker hun også (mot slutten) om infografikk, og om årsaken til at vi ikke ser så mye statisk infografikk lenger - nemlig mobil nettbruk. Statisk infografikk er jo alt annet enn mobilvennlig. Løsningen? Responsiv grafikk bygd i kode og SVG. Selvfølgelig viser hun noen griselekre ting hun har lagd sjøl.

 

Opprettet 14.08.2018, oppdatert 12.09.2018

Få økt effekt ut av nettsiden din med disse 3 tipsene

  Vi ser ofte nettsider som har godt innhold og som tiltrekker seg trafikk. Selv om disse sidene tilsynelatende fungerer godt så gir de lite tilbake i form av nye kontakter eller handel.

Les mer
Google I/O 2018

Googles årlige utviklerkonferanse, Google I/O, gikk av stabelen i forrige uke. I år kunne de ha byttet ut I/O med AI. Nyhetene rundt Artificial Intelligence (kunstig intelligens) sto i kø. 

Les mer
O_oktan_neg

VIL DU VITE MER?

KONTAKT OSS