Grafiska användargränssnitt

Transkript

1 Grafiska användargränssnitt VT-10 GUI - VT10 Martin Blom 1

2 Kursens upplägg Teori Principer och koncept Föreläsningar Fönstersystem Konstruktion av GUI Design av GUI Praktik Göra på riktigt Laborationer C# Java GUI - VT10 Martin Blom 2

3 Laborationer Laboration 1 Java och SWT (Eclipse) Laboration 2 C# och.net (Visual Studio) Laboration 3 mp3-spelare Grupper om 2 personer Deadlines 22/4 kl Lab 1, provkörning /5 kl Lab 2, provkörning /6 kl Lab 3, provkörning 9-12 GUI - VT10 Martin Blom 3

4 Tentamen Återspeglar både kursbok, laborationer och utdelat material Java C# Fönstersystem Design MVC GUI - VT10 Martin Blom 4

5 Kapitel 1 Kontroll gör dig glad Vi vill kontrollera vår omgivning åtminstone vår datoromgivning(?) Sätt att kontrollera omgivningen Tangentbord (qwerty, dvorak, mobil, mini, maxi, ergonomiskt, svenskt/utländskt) Mus (extern, platta, pinne, touchscreen, stylus) (Övriga obskyra styrdon) GUI - VT10 Martin Blom 5

6 Exempel 1 brödfabriken (design) Degmaskin 1 Degmaskin 2 Degmaskin 3 GUI - VT10 Martin Blom 6

7 Exempel 1 brödfabriken (verklig) Degmaskin 1 Degmaskin 2 GUI - VT10 Martin Blom 7

8 Problem i brödfabriken vs GUI Design bra, genomförande dåligt Människan får anpassa sig till maskinernas fel Små frustrationer Design bra, genomförande dåligt Människan får anpassa sig till GUIts fel Små frustrationer GUI - VT10 Martin Blom 8

9 Exempel 2 Olika OS Alt-F4 stänger prog i Wind. höjer volym i Mac Dra kanter på fönster resizar i Windows flyttar i Mac OK:a varningsfönster mellanslag i Wind. mus i Mac Musknappar tre i Windows en(!) i Mac GUI - VT10 Martin Blom 9

10 En gyllene regel Ett användargränssnitt är bra när programmet beter sig exakt som användaren förväntade sig GUI - VT10 Martin Blom 10

11 Kapitel 2 Vad vill dom ha? Användarmodell Mental förståelse av vad programmet ska göra Olika för olika användare power user lamer Användarmodellströghet Man förväntar sig liknande modell i olika program ex. ctrl+c, ctrl-v eller inbäddning av bilder GUI - VT10 Martin Blom 11

12 Hur ser användarmodellen ut? Fråga användare! Gör representativt urval Alla användare kan du (oftast) inte fråga Fler inte nödvändigtvis bättre, trender räcker Lätt för specialistprogram Svårt för generella program GUI - VT10 Martin Blom 12

13 Programmodell Bör matcha användarmodellen Gör det ofta inte Svårt att byta programmodell Användare blir till slut vana Byte kräver ofta byte av användarmodell Windows programbar Gruppera liknande, eller inte GUI - VT10 Martin Blom 13

14 Det osynliga lagret GUI - VT10 Martin Blom 14

15 Programmodell (forts) Stänga ner Word vs stänga ner Excel I någon stängs alla dokument I någon stängs bara aktuellt dokument Samma tillverkare, samma programsvit (!) Alt-tab Switcha round-robin Switcha mellan senast använda GUI - VT10 Martin Blom 15

16 En gyllene regel till Användare antar den enklast möjliga programmodellen GUI - VT10 Martin Blom 16

17 Kapitel 3 - Val No dogs allowed GUI - VT10 Martin Blom 17

18 The stupidest dialog ever GUI - VT10 Martin Blom 18

19 Historiska val Historiken påverkar vilka val som finns No dogs allowed Lions allowed? Pigs allowed? Historiken är oftast inte känd av användarna Utgå från användarna! GUI - VT10 Martin Blom 19

