Introduktion och Humancentered. Jody Foo,

Transkript

1 Introduktion och Humancentered design Jody Foo,

2 Föreläsningsöversikt Introduktion till Human-Centered design vad, varför, hur

3 Gränssnittet är systemet!

4 Kursinnehåll Designa och ta fram system från scratch. Grundläggande färdighet i att konstruera användargränssnitt. Utvärdera interaktiva systems användbarhet.

5 Cost for Change Requests Time

6 Cost for Change Requests Impact of UX Time

7 Design med människan i centrum

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

9 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

10 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

11 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

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

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

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

15 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

16 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

17 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

18 IxD (interaktionsdesign) 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.

19 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

20 according to Bill Verplank

21 1. Planera den användarnära processen 2. Förstå och specificera brukssituationen Uppfyller kraven 5. Utvärdera mot användarkrav 3. Specificera användaroch verksamhetskrav 4. Producera designlösningar En designprocess med människan i centrum (ISO , 2010) 28

22 koncept & idéer bearbetning & skissning detaljering & prototyp 29

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

24

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

26 Handlingsinviter sekvensieras

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

28 Vilken ger tydligaste inviten för att scrolla? United States List Item United Arab Emirates United Kingdom United States US Minor Outlying Isl. Uruguay List Item List Item List Item List Item List Item

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

30 Mentala modeller i design (Norman, 1988)

31

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

33 Metafor: Design som problemlösning Designrymd - lösningsrymd. Metaforen täcker inte alla aspekter av design dock.

34 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

35 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

36 Abstraktionsnivå Vad som designas i interaktionsdesign Koncept Funktioner o. innehåll Struktur Interaktion Presentation Projektets löptid 44

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

38 Ej direktmanipulation

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

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

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

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

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

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

45 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