avancerad interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella...

50
Avancerad Interaktionsdesign MAMN01, KIRSTEN RASSMUS-GRÖHN Kirsten Rassmus-Gröhn, MAMN01 150324

Upload: others

Post on 27-Jul-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Avancerad Interaktionsdesign MAMN01, KIRSTEN RASSMUS-GRÖHN

Kirsten Rassmus-Gröhn, MAMN01 150324

Page 2: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Idag

•  Upprop •  Översikt över kursen •  Kursmål och metoder

•  Examinationskriterier •  Inspiration

•  Praktisk information

Page 3: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Upprop

Page 4: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Förkunskaper

•  Krav –  Interaktionsdesign/MDI

•  Förutsatta förkunskaper

– Kognition – Programmeringsteknik, fördjupningskurs

Page 5: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Översikt

Page 6: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Kursens syfte … förmedla kunskap om interaktion och tekniker

för människonära design baserat på interaktion som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar

gränssnitt som baserar sig på t ex gester, 3D, ljud och känsel … prototyp-verktyg: Android-mobiler …innehåller

en mängd olika sensorer och möjliga sätt att förmedla information till användaren

Page 7: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Fokus: mobil interaktion

Page 8: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Kursens upplägg

• Projekt med obligatoriska hållpunkter • Mindre antal föreläsningar för att få teoretisk

bakgrund – referera i rapport!

Page 9: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Föreläsningar

1.  Introduktions- föreläsning (idag)

2.  Bortom skärmen – haptik och ljud

3.  Tangible interaction

4.  Augmented reality 5.  Gester

Page 10: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Kursmål och metoder

Page 11: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Kursmål

•  Förstå och tillämpa olika former av interaktion – Specifika krav på mobila tillämpningar

•  Kunna designa och implementera interaktion baserat på kunskap om människor och kontexter

Page 12: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Kursmål

•  Kunna bygga prototyper – Alla i projektgruppen ska efter genomgången kurs

kunna programmera en enkel Android-app som läser någon sensor och ger feedback till en användare

– Projektgruppen som helhet ska i samarbete göra en gemensam app, vars mål, funktion och innehåll man bestämmer själv med hjälp av handledare / kursens lärare

Page 13: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Projektets upplägg

•  Fyra personer per grupp •  Hållpunkter i form av:

–  Handledning 1 gång/vecka

–  Brainstorming

–  Idé-presentation

–  Mellanredovisning

–  Slutmässa

•  Utrustning –  Dator på IKDC / Egen dator

–  Androidtelefon

Page 14: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Prototypverktyg: Android Studio + Git

•  Workshop i morgon för att installera och sätta upp •  Alla ska:

–  Installera Android Studio

– Skapa Git-konto – Börja på en ”Hello compass” app

Page 15: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

HI-FI Prototyp

Färdig produkt Prototyp

Det viktiga: •  att realisera sina designidéer i Android •  att experimentera med interaktion •  att testa sin(a) interaktionsidé(er) på ”riktiga människor” •  att ha korta iterationer och därmed kunna göra flera test – tänk ”agile”, tänk ”sprint” •  att motivera slutliga designval

Page 16: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Användarcentrerad design •  Utnyttja kunskaper från tidigare kurser •  Använda kurslitteraturen:

– User Study Guidelines

– Kontextkort –  Forskningsartiklar

•  Reflektera över och beskriv –  designmetoder som används –  designbeslut som ni tar

Page 17: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Projektuppgiften

• Designa och prototypa en (vertikal) prototyp av ett eller flera interaktionskoncept i en användarcentrerad designprocess

Page 18: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Prototyping

Page 19: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Det här kursen handlar om…

•  Avancerad interaktion •  På A-nivå •  Avancerad designprocess – agil! •  En smartphone har massor av sensorer:

–  GPS, kompass, accelerometer, gyro, touch screen, kamera, Bluetooth, proximity sensor, ljussensor, mikrofon, NFC…

