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