SlideShare a Scribd company logo
Introduksjon til
interaktive medier.
Hello.
Kjartan Michalsen
mail: kjartan@liksom.no
Mobil: 40454554
twit: @liksom
Hva interaksjonsdesign?
Interaktivitet - interaksjon
Respons til menneskelig fysisk manipulering som
berøring, bevegelse, kroppsspråk, lyd eller andre
endringer i fysiologiske status.
Kjartan
Interaksjonsdesigner
Nye Media
Hva interaksjonsdesign?
”When we use the concept of 'interactive media' exclusively in relation to
computer-based media, there is the danger that we will interpret 'interaction'
literally, equating it with physical interaction between a user and a media
object (pressing a button, choosing a link, moving the body), at the expense
of psychological interaction. The psychological processes of filling-in,
hypothesis formation, recall, and identification, which are required
for us to comprehend any text or image at all, are mistakenly identified with
an objectively existing structure of interactive links"
(Lev Manovich:57:2001)
Jammen, hva ER
interaksjonsdesign?
Begrensninger

•
•
•
•

Fysiske begrensninger
Semantiske begrensninger
Logiske begrensninger
Kulturelle begrensninger

Funksjoner

Tilbydelsene
(Affordances)

Muligheter
Nielsens 9 heuristikker

http://www.nngroup.com/articles/ten-usability-heuristics/
1. Systemstatus skal vises - visibility
Systemet skal alltid holde bruker informert om hva som
skjer gjennom passende feedback innen rimelig tid.
2. Match mellom systemet og den virkelige verden
Systemet bør snakke brukers språk, med ord, fraser og
konsepter som er kjent for bruker.
Systemet bør følge den virkelige verdens konvensjoner,
og la informasjonen komme i en naturlig, logisk
rekkefølge.
3. Brukerkontroll og frihet
Brukere kan gjøre feil, og må lett kunne avbryte og finne
veien tilbake til utgangspunktet.
’Angre’ og ’Gjenta’-funksjonene må støttes
4. Konsistens og standarder
Brukere burde ikke måtte lure på om forskjellige ord og
handlinger skal bety det samme.
Plattformkonvensjoner bør følges.
5. Forebygge feil
Eliminer så godt det lar seg gjøre brukers mulighet til å
gjøre feil gjennom et godt design.
Forklarende feilmeldinger, bekreftelsesdialogbokser.
6. Gjenkjennelse fremfor tilbakekalling
Minimer brukers bruk av minnet – gjør objekter,
handlinger, og valg synlige. Bruker skal slippe å måtte
huske informasjon fra en del av en dialog til neste.
Instruksjoner for bruk av programmet bør være synlig
eller lett tilgjengelig så ofte som mulig.
7. Fleksibilitet og efficiency ved bruk
Akseleratorer som ikke synes for den vanlige bruker kan
fremskynde interaksjonsprosessen for ekspertbrukere –
slik at systemet både støtter uerfarne og erfarne brukere.
8. Estetisk og minimalistisk design
Nettsidene bør ikke inneholde informasjon som er
irrelevant eller sjelden behov for. Hver ekstra
informasjonsenhet konkurrerer med de relevante
informasjonsenhetene, og bør kuttes eller gjøres mindre
synlig om informasjonen er lite relevant.
9. Hjelpe brukere til å gjenkjenne, diganostisere og rette
feil
Feilmeldinger burde uttrykkes i et klart språk uten koder,
presist definere problemet og konstruktivt foreslå en
løsning.
Oppdrag:
45 min. Grupper.
Finn minst 3 gode + 3 dårlige
eksempler på interaksjonsdesign. 50/50
online/offline. Presenteres for klassen.
Gjennomgang
The good, the bad, and the ugly
I morgen:
Interaktivitet
Khib interaksjonsdesign 1

More Related Content

Viewers also liked

Anexo 4
Anexo 4Anexo 4
Anexo 4
aracely24
 
What have you learnt from your audience feedback
What have you learnt from your audience feedbackWhat have you learnt from your audience feedback
What have you learnt from your audience feedback
Jaid3n
 
Ppt introduccion a soporte tecnologico1
Ppt introduccion a soporte tecnologico1Ppt introduccion a soporte tecnologico1
Ppt introduccion a soporte tecnologico1
Luis Ciriaco Aliaga
 
The Myth of Zero-Risk Solutions; The Benefits of Privacy by Design
The Myth of Zero-Risk Solutions; The Benefits of Privacy by DesignThe Myth of Zero-Risk Solutions; The Benefits of Privacy by Design
The Myth of Zero-Risk Solutions; The Benefits of Privacy by Design
Dr. Ann Cavoukian
 