•  Man kan presentera information via

–  Skärm

–  Ljud

–  Vibration

–  och kombinationer av dessa

Page 20: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Avancerad nivå

•  fördjupning avseende kunskaper, färdigheter och förmågor

•  utveckla studenternas förmåga att självständigt integrera och använda kunskaper

•  utveckla studenternas förmåga att hantera komplexa företeelser, frågeställningar och situationer

•  utveckla studenternas förutsättningar för yrkesverksamhet som ställer stora krav på självständighet eller för forsknings- och utvecklingsarbete

Page 21: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Examinationskriterier

Page 22: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Examinationsmoment

•  Prototyp •  Rapport •  Del-projektredovisningar

•  YouTube-film •  Mässa

•  Individuell uppgift •  Individuell reflektion

•  Se utförligare dokument på hemsidan!!

Page 23: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Hemsidan

•  http://www.eat.lth.se/kurser/interaktionsdesign/avancerad-interaktionsdesign-mamn01/

•  Bör innehålla det ni behöver veta – kolla där först innan ni frågar! Säg till om något fattas.

Page 24: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Prototyp

Det är inte meningsfullt att sätta fasta betygskriterier på prototypen. Det är och ska vara en kreativ process och som sådan växer prototypen och nya interaktions-idéer fram under tiden som arbetet pågår. En sådan process kan hämmas av fasta kriterier och kvantitativ bedömning.

Vid storgruppshandledningarna kommer vi att försöka ge löpande återkoppling på kvaliteten.

Page 25: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Kriterier för prototyp

•  Kombinationen av interaktionssätt

–  Helhet och lämplighet

–  Antal provade interaktionssätt (inte till överdrift!)

•  Kvaliteten på ”bortom-skärmen”-interaktion

–  Idé (testbar)

–  Hur väl den är realiserad/implementerad för sitt ändamål (inte hur snygg koden är!)

•  Visuella kvaliteter

–  Färger / grid / typografi etc.

–  Estetik

Page 26: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Individuell uppgift

•  “Hello Compass” el. liknande •  För att komma igång på en gång

•  Info kommer på hemsidan så snart det går =)

Page 27: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Mellan-redovisningar

•  Idé-presentation – Pitcha!

•  Work in Progress-presentation

–  ”Mer officiell” presentation (intresserad utomstående kommer!)

•  Använd ppt / liknande –  Läs instruktionerna i ”Examinations-kriterier…” –  Tänk på tid och antal slides så ni hinner med

– Skicka slides 1 dag innan (ppt eller pdf)

Page 28: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Kod

•  All kod delas på GitHub, och handledaren ska vara inbjuden till projektet / teamet

•  Handledaren är dock inte programmerings-handledare!

•  Notera att kod-citat, och lånad kod för delar av projektet är tillåtet och t.o.m. önskvärt. Uppfinn inte hjulet. Lägg fokus på att göra en körbar prototyp med ny och intressant interaktion!

•  Vi tittar inte alls på koden i syfte att bedöma kvaliteten på den.

Page 29: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Rapport

•  Processinriktad men ändå ingen “reseberättelse” •  Metodbeskrivning - hur har ni jobbat? •  Beskrivning och motivering av designbeslut

•  Beskrivning av prototypen

•  Skriv dagbok under tiden, annars glömmer ni vad ni gjort!

Page 30: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

YouTube-klipp

•  Exempel:

•  http://www.wired.co.uk/news/archive/2011-10/11/braille-touchscreen

•  http://www.youtube.com/watch?v=-e8tsG4uIt0

Page 31: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Mässan

Page 32: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Individuell reflektion

•  Beskriv och reflektera över vad du har gjort och bidragit till i projektarbetet och vad dina projektmedarbetare (med namn!) har gjort och bidragit till. Använd dessa rubriker:

– Mina viktigaste bidrag till projektet – Projektmedarbetarnas bidrag till projektet – Vad jag har lärt mig av projektarbetet.

•  Omkring en A4-sida i omfång (450-750 ord).

Page 33: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Deadline

•  Film och skylt till mässan: 19/5 kl. 12:00 •  Kod, apk: 19/5 kl. 12:00 •  Rapport: 24/5 kl. 23:59

•  Individuell reflektion: 27/5 kl. 23:59

•  Hållpunkterna i projektet finns för att hjälpa till att styra upp tidplanen MEN Ni får i övrigt se till att planera er tid

•  Håll deadlines – de är för er skull och för att vi ska hinna ge feedback och sätta betyg i tid!

Page 34: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Strax paus

Page 35: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Workshop morgon

•  Under pausen: – Skriv upp er på en av tiderna! –  10-12

–  15-17 •  Plats: VR-labbet

Page 36: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Inspiration

Page 37: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Fördelar med dessa projekt •  Utforskar interaktion •  Flera sensorer och modaliteter samverkar

Page 38: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Praktisk information

Page 39: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Projektgrupper

•  Fyra personer per grupp •  Indelning i slutet av denna introduktionsföreläsning! •  Hitta på ett ”företagsnamn” till er grupp

Page 40: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Telefoner

•  Emulatorn inte bra till denna kurs!

•  Egna telefoner?

•  Lånetelefoner –  Lånas av Kirre,

rum 531.

Page 41: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Datorrum •  Virtual Reality Labbet, IKDCs källare (plan 1)

– kräver kort

Page 42: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Konto och access till rum

•  Tillgång till VR-labbet får ni automatiskt när ni är registrerade till kursen

•  Inloggning på VR-datorerna – konto-uppgifter finns på tavlan i VR-labbet.

Page 43: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Hemma

•  Installera Android Studio på era egna datorer! •  Har ni bärbara datorer – tag gärna med dem till

workshopen och jobba med dem!

Page 44: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Android-hjälp

1.  Prova själv 2.  Google-is-your-friend ;) 3.  Charlotte Magnusson, jour-tid fredagar 10-12.

För ev. hjälp utanför denna tid maila först.

Page 45: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Två viktiga veckor

•  Gruppindelning •  Kom igång med Android Studio och Git (workshop i

morgon onsdag 10-12 eller 15-17)

•  Börja med Hello Compass •  Inspirations och brainstorming-workshop (31/3)

•  Bestämma projekt, första handledning och presentera idé (direkt efter påsk 8/4)

Page 46: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Lärare

•  Kirsten “Kirre” Rassmus-Gröhn (kursansvarig, föreläsare) –  Forskare, docent

–  Forskar på interaktionsdesign och tillgänglighet

•  Mattias Wallergård (föreläsare) –  Forskare, ETP

–  Forskar på interaktionsdesign med fokus på VR och digital heritage

Page 47: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Lärare

•  Charlotte Magnusson (Examinator och Androidhjälp) –  Forskare, docent

–  Forskar på interaktionsdesign och tillgänglighet

•  Günter Alce (föreläsare) –  Industridoktorand, SONY

–  Forskar på AR

•  Alexander Triebe (handledare)

–  Projektanställd på Design

–  Flera års erfarenhet av handledning inom interaktionsdesign

Page 48: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Lärare

•  Joakim Eriksson (handledare) –  Forskare, lärare

–  Forskar på Interaktionsdesign, VR

•  Jonas Svensson, Jakob Thomasson (handledare och stöd gällande Git och Android Studio)

–  Examensarbetare (Mobil AR med Android Studio)

–  Har gått kursen

Page 49: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324

Kursombud!

Page 50: Avancerad Interaktionsdesign · 2015-03-26 · som sträcker sig bortom den traditionella skärm-metaforen, … hur man designar, prototypar och utvärderar gränssnitt som baserar

Kirsten Rassmus-Gröhn, MAMN01 150324