grensesnitt i bevegelse

42
Jon Olav Eikenes, stipendiat, Arkitektur- og designhøgskolen i Oslo Grensesnitt i bevegelse - nye muligheter og utfordringer

Upload: jon-olav-eikenes

Post on 06-Aug-2015

982 views

Category:

Design


1 download

TRANSCRIPT

Page 1: Grensesnitt i bevegelse

Jon Olav Eikenes, stipendiat, Arkitektur- og designhøgskolen i Oslo

Grensesnitt i bevegelse

- nye muligheter og utfordringer

Page 2: Grensesnitt i bevegelse

Multi-touch table, studenprosjekt 2006

Page 3: Grensesnitt i bevegelse

ABB sommerprosjekt (2006)

Page 4: Grensesnitt i bevegelse

Hovedmål: “å gjøre norske teknologi- og tjenesteleverandører bedre i stand til å utvikle nye produkter og tjenester for sosiale nettverk, der brukere deler og anvender audiovisuelt innhold”

Page 5: Grensesnitt i bevegelse

design vs. forsking

Page 6: Grensesnitt i bevegelse

objekt

aktør

kontekst

prosess

Dorst, Kees (2008) ‘Design research: a revolution-waiting-to-happen’

Page 7: Grensesnitt i bevegelse

grensesnitt

Page 8: Grensesnitt i bevegelse

Teknologisk utvikling

Kulturell utvikling

Rich Internet Applications

Adobe Flash

ActionScript 3

Adobe Air

Adobe Flex

Ajax

JavaScript

Microsoft Silverlight

streaming

embedding

widgets mashups

RSS

Apple Core Animation

‘Moore's Law’'the long tail

opplevelsesøkonomi

information overloadmobilitet

ubiquitous computing

nisjemarked

digitaliseringverktøy -> underholdning

procumers

breiband

Nye muligheter

Page 9: Grensesnitt i bevegelse

Grensesnitt i HCI

person

grensesnitt

datamaskin

Laurel, Brenda (1991) ‘Computers as Theatre’

Page 10: Grensesnitt i bevegelse

Grensesnitt som medium

TV

radio

mobiltelefonarPCar

film

• Fokus på kommunikasjon, meining og opplevelse

• Multimodale grensesnitt: blanding av medietypar

• Marshall McLuhan: “the medium is the message”

• Manovich, L. (2001) ‘The Language of New Media’

magasin

aviserplakatar

Page 11: Grensesnitt i bevegelse
Page 12: Grensesnitt i bevegelse

navigation animation

Page 13: Grensesnitt i bevegelse

analyse

Page 14: Grensesnitt i bevegelse

‘Spatial manipulation’

‘Temporal navigation’

‘Motional transformation’

Space:

Time:

Motion:

Page 16: Grensesnitt i bevegelse
Page 19: Grensesnitt i bevegelse

brukervennlighet?

Page 20: Grensesnitt i bevegelse

“Moving images have an overpowering effect on the human peripheral vision ... Unconstrained use of multimedia results in user interfaces that confuse users and make it harder for them to understand the information.”

Jakob Nielsen: “Guidelines for Multimedia on the Web”

Page 21: Grensesnitt i bevegelse

Eye Candy and Animations

“Although it’s nice to have eye candy, if an effect does not provide a real benefit to the user, it will eventually become irritating. So when you are putting animations into your application, make sure there is a valid user need being met. Eye candy that meets a need will be shown off; eye candy that is simply flash will eventually be ignored or turned off.” (p. 29)

Page 22: Grensesnitt i bevegelse

http://www.iallenkelhet.no/brukervennlighet-vs-grafisk-design-%E2%80%93-pa-tide-a-legge-debatten-d%C3%B8d

Brukervennlighet vs. grafisk design

– på tide å legge debatten død?

(Kjell-Morten Bratsberg Thorsen, NetLife Research)

Page 23: Grensesnitt i bevegelse

http://www.iallenkelhet.no/brukervennlighet-vs-grafisk-design-%E2%80%93-pa-tide-a-legge-debatten-d%C3%B8d

Jesse James Garrett’s ”Elements of User Experience”

Page 24: Grensesnitt i bevegelse

‘research by design’

Page 25: Grensesnitt i bevegelse
Page 26: Grensesnitt i bevegelse
Page 27: Grensesnitt i bevegelse
Page 28: Grensesnitt i bevegelse

designprosess

Page 29: Grensesnitt i bevegelse
Page 30: Grensesnitt i bevegelse

http://www.cinematicinterface.com/

• Draw more maps

• Draw in-between states

• Draw with arrows

• Choreograph with your hands

• Use sound effects

• Watch real world motion

• Create motion studies

• Animate your comps

‘Inject Motion into the Design Process’

Page 31: Grensesnitt i bevegelse
Page 32: Grensesnitt i bevegelse

Apple patent (2002): “ornamental design for a user interface for computer display”

Page 34: Grensesnitt i bevegelse

Solidity• Squash and Stretch• Motion blur• Arrivals and departures

Exaggeration• Anticipation• Follow through• Secondary action• Clear staging

Reinforcement• Slow In and Out• Arcs• Follow through and overlapping action

Timing and motion• Straight ahead action or pose-to-pose action• Appeal

B. Chang and D. Ungar: “Animation: From Cartoons to the User Interface”G.R.S. Weir and S. Heeps: “Getting the Message Across: Ten Principles for Web Animation”

Page 35: Grensesnitt i bevegelse

Animate in Flash / After Effects / animert GIF etc.

Page 36: Grensesnitt i bevegelse

PowerPoint / Keynote

Page 38: Grensesnitt i bevegelse

Eksisterande løysingar / implementering

Page 39: Grensesnitt i bevegelse

Verba, David (2007) "Sketching in Code: Using Prototypes to Visualize Interactions". Adaptive Path UXWeek 2007.

Skisse i Processing, av Christer Carlsson, AHO 2008.http://www.carlssondesign.no/ti08/2008/03/19/flipping-tiles/

Skisse i kode

http://www.alistapart.com/articles/sketchingincode

Page 40: Grensesnitt i bevegelse

Fordelar • Nye potensiale for kommunikasjon og formidling

• Nye former for interaksjon og navigering

• Bygge og forsterke ‘mentale modellar’

• Vise oversikt og relasjonar

• Nye visuelle uttrykk + wow-effekt

• Underhalde og skape stemning

• Skape flyt

Utfordringar • Tidkrevande og teknisk utfordrande

• Nye interaksjonsmønster

• Ikkje alltid relevant

Page 41: Grensesnitt i bevegelse

Vidare arbeid:

‘Social navimation’

Brukarinvolvering

Page 42: Grensesnitt i bevegelse

www.navimationresearch.net

Takk!

Jon Olav Eikenes 11.11.08

[email protected]