Presentacion estatuto
Presentacion estatutoPresentacion estatuto
Presentacion estatuto
aracely24
 
2 tend edusupsixxi
2  tend edusupsixxi2  tend edusupsixxi
2 tend edusupsixxi
Katy_S16
 
παζάρι
παζάρι παζάρι
παζάρι
nikol2423
 
Aprendiendo al reves
Aprendiendo al revesAprendiendo al reves
Aprendiendo al reves
Indiramop
 
Mª ángeles rodríguez. conectividad en los smartphones
Mª ángeles rodríguez. conectividad en los smartphonesMª ángeles rodríguez. conectividad en los smartphones
Mª ángeles rodríguez. conectividad en los smartphones
mariangeles1965
 
Povijesni bilten 1. kadetske lige 3. dio
Povijesni bilten 1. kadetske lige   3. dioPovijesni bilten 1. kadetske lige   3. dio
Povijesni bilten 1. kadetske lige 3. dioŠk Ivan Dvoržak
 
Presentacion w. ruiz c.
Presentacion w. ruiz c.Presentacion w. ruiz c.
Presentacion w. ruiz c.
aracely24
 
Enlace4 participacionestudiantes
Enlace4 participacionestudiantesEnlace4 participacionestudiantes
Enlace4 participacionestudiantes
aracely24
 
Toad Patrols and Toad Body Size BHS Bulletin Article
Toad Patrols and Toad Body Size BHS Bulletin ArticleToad Patrols and Toad Body Size BHS Bulletin Article
Toad Patrols and Toad Body Size BHS Bulletin ArticleRebecca Cattell
 

Viewers also liked (16)

Anexo 4
Anexo 4Anexo 4
Anexo 4
 
Academia
AcademiaAcademia
Academia
 
What have you learnt from your audience feedback
What have you learnt from your audience feedbackWhat have you learnt from your audience feedback
What have you learnt from your audience feedback
 
Ppt introduccion a soporte tecnologico1
Ppt introduccion a soporte tecnologico1Ppt introduccion a soporte tecnologico1
Ppt introduccion a soporte tecnologico1
 
The Myth of Zero-Risk Solutions; The Benefits of Privacy by Design
The Myth of Zero-Risk Solutions; The Benefits of Privacy by DesignThe Myth of Zero-Risk Solutions; The Benefits of Privacy by Design
The Myth of Zero-Risk Solutions; The Benefits of Privacy by Design
 
Presentacion estatuto
Presentacion estatutoPresentacion estatuto
Presentacion estatuto
 
2 tend edusupsixxi
2  tend edusupsixxi2  tend edusupsixxi
2 tend edusupsixxi
 
παζάρι
παζάρι παζάρι
παζάρι
 
Civilian Resume Sample
Civilian Resume SampleCivilian Resume Sample
Civilian Resume Sample
 
Aprendiendo al reves
Aprendiendo al revesAprendiendo al reves
Aprendiendo al reves
 
Mª ángeles rodríguez. conectividad en los smartphones
Mª ángeles rodríguez. conectividad en los smartphonesMª ángeles rodríguez. conectividad en los smartphones
Mª ángeles rodríguez. conectividad en los smartphones
 
Povijesni bilten 1. kadetske lige 3. dio
Povijesni bilten 1. kadetske lige   3. dioPovijesni bilten 1. kadetske lige   3. dio
Povijesni bilten 1. kadetske lige 3. dio
 
Presentacion w. ruiz c.
Presentacion w. ruiz c.Presentacion w. ruiz c.
Presentacion w. ruiz c.
 
Enlace4 participacionestudiantes
Enlace4 participacionestudiantesEnlace4 participacionestudiantes
Enlace4 participacionestudiantes
 
Consumer Pitch Presentation
Consumer Pitch PresentationConsumer Pitch Presentation
Consumer Pitch Presentation
 
Toad Patrols and Toad Body Size BHS Bulletin Article
Toad Patrols and Toad Body Size BHS Bulletin ArticleToad Patrols and Toad Body Size BHS Bulletin Article
Toad Patrols and Toad Body Size BHS Bulletin Article
 

Similar to Khib interaksjonsdesign 1

Khib interaksjon-3
Khib interaksjon-3Khib interaksjon-3
Khib interaksjon-3
Kjartan Michalsen
 
