Grafiska användargränssnitt VT-10 GUI - VT10 Martin Blom 1
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
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 16.00 Lab 1, provkörning 10-12 5/5 kl 16.00 Lab 2, provkörning 13-16 4/6 kl 16.00 Lab 3, provkörning 9-12 GUI - VT10 Martin Blom 3
Tentamen Återspeglar både kursbok, laborationer och utdelat material Java C# Fönstersystem Design MVC GUI - VT10 Martin Blom 4
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
Exempel 1 brödfabriken (design) Degmaskin 1 Degmaskin 2 Degmaskin 3 GUI - VT10 Martin Blom 6
Exempel 1 brödfabriken (verklig) Degmaskin 1 Degmaskin 2 GUI - VT10 Martin Blom 7
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
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
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
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
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
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
Det osynliga lagret GUI - VT10 Martin Blom 14
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
En gyllene regel till Användare antar den enklast möjliga programmodellen GUI - VT10 Martin Blom 16
Kapitel 3 - Val No dogs allowed GUI - VT10 Martin Blom 17
The stupidest dialog ever GUI - VT10 Martin Blom 18
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
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
Ett val man inte vill ha GUI - VT10 Martin Blom 21
Ett annat val man inte heller vill ha GUI - VT10 Martin Blom 22
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
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
Den vanligaste metaforen GUI - VT10 Martin Blom 25
Zoomning med metafor GUI - VT10 Martin Blom 26
Zoomning utan metafor GUI - VT10 Martin Blom 27
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
Tabbar är bra Tabbar ökar användbarheten med mellan 30% till 100% GUI - VT10 Martin Blom 29
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
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
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
Verkligheten är bra GUI - VT10 Martin Blom 33
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
Våld på verkligheten GUI - VT10 Martin Blom 35
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
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
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
Hur avslutar man ett program? alt-f4 quit :q! esc q Qq exit bye ctrl-q... ctrl-c GUI - VT10 Martin Blom 39
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
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
Mer och mer lika Mac Xerox, Win, Unix Windows Xerox, Mac, Linux Linux Mer och mer lika Xerox, Unix GUI - VT10 Martin Blom 42
Gyllene regel Var konsistent i möjligaste mån. Det gör användaren glad GUI - VT10 Martin Blom 43
Kapitel 7 Användaren får ansvar GUI - VT10 Martin Blom 44