20 Varsågod, lite osäkerhet Ofta programmakarnas obeslutsamhet som lämpas över på användarna Användarna vill åtstadkomma saker inte fatta beslut som programmerarna/designarna borde ha fattat inte ägna sig åt ovidkommande saker GUI - VT10 Martin Blom 20

21 Ett val man inte vill ha GUI - VT10 Martin Blom 21

22 Ett annat val man inte heller vill ha GUI - VT10 Martin Blom 22

23 Design handlar om val Ofta konkurrerande krav användarvänligt snabbt komplett smidigt full kontroll lättanvänt Minimera antalet val du lämnar kvar till användaren Hon/han vill bara göra val som är vettiga GUI - VT10 Martin Blom 23

24 Kapitel 4 - Inbjudningar och Metaforer Om användarmodellen är inkomplett eller fel så kan programmet använda sig av inbjudningar och metaforer för att visa användaren sin modell GUI - VT10 Martin Blom 24

25 Den vanligaste metaforen GUI - VT10 Martin Blom 25

26 Zoomning med metafor GUI - VT10 Martin Blom 26

27 Zoomning utan metafor GUI - VT10 Martin Blom 27

28 Inbjudningar Handlar om att inbjuda till rätt saker Dörrhandtag till butiker etc platta att trycka på pinne att dra i 3D-knappar inbjuder till tryck Ren text inbjuder inte till tryck GUI - VT10 Martin Blom 28

29 Tabbar är bra Tabbar ökar användbarheten med mellan 30% till 100% GUI - VT10 Martin Blom 29

30 Vad står symbolerna för? nytt dokument öppna spara maila gör pdf printa stava automatstava klipp ut kopiera klistra in måla (format) GUI - VT10 Martin Blom 30

31 Vad står symbolerna för (forts) Ångra Gör om Diagram Kalkylblad Visa rutnät Navigator Zooma Hjälp Hyperlänk GUI - VT10 Martin Blom 31

32 Vad står symbolerna för (forts) Pekverktyg Linje Pil Rektangel Ellips Koppling Enkla figurer Symboler Blockpilar Flödesdiagram Text Kurva GUI - VT10 Martin Blom 32

33 Verkligheten är bra GUI - VT10 Martin Blom 33

34 Kapitel 5 Dåliga metaforer När man använder metaforer ska de bete sig på förväntat sätt som objekt i den verkliga världen. Våld på verkligheten är förvirrande GUI - VT10 Martin Blom 34

35 Våld på verkligheten GUI - VT10 Martin Blom 35

36 Var är min dator? I Windows finns Min Dator på skrivbordet Skrivbordet finns uppenbarligen i min dator Alltså är det en oändlig rekursion GUI - VT10 Martin Blom 36

37 En dator är inte en hårddisk En dator innehåller en hårddisk Skärmen upplevs som datorn Hårddisk! CD-skivor fattar folk USB-pinnar fattar folk Hårddisk är konstigt Varför är det så? GUI - VT10 Martin Blom 37

38 Kapitel 6 - Konsistens Man gillar att känna igen sig Det är jobbigt att behöva lära om saker som man redan kan Snabbkommandon sitter i ryggmärgen Annorlunda är inte alltid bra GUI - VT10 Martin Blom 38

39 Hur avslutar man ett program? alt-f4 quit :q! esc q Qq exit bye ctrl-q... ctrl-c GUI - VT10 Martin Blom 39

40 Varför gör inte alla samma? Historik program bygger på andra, äldre program Kan själv ovilja att kopiera andras koncept Kan bättre egna idéer bättre än andra GUI - VT10 Martin Blom 40

41 Bra exempel på konsistens ctrl-kommandon ctrl-c, ctrl-v, copy-paste ctrl-s, spara ctrl-z, ångra menyrader file/arkiv längst åt vänster help/hjälp längst åt höger GUI - VT10 Martin Blom 41

42 Mer och mer lika Mac Xerox, Win, Unix Windows Xerox, Mac, Linux Linux Mer och mer lika Xerox, Unix GUI - VT10 Martin Blom 42

43 Gyllene regel Var konsistent i möjligaste mån. Det gör användaren glad GUI - VT10 Martin Blom 43

44 Kapitel 7 Användaren får ansvar GUI - VT10 Martin Blom 44