Introduktion och Human-centered design. Mattias Institutionen för datavetenskap Linköpings universitet

Transkript

1 Introduktion och Human-centered design Mattias Institutionen för datavetenskap Linköpings universitet 1

2 Siftables v=ol6sqhfad3w&nr=1 2

3 3 Gränssnittet är systemet!

4 Lärare Mattias Arvola, examinator, Mathias Nordvall, handledare, 4

5 Vad du lär dig Definiera, prioritera, och kommunicera användarnära designmål för interaktiva system Värdera och argumentera för en viss designlösning bland alternativa lösningar Göra en designspecifikation för ett användargränssnitt Konstruera en interaktiv gränssnittsprototyp i ett datorverktyg Planera, genomföra och kommunicera ett användbarhetstest 5

6 Kursinnehåll, hantverk Utveckla system från scratch. Grundläggande färdighet i att konstruera välfungerande användargränssnitt enligt rådande standarder och principer. Utvärdera interaktiva systems användbarhet. 6

7 Kursinnehåll, ämnen Grundläggande begrepp i människadatorinteraktion. Designprinciper och riktlinjer för användargränssnitt. Prototypning av grafiska användargränssnitt. Användarstudier. Designmetoder. Användbarhetsutvärdering. 7

8 Kursinnehåll, teknik Prototypningsverktyg för utveckling av interaktiva system. 8

9 Cost for Change Requests Time 9

10 Cost for Change Requests Impact of UX Time 10

11 Kursinformationen Läs studieanvisningen på kurshemsidan noga Gå igenom examinationsuppgifterna Läs den tillhörande obligatoriska litteraturen innan ni börjar med uppgifterna Fråga om ni undrar Håll koll på kurshemsidan för uppdateringar 11

12 12 Kurslitteratur

13 Deadlines Se kurshemsidan under Schema och deadlines. Där finns även slides. 13

14 Examination UPG1 Design Uppgift med skriftlig redovisning (inlämning) och obligatorisk muntlig redovisning (U,3,4,5) 1,5 hp: ca. 40 timmars arbete UPG 2 Prototyp Uppgift med skriftlig redovisning (inlämning) och obligatorisk muntlig redovisning (U,3,4,5) 2,5 hp: ca. 60 timmars arbete Varje uppgift består av: Obligatorisk del (för trea) med fokus på görande och kännedom om kursmaterialet Valfri del (för fyra och femma) som innebär djupare bearbetning av kursmaterialet och tankarna bakom görandet Kontrollera detaljer i instruktionerna på hemsidan 14

15 Uppgift 1 Minst tre radikala koncept Storyboard på konceptnivå Funktionsdriven divergens eller andra strukturerade kreativitetsmetoder för att generera alternativ Tänk igenom konceptens olika aspekter En värderingsmatris för motiverat konceptval Ett gränssnittsflöde skärmbild för skärmbild för de viktigaste användaruppgifterna. En litteratursammanfattning på 1-2 sidor av kapitel 3-5 i Arvola (2014). Beskriva textens huvudpoänger. Inte en recension eller ett referat. Valfria delar för betyg 4 och 5: Arbeta vidare med litteratursammanfattningen till en kritisk granskning med analytisk höjd Överväg olika sätt att utforma gränssnittet i skisser. 15

16 Uppgift 2 En interaktiv gränssnittsprototyp Axure (finns installerat i PC-PUL), UX Pin, InVision, Keynote, Powerpoint, Atomic, Indigo Studio, eller LiveCode. Välj prototypningsverktyg för att passa den design du ska prototypa. Prototypen ska täcka in de viktigaste uppgifterna som användarna kan göra i systemet du designat. Prototypen ska ha hög interaktionsrikedom, realistiskt innehåll, och vara genomtänkt i utseende och varumärke. Användbarhetstesta med två representativa användare i ett tänkahögt-test En kort skriftlig rapport från användbarhetstestet Valfria delar: Revidera din korta och informella testrapport utifrån Anvisningar för exjobbsrapporter. Utöka diskussionskapitel där du gör en analys av resultaten av ditt användbarhetstest utifrån principer och tumregler för gränssnittsdesign Dessa principer och tumregler måste då även kort definieras i rapportens teoridel. För chans till en femma ska du också skissa på förslag till omdesign. 16

17 Kursbetyg Kursbetyg räknas fram som medelvärdet av betygen på de två uppgifterna, avrundat till närmsta heltal där halva betygssteg avrundas nedåt (t.ex. 3,5 avrundas ned till 3). 17

18 Föreläsningar FÖ 1 Introduktion och Human-centered design FÖ 2 Användarstudier och personas Bakgrund kopplat till kandidatprojektet och kravidentifiering FÖ 3 Konceptdesign och gränssnittsdesign FÖ 4 Prototypning FÖ 5 Användbarhetstestning 18

19 Design med människan i centrum Mattias Institutionen för datavetenskap Linköpings universitet 19