Gjesteforelesning - digital interaktiv design - KHIB
Gjesteforelesning - digital interaktiv design - KHIBGjesteforelesning - digital interaktiv design - KHIB
Gjesteforelesning - digital interaktiv design - KHIBKjartan Michalsen
 
Introduksjon til phonegap
Introduksjon til phonegapIntroduksjon til phonegap
Introduksjon til phonegap
Kjartan Michalsen
 
Gode brukeropplevelser for web redaktør og sluttbruker
Gode brukeropplevelser for web redaktør og sluttbrukerGode brukeropplevelser for web redaktør og sluttbruker
Gode brukeropplevelser for web redaktør og sluttbruker
Nina Taraldsen
 
Smidig 2008 Slik Samarbeider Du Med UX - med kommentarer
Smidig 2008 Slik Samarbeider Du Med UX - med kommentarerSmidig 2008 Slik Samarbeider Du Med UX - med kommentarer
Smidig 2008 Slik Samarbeider Du Med UX - med kommentarer
jonwold
 
NAVs Universell Utformings Lunsj (Empatilunsj/UU-lunsj)
NAVs Universell Utformings Lunsj (Empatilunsj/UU-lunsj)NAVs Universell Utformings Lunsj (Empatilunsj/UU-lunsj)
NAVs Universell Utformings Lunsj (Empatilunsj/UU-lunsj)
Miriam Eileen Nes Begnum
 
Web2.0: en informasjons- og kommunikasjonsrevolusjon?
Web2.0: en informasjons- og kommunikasjonsrevolusjon?Web2.0: en informasjons- og kommunikasjonsrevolusjon?
Web2.0: en informasjons- og kommunikasjonsrevolusjon?
Marika Lüders
 
Lecture on Interaction Design, Pt 1
Lecture on Interaction Design, Pt 1Lecture on Interaction Design, Pt 1
Lecture on Interaction Design, Pt 1
Jon Skivenes
 
Sosialt Interaksjonsdesign
Sosialt InteraksjonsdesignSosialt Interaksjonsdesign
Sosialt Interaksjonsdesign
Eirik Fatland
 
Heuristisk analyse av adobe connect
Heuristisk analyse av adobe connectHeuristisk analyse av adobe connect
Heuristisk analyse av adobe connectJorgenbjorgen
 
Andre metoder for å høre brukerstemmen Anders Vege_06112014
Andre metoder for å høre brukerstemmen Anders Vege_06112014Andre metoder for å høre brukerstemmen Anders Vege_06112014
Andre metoder for å høre brukerstemmen Anders Vege_06112014
Nasjonalt kunnskapssenter for helsetjenesten
 
Lecture on Interaction Design, Pt 3
Lecture on Interaction Design, Pt 3Lecture on Interaction Design, Pt 3
Lecture on Interaction Design, Pt 3
Jon Skivenes
 
Intranett-lynkurs
Intranett-lynkursIntranett-lynkurs
Intranett-lynkursNina Furu
 
Presentasjon VG1
Presentasjon VG1Presentasjon VG1
Presentasjon VG1
Sandnes videregående
 
20080213 FøLstad Software2008 Presentasjon Til Web
20080213 FøLstad Software2008 Presentasjon Til Web20080213 FøLstad Software2008 Presentasjon Til Web
20080213 FøLstad Software2008 Presentasjon Til Web
guest48e2a8
 
Prosjekt Digital Kompetanse Representasjon 2
Prosjekt Digital Kompetanse Representasjon 2Prosjekt Digital Kompetanse Representasjon 2
Prosjekt Digital Kompetanse Representasjon 2
BetaTrondheim
 
Innledning til Active workshop 6. november 2013
Innledning til Active workshop 6. november 2013Innledning til Active workshop 6. november 2013
Innledning til Active workshop 6. november 2013Marika Lüders
 

Similar to Khib interaksjonsdesign 1 (20)

Khib interaksjonsdesign 5
Khib interaksjonsdesign 5Khib interaksjonsdesign 5
Khib interaksjonsdesign 5
 
Khib interaksjon-3
Khib interaksjon-3Khib interaksjon-3
Khib interaksjon-3
 
Gjesteforelesning - digital interaktiv design - KHIB
Gjesteforelesning - digital interaktiv design - KHIBGjesteforelesning - digital interaktiv design - KHIB
Gjesteforelesning - digital interaktiv design - KHIB
 
Introduksjon til phonegap
Introduksjon til phonegapIntroduksjon til phonegap
Introduksjon til phonegap
 
Gode brukeropplevelser for web redaktør og sluttbruker
Gode brukeropplevelser for web redaktør og sluttbrukerGode brukeropplevelser for web redaktør og sluttbruker
Gode brukeropplevelser for web redaktør og sluttbruker
 
