Siftables Introduktion och grunderTDDD59/Fo1-handout.pdf!Webbsajter, intranät, och communities...
Transcript of Siftables Introduktion och grunderTDDD59/Fo1-handout.pdf!Webbsajter, intranät, och communities...
INTERAKTIVA SYSTEMMattias Arvola
Institutionen för datavetenskap
Introduktion och grunder
Filmtajm
! Siftables
http://www.youtube.com/watch?v=Ol6sqHFaD3w&NR=1
2
Gränssnittet är systemet!
3
! Minimiteo4
Lärare
! Mattias Arvola, [email protected]
! Johan Åberg, [email protected]
Gruppindelning
! Läggs upp på hemsidan
! Ta upp kontakten i gruppen
! Dra igång!
Vad du lär dig
! Design, prototypning och användartestning av interaktiva system
! Därutöver introduceras:
! Grundbegrepp i människa-datorinteraktion
! Användarstudier
! Kravformulering
! Användargränssnitt
5
Dessa färdigheters roll i systemutveckling
6
DESIGN, PROTOTYPNING OCH ANVÄNDARTESTNING
IMPLEMENTATION
arbetsmängd
tid
Kursinformationen
! Läs studieanvisningen (PDF:en) noga
! Gå igenom examinationsuppgifterna
! Läs den tillhörande litteraturen innan ni börjar
! Fråga om ni undrar
! Håll koll på kurshemsidan för uppdateringar
7
Kurslitteratur
! Kompendium ! Artiklar och bokkapitel online: se studieanvisningen
8
9
Deadlines
! Se kurshemsidan under Schema.
Uppdrag
! Flera att välja på. Prata ihop er i gruppen.
Vad ska ni göra
1. Koncept 25%1. konceptdesign
2. scenarios och krav
! muntlig och skriftlig redovisning
2.Pappersprototyp 25%1. wireframeskissning
2. pappersprototyp
3. heuristisk utvärdering
! muntlig och skriftlig redovisning
! Digital interaktiv prototyp 50%1. konstruktion
2. användbarhetstestning
! muntlig och skriftlig poster-presentation samt rapport.
! Individuell rapport med frivillig del för 4:a och 5:a på uppgifterna
10
11
Föreläsning Roll1. Introduktion och grunder Introducerande
2. Användarstudier Bakgrund kopplat till behovsanalys och kravhantering
3. Konceptdesign Förklarande kopplat till uppgift
4. Användargränssnitt Breddande kopplat till uppgift
5. Wireframes, scenarios, prototypning och heuristisk utv.
Förklarande kopplat till uppgift
6. Datorprototyper Fördjupande kopplat till uppgift
7. Användbarhetstestning Fördjupande kopplat till uppgift
8. Gästföreläsning: Live coding, prototypning i kod
Breddande av Micke Kindborg på MoSync.
12
Introduktion av grundbergrepp i
människa-datorinteraktion
Människa-datorinteraktion
! Ett tvärvetenskapligt ämne som handlar om design, utvärdering och konstruktion av interaktiva system för mänskligt bruk, vilket t.ex. inkluderar:
! Vad människor och datorer kan åstadkomma tillsammans som ett system
! Hur människor och datorer kommunicerar med varandra
! Människans förmåga att hantera datorer (inklusive lärbarhet för gränssnitt)
! Algoritmer i gränssnitt
! Specifikation, design och implementation av gränssnitt
! Kompromisser i design
13
Delvetenskaper
! Datavetenskap: applikationsdesign och utveckling av användargränssnitt
! Psykologi: kognitiva processer och analys av användares beteende
! Sociologi och antropologi: interaktion genom teknik, arbete och organisation
! Industridesign: interaktiva produkter och tjänster
14
15
Användning
Människa Dator
Utvecklingsprocess
ErgonomiIn- och
utmatningsenheter
Interaktions-tekniker
Interaktiv form
Grafik
Arkitektur
Implementations-tekniker och verktyg
Designexempel
Designansatser
Utvärderings-tekniker
Kognition och emotion
Språk, kommunikation och interaktion
Social organisation
Applikationer
Människa-maskinsystem
MÄNNISKA-DATORINTERAKTION
Användning
Människa Dator
Utvecklingsprocess
ErgonomiIn- och
utmatningsenheter
Interaktions-tekniker
Interaktiv form
Grafik
Arkitektur
Implementations-tekniker och verktyg
Designexempel
Designansatser
Utvärderings-tekniker
Kognition och emotion
Språk, kommunikation och interaktion
Social organisation
Applikationer
Människa-maskinsystem
16KOGNITIONSVETAREN
Användning
Människa Dator
Utvecklingsprocess
ErgonomiIn- och
utmatningsenheter
Interaktions-tekniker
Interaktiv form
Grafik
Arkitektur
Implementations-tekniker och verktyg
Designexempel
Designansatser
Utvärderings-tekniker
Kognition och emotion
Språk, kommunikation och interaktion
Social organisation
Applikationer
Människa-maskinsystem
17SYSTEMVETAREN
Användning
Människa Dator
Utvecklingsprocess
ErgonomiIn- och
utmatningsenheter
Interaktions-tekniker
Interaktiv form
Grafik
Arkitektur
Implementations-tekniker och verktyg
Designexempel
Designansatser
Utvärderings-tekniker
Kognition och emotion
Språk, kommunikation och interaktion
Social organisation
Applikationer
Människa-maskinsystem
18DESIGNERN
Användning
Människa Dator
Utvecklingsprocess
ErgonomiIn- och
utmatningsenheter
Interaktions-tekniker
Interaktiv form
Grafik
Arkitektur
Implementations-tekniker och verktyg
Designexempel
Designansatser
Utvärderings-tekniker
Kognition och emotion
Språk, kommunikation och interaktion
Social organisation
Applikationer
Människa-maskinsystem
19DATAVETAREN
Användning
Människa Dator
Utvecklingsprocess
ErgonomiIn- och
utmatningsenheter
Interaktions-tekniker
Interaktiv form
Grafik
Arkitektur
Implementations-tekniker och verktyg
Designexempel
Designansatser
Utvärderings-tekniker
Kognition och emotion
Språk, kommunikation och interaktion
Social organisation
Applikationer
Människa-maskinsystem
20DENNA KURS FOKUS
Användning
Människa Dator
Utvecklingsprocess
ErgonomiIn- och
utmatningsenheter
Interaktions-tekniker
Interaktiv form
Grafik
Arkitektur
Implementations-tekniker och verktyg
Designexempel
Designansatser
Utvärderings-tekniker
Kognition och emotion
Språk, kommunikation och interaktion
Social organisation
Applikationer
Människa-maskinsystem
21KOGNITIV PSYKOLOGI
Användning
Människa Dator
Utvecklingsprocess
ErgonomiIn- och
utmatningsenheter
Interaktions-tekniker
Interaktiv form
Grafik
Arkitektur
Implementations-tekniker och verktyg
Designexempel
Designansatser
Utvärderings-tekniker
Kognition och emotion
Språk, kommunikation och interaktion
Social organisation
Applikationer
Människa-maskinsystem
22LINGVISTIK
Interaktiva system
! Webbsajter, intranät, och communities
! Interaktiva miljöer och utställningar
! Mjukvarugränssnitt
! Mobila appar och operativ
! Kontrollrumsdisplayer
! Gränssnitt för interaktiva konsumentprodukter och mediasystem
23
Interaktiva system
! Erbjuder folk att samverka och samspela med dem, genom dem eller med hjälp av dem
! Att samspela betyder här att brukare, produkter och tjänster samverkar på ett i bästa fall harmoniskt och lekfullt enkelt sätt
! Brukare och produkter eller tjänster handlar gemensamt i förening mot ett gemensamt mål och på ett samordnat sätt
! Datorbaserade produkter och tjänster kan svara på eller initiera handlingar vilket skapar en dialog i systemet i form av ett tidsmässigt flöde
24
according to Jonas LöwgrenINTERACTION DESIGN
Interaction Design refers to the shaping of interactive products and services with a specific focus on their use.
25
according to Bill Verplank
What, Why and How do you:
Design handlar om att(Löwgren, 2008)
! Utforska möjliga framtida situationer
! Förbättra situationen genom en produkt eller tjänst
! Uppmärksamma praktiska, tekniska, etiska och estetiska kvaliteter
! Utveckla förståelsen för designproblemet parallellt med förståelsen för möjliga lösningar
! Gestalta idéer på ett konkret sätt i skisser och modeller
26
En användarnära designprocess (ISO 9241-210, 2010)
27
1. Planera den användarnära
processen
2. Förstå och specificera
brukssituationen
3. Specificera användar- och
verksamhetskrav
4. Producera designlösningar
5. Utvärdera mot användarkrav
Uppfyller kraven
28
konceptdesign detaljdesign specifikation
Affordances (handlingsinviter)
! Uppfattade och faktiska egenskaper hos ett ting som bestämmer vad man kan göra med den.
29 30
Knappar på skärmen tycks ge en invit att trycka på dem men inte dra i dem eller redigera
31
Reply
Forward
Delete
Handlingsinviter sekvensieras
32
Handlingsinviter i GUIs sekvensieras också
33
Selected
Mouse Over
Unselected
Disabled
Vilken ger tydligaste inviten för att scrolla
34
List Item
List ItemList Item
List ItemList ItemList Item
List Item
United States
United Arab EmiratesUnited KingdomUnited StatesUS Minor Outlying Isl.Uruguay
35
Perceptuell)
JA
)informa0on
NEJ
Falsk&invit Upptäckbar&invit
Korrekt&förkastad&invit Gömd&invit
NEJ JA
Handlinngsinvit
Mentala modeller! Användares föreställningar om domänen och systemen de
använder. Hur funkar det i deras värld?
36
Mentala modeller i design (Norman, 1988)
37
Designa en konceptuell modell(Dan Brown, http://www.uie.com/articles/concept_models)
38
Metaforer
! Att förstå en domän genom analogi till en annan domän (metaforiskt tänkande) är ett sätt att strukturera upp en konceptuell modell.
39
Det ska fungera som… (Marcus, 1995)
! Ett skrivbord: Drawers, files, folders, papers, paper clips, stick-on note sheets
! Ett dokument: Böcker, kapitel, bokmärken, bilder, tidningar, stycken, tidskrifter, artiklar, nyhetsbrev, formulär
! Ett foto: Albums, photos, photo brackets/holders
! TV: Program, kanaler, TV-bolag, reklam, TV-guide
! En kortlek: Kort, högar
! En behållare: Hyllor, lådor, fack
! Ett träd: Rötter, stam, grenar, löv
! En stad: Folk, områden, landmärken, vägar, byggnader, rum, fönster, skrivbord
40
Funktioner ska fungera som att… (Marcus, 1995)
! Traversera (målinriktat): navigera, köra, flyga, gå
! Browsa (mindre målinriktat sökande efter alternativ): snabbläsa, fönster-shoppa, bläddra
! Scanna (väldigt snabb browsing): rulla förbi, passera anslagstavlor längs motorvägen
! Lokalisera: peka, beröra, ringa in
! Välja: beröra, peta, ta tag, fånga med lasso, placera fingret på och dra
! Skapa: lägga till, kopiera
! Radera: kasta bort, förstöra, tappa, återvinna, makulera
41
Vad som designas i interaktionsdesign
42
Abst
rakt
ions
nivå
Projektets löptid
Koncept
Funktioner o. innehåll
Struktur
Interaktion
Presentation
Direktmanipulationhttp://msdn.microsoft.com/en-us/library/windows/apps/hh465315.aspx
! Kontinuerligt representerade objekt och fysiska handlingar som ger direkt effekt.
43
Ej direktmanipulationhttp://msdn.microsoft.com/en-us/library/windows/apps/hh465315.aspx
44
45
BESTÄM HANDLING
FÖRVÄNTAN
MÅL
BEDÖMAAVSIKT
GENOMFÖR! UPPFATTA!
MENTAL AKTIVITET
FYSISK AKTIVITET
TOLKA
NORMANS HANDLINGSCYKEL
Feedback
! Återkoppling på resultatet av en handling.
46
Copy
Moving 1,234 Files to "Keynotopia"
36.6 MB of 126.9 MB - About 10 seconds
Feedforward
! Att man vet vad som ska hända innan man utför handlingen.http://www.transformatordesign.se/case/attention-2/
47 48
GULF OFEXECUTION
GULF OFEVALUATION
FYSISKT SYSTEM
MÅL
Gulf: avgrund, stup, skrämmande gap, bråddjup Execution: genomförandeEvaluation: bedömning
Uppmärksamhet och den magiska siffran 7±2
! Om omgivningen stjäl fokus tappar man det som fanns i arbetsminnet
49
Därför:
! Hjälp folk att komma ihåg vad de gör och deras arbetsobjekts status
! Modes är både kraftfulla och riskabla
! Att komma ihåg instruktioner med många steg är svårt. Se till att användaren kan se dem samtidigt som de utför stegen.
50
Användbarhet
! Den grad i vilken specifika användare kan använda en produkt för att uppnå ett specifikt mål på ett ändamålsenligt, effektivt och för användaren tillfredsställande sätt i ett givet sammanhang. – ISO 9241-210
51 52
53
Ändamålsenligt
54
ÄndamålsenligtEffektivt
55
ÄndamålsenligtEffektivt
Tillfredsställande
56
Specifika användare, med en produkt och ett specifikt mål i givet sammanhang.
ÄndamålsenligtEffektivt
Tillfredsställande
Användbarhetsmått
! Avgöra om man når sina designmål
! Uppföljning mellan versioner
! Bedöma konkurrenskraft
57
Produktkvalitet
58
ÅTRÅVÄRDVad vill folk ha?
KAPABELVad kan vi bygga?
BÄRKRAFTIGBär sig verksamheten?
Hållbarhet
! Hur bidrar designen till långsiktig hållbar utveckling?
! Ekologisk: påverkan på natur och hälsa
! Social: påverkan på samhället och grundläggande mänskliga behov
! Ekonomisk: hushållning med mänskliga och materiella resurser
59
Summa summarum
! Läs studieanvisningen
! Läs litteraturen till uppgifterna
! Sätt igång och spåna!
! Människa-datorinteraktion och Interaktionsdesign
! Affordances, Mentala modeller, Metaforer, Direktmanipulation, Feedback, Feedforward, Gulf of execution & evaluation, Användbarhet, Produktkvalitet, Hållbarhet
60
www.liu.se