Introduktion och grunder

Transkript

1 Filmtajm Introduktion och grunder! Siftables 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

2 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

3 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

4 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 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

5 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

6 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

7 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 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 , 2010) 4. Producera designlösningar 27 28

8 Affordances (handlingsinviter)! Uppfattade och faktiska egenskaper hos ett ting som bestämmer vad man kan göra med den 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

9 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 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

10 Mentala modeller i design (Norman, 1988) Designa en konceptuell modell (Dan Brown, 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

11 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 Direktmanipulation Ej direktmanipulation Kontinuerligt representerade objekt och fysiska handlingar som ger direkt effekt

12 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 MB - About 10 seconds FYSISK AKTIVITET NORMANS HANDLINGSCYKEL 46 Feedforward! Att man vet vad som ska hända innan man utför handlingen. 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

13 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 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

14 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

15 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? 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

16