Grundläggande teori för användargränssni3, del 1

Storlek: px

Starta visningen från sidan:

Download "Grundläggande teori för användargränssni3, del 1"

Lovisa Lindqvist
för 7 år sedan
Visningar:

1 Grundläggande teori för användargränssni3, del 1

2 Innehåll Mentala och konceptuella modeller (Kap 2.3) Metaforer (Kap 2.4) Donald Normans designprinciper (Kap 1.6.3)

3 Mentala och konceptuella modeller

4 Mentala och konceptuella modeller Designerns mentala modell Systemets konceptuella modell Användar- gränssni3 Användarens mentala modell System

5 Vi uoormar en dörr som öppnas med en fotocell! SJ:s tågdörrar

6 ...men folk begriper sig inte på fotoceller så vi gör en låtsasknapp istället! Låtsasknapp Dörr

7 Ibland reagerar inte fotocellen Huh? Jag trycker men inget händer? Gör jag fel? Är dörren trasig? Låtsasknapp Dörr

8 Varför inte erbjuda en mer korrekt konceptuell modell från början? De3a är en dörr som öppnas med en gest.

9 Donald Normans kylskåp Donald Norman, The Design of Everyday Things, sid

11 Vilken konceptuell modell erbjuder de3a användargränsni3? Kylens temperatur kontrolleras med e3 reglage och frysens temperatur med e3 annat reglage.

14 Den mest kända konceptuella modellen A3 använda en dator är som a3 arbeta på kontor.

$Webbu\ker Diskussion: På vilken$

15 Webbu\ker Diskussion: På vilken konceptuell modell bygger de flesta webbu\ker?

16 I projektet: Vilken eller vilka konceptuella modeller bör ni erbjuda era användare?

17 Metaforer

18 Vad är en metafor? l Inom li3eraturen: Min ros, jag älskar dig! l Inom interak\onsdesing: konceptuella metaforer

$Defini\on l$ $kogni\va$ domäner, en

19 Defini\on l Mappning mellan två kogni\va domäner, en källdomän och en måldomän Källdomän Metafor Måldomän

20 Outlook Calendar

21 Time Machine (Mac OS X)

22 Varför metaforer? l Används i användargränssni3 för a3 underlä3a för användaren a3 förstå måldomänen. l Kunskap, erfarenheter och begrepp från källdomänen används för a3 organisera innehållet i måldomänen. l En väl uoormad metafor erbjuder användaren en god konceptuell modell.

23 Problem med metaforer i användargränssni3

$källdomän ak\verar lite eller ingen förkunskap hos yngre$

24 Gammal källdomän l En metafor som bygger på en gammal källdomän ak\verar lite eller ingen förkunskap hos yngre användare

$Ak\verar olämplig$ användarens mentala modell

25 Ak\verar olämplig bakgrundskunskap i användarens mentala modell Hur matar man ut diske3en på en gammal Mac?

26 Hjälper inte användaren a3 hi3a tjänster som är datorspecifika Hur gör man en sökning i en bokhylla?

$konven\oner och$ kulturella regler Ha

27 Riskerar a3 bryta konven\oner och kulturella regler Ha en papperskorg PÅ skrivbordet??

28 De lider av den fysiska världens begränsningar Vad händer när bokhyllan blir full? Det går snabbare a3 hi3a rä3 bok med en lista.

29 Begränsar fantasin hos designers a3 komma på nya konceptuella modeller l Skrivbordsmetaforen är nästan 40 år gammal!

30 ... men ändå så kommer användargränssni3 förmodligen bygga på metaforer för en lång \d framöver.

31 I projektet: Finns det metaforer som erbjuder användaren en god konceptuell modell som ni kan använda er av?

32 Donald Normans designprinciper Synlighet Feedback Begränsningar (constraints) Konsekvens (consistency) Affordance Mappning Kap i kursboken

33 Synlighet

34 Synlighet

35 Synlighet Vad man ser och inte ser i e3 användargränssni3. Vägledning \ll vad man ska/kan göra. Understödjer den automa\ska handlingsnivån.

36 Riktlinjer Göm eller ta bort mindre nödvändiga funk\oner. Knappar bakom luckan.

