SlideShare a Scribd company logo
1 of 79
Download to read offline
Digital
Design
Kjartan Michalsen // fluxLoop.com // twitter.com/liksom
Digital redaksjonell design.
Redaksjonell design på digitale flater.
…eller krasjkurs i UX på 3 timer
UX: User experience = Brukeropplevelse = Digital interaktiv design
*
Nye media
Design
Hvorfor?
Media, medium.
Gresk: medius = i midten
Digitale flater.
Passive og aktive.
Passive = digitale plakater
Aktive = Interaktive = Nye media
Interpersonlige media
• Hver deltager i kommunikasjonen har lik kontroll over
innholdet som blir kommunisert.
• Innholdet blir individualisert til det enkelte individ.
Massemedia
• Nøyaktig det samme innholdet går til alle mottakere
• Den som sender har absolutt kontroll over innholdet og
form
Nye media
• Unik tilpasset informasjon kan samtidig leveres til
uendelig mange mennesker.
• Alle individene involvert i kommunikasjonen har lik kontroll
over innholdet.
Nøkkelegenskaper - Nye media
1. Nummerisk Representasjon:
Kan beskrives matematisk. Et nye media objekt kan
manipuleres algoritmisk.
Nøkkelegenskaper - Nye media
2. Modularitet:
Mediaelementer er samlinger av kvantifiserbare diskret
målinger. Disse objektene kan igjen
danne større objekter uten å miste sine identiteter.
Nøkkelegenskaper - Nye media
3. Automatisering:
Den nummeriske representasjone og den modulære strukturen
tillater automatisering av mange av operasjonene involvert i
skapingen og manipulering av mediainnhold. Det tillater også
indexering og strukturering av mediaobjekt, og dermed nye
muligheter for å søke etter objekt.
Nøkkelegenskaper - Nye media
4. Variasjoner:
Et nye media objekt er ikke noe som er fiksert, det er noe
som kan eksistere i ulike, potensielt
uendelige variasjoner. Dette er en konsekvens av den
nummeriske representasjonen.
Nøkkelegenskaper - Nye media
5. Transkoding:
Nye media objekt har to ulike lag: Det kulturelle laget og det
digitale laget. Den kulturelle forståelsen av mediaobjektet,
og den digital datastrømmen som tilsammen lager
mediaobjektet.
Det digitale laget påvirker det kulturelle laget, ved at
datamaskinen modellerer verden, representerer data og gir
oss mulighet til å manipulere innholdet.
Transkoding oppstår når man man tar media objektet og
presenterer det samme digitale innholdet på nye måter i
det kulturelle laget.
De to lagene påvirker hverandre, og henger sammen.
Konflikten
Konflikten
Tradisjonell billedlig illusjonisme siden renessansen
– skjermen (bildet, maleriet) er et vindu til et virtuelt rom.
Noe å se inn i, men ikke interagere med.
Konflikten
Ny konvensjon fra 1981 – grafiske grensesnitt på
dataskjerm.
Skjermen har et klart definert sett med kontroller, og blir
derfor et virtuelt instrumentpanel.
Skjermen blir en slagmark for flere inkompatible
definisjoner – Dybde / overflate, transparens /
gjennomsiktighet og bilde som romlig illusjon /
instrumentpanel for handling
Bare fordi det vises på en skjerm, er det
ikke nødvendigvis nye media.
Interaktivitet - interaksjon
Respons til menneskelig fysisk manipulering som berøring,
bevegelse, kroppsspråk, lyd eller andre endringer i
fysiologiske status.
Interaktivitet
I interaksjonsprosessen bestemmer brukeren hvilke
element man skal vise eller hvilken sti man skal følge.
Interaktivitet
Med dette oppstår en unik variasjon av arbeidet.
Brukeren blir således medskaper av arbeidet.
Interaktivitet – Åpen / lukket
Åpen – Elementene og strukturen blir enten modifisert eller
generert der og da.
Lukket – Fikserte elementer arrangert i en satt tre-struktur.
Flyt (Flow)
Den mest interaktive formen for bruker til datamaskin
kommunikasjon kalles ofte flow. Når brukeren oppnår flow,
kontrollerer de datamaskinen med en slik flyt at
datamaskinen blir transparent.
Flyt (Flow)
Mål: Digital redaksjonell design som er så bra at brukeren
glemmer at han leser på en datamaskin/iPad/mobil/tablet/
kindle/...
Designtriks
Grunnleggende triks for design
Typografi
Store, lesbare, spennende fonter.
Bruk luft - uendelig lerret, brukerne scroller.
Farger
Kontrast for lesbarhet.
Flere farger. Komplimentærfarger.
Gradienter.
Transparens.
Lyse farger.
Bilder & video
Store bilder.
Slideshow.
Mulighet for fullskjermsvisning
Illustrativt stillbilde til brukeren velger å starte video
Touch-interaksjon
Store, tydelige knapper.
Swipe og andre former for alternativ interaksjon
Peppes Pizza
Pilot av digital bestillingsløsning på Peppes Pizza Aker Brygge.
Animasjoner & illustrasjoner
Korte, raske introanimasjoner på scenen
Animasjoner på bevegelse (fra mus eller touch)
Illustrasjoner og grafikk som raskt gir leseren oversikt
Interaktiv informasjonsgrafikk
Hold det enkelt
Minimalistisk
Fokus på det viktigste
Knapper og glansbilder
Gjør tydelig forskjell på hva som er trykkbart og ikke.
Vær konsekvent.
Bruk ikoner der de gir mening alene.
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.
Typografi
”It has a mechanical skeleton and the
forms are largely geometric. At the same
time the font’s sweeping semi-circular
curves give it a cheerful demeanor.”
Design for skjerm
Alle skjermene
Samsung Galaxy S3 vs iPhone 4S
Tabletjungelen
Verktøy og oppgave
Fluidui.com
Workshopoppgave
Bjørnen og reven
Folkeeventyr – barnebok i lommen
Tilpass denne til mobil, jobb med typografi,
interaktivitet og illustrasjon
Eksempler og lenker
http://d7.no/khib