Khib interaksjonsdesign 4
Khib interaksjonsdesign 4Khib interaksjonsdesign 4
Khib interaksjonsdesign 4
 
Smidig 2008 Slik Samarbeider Du Med UX - med kommentarer
Smidig 2008 Slik Samarbeider Du Med UX - med kommentarerSmidig 2008 Slik Samarbeider Du Med UX - med kommentarer
Smidig 2008 Slik Samarbeider Du Med UX - med kommentarer
 
NAVs Universell Utformings Lunsj (Empatilunsj/UU-lunsj)
NAVs Universell Utformings Lunsj (Empatilunsj/UU-lunsj)NAVs Universell Utformings Lunsj (Empatilunsj/UU-lunsj)
NAVs Universell Utformings Lunsj (Empatilunsj/UU-lunsj)
 
Web2.0: en informasjons- og kommunikasjonsrevolusjon?
Web2.0: en informasjons- og kommunikasjonsrevolusjon?Web2.0: en informasjons- og kommunikasjonsrevolusjon?
Web2.0: en informasjons- og kommunikasjonsrevolusjon?
 
Lecture on Interaction Design, Pt 1
Lecture on Interaction Design, Pt 1Lecture on Interaction Design, Pt 1
Lecture on Interaction Design, Pt 1
 
Sosialt Interaksjonsdesign
Sosialt InteraksjonsdesignSosialt Interaksjonsdesign
Sosialt Interaksjonsdesign
 
Heuristisk analyse av adobe connect
Heuristisk analyse av adobe connectHeuristisk analyse av adobe connect
Heuristisk analyse av adobe connect
 
Andre metoder for å høre brukerstemmen Anders Vege_06112014
Andre metoder for å høre brukerstemmen Anders Vege_06112014Andre metoder for å høre brukerstemmen Anders Vege_06112014
Andre metoder for å høre brukerstemmen Anders Vege_06112014
 
Andre metoder for å hoere brukerstemmen anders vege_06112014
Andre metoder for å hoere brukerstemmen anders vege_06112014Andre metoder for å hoere brukerstemmen anders vege_06112014
Andre metoder for å hoere brukerstemmen anders vege_06112014
 
Lecture on Interaction Design, Pt 3
Lecture on Interaction Design, Pt 3Lecture on Interaction Design, Pt 3
Lecture on Interaction Design, Pt 3
 
Intranett-lynkurs
Intranett-lynkursIntranett-lynkurs
Intranett-lynkurs
 
Presentasjon VG1
Presentasjon VG1Presentasjon VG1
Presentasjon VG1
 
20080213 FøLstad Software2008 Presentasjon Til Web
20080213 FøLstad Software2008 Presentasjon Til Web20080213 FøLstad Software2008 Presentasjon Til Web
20080213 FøLstad Software2008 Presentasjon Til Web
 
Prosjekt Digital Kompetanse Representasjon 2
Prosjekt Digital Kompetanse Representasjon 2Prosjekt Digital Kompetanse Representasjon 2
Prosjekt Digital Kompetanse Representasjon 2
 
Innledning til Active workshop 6. november 2013
Innledning til Active workshop 6. november 2013Innledning til Active workshop 6. november 2013
Innledning til Active workshop 6. november 2013
 

More from Kjartan Michalsen

Khib interaksjon-2
Khib interaksjon-2Khib interaksjon-2
Khib interaksjon-2
Kjartan Michalsen
 
Khib interaksjonsdesign 6 html og css
Khib interaksjonsdesign 6  html og cssKhib interaksjonsdesign 6  html og css
Khib interaksjonsdesign 6 html og cssKjartan Michalsen
 
Statens designkonkurranse - milepælsmøte 1
Statens designkonkurranse - milepælsmøte 1Statens designkonkurranse - milepælsmøte 1
Statens designkonkurranse - milepælsmøte 1
Kjartan Michalsen
 
Bordet fanger software 2013 - kjartan michalsen
Bordet fanger   software 2013 - kjartan michalsenBordet fanger   software 2013 - kjartan michalsen
Bordet fanger software 2013 - kjartan michalsen
Kjartan Michalsen
 
Nye medier - redaksjonell design
Nye medier - redaksjonell designNye medier - redaksjonell design
Nye medier - redaksjonell design
Kjartan Michalsen
 

More from Kjartan Michalsen (8)

Khib interaksjon-1
Khib interaksjon-1Khib interaksjon-1
Khib interaksjon-1
 
