Siftables Introduktion och grunderTDDD59/Fo1-handout.pdf!Webbsajter, intranät, och communities !Interaktiva miljöer och utställningar !Mjukvarugränssnitt !Mobila appar och operativ

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


Interaktiv form

Grafik

Arkitektur


Designexempel

Designansatser




Social organisation

Applikationer


16KOGNITIONSVETAREN

Användning

Människa Dator

Utvecklingsprocess

ErgonomiIn- och

utmatningsenheter


Interaktiv form

Grafik

Arkitektur


Designexempel

Designansatser




Social organisation

Applikationer


17SYSTEMVETAREN

Användning

Människa Dator

Utvecklingsprocess

ErgonomiIn- och

utmatningsenheter


Interaktiv form

Grafik

Arkitektur


Designexempel

Designansatser




Social organisation

Applikationer


18DESIGNERN

Användning

Människa Dator

Utvecklingsprocess

ErgonomiIn- och

utmatningsenheter


Interaktiv form

Grafik

Arkitektur


Designexempel

Designansatser




Social organisation

Applikationer


19DATAVETAREN

Användning

Människa Dator

Utvecklingsprocess

ErgonomiIn- och

utmatningsenheter


Interaktiv form

Grafik

Arkitektur


Designexempel

Designansatser




Social organisation

Applikationer


20DENNA KURS FOKUS

Användning

Människa Dator

Utvecklingsprocess

ErgonomiIn- och

utmatningsenheter


Interaktiv form

Grafik

Arkitektur


Designexempel

Designansatser




Social organisation

Applikationer


21KOGNITIV PSYKOLOGI

Användning

Människa Dator

Utvecklingsprocess

ErgonomiIn- och

utmatningsenheter


Interaktiv form

Grafik

Arkitektur


Designexempel

Designansatser




Social organisation

Applikationer


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

Print

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


Tillfredsställande

56

Specifika användare, med en produkt och ett specifikt mål i givet sammanhang.


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

Documents

Siftables Introduktion och grunderTDDD59/Fo1-handout.pdf!Webbsajter, intranät, och communities !Interaktiva miljöer och utställningar !Mjukvarugränssnitt !Mobila appar och operativ