Presentation at Bouvet, Oslo, November 11 2008. In Norwegian.

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

2. Multi-touch table, studenprosjekt 2006

3. ABB sommerprosjekt (2006)

4. 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”

5. design vs. forsking

6. objekt
aktør
kontekst
prosess
Dorst, Kees (2008) ‘Design research: a revolution-waiting-to-happen’

7. grensesnitt

8. Nye muligheter
Rich Internet Applications opplevelsesøkonomi
widgets mashups verktøy -> underholdning
‘Moore's Law’ digitalisering
'the long tail
Teknologisk Kulturell
embedding
RSS
breiband nisjemarked
Ajax
utvikling streaming
utvikling procumers
Adobe Flex Adobe Flash mobilitet
JavaScript
ActionScript 3 information overload
Microsoft Silverlight
ubiquitous computing
Apple Core Animation
Adobe Air

9. Grensesnitt i HCI
person datamaskin
grensesnitt
Laurel, Brenda (1991) ‘Computers as Theatre’

10. Grensesnitt som medium
film magasin
radio
plakatar aviser
TV
PCar mobiltelefonar
• 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’

12. navigation animation

13. analyse

14. Space: ‘Spatial manipulation’
Time: ‘Temporal navigation’
Motion: ‘Motional transformation’

15. http://www.leoburnett.ca

17. http://www.cooliris.com/

18. http://www.doodlebuzz.com/

19. brukervennlighet?

20. “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”

21. 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)

22. Brukervennlighet vs. grafisk design
– på tide å legge debatten død?
(Kjell-Morten Bratsberg Thorsen, NetLife Research)
http://www.iallenkelhet.no/brukervennlighet-vs-grafisk-design-%E2%80%93-pa-tide-a-legge-debatten-d%C3%B8d

23. Jesse James Garrett’s ”Elements of User Experience”
http://www.iallenkelhet.no/brukervennlighet-vs-grafisk-design-%E2%80%93-pa-tide-a-legge-debatten-d%C3%B8d

24. ‘research by design’

28. designprosess

30. ‘Inject Motion into the Design Process’
• 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
http://www.cinematicinterface.com/

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

33. Papirprototyping
http://www.flickr.com/photos/gcbb/2246324069/
http://www.iallenkelhet.no/papp-prototyping-korleis-gjer-du-det
http://nettskriving.no/-/bulletin/show/85463_straalende-verktoey-for-prototyping

34. 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”

35. Animate in Flash / After Effects / animert GIF etc.

36. PowerPoint / Keynote

37. Eksisterande løysingar / implementering

38. Eksisterande løysingar / implementering

39. Skisse i kode
Skisse i Processing, av Christer Carlsson, AHO 2008.
http://www.carlssondesign.no/ti08/2008/03/19/flipping-tiles/
http://www.alistapart.com/articles/sketchingincode
Verba, David (2007) quot;Sketching in Code: Using Prototypes to Visualize Interactionsquot;. Adaptive Path UXWeek 2007.

40. 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

41. Vidare arbeid:
‘Social navimation’
Brukarinvolvering

42. Takk!
Jon Olav Eikenes 11.11.08
jonolav.eikenes@gmail.com
www.navimationresearch.net