ilmtajm! Siftables ntroduktion och grunder http://www.youtube.com/watch?v=ol6sqa3w&nr=1 NTRAKTVA SYSTM Mattias Arvola nstitutionen för datavetenskap 2 ränssnittet är systemet! Lärare! Mattias Arvola, mattias.arvola@liu.se! Johan Åberg, johan.aberg@liu.se! ertil arlsson, berca955@student.liu.se ruppindelning! Läggs upp på hemsidan! Ta upp kontakten i gruppen! ra igång! 3 4 Vad du lär dig essa färdigheters roll i systemutveckling! esign, prototypning och användartestning av interaktiva system arbetsmängd! ärutöver introduceras: MPLMNTATON! rundbegrepp i människa-datorinteraktion! Användarstudier SN, PROTOTYPNN O ANVÄNARTSTNN! Kravulering! Användargränssnitt 5 tid 6
Kursinationen Kurslitteratur! Arnowitz, J., Arent, M., & erger, N. (2007). ffective Prototyping for Software Makers. Morgan Kaufmann! Läs studieanvisningen (P:en) noga! å igenom examinationsuppgifterna! Läs den tillhörande litteraturen innan ni börjar! råga om ni undrar! e-bok eller fysisk! Artiklar och bokkapitel online: se studieanvisningen! åll koll på kurshemsidan för uppdateringar 7 8 eadlines Vad ska :arna göra! Se kurshemsidan under Schema. 1. esign 37,5% 1. konceptdesign 2. detaljdesign! muntlig och skriftlig redovisning Uppdrag 2.igital interaktiv prototyp 62,5% 1. konstruktion 2. användbarhetstestning! esigna en applikation som ska hjälpa resenärer i bilar att på ett bekvämt och effektivt sätt komma åt ination och underhållning via pekskärmar inbäddade i bilens inredning.! muntlig och skriftlig posterpresentation.! rivillig individuell rapport för chans till 4:a och 5:a på de båda uppgifterna 9 Vad ska :arna och P:arna göra 1. Koncept 25% 1. konceptdesign 10! igital interaktiv prototyp 50% öreläsning Roll 1. ntroduktion och grunder ntroducerande 2. Användarstudier akgrund kopplat till behovsanalys och kravhantering 2. planering av prototyp 1. konstruktion! muntlig och skriftlig redovisning 2. användbarhetstestning 3. esignmetoder! muntlig och skriftlig posterpresentation. ördjupande och breddande kopplat till uppgift 4. Användargränssnitt ördjupande och breddande kopplat till uppgift 5. Prototypning och heuristisk utvärdering ördjupande och breddande kopplat till uppgift 6. Användbarhetstestning ördjupande och breddande kopplat till uppgift 2.Wireframes 25% 1. designkriterier 2. design och wireframekonstruktion! rivillig individuell rapport för chans till 4:a och 5:a på de båda uppgifterna 3. heuristisk utvärdering! muntlig och skriftlig redovisning 11 12
-datorinteraktion! tt tvärvetenskapligt ämne som handlar om design, utvärdering och konstruktion av interaktiva system för mänskligt bruk, vilket t.ex. inkluderar: ntroduktion av grundbergrepp i! Vad människor och datorer kan åstadkomma tillsammans som ett system människa-datorinteraktion! ur människor och datorer kommunicerar med varandra! ns 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 14 13 elvetenskaper! atavetenskap: applikationsdesign och utveckling av användargränssnitt -maskinsystem! Psykologi: kognitiva processer och analys av användares beteende! Sociologi och antropologi: interaktion genom teknik, arbete och organisation! ndustridesign: interaktiva produkter och tjänster mplementationstekniker MÄNNSKA-ATORNTRAKTON 15 -maskinsystem mplementationstekniker mplementationstekniker KONTONSVTARN -maskinsystem 16 SYSTMVTARN 17 18
-maskinsystem -maskinsystem SNRN mplementationstekniker 19 ATAVTARN mplementationstekniker 20 -maskinsystem -maskinsystem NNA KURS OKUS mplementationstekniker 21 NTRAKTONSPRORAMMRN mplementationstekniker 22 -maskinsystem -maskinsystem KONTV PSYKOLO mplementationstekniker 23 LNVSTK mplementationstekniker 24
-maskinsystem -maskinsystem mplementationstekniker mplementationstekniker UTVKLN AV NTRAKTVA SYSTM AVANRA NTRAKTONSSN 25 26 a system -maskinsystem! Webbsajter, intranät, och communities! a miljöer och utställningar! Mjukvarugränssnitt! Mobila appar och operativ! Kontrollrumsdisplayer! ränssnitt för interaktiva konsumentprodukter och mediasystem mplementationstekniker MÖJL M-KOMPTNS ÖR N LiU-TKNOLO 27 28 a system NTRATON SN! rbjuder folk att samverka och samspela med dem, genom dem eller med hjälp av dem according to Jonas Löwgren! Att samspela betyder här att brukare, produkter och tjänster samverkar på ett i bästa fall harmoniskt och lekfullt enkelt sätt according to ill Verplank nteraction esign refers to the shaping of interactive products and services with a specific focus on their use.! rukare och produkter eller tjänster handlar gemensamt i förening mot ett gemensamt mål och på ett samordnat sätt! baserade produkter och tjänster kan svara på eller initiera handlingar vilket skapar en dialog i systemet i av ett tidsmässigt flöde 29 30
esign handlar om att rukarnära design och prototypning (Löwgren, 2008)! Utforska möjliga framtida situationer! örbättra situationen genom en produkt eller tjänst Utvärdering! Uppmärksamma praktiska, tekniska, etiska och estetiska kvaliteter esign! Utveckla förståelsen för designproblemet parallellt med förståelsen för möjliga lösningar! estalta idéer på ett konkret sätt i skisser och modeller Prototyp 31 32 Protototypningsdri ven design och utvecklingsprocess i L-projektet rukarnära design och prototypning Utvärdering Tänk över A esign Tänk ut A J Prototyp ramställ 33 J A koncept i deltagande designworkshops. ör platsbesök och undersök vad som är tekniskt möjligt att göra. konceptskisser, övergripande storyboards och en initial implementationsprototyp. designkoncepten och gör konceptval. en syntes av utvalda koncept. ör personas, moodboards och bodystorming. detaljerade storyboards, som får styra inriktningen på en utbyggd implementationsprototyp, en rollprototyp (mock-up), och en grafisk profil. och utvärdera implementationsprototypen i en demonstration, mock-up:en i en pluralistisk genomgång, och den grafiska profilen i en utvärdering med kunder- förändringar baserat på utvärderingarna och ta fram specifikation för mjukvaruutvecklingen och innehållsutvecklingen. en integrerad prototyp inklusive innehåll. rys sedan innehåll och kod. J den integrerade prototypen i en slutlig utvärdering med användare. Planera framtida utveckling. 34 A Affordances (handlingsinviter) koncept i deltagande designworkshops. ör platsbesök och undersök vad som är tekniskt möjligt att göra. konceptskisser, övergripande storyboards och en initial implementationsprototyp. designkoncepten och gör konceptval. en syntes av utvalda koncept. ör personas, moodboards och bodystorming. detaljerade storyboards, som får styra inriktningen på en utbyggd implementationsprototyp, en rollprototyp (mock-up), och en grafisk profil. och utvärdera implementationsprototypen i en demonstration, mock-up:en i en pluralistisk genomgång, och den grafiska profilen i en utvärdering med kunder- förändringar baserat på utvärderingarna och ta fram specifikation för mjukvaruutvecklingen och innehållsutvecklingen. en integrerad prototyp inklusive innehåll. rys sedan innehåll och kod. J den integrerade prototypen i en slutlig utvärdering med användare. Planera framtida utveckling.! Uppfattade och faktiska egenskaper hos ett ting som bestämmer vad man kan göra med den.! Något att ta tag i och vrida.! Något att peka på som drar till sig ögat.! Något att sitta på.! Något att gå i.! Något att hoppa från.! Något att trycka på.! Något att dra i.! Något att ta upp.! Något att sparka på. 35 36
12!"#$%&'()'* +,,*-.%/"0&'()'* 341 12003%*&450%"$*"6&'()'* 7586&'()'* 341 12!"#$"%&'"(() *+,-#./0-+ 5/+6(*+78*+9*& 37 38 Mentala modeller Metaforer! Vad användare vet och tror om systemen de använder! okus på innehållet i användarnas teorier! Att förstå en domän genom analogi till en annan domän.! Statsministern ställde upp sin argument för att försvara sin ståndpunkt.! Ställ frågor av typen:! Tar bankomater längre tid på sig ibland för att hantera det ni vill ha gjort?! Argument är som soldater! Vilken ination finns på kortet?! n ståndpunkt är som ett fort! Vad skulle hända om ni tryckte på knappar innan maskinen visat nästa steg?! Politik är som krig! Mentala modeller tenderar att vara fragmentariska och partiella, men god design gör att folk förstår systemen de använder! Stigar och kartor kan ses som metaforer för interaktion: Navigera, kika omkring, utforska...! Om flera personer ska jobba ihop så behöver de delade mentala modeller! önster, mapp, klippa-klistra, öppna en fil...! ör att en metafor ska funka måste det finnas tillräckligt med motsvarigheter mellan käll- och måldomänen. 39 40 Vad som designas i interaktionsdesign irektmanipulation! ärande designidé: Vad är systemets syfte, användare, användningssituationer, genre och övergripande design?! Kontinuerligt representerade objekt och handlingar.! ysiska handlingar och knapptryckning snarare än komplex syntax.! unktioner och innehåll: Vad ska användarna kunna göra med med vilket innehåll?! Snabba inkrementella reverserbara operationer vars effekter på relevanta objekt är omedelbart synliga.! Struktur: ur organiseras funktioner och innehåll logiskt, spatialt och temporalt?! andhavande: Vad gör användarna och vad gör systemet?! Presentation: ur ser det ut, känns och beter sig? 41 42
eedback OALS NTNTON VALUATON XPTATON! Återkoppling på resultatet av en handling. andling sker gemensamt mellan dator och människa. ATON SPATON NTRPRTATON! Annars upprepar man handlingen, för att man inte tror att något hände. MNTAL ATVTY! Lämplig feedback är en svår designuppgift. XUTON PRPTON PYSAL ATVTY NORMANS ANLNSYKL 43 44 eedforward! Att man vet vad som ska hända innan man utför handlingen gör att man har förväntningar på resultatet. UL O XUTON OALS PYSAL SYSTM! et är också att man kan förutse vad som kommer att ske i en process längre fram. UL O VALUATON 45 46 Uppmärksamhet och den magiska siffran 7±2 ärför:! Uppmärksamheten funkar som en ficklampa! Arbetsminnet används för att hålla fokus! jälp folk att komma ihåg vad de gör och deras arbetsobjekts status! Modes är både kraftfulla och riskabla:! Om omgivningen stjäl fokus tappar man det som fanns i arbetsminnet! aspedalen beroende på växel fram, växel bak och friläge! Är objekten i edit mode eller view mode i ritprogrammet?! nstruktioner glöms! 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.! Vad man läste nyss tappas! Man glömmer vad man höll på med 47 48
Användbarhet Användbarhetsmått! en 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. SO 9241-11! Uppföljning mellan versioner! edöma konkurrenskraft 49 50 Användbarhetsmål Ändamålsenlighet! dentifiera de viktigaste uppgifterna för användarna: (a) itta kontaktination. (b) ylla i ett ulär. (c) eställa en produkt.! Andel slutförda uppgifter! Antal features eller kommandon som faktiskt används! Sätt upp användbarhetsmål: (a) e viktigaste uppgifterna för användarna måste ha lyckat resultat minst 75% av gångerna. (b) et får i medeltal ta max 1:30 minuter att hitta kontaktination. (c) Användarnas tillfredsställelse ska vara minst 5,0 av 7 för de viktigaste uppgifterna. (d) Användarnas tillfredsställelse ska vara bättre än minst två av konkurrenterna. 51 52 ffektivitet Tillfredsställelse! Tid det tar att slutföra en uppgift! Tid det tar att lära sig! Skattning av produktens eller tjänstens nytta! Skattning av tillfredsställelse med funktioner eller features! Tid spenderat på fel! Procent eller antal fel! Antal gånger användaren utrycker frustration eller ilska! Skattning av användarens kontroll kontra teknikens kontroll över uppgiften! ur ofta hjälp eller dokumentation måste användas! Antal upprepade eller misslyckade kommandon! Skattning om hur väl tekniken stödjer de uppgifter som användaren behöver stöd för 53 54
Produktkvalitet ållbarhet ÅTRÅVÄR Vad vill folk ha? KAPAL Vad kan vi bygga?! ur bidrar designen till långsiktig hållbar utveckling?! kologisk: påverkan på natur och hälsa! Social: påverkan på samhället och grundläggande mänskliga behov! konomisk: hushållning med mänskliga och materiella resurser ÄRKRAT är sig verksamheten? 55 56 Summa summarum! Läs studieanvisningen! ilda grupper och webregga! Läs litteraturen till uppgifterna! Sätt igång och spåna!! -datorinteraktion och nteraktionsdesign! Affordances, Mentala modeller, Metaforer, irektmanipulation, eedback, eedforward, ulf of execution & evaluation, Användbarhet, Produktkvalitet, ållbarhet 57 www.liu.se