More Related Content

Similar to Gjesteforelesning - digital interaktiv design - KHIB

Lecture on Interaction Design, Pt 1
Lecture on Interaction Design, Pt 1Lecture on Interaction Design, Pt 1
Lecture on Interaction Design, Pt 1Jon Skivenes
 
Bordet fanger software 2013 - kjartan michalsen
Bordet fanger   software 2013 - kjartan michalsenBordet fanger   software 2013 - kjartan michalsen
Bordet fanger software 2013 - kjartan michalsenKjartan Michalsen
 
2009 03 24 Editors Meeting
2009 03 24 Editors Meeting2009 03 24 Editors Meeting
2009 03 24 Editors MeetingHP aalmo
 
Trygg på web_smart
Trygg på web_smartTrygg på web_smart
Trygg på web_smartfskj
 
Trygg på web Oslo
Trygg på web OsloTrygg på web Oslo
Trygg på web Oslofskj
 
Responsivt webdesign
Responsivt webdesignResponsivt webdesign
Responsivt webdesignSolv AS
 
Smart Board - fag.ped. høsten 2011
Smart Board - fag.ped. høsten 2011Smart Board - fag.ped. høsten 2011
Smart Board - fag.ped. høsten 2011Kirsti Engelien
 
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 Webguest48e2a8
 
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 kommentarerjonwold
 
Trygg på web kristiansand
Trygg på web kristiansandTrygg på web kristiansand
Trygg på web kristiansandfskj
 
Trygg på web_Orkide
Trygg på web_OrkideTrygg på web_Orkide
Trygg på web_Orkidefskj
 
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
 
Intranett-lynkurs
Intranett-lynkursIntranett-lynkurs
Intranett-lynkursNina Furu
 
Max Marketing Mix: Digitale trender og strategi
Max Marketing Mix: Digitale trender og strategiMax Marketing Mix: Digitale trender og strategi
Max Marketing Mix: Digitale trender og strategiSigurd J. Vik
 
B2B-markedsføring i sosiale medier
B2B-markedsføring i sosiale medierB2B-markedsføring i sosiale medier
B2B-markedsføring i sosiale medierSigurd J. Vik
 

Similar to Gjesteforelesning - digital interaktiv design - KHIB (20)

Lecture on Interaction Design, Pt 1
Lecture on Interaction Design, Pt 1Lecture on Interaction Design, Pt 1
Lecture on Interaction Design, Pt 1
 
Bordet fanger software 2013 - kjartan michalsen
Bordet fanger   software 2013 - kjartan michalsenBordet fanger   software 2013 - kjartan michalsen
Bordet fanger software 2013 - kjartan michalsen
 
It trender 2011
It trender 2011 It trender 2011
It trender 2011
 
Khib interaksjonsdesign 3
Khib interaksjonsdesign 3Khib interaksjonsdesign 3
Khib interaksjonsdesign 3
 
2009 03 24 Editors Meeting
2009 03 24 Editors Meeting2009 03 24 Editors Meeting
2009 03 24 Editors Meeting
 
Khib interaksjonsdesign 5
Khib interaksjonsdesign 5Khib interaksjonsdesign 5
Khib interaksjonsdesign 5
 
Trygg på web_smart
Trygg på web_smartTrygg på web_smart
Trygg på web_smart
 
Trygg på web Oslo
Trygg på web OsloTrygg på web Oslo
Trygg på web Oslo
 
Pub Dig 1001 Ppt
Pub Dig 1001 PptPub Dig 1001 Ppt
Pub Dig 1001 Ppt
 
Responsivt webdesign
Responsivt webdesignResponsivt webdesign
Responsivt webdesign
 
Smart Board - fag.ped. høsten 2011
Smart Board - fag.ped. høsten 2011Smart Board - fag.ped. høsten 2011
Smart Board - fag.ped. høsten 2011
 
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
 
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
 
Trygg på web kristiansand
Trygg på web kristiansandTrygg på web kristiansand
Trygg på web kristiansand
 
Trygg på web_Orkide
Trygg på web_OrkideTrygg på web_Orkide
Trygg på web_Orkide
 
Web2.0: en informasjons- og kommunikasjonsrevolusjon?
Web2.0: en informasjons- og kommunikasjonsrevolusjon?Web2.0: en informasjons- og kommunikasjonsrevolusjon?
Web2.0: en informasjons- og kommunikasjonsrevolusjon?
 
Foredrag ks-kringstad-2004
Foredrag ks-kringstad-2004Foredrag ks-kringstad-2004
Foredrag ks-kringstad-2004
 
Intranett-lynkurs
Intranett-lynkursIntranett-lynkurs
Intranett-lynkurs
 
Max Marketing Mix: Digitale trender og strategi
Max Marketing Mix: Digitale trender og strategiMax Marketing Mix: Digitale trender og strategi
Max Marketing Mix: Digitale trender og strategi
 
B2B-markedsføring i sosiale medier
B2B-markedsføring i sosiale medierB2B-markedsføring i sosiale medier
B2B-markedsføring i sosiale medier
 

More from 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 1Kjartan Michalsen
 
User centric eployee portal michalsen.ppt
User centric eployee portal michalsen.pptUser centric eployee portal michalsen.ppt
User centric eployee portal michalsen.pptKjartan Michalsen
 

More from Kjartan Michalsen (9)

Khib interaksjon-1
Khib interaksjon-1Khib interaksjon-1
Khib interaksjon-1
 
Khib interaksjon-2
Khib interaksjon-2Khib interaksjon-2
Khib interaksjon-2
 
Introduksjon til phonegap
Introduksjon til phonegapIntroduksjon til phonegap
Introduksjon til phonegap
 
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 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
 
Valgkamp i gamle Oslo AP
Valgkamp i gamle Oslo APValgkamp i gamle Oslo AP
Valgkamp i gamle Oslo AP
 
User centric eployee portal michalsen.ppt
User centric eployee portal michalsen.pptUser centric eployee portal michalsen.ppt
User centric eployee portal michalsen.ppt
 
Hybrid-applikasjoner
Hybrid-applikasjonerHybrid-applikasjoner
Hybrid-applikasjoner
 

Gjesteforelesning - digital interaktiv design - KHIB

  • 1. Digital Design Kjartan Michalsen // fluxLoop.com // twitter.com/liksom
  • 2.
  • 3. Digital redaksjonell design. Redaksjonell design på digitale flater.
  • 4. …eller krasjkurs i UX på 3 timer UX: User experience = Brukeropplevelse = Digital interaktiv design *
  • 5.
  • 9. Digitale flater. Passive og aktive. Passive = digitale plakater Aktive = Interaktive = Nye media
  • 10.
  • 11. Interpersonlige media • Hver deltager i kommunikasjonen har lik kontroll over innholdet som blir kommunisert. • Innholdet blir individualisert til det enkelte individ.
  • 12.
  • 13. Massemedia • Nøyaktig det samme innholdet går til alle mottakere • Den som sender har absolutt kontroll over innholdet og form
  • 14.
  • 15. Nye media • Unik tilpasset informasjon kan samtidig leveres til uendelig mange mennesker. • Alle individene involvert i kommunikasjonen har lik kontroll over innholdet.
  • 16. Nøkkelegenskaper - Nye media 1. Nummerisk Representasjon: Kan beskrives matematisk. Et nye media objekt kan manipuleres algoritmisk.
  • 17.
  • 18. Nøkkelegenskaper - Nye media 2. Modularitet: Mediaelementer er samlinger av kvantifiserbare diskret målinger. Disse objektene kan igjen danne større objekter uten å miste sine identiteter.
  • 19.
  • 20.
  • 21. Nøkkelegenskaper - Nye media 3. Automatisering: Den nummeriske representasjone og den modulære strukturen tillater automatisering av mange av operasjonene involvert i skapingen og manipulering av mediainnhold. Det tillater også indexering og strukturering av mediaobjekt, og dermed nye muligheter for å søke etter objekt.
  • 22.
  • 23. Nøkkelegenskaper - Nye media 4. Variasjoner: Et nye media objekt er ikke noe som er fiksert, det er noe som kan eksistere i ulike, potensielt uendelige variasjoner. Dette er en konsekvens av den nummeriske representasjonen.
  • 24.
  • 25. Nøkkelegenskaper - Nye media 5. Transkoding: Nye media objekt har to ulike lag: Det kulturelle laget og det digitale laget. Den kulturelle forståelsen av mediaobjektet, og den digital datastrømmen som tilsammen lager mediaobjektet.
  • 26. Det digitale laget påvirker det kulturelle laget, ved at datamaskinen modellerer verden, representerer data og gir oss mulighet til å manipulere innholdet. Transkoding oppstår når man man tar media objektet og presenterer det samme digitale innholdet på nye måter i det kulturelle laget. De to lagene påvirker hverandre, og henger sammen.
  • 27.
  • 29. Konflikten Tradisjonell billedlig illusjonisme siden renessansen – skjermen (bildet, maleriet) er et vindu til et virtuelt rom. Noe å se inn i, men ikke interagere med.
  • 30.
  • 31. Konflikten Ny konvensjon fra 1981 – grafiske grensesnitt på dataskjerm. Skjermen har et klart definert sett med kontroller, og blir derfor et virtuelt instrumentpanel.
  • 32.
  • 33. Skjermen blir en slagmark for flere inkompatible definisjoner – Dybde / overflate, transparens / gjennomsiktighet og bilde som romlig illusjon / instrumentpanel for handling
  • 34. Bare fordi det vises på en skjerm, er det ikke nødvendigvis nye media.
  • 35. Interaktivitet - interaksjon Respons til menneskelig fysisk manipulering som berøring, bevegelse, kroppsspråk, lyd eller andre endringer i fysiologiske status.
  • 36. Interaktivitet I interaksjonsprosessen bestemmer brukeren hvilke element man skal vise eller hvilken sti man skal følge.
  • 37. Interaktivitet Med dette oppstår en unik variasjon av arbeidet. Brukeren blir således medskaper av arbeidet.
  • 38. Interaktivitet – Åpen / lukket Åpen – Elementene og strukturen blir enten modifisert eller generert der og da. Lukket – Fikserte elementer arrangert i en satt tre-struktur.
  • 39.
  • 40.
  • 41. Flyt (Flow) Den mest interaktive formen for bruker til datamaskin kommunikasjon kalles ofte flow. Når brukeren oppnår flow, kontrollerer de datamaskinen med en slik flyt at datamaskinen blir transparent.
  • 42. Flyt (Flow) Mål: Digital redaksjonell design som er så bra at brukeren glemmer at han leser på en datamaskin/iPad/mobil/tablet/ kindle/...
  • 44. Typografi Store, lesbare, spennende fonter. Bruk luft - uendelig lerret, brukerne scroller.
  • 45.
  • 46. Farger Kontrast for lesbarhet. Flere farger. Komplimentærfarger. Gradienter. Transparens. Lyse farger.
  • 47.
  • 48. Bilder & video Store bilder. Slideshow. Mulighet for fullskjermsvisning Illustrativt stillbilde til brukeren velger å starte video
  • 49.
  • 50. Touch-interaksjon Store, tydelige knapper. Swipe og andre former for alternativ interaksjon
  • 51. Peppes Pizza Pilot av digital bestillingsløsning på Peppes Pizza Aker Brygge.
  • 52. Animasjoner & illustrasjoner Korte, raske introanimasjoner på scenen Animasjoner på bevegelse (fra mus eller touch) Illustrasjoner og grafikk som raskt gir leseren oversikt Interaktiv informasjonsgrafikk
  • 53.
  • 55.
  • 56. Knapper og glansbilder Gjør tydelig forskjell på hva som er trykkbart og ikke. Vær konsekvent. Bruk ikoner der de gir mening alene.
  • 57.
  • 59. 1. Systemstatus skal vises - visibility Systemet skal alltid holde bruker informert om hva som skjer gjennom passende feedback innen rimelig tid.
  • 60. 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.
  • 61. 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
  • 62. 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.
  • 63. 5. Forebygge feil Eliminer så godt det lar seg gjøre brukers mulighet til å gjøre feil gjennom et godt design. Forklarende feilmeldinger, bekreftelsesdialogbokser.
  • 64. 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.
  • 65. 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.
  • 66. 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.
  • 67. 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.
  • 69.
  • 70.
  • 71. ”It has a mechanical skeleton and the forms are largely geometric. At the same time the font’s sweeping semi-circular curves give it a cheerful demeanor.”
  • 72.
  • 74. Samsung Galaxy S3 vs iPhone 4S
  • 78. Workshopoppgave Bjørnen og reven Folkeeventyr – barnebok i lommen Tilpass denne til mobil, jobb med typografi, interaktivitet og illustrasjon