grensesnitt i bevegelse
TRANSCRIPT
![Page 1: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/1.jpg)
Jon Olav Eikenes, stipendiat, Arkitektur- og designhøgskolen i Oslo
Grensesnitt i bevegelse
- nye muligheter og utfordringer
![Page 2: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/2.jpg)
Multi-touch table, studenprosjekt 2006
![Page 3: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/3.jpg)
ABB sommerprosjekt (2006)
![Page 4: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/4.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/5.jpg)
design vs. forsking
![Page 6: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/6.jpg)
objekt
aktør
kontekst
prosess
Dorst, Kees (2008) ‘Design research: a revolution-waiting-to-happen’
![Page 7: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/7.jpg)
grensesnitt
![Page 8: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/9.jpg)
Grensesnitt i HCI
person
grensesnitt
datamaskin
Laurel, Brenda (1991) ‘Computers as Theatre’
![Page 10: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/10.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/11.jpg)
![Page 12: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/12.jpg)
navigation animation
![Page 13: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/13.jpg)
analyse
![Page 14: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/14.jpg)
‘Spatial manipulation’
‘Temporal navigation’
‘Motional transformation’
Space:
Time:
Motion:
![Page 15: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/15.jpg)
http://www.leoburnett.ca
![Page 16: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/16.jpg)
![Page 17: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/17.jpg)
http://www.cooliris.com/
![Page 18: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/18.jpg)
http://www.doodlebuzz.com/
![Page 19: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/19.jpg)
brukervennlighet?
![Page 20: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/20.jpg)
“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](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/21.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/22.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/23.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/24.jpg)
‘research by design’
![Page 25: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/25.jpg)
![Page 26: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/26.jpg)
![Page 27: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/27.jpg)
![Page 28: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/28.jpg)
designprosess
![Page 29: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/29.jpg)
![Page 30: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/30.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/31.jpg)
![Page 32: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/32.jpg)
Apple patent (2002): “ornamental design for a user interface for computer display”
![Page 33: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/33.jpg)
Papirprototyping
http://www.iallenkelhet.no/papp-prototyping-korleis-gjer-du-det
http://nettskriving.no/-/bulletin/show/85463_straalende-verktoey-for-prototyping
http://www.flickr.com/photos/gcbb/2246324069/
![Page 34: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/34.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/35.jpg)
Animate in Flash / After Effects / animert GIF etc.
![Page 36: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/36.jpg)
PowerPoint / Keynote
![Page 37: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/37.jpg)
Eksisterande løysingar / implementering
![Page 38: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/38.jpg)
Eksisterande løysingar / implementering
![Page 39: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/39.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/40.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/41.jpg)
Vidare arbeid:
‘Social navimation’
Brukarinvolvering
![Page 42: Grensesnitt i bevegelse](https://reader033.vdocuments.mx/reader033/viewer/2022042716/55c27170bb61ebf4618b4582/html5/thumbnails/42.jpg)
www.navimationresearch.net
Takk!
Jon Olav Eikenes 11.11.08