20 SAOL deısign [-saj n] s. -en -er konstnärlig formgivning deısigna [-saj na] v. -de formge 20

21 Merriam-Webster de sign verb \di-ˈzīn\ : to plan and make decisions about (something that is being built or created) : to create the plans, drawings, etc., that show how (something) will be made : to plan and make (something) for a specific use or purpose : to think of (something, such as a plan) : to plan (something) in your mind 21

22 Merriam-Webster Origin of DESIGN Middle English, to outline, indicate, mean, from Anglo-French & Medieval Latin; Anglo-French designer to designate, from Medieval Latin designare, from Latin, to mark out, from de- + signare to mark more at sign First Known Use: 14th century 22

23 Design som professionell praktik (Löwgren, 2008) Utforskar möjliga framtider Förbättrar situationen genom en produkt eller tjänst Inbegriper praktiska, tekniska, etiska och estetiska kvaliteter Förståelsen för designproblemet utvecklas samtidigt som förståelsen för möjliga läsningar Idéer gestaltas konkret i skisser och modeller 23

24 Skissning och parallell prototypning Undviker risk för iteration lokala optimum Säkrare på sin design Mer originell och innovativ design Bättre design 24

25 Designetik All design bygger på ett personligt ställningstagande om hur du vill se på världen, vad som är viktigt och för vem. Till vilken sorts värld vill du bidra? 25

26 Människa-datorinteraktion Ett forskningsfält med rötter i teknisk psykologi och datavetenskap och med en nära relation till kognitionsvetenskap 26

27 MDI / HCI / CHI 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 27

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

29 Use and Context U1 Social Organization and Work U3 Human-Machine Fit and Adaptation U2 Application Areas Human Computer H1 Human Information Processing C2 Dialogue Techniques C4 Computer Graphics H2 Language, Communication and Interaction H3 Ergonomics C3 Dialogue C1 Input and Genre Output Devices C5 Dialogue Architecture D3 Evaluation Techniques D4 Example Systems and Case Studies D1 Design Approaches Development Process D2 Implementation Techniques and Tools 29

30 IxD Löwgren & Stolterman 1998 Den process som ordnas inom begränsade resursramar för att skapa, forma och fastställa de bruksorienterade egenskaperna (strukturella, funktionella, etiska och estetiska) hos en digital artefakt för en eller flera uppdragsgivare. 30

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

32 32 according to Bill Verplank

33 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 En designprocess med människan i centrum (ISO , 2010) 4. Producera designlösningar 28 33

34 koncept & bearbetning & skissning detaljering & prototyp 29 34

35 Affordances (handlingsinviter) Uppfattade och faktiska egenskaper hos ett ting som bestämmer vad man kan göra med den. 35

36 36

37 Knappar på skärmen tycks ge en invit att trycka på dem men inte dra i dem eller redigera Reply Forward Print Delete 37

38 Handlingsinviter sekvensieras 38

39 Handlingsinviter i GUIs sekvensieras också Selected Mouse Over Unselected Disabled 39

40 Vilken ger tydligaste inviten för att scrolla? 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 40

41 Mentala modeller Användares föreställningar om domänen och systemen de använder. Hur funkar det i deras värld? 41

42 42 Mentala modeller i design (Norman, 1988)

43 43 Designa en konceptuell modell

44 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. 44

45 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, 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 45

46 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önstershoppa, 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 46

47 Abstraktionsniv Vad som designas i interaktionsdesign Koncept Funktione r o. innehåll Struktur Interaktio n Presentati Projektets löptid 47 44

48 Direktmanipulation Kontinuerligt representerade objekt och fysiska handlingar som ger direkt effekt. 48

49 49 Ej direktmanipulation

50 MÅL AVSIKT FÖRVÄNTAN BEDÖMA BESTÄM HANDLING TOLKA MENTAL AKTIVITET GENOMFÖR! UPPFATTA! FYSISK AKTIVITET NORMANS HANDLINGSCYKEL 50

51 Feedback Återkoppling på resultatet av en handling. Copy Moving 1,234 Files to "Keynotopia" 36.6 MB of MB - About 10 seconds 51

52 Feedforward Att man vet vad som ska hända innan man utför handlingen. 52

53 GULF OF EXECUTION MÅL FYSISKT SYSTEM GULF OF EVALUATION 50 53

54 Uppmärksamhet och den magiska siffran 7±2 Om omgivningen stjäl fokus tappar man det som fanns i arbetsminnet 54

55 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. 55

56 Summa summarum Läs studieanvisningen Läs litteraturen till uppgifterna Sätt igång och spåna olika koncept så snart ni bestämt er för vilket uppdrag ni vill jobba med! Engagera varandra och andra i konceptgenerering Human-centered design Människa-datorinteraktion och Interaktionsdesign Affordances, Mentala modeller, Metaforer, Direktmanipulation, Feedback, Feedforward, Gulf of execution & evaluation, Den magiska siffran 7±2 56