37 Riktlinjer En funk\on en kontroll.

38 Riktlinjer Utny3ja riktlinjer för layout, färg, ikoner, text, gruppering, etc.

39 Feedback

40 Feedback

41 Feedback A3 återkoppla informa\on \ll användaren om vilka handlingar som gjorts och vad resultatet blivit.

42 Riktlinjer Varje handling ska ge effekt(er) Vanlig handling liten feedback Ovanlig handling mer feedback Utny3ja människans sinnen Relevanta och begripliga felmeddelanden Delmålsfeedback

43 Utny3ja människans sinnen Critical stop Notify

44 Relevanta och begripliga felmeddelanden

45 Delmålsfeedback

46 Begränsningar (constraints)

$möjliga interak\on för användaren vid e3 visst$

47 Begränsningar (constraints) A3 begränsa den möjliga interak\on för användaren vid e3 visst \llfälle.

48 Konsekvens (consistency)

49 Konsekvens (consistency) Liknande uppgiper bör uoöras med liknande handlingar och objekt. Öppna dialogruta Spara som dialogruta

50 Affordance

51 Affordance

52 Affordance De upplevda egenskaperna hos e3 objekt. De handlingar e3 objekt tycks inbjuda \ll. Affordance förmedlar ledtrådar \ll användaren.

53 Hur öppnar man sockerbitsförpackningen?

54 Vad kan jag egentligen klicka på?

55 Hur justerar jag \d och effekt?

56 Riktlinjer för affordance Synlighet vik\g faktor för a3 förmedla rä3 affordance. Begränsningar (constraints) kan utny3jas för a3 begränsa e3 föremåls affordance. Forcing func;ons tvingar användaren a3 uppfa3a en viss sorts affordance.

57 Begränsningar och forcing func;ons

58 Donald Norman: Upplevd och verklig affordance Verkliga objekt har verklig affordance som inte behöver läras in. Virtuella objekt saknar verklig affordance. Kan vara olämpligt a3 designa för verklig affordance i e3 datoranvändargränssni3!

59 Verklig vs. virtuell almanacka

60 Mappning (ej med i kursboken)

61 Mappning

62 Mappning Rela\onen mellan någon egenskap hos e3 objekt och dess funk\on.

63 Riktlinjer Sträva eper naturlig mappning! God synlighet är e3 grundkrav för a3 mappningen ska kunna bli bra.

64 Naturlig mappning A3 dra fördel av fysiska liknelser, kulturella standarder och generella biologiska förhållanden för a3 stödja en enkel, omedelbar och entydig förståelse.

65 Fysiska liknelser

66 Kulturella standarder

67 Biologiska förhållanden

68 Designsteg 2: Konceptuell design Tekniksystemets/användargränssni3ets övergripande struktur och konceptuella modell. Användarens mentala modell. Metaforer. Gruppering av tjänster i naturliga grupper. Språkbruk/terminologi. På denna nivå ska ni börja uoorska designrymden, dvs. ni ska arbeta med flera olika alterna\va lösningar (parallell design), genom a3 varje gruppmedlem tar fram var si3 designkoncept i form av skisser.

69 Designsteg 2: Konceptuell design OBS! Ni jobbar foroarande med ALLA de tjänster ni få3 fram i designsteg 1! Applika'onens samtliga tjänster ABSTRAKT VISION, ANVÄNDARSTUDIE & TJÄNSTER KONCEPTUELL DESIGN Två tjänster LO- FI- PROTOTYPING KONKRET HI- FI- PROTOTYPING

70 A3 maila \ll handledaren Text om punkterna ovan. Era skisser. Deadline 17 januari, kl

Relevanta dokument

Tre kursblock. av användargränssnitt. Inledningsvis. Hittills. Dags att fylla på med det som saknas! Människa dator interaktion Del 1. 1.

Tre kursblock. av användargränssnitt. Inledningsvis. Hittills. Dags att fylla på med det som saknas! Människa dator interaktion Del 1. 1. Tre kursblock Grundläggande teori för design av användargränssnitt Människa dator interaktion Del 1 1. Design 2.Human factors & Ergonomics 3. Human computer interaction Inledningsvis Interaktiv produkt/system