Filmtajm Introduktion och grunder! Siftables http://www.youtube.com/watch?v=ol6sqhfad3w&nr=1 INTERAKTIVA SYSTEM Mattias Arvola Institutionen för datavetenskap 2 Gränssnittet är systemet! Lärare! Mattias Arvola, mattias.arvola@liu.se! Johan Åberg, johan.aberg@liu.se Gruppindelning! Minimiteo! Läggs upp på hemsidan! Ta upp kontakten i gruppen! Dra igång! 3 4
Vad du lär dig Dessa färdigheters roll i systemutveckling! Design, prototypning och användartestning av interaktiva system arbetsmängd! Därutöver introduceras:! Grundbegrepp i människa-datorinteraktion! Användarstudier! Kravformulering! Användargränssnitt DESIGN, PROTOTYPNING OCH ANVÄNDARTESTNING IMPLEMENTATION tid 5 6 Kursinformationen Kurslitteratur! 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! Kompendium! Artiklar och bokkapitel online: se studieanvisningen 7 8
9 Deadlines Vad ska ni göra! Se kurshemsidan under Schema. Uppdrag! Flera att välja på. Prata ihop er i gruppen. 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 posterpresentation samt rapport.! Individuell rapport med frivillig del för 4:a och 5:a på uppgifterna 10 Föreläsning Roll 1. 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 Förklarande kopplat till uppgift och heuristisk utv. 6. Datorprototyper Fördjupande kopplat till uppgift Introduktion av grundbergrepp i människa-datorinteraktion 7. Användbarhetstestning Fördjupande kopplat till uppgift 8. Gästföreläsning: Live coding, prototypning i kod Breddande av Micke Kindborg på MoSync. 11 12
Människa-datorinteraktion Delvetenskaper! 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! 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 13 14 Användning Användning Social organisation Människa-maskinsystem Social organisation Människa-maskinsystem Människa Applikationer Dator Människa Applikationer Dator Kognition och emotion Språk, kommunikation och interaktion Ergonomi Interaktionstekniker Interaktiv form In- och utmatningsenheter Grafik Arkitektur Kognition och emotion Språk, kommunikation och interaktion Ergonomi Interaktionstekniker Interaktiv form In- och utmatningsenheter Grafik Arkitektur Utvärderingstekniker Designexempel Designansatser Utvecklingsprocess MÄNNISKA-DATORINTERAKTION Implementationstekniker och verktyg 15 Utvärderingstekniker Designexempel Designansatser Utvecklingsprocess KOGNITIONSVETAREN Implementationstekniker och verktyg 16
Användning Användning Social organisation Människa-maskinsystem Social organisation Människa-maskinsystem Människa Applikationer Dator Människa Applikationer Dator Kognition och emotion Språk, kommunikation och interaktion Ergonomi Interaktionstekniker Interaktiv form In- och utmatningsenheter Grafik Arkitektur Kognition och emotion Språk, kommunikation och interaktion Ergonomi Interaktionstekniker Interaktiv form In- och utmatningsenheter Grafik Arkitektur Utvärderingstekniker Designexempel Designansatser Utvecklingsprocess SYSTEMVETAREN Implementationstekniker och verktyg 17 Utvärderingstekniker Designexempel Designansatser Utvecklingsprocess DESIGNERN Implementationstekniker och verktyg 18 Användning Användning Social organisation Människa-maskinsystem Social organisation Människa-maskinsystem Människa Applikationer Dator Människa Applikationer Dator Kognition och emotion Språk, kommunikation och interaktion Ergonomi Interaktionstekniker Interaktiv form In- och utmatningsenheter Grafik Arkitektur Kognition och emotion Språk, kommunikation och interaktion Ergonomi Interaktionstekniker Interaktiv form In- och utmatningsenheter Grafik Arkitektur Utvärderingstekniker Designexempel Designansatser Utvecklingsprocess DATAVETAREN Implementationstekniker och verktyg 19 Utvärderingstekniker Designexempel Designansatser Utvecklingsprocess DENNA KURS FOKUS Implementationstekniker och verktyg 20
Användning Användning Social organisation Människa-maskinsystem Social organisation Människa-maskinsystem Människa Applikationer Dator Människa Applikationer Dator Kognition och emotion Språk, kommunikation och interaktion Ergonomi Interaktionstekniker Interaktiv form In- och utmatningsenheter Grafik Arkitektur Kognition och emotion Språk, kommunikation och interaktion Ergonomi Interaktionstekniker Interaktiv form In- och utmatningsenheter Grafik Arkitektur Utvärderingstekniker Designexempel Designansatser Utvecklingsprocess KOGNITIV PSYKOLOGI Implementationstekniker och verktyg 21 Utvärderingstekniker Designexempel Designansatser Utvecklingsprocess LINGVISTIK Implementationstekniker och verktyg 22 Interaktiva system 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! 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 23 24
according to Jonas Löwgren INTERACTION DESIGN Interaction Design refers to the shaping of interactive products and services with a specific focus on their use. 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 25 26 1. Planera den användarnära processen 2. Förstå och specificera brukssituationen Uppfyller kraven 5. Utvärdera mot användarkrav 3. Specificera användar- och verksamhetskrav konceptdesign detaljdesign specifikation En användarnära designprocess (ISO 9241-210, 2010) 4. Producera designlösningar 27 28
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 Handlingsinviter sekvensieras Reply Forward Print Delete 31 32
Handlingsinviter i GUIs sekvensieras också Vilken ger tydligaste inviten för att scrolla Selected Mouse Over Unselected Disabled United States United Arab Emirates United Kingdom United States US Minor Outlying Isl. Uruguay List Item List Item List Item List Item List Item List Item 33 34 Mentala modeller JA Falsk&invit Upptäckbar&invit! Användares föreställningar om domänen och systemen de använder. Hur funkar det i deras värld? Perceptuell) informa0on NEJ Korrekt&förkastad&invit Gömd&invit NEJ JA Handlingsinvit 35 36
Mentala modeller i design (Norman, 1988) Designa en konceptuell modell (Dan Brown, http://www.uie.com/articles/concept_models) 37 38 Metaforer Det ska fungera som (Marcus, 1995)! 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.! 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, TVbolag, 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 39 40
Funktioner ska fungera som att (Marcus, 1995) Vad som designas i interaktionsdesign! 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 Abstraktionsnivå Koncept Funktioner o. innehåll Struktur Interaktion Presentation Projektets löptid 41 42 Direktmanipulation http://msdn.microsoft.com/en-us/library/windows/apps/hh465315.aspx Ej direktmanipulation http://msdn.microsoft.com/en-us/library/windows/apps/hh465315.aspx! Kontinuerligt representerade objekt och fysiska handlingar som ger direkt effekt. 43 44
45 MÅL Feedback AVSIKT FÖRVÄNTAN BEDÖMA! Återkoppling på resultatet av en handling. BESTÄM HANDLING TOLKA MENTAL AKTIVITET Copy Moving 1,234 Files to "Keynotopia" GENOMFÖR! UPPFATTA! 36.6 MB of 126.9 MB - About 10 seconds FYSISK AKTIVITET NORMANS HANDLINGSCYKEL 46 Feedforward! Att man vet vad som ska hända innan man utför handlingen. http://www.transformatordesign.se/case/attention-2/ FYSISKT SYSTEM GULF OF EXECUTION GULF OF EVALUATION MÅL Gulf: avgrund, stup, skrämmande gap, bråddjup Execution: genomförande Evaluation: bedömning 47 48
Uppmärksamhet och den magiska siffran 7±2! Om omgivningen stjäl fokus tappar man det som fanns i arbetsminnet 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. 49 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 Effektivt Ändamålsenligt 54 Effektivt Ändamålsenligt Effektivt Ändamålsenligt Tillfredsställande Tillfredsställande Specifika användare, med en produkt och ett specifikt mål i givet sammanhang. 55 56
Användbarhetsmått Produktkvalitet! Avgöra om man når sina designmål! Uppföljning mellan versioner! Bedöma konkurrenskraft ÅTRÅVÄRD Vad vill folk ha? KAPABEL Vad kan vi bygga? BÄRKRAFTIG Bär sig verksamheten? 57 58 Hållbarhet Summa summarum! 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! 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 59 60
www.liu.se