Khib interaksjon-2
Khib interaksjon-2Khib interaksjon-2
Khib interaksjon-2
 
Khib interaksjonsdesign 6 html og css
Khib interaksjonsdesign 6  html og cssKhib interaksjonsdesign 6  html og css
Khib interaksjonsdesign 6 html og css
 
Khib interaksjonsdesign 3
Khib interaksjonsdesign 3Khib interaksjonsdesign 3
Khib interaksjonsdesign 3
 
Khib interaksjonsdesign 2
Khib interaksjonsdesign 2Khib interaksjonsdesign 2
Khib interaksjonsdesign 2
 
Statens designkonkurranse - milepælsmøte 1
Statens designkonkurranse - milepælsmøte 1Statens designkonkurranse - milepælsmøte 1
Statens designkonkurranse - milepælsmøte 1
 
Bordet fanger software 2013 - kjartan michalsen
Bordet fanger   software 2013 - kjartan michalsenBordet fanger   software 2013 - kjartan michalsen
Bordet fanger software 2013 - kjartan michalsen
 
Nye medier - redaksjonell design
Nye medier - redaksjonell designNye medier - redaksjonell design
Nye medier - redaksjonell design
 

Khib interaksjonsdesign 1

  • 4.
  • 5. Interaktivitet - interaksjon Respons til menneskelig fysisk manipulering som berøring, bevegelse, kroppsspråk, lyd eller andre endringer i fysiologiske status.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19. ”When we use the concept of 'interactive media' exclusively in relation to computer-based media, there is the danger that we will interpret 'interaction' literally, equating it with physical interaction between a user and a media object (pressing a button, choosing a link, moving the body), at the expense of psychological interaction. The psychological processes of filling-in, hypothesis formation, recall, and identification, which are required for us to comprehend any text or image at all, are mistakenly identified with an objectively existing structure of interactive links" (Lev Manovich:57:2001)
  • 21. Begrensninger • • • • Fysiske begrensninger Semantiske begrensninger Logiske begrensninger Kulturelle begrensninger Funksjoner Tilbydelsene (Affordances) Muligheter
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 33. 1. Systemstatus skal vises - visibility Systemet skal alltid holde bruker informert om hva som skjer gjennom passende feedback innen rimelig tid.
  • 34. 2. Match mellom systemet og den virkelige verden Systemet bør snakke brukers språk, med ord, fraser og konsepter som er kjent for bruker. Systemet bør følge den virkelige verdens konvensjoner, og la informasjonen komme i en naturlig, logisk rekkefølge.
  • 35. 3. Brukerkontroll og frihet Brukere kan gjøre feil, og må lett kunne avbryte og finne veien tilbake til utgangspunktet. ’Angre’ og ’Gjenta’-funksjonene må støttes
  • 36. 4. Konsistens og standarder Brukere burde ikke måtte lure på om forskjellige ord og handlinger skal bety det samme. Plattformkonvensjoner bør følges.
  • 37. 5. Forebygge feil Eliminer så godt det lar seg gjøre brukers mulighet til å gjøre feil gjennom et godt design. Forklarende feilmeldinger, bekreftelsesdialogbokser.
  • 38. 6. Gjenkjennelse fremfor tilbakekalling Minimer brukers bruk av minnet – gjør objekter, handlinger, og valg synlige. Bruker skal slippe å måtte huske informasjon fra en del av en dialog til neste. Instruksjoner for bruk av programmet bør være synlig eller lett tilgjengelig så ofte som mulig.
  • 39. 7. Fleksibilitet og efficiency ved bruk Akseleratorer som ikke synes for den vanlige bruker kan fremskynde interaksjonsprosessen for ekspertbrukere – slik at systemet både støtter uerfarne og erfarne brukere.
  • 40. 8. Estetisk og minimalistisk design Nettsidene bør ikke inneholde informasjon som er irrelevant eller sjelden behov for. Hver ekstra informasjonsenhet konkurrerer med de relevante informasjonsenhetene, og bør kuttes eller gjøres mindre synlig om informasjonen er lite relevant.
  • 41. 9. Hjelpe brukere til å gjenkjenne, diganostisere og rette feil Feilmeldinger burde uttrykkes i et klart språk uten koder, presist definere problemet og konstruktivt foreslå en løsning.
  • 42. Oppdrag: 45 min. Grupper. Finn minst 3 gode + 3 dårlige eksempler på interaksjonsdesign. 50/50 online/offline. Presenteres for klassen.
  • 43. Gjennomgang The good, the bad, and the ugly