interaktionsdesign i digitala medier
DESCRIPTION
Interaktionsdesign i digitala medier. 2. Grundläggande utgångspunkter för interaktionsdesign - del II. Idag: Frameworks & Techniques. PACT-modellen Interaktionsdesign (IxD) som process Trender och tendenser Metoder och tekniker Förståelse och krav Idégenerering och prototyping - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/1.jpg)
2. Grundläggande utgångspunkter för interaktionsdesign - del II
Interaktionsdesign i digitala medier
![Page 2: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/2.jpg)
Idag: Frameworks & Techniques
1. PACT-modellen
2. Interaktionsdesign (IxD) som process
3. Trender och tendenser
4. Metoder och tekniker
5. Förståelse och krav
6. Idégenerering och prototyping
7. Skissers betydelse vid design
![Page 3: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/3.jpg)
1. PACT Modellen
![Page 4: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/4.jpg)
1. PACT Modellen
• Förståelse för människocentrerad design
- fysiska, psykologiska, intentionella skillnader
- Kognitiv interaktionsdesign (kogvetprog)
- accessability – tillgänglighet, design for all
- acceptans – lämplighet för sammanhang
- Usability (användbarhet) =>Experience design (Upplevelser)
• Förståelse för aktiviteterna som ska använda systemet
• Förståelse för de sammanhang där aktiviteterna äger rum
• Förståelse för vilka tekniklösningar som är möjliga
![Page 5: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/5.jpg)
2. IxD som process (PACT)
Anställda
Människor
Användare
Verktyg
Artefakter
Gränssnitt (UI)
Förståelse Informerar
DesignUtvärdering
Aktiviteter
Sammanhang
P TA C
![Page 6: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/6.jpg)
2. IxD som process (forts)
![Page 7: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/7.jpg)
2. IxD som process (forts)
Utvärdering
FörståelseVision
Design
Konceptuell Fysisk
Benyon 2010, Sid 50
![Page 8: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/8.jpg)
2. IxD som process (forts)
Ett ytterligare steg ….
Inslag av designtänkande ….
Konversation med materialet ….
Generera förståelse och ideer ….
Förfina förståelse och ideer ….
![Page 9: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/9.jpg)
IxD som designprocess
Designprocess
UtforskandeFrån ett till många
Utgångspunkt
![Page 10: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/10.jpg)
IxD som designprocess
Designprocess
ReduktionFrån många till ett
Slutgiltig design
![Page 11: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/11.jpg)
IxD som designprocess
Utgångspunkt
Designprocess
Designprocess
Slutgiltig design
![Page 12: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/12.jpg)
3. Tendenser och trender
• Människocentrerad design - fysiska, psykologiska, intentionella skillnader- Kognitiv interaktionsdesign (kogvetprog)- accessability – tillgänglighet, design for all- acceptans – lämplighet för sammanhang- usability
• Från Usability till Experience design- Användbarhet- Upplevelseorientering
• Nya interaktionsformer och interaktionsparadigm
![Page 13: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/13.jpg)
3. Interaktionsdesign
http://www.youtube.com/watch?v=C3rxCLhzmXY
Ultimately, we are deluding ourselves if we think that the products that we design are the "things" that we sell, rather than the individual, social and cultural experience that they engender, and the value and impact that they have. Design that ignores this is not worthy of the name.
Bill Buxton Microsoft Research
![Page 14: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/14.jpg)
4. Metoder & Tekniker
• Vilka tekniker kan stödja denna process?
• IxD lånar metoder och tekniker från andra fält– Vilka är dessa?– Hur kan vi använda
dem?
• Hur kan vi designa människocentrerade interaktiva system?
![Page 15: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/15.jpg)
4. Förståelse/krav - kapitel 7
• Intervjuer
• Berättelser, scenarios, tidig prototyping
• Frågeformulär - enkäter
• Kulturell rekvisita (cultural probes)
• Kartotek, kort sorteringstekniker
• Observationer
![Page 16: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/16.jpg)
4. Visionsarbete - kapitel 8
• Skisser och ögonblicksbilder
• Storyboards - Moodboards
• Meny och navigationskartor
• Prototyper- Hi-fi, low-fi & Videoprototypes
• Participatory design
![Page 17: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/17.jpg)
4. Scenarios
• En teknik som används inom IxD, HCI och SU i många år.
• Scenarios återkommer under hela den tredje delen.
• Lämplig att använda som del av ert arbete, bra metod för hela kursen.
• Narrativ och berättelser som metod genom hela designarbetet.
![Page 18: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/18.jpg)
4. Scenariobaserad metod sid. 69
AbstraktVillkor för design
Specifikation
User stories Konceptuella scenarios
Concrete scenarios
UseCases
Förståelse
Människor och kontext
Idégenerering och kravspec
Specifikation
Problemutmaningar Grov storyline
Konceptuelldesign
Konceptuellmodell
Fysisk design
Design språk
Prototyping
Vision
Utvärdering
![Page 19: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/19.jpg)
4. User stories
Fokus• Konkreta erfarenheter från
människors vardag• Valfri dokumentation efter
vad som passar bäst• Video,
dagboksanteckningar, foton, ljud
• Viktigt att dokumentera aktiviteter i den kontext de äger rum
• Intervjuer, observationer, användaren dokumenterar själv
Tips• Förberedelser - empati• Intervjua i par - en lyssnar
en antecknar,• Den som lyssnar hör
avvikelser lättare,• Den som berättar kan
överdriva avvikelsers betydelser
• En vanlig dag?Tre bra saker?Tre förbättringsförslag?När fungerar det sämre?Vad har vi glömt?
![Page 20: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/20.jpg)
4. Scenarios
Konceptuella berättelser• Mer abstrakta än User
Stories• Flera User Stories kan
kombineras till ett mindre detaljrikt, mer generellt scenario
• Hjälp att generera design idéer och förstå kraven
• Arbetet handlar om att hitta rätt abstraktionsnivå
• Gemensamma drag, väsentliga detaljer, tydliga problem, önskemål, behov, osv
Konkreta scenarios• Varje konceptuellt
scenario kan generera många konkreta scenarios
• När vi gör konkreta scenarios börjar vi artikulera en interaktionsdesign
• Konkreta scenarios är lämpliga att utvärdera
• Används därför ofta som en teknik i prototyping
• Inga vattentäta skott mellan konceptuella och konkreta scenarios
• Ju mer konkret, desto mer specifikt
![Page 21: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/21.jpg)
4. Use Cases: Fallbeskrivningar
• Beskriver interaktionen mellan aktörer och artefakter
• Beskriver vad aktörerna gör och vad systemet gör
• Många Use Cases för att fånga hela interaktionsdesignen
• Hittills ofta fokuserade på uppgifter och funktioner samt på arbetsdelning mellan system och användare - mindre på känslor och interaktion
![Page 22: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/22.jpg)
5. Principer och tekniker för kravspecifikation• MoscoW:
Must haveShould haveCould haveWant to
• Participativa teknikerKrav är ofta obekanta för alla, samskapande viktigtViktigt inslag i Pact-modellen,
”Tell me and I will forget, show me and I may remember, Involve me and I will understand” Konfusius
![Page 23: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/23.jpg)
Intervjuer Observationer
• Bra sätt att ta reda på vad
människor vill ha och vilka
problem de har för tillfället
• Bra för att samla User Stories
• Strukturerade, Enkätform,
inga följdfrågor
• Semi-strukturerade:
förberedda frågor men möjligt
till kompletteringar, ändringar
o tillägg
• Ostrukturerade: Öppna frågor,
bra när man vill undvika att
påverka och styra
• Bra metod för själv få uppleva
sammanhanget, miljön
• Chans att ställa frågor under
tiden en aktivitet pågår
• Mindre risk med en ’officiell
version’ jämfört med
intervjuer
• Utmaning att inte störa
aktivitet och användare
• Deltagande observation:
tillsammans med användaren
genomföra aktivitet och själ
erfara aktiviteten
![Page 24: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/24.jpg)
Cultural probes
• Bra metod om vi inte kan besöka och delta i användarnas miljö
• Lämna artefakter som används i användarens miljö och lagra data om aktiviteterna
• Användarna kan också själva dokumentera sina aktiviteter
• Ger möjlighet att involvera användarna i designprocessen
![Page 25: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/25.jpg)
6. Envisionment & prototyping
• Tekniker för att stötta idegenerering
- Skisser och snapshots- Storyboards- Mood boards- Navigation maps- Prototyping
![Page 26: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/26.jpg)
Skisser och snapshots
• Skissers betydelse för design - stort fokus idag
• Idéer och tankar kan snabbt visualiseras
• Idéer väsentlig del av det material som ska designas
• Mångfald och flerfald snarare än enfald
• Stöd för val och bedömning
• Träning ger färdighet
– Väsentligt vad som lyfts fram snarare än hur det
gestaltas
– Styrka att behärska hantverket
![Page 27: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/27.jpg)
Storyboards
• Teknik från filmskapande• Seriestrip-stil• Representation av nyckelhändelser• Kan förmedla en känsla av ’flow’• Teknik för att utveckla och gestalta scenarios
http:leapfrog.nl
![Page 28: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/28.jpg)
Moodboards
• Reklam och Interiördesign• Visuell stimuli som ’fångar och förmedlar känslor’• Foton, färger, material/texturer, former, rubriker, ord• Mer inspiration än representation av design• Användaren kan själv skapa
![Page 29: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/29.jpg)
Prototyping
• Konkreta men partiella representationer av en design• Kan användas vid olika steg i processen• Prototypen ska innehålla interaktivitet• Två typer:
– Low-fi Enkla mockups tidigt i designprocessenpapper, penna, kortteknik, use caseskan produceras snabbt och kastas
– Hi-fi :Producerade med mjukvaraBra för att utvärdera och testa interaktivitetSenare del av projektKund kan missta prototyp med färdig produkt
![Page 30: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/30.jpg)
6. Skissers betydelse vid design
Ideation Usability
Skisser Prototyper
![Page 31: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/31.jpg)
Skiss Prototyp
• Frambringande• Föreslår• Utforskar• Frågar• Föreslår• Provocerar• Tentativ• Obunden, utan krav
• Undervisande• Beskrivande• Förfinande• Besvarar• Testar• Löser och fastställer• Specifik• Avbildar mot krav
![Page 32: Interaktionsdesign i digitala medier](https://reader036.vdocument.in/reader036/viewer/2022062321/568136be550346895d9e5bb7/html5/thumbnails/32.jpg)
7. Skisser som konversationsstöd
MIND SKETCH
Create
Read
Seeing as …
Seeing as …
New knowledge Representation