SlideShare a Scribd company logo
1 of 66
Hei!
Kjartan Bjørndal Michalsen
Interaksjonsdesigner Logica UX
User Experience - Brukeropplevelse
Mobil: 40454554
Mail: k@kjartan.info / kjartan@ux.no
Twitter: @liksom
Gtalk: michalsen@gmail.com
Skype: kjartan.michalsen
Peppes Pizza
Digital redaksjonell design.

Redaksjonell design på digitale
flater.
Nye media.
Design.
Media, medium.
Gresk: medius = i midten
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.
Konflikten

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/...
Verktøy for digital Redaksjonell
Design
<h1>Overskrift</h1>

<p> lorem ipsum dolor sit amet </p>
Interaktiv powerpoint
(Eller google docs presentation)

Side A

Side B

Side C
Side A

Tilbake til menyen
Side B

Tilbake til menyen
Side C

Tilbake til menyen
Design

Tips.
Triks.
Trender.
Typografi

Store, lesbare, spennende fonter.
Bruk luft - uendelig lerret, brukerne scroller.
På web – bruk typekit
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
Animasjoner

Korte, raske introanimasjoner på scenen
Animasjoner på bevegelse (fra mus eller touch)
Illustrasjonsanimasjoner.
Informasjonsgrafikk

Illustrasjoner og grafikk som raskt gir leseren oversikt
Interaktiv informasjonsgrafikk
Hold det enkelt

Minimalistisk
Fokus på det viktigste
.. men glem smilende amerikanske mennesker og
andre generiske bilder fra bildebyråer.
Eksempler

http://d7.no/khib
Workshopoppgave

Vinmonopolets magasin vinbladet.
Lage interaktiv versjon av whiskey-feature.
Lenker mellom de to sakene.
Skal vise kommentarer fra brukere.
Lag for iPad eller skjerm i valgfritt program.

http://d7.no/khibws og http://d7.no/khibws2

More Related Content

Similar to Nye medier - redaksjonell design

Trygg på web_Orkide
Trygg på web_OrkideTrygg på web_Orkide
Trygg på web_Orkide
fskj
 
Sosiale medier: Utfordringer for forvaltning og arkiv
Sosiale medier: Utfordringer for forvaltning og arkivSosiale medier: Utfordringer for forvaltning og arkiv
Sosiale medier: Utfordringer for forvaltning og arkiv
Marius Rohde Johannessen
 
Evas alternative rammeverk for digitale ferdigheter
Evas alternative rammeverk for digitale ferdigheterEvas alternative rammeverk for digitale ferdigheter
Evas alternative rammeverk for digitale ferdigheter
Eva Bratvold
 

Similar to Nye medier - redaksjonell design (20)

Trygg på web kristiansand
Trygg på web kristiansandTrygg på web kristiansand
Trygg på web kristiansand
 
Foredrag ks-kringstad-2004
Foredrag ks-kringstad-2004Foredrag ks-kringstad-2004
Foredrag ks-kringstad-2004
 
Trygg på web stavanger
Trygg på web stavangerTrygg på web stavanger
Trygg på web stavanger
 
Trygg på web_smart
Trygg på web_smartTrygg på web_smart
Trygg på web_smart
 
Bordet fanger software 2013 - kjartan michalsen
Bordet fanger   software 2013 - kjartan michalsenBordet fanger   software 2013 - kjartan michalsen
Bordet fanger software 2013 - kjartan michalsen
 
Internett historie
Internett historieInternett historie
Internett historie
 
Byråkratrollen i endring
Byråkratrollen i endringByråkratrollen i endring
Byråkratrollen i endring
 
Participatory design 2.0 - brukerinvolvering gjennom sosiale medier
Participatory design 2.0 - brukerinvolvering gjennom sosiale medierParticipatory design 2.0 - brukerinvolvering gjennom sosiale medier
Participatory design 2.0 - brukerinvolvering gjennom sosiale medier
 
It trender 2011
It trender 2011 It trender 2011
It trender 2011
 
Khib interaksjonsdesign 3
Khib interaksjonsdesign 3Khib interaksjonsdesign 3
Khib interaksjonsdesign 3
 
Introduksjon til phonegap
Introduksjon til phonegapIntroduksjon til phonegap
Introduksjon til phonegap
 
Trygg på web såte
Trygg på web såteTrygg på web såte
Trygg på web såte
 
Trygg på web_Orkide
Trygg på web_OrkideTrygg på web_Orkide
Trygg på web_Orkide
 
Khib interaksjonsdesign 4
Khib interaksjonsdesign 4Khib interaksjonsdesign 4
Khib interaksjonsdesign 4
 
Skisser utanfor boksen
Skisser utanfor boksenSkisser utanfor boksen
Skisser utanfor boksen
 
Digitale medier i kunst og håndverk på ungdomsskolen
Digitale medier i kunst og håndverk på ungdomsskolenDigitale medier i kunst og håndverk på ungdomsskolen
Digitale medier i kunst og håndverk på ungdomsskolen
 
Om NDLA generelt
Om NDLA genereltOm NDLA generelt
Om NDLA generelt
 
2009 03 24 Editors Meeting
2009 03 24 Editors Meeting2009 03 24 Editors Meeting
2009 03 24 Editors Meeting
 
Sosiale medier: Utfordringer for forvaltning og arkiv
Sosiale medier: Utfordringer for forvaltning og arkivSosiale medier: Utfordringer for forvaltning og arkiv
Sosiale medier: Utfordringer for forvaltning og arkiv
 
Evas alternative rammeverk for digitale ferdigheter
Evas alternative rammeverk for digitale ferdigheterEvas alternative rammeverk for digitale ferdigheter
Evas alternative rammeverk for digitale ferdigheter
 

More from Kjartan Michalsen (11)

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 5
Khib interaksjonsdesign 5Khib interaksjonsdesign 5
Khib interaksjonsdesign 5
 
Khib interaksjonsdesign 2
Khib interaksjonsdesign 2Khib interaksjonsdesign 2
Khib interaksjonsdesign 2
 
Khib interaksjonsdesign 1
Khib interaksjonsdesign 1Khib interaksjonsdesign 1
Khib interaksjonsdesign 1
 
Statens designkonkurranse - milepælsmøte 1
Statens designkonkurranse - milepælsmøte 1Statens designkonkurranse - milepælsmøte 1
Statens designkonkurranse - milepælsmøte 1
 
Hold det ekte - UX i smidige prosjekt
Hold det ekte - UX i smidige prosjektHold det ekte - UX i smidige prosjekt
Hold det ekte - UX i smidige prosjekt
 
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
 

Nye medier - redaksjonell design

Editor's Notes

  1. KA: det går skikkelig bra