gjesteforelesning - digital interaktiv design - khib
TRANSCRIPT
![Page 1: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/1.jpg)
Digital Design Kjartan Michalsen // fluxLoop.com // twitter.com/liksom
![Page 2: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/2.jpg)
![Page 3: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/3.jpg)
Digital redaksjonell design. Redaksjonell design på digitale flater.
![Page 4: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/4.jpg)
…eller krasjkurs i UX på 3 timer UX: User experience = Brukeropplevelse = Digital interaktiv design
*
![Page 5: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/5.jpg)
![Page 6: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/6.jpg)
Nye media Design
![Page 7: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/7.jpg)
Hvorfor?
![Page 8: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/8.jpg)
Media, medium. Gresk: medius = i midten
![Page 9: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/9.jpg)
Digitale flater. Passive og aktive. Passive = digitale plakater Aktive = Interaktive = Nye media
![Page 10: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/10.jpg)
![Page 11: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/11.jpg)
Interpersonlige media • Hver deltager i kommunikasjonen har lik kontroll over innholdet som blir kommunisert.
• Innholdet blir individualisert til det enkelte individ.
![Page 12: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/12.jpg)
![Page 13: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/13.jpg)
Massemedia • Nøyaktig det samme innholdet går til alle mottakere • Den som sender har absolutt kontroll over innholdet og form
![Page 14: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/14.jpg)
![Page 15: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/15.jpg)
Nye media • Unik tilpasset informasjon kan samtidig leveres til uendelig mange mennesker. • Alle individene involvert i kommunikasjonen har lik kontroll over innholdet.
![Page 16: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/16.jpg)
Nøkkelegenskaper - Nye media 1. Nummerisk Representasjon: Kan beskrives matematisk. Et nye media objekt kan manipuleres algoritmisk.
![Page 17: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/17.jpg)
![Page 18: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/18.jpg)
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.
![Page 19: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/19.jpg)
![Page 20: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/20.jpg)
![Page 21: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/21.jpg)
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.
![Page 22: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/22.jpg)
![Page 23: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/23.jpg)
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.
![Page 24: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/24.jpg)
![Page 25: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/25.jpg)
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.
![Page 26: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/26.jpg)
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.
![Page 27: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/27.jpg)
![Page 28: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/28.jpg)
Konflikten
![Page 29: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/29.jpg)
Konflikten Tradisjonell billedlig illusjonisme siden renessansen – skjermen (bildet, maleriet) er et vindu til et virtuelt rom. Noe å se inn i, men ikke interagere med.
![Page 30: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/30.jpg)
![Page 31: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/31.jpg)
Konflikten Ny konvensjon fra 1981 – grafiske grensesnitt på dataskjerm. Skjermen har et klart definert sett med kontroller, og blir derfor et virtuelt instrumentpanel.
![Page 32: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/32.jpg)
![Page 33: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/33.jpg)
Skjermen blir en slagmark for flere inkompatible definisjoner – Dybde / overflate, transparens / gjennomsiktighet og bilde som romlig illusjon / instrumentpanel for handling
![Page 34: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/34.jpg)
Bare fordi det vises på en skjerm, er det ikke nødvendigvis nye media.
![Page 35: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/35.jpg)
Interaktivitet - interaksjon Respons til menneskelig fysisk manipulering som berøring, bevegelse, kroppsspråk, lyd eller andre endringer i fysiologiske status.
![Page 36: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/36.jpg)
Interaktivitet I interaksjonsprosessen bestemmer brukeren hvilke element man skal vise eller hvilken sti man skal følge.
![Page 37: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/37.jpg)
Interaktivitet Med dette oppstår en unik variasjon av arbeidet. Brukeren blir således medskaper av arbeidet.
![Page 38: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/38.jpg)
Interaktivitet – Åpen / lukket Åpen – Elementene og strukturen blir enten modifisert eller generert der og da. Lukket – Fikserte elementer arrangert i en satt tre-struktur.
![Page 39: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/39.jpg)
![Page 40: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/40.jpg)
![Page 41: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/41.jpg)
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.
![Page 42: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/42.jpg)
Flyt (Flow) Mål: Digital redaksjonell design som er så bra at brukeren glemmer at han leser på en datamaskin/iPad/mobil/tablet/kindle/...
![Page 43: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/43.jpg)
Designtriks Grunnleggende triks for design
![Page 44: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/44.jpg)
Typografi Store, lesbare, spennende fonter. Bruk luft - uendelig lerret, brukerne scroller.
![Page 45: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/45.jpg)
![Page 46: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/46.jpg)
Farger Kontrast for lesbarhet. Flere farger. Komplimentærfarger. Gradienter. Transparens. Lyse farger.
![Page 47: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/47.jpg)
![Page 48: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/48.jpg)
Bilder & video Store bilder. Slideshow. Mulighet for fullskjermsvisning Illustrativt stillbilde til brukeren velger å starte video
![Page 49: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/49.jpg)
![Page 50: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/50.jpg)
Touch-interaksjon Store, tydelige knapper. Swipe og andre former for alternativ interaksjon
![Page 51: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/51.jpg)
Peppes Pizza Pilot av digital bestillingsløsning på Peppes Pizza Aker Brygge.
![Page 52: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/52.jpg)
Animasjoner & illustrasjoner Korte, raske introanimasjoner på scenen Animasjoner på bevegelse (fra mus eller touch) Illustrasjoner og grafikk som raskt gir leseren oversikt Interaktiv informasjonsgrafikk
![Page 53: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/53.jpg)
![Page 54: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/54.jpg)
Hold det enkelt Minimalistisk Fokus på det viktigste
![Page 55: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/55.jpg)
![Page 56: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/56.jpg)
Knapper og glansbilder Gjør tydelig forskjell på hva som er trykkbart og ikke. Vær konsekvent. Bruk ikoner der de gir mening alene.
![Page 57: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/57.jpg)
![Page 58: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/58.jpg)
Nielsens 9 heuristikker http://www.nngroup.com/articles/ten-usability-heuristics/
![Page 59: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/59.jpg)
1. Systemstatus skal vises - visibility Systemet skal alltid holde bruker informert om hva som skjer gjennom passende feedback innen rimelig tid.
![Page 60: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/60.jpg)
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.
![Page 61: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/61.jpg)
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
![Page 62: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/62.jpg)
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.
![Page 63: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/63.jpg)
5. Forebygge feil Eliminer så godt det lar seg gjøre brukers mulighet til å gjøre feil gjennom et godt design. Forklarende feilmeldinger, bekreftelsesdialogbokser.
![Page 64: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/64.jpg)
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.
![Page 65: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/65.jpg)
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.
![Page 66: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/66.jpg)
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.
![Page 67: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/67.jpg)
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.
![Page 68: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/68.jpg)
Typografi
![Page 69: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/69.jpg)
![Page 70: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/70.jpg)
![Page 71: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/71.jpg)
”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.”
![Page 72: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/72.jpg)
![Page 73: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/73.jpg)
Design for skjerm Alle skjermene
![Page 74: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/74.jpg)
Samsung Galaxy S3 vs iPhone 4S
![Page 75: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/75.jpg)
Tabletjungelen
![Page 76: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/76.jpg)
Verktøy og oppgave
![Page 77: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/77.jpg)
Fluidui.com
![Page 78: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/78.jpg)
Workshopoppgave Bjørnen og reven Folkeeventyr – barnebok i lommen Tilpass denne til mobil, jobb med typografi, interaktivitet og illustrasjon
![Page 79: Gjesteforelesning - digital interaktiv design - KHIB](https://reader033.vdocument.in/reader033/viewer/2022042715/559ab60a1a28ab8d078b4588/html5/thumbnails/79.jpg)
Eksempler og lenker http://d7.no/khib