Traditionella grafiska gränssnitt

En presentation över ämnet: "Traditionella grafiska gränssnitt"— Presentationens avskrift:

1 Traditionella grafiska gränssnitt

2 Upplägg Innan rasten Efter rasten
Vilka komponenter har man att tillgå när man ska göra en grafiskt gränssnitt Kategorier av komponenter Det fysiska gränssnittet Efter rasten Modeller för användare, användande Guidelines

3 Något om MDI Alla dessa behöver
Användarstudie Utvärdering Kravspecifikation Design Alla dessa behöver Begrepp för enskilda objekt och handlingar Modeller för hur dessa fungerar tillsammans

4 Komponenter i grafiska gränssnitt

5 Fönster Fönster Delfönster “pop-up” fönster
Avgränsar programmet från andra program Låter användaren fokusera på en aktivitet eller en informationsdel Delfönster “pop-up” fönster

6 Fönster, forts. Ramar Titelram Scrollbars Markera gränser
Tillåta interaktion som har med fönstret som helhet att göra Titelram Scrollbars Tillåter användaren att hantera en större mängd information än som kan visas i fönstret Visar vilken del av en informationsmängd som visas Visar hur mycket av den totala informationen som visas

7 Knappar Låter användaren aktivera funktionalitet
Visa användaren vilka alternativ som finns ”utgråade” visar vilka alternativ som finns men inte är möjliga just nu Kan vara text, bilder eller både och Kan ändra utseende för att visa att man pekar på den Kan användas för att visa tillstånd där man har fokus Kan antingen tillstånd eller bara notera aktiveringar Nedtryckt, inte nedtryckt

8 Knappgrupper Knappar som hör ihop
För dom utesluter varandra (Radio buttons) För dom tillstånd alla kommer påverka en senare aktivitet

9 Menyer Samlingar av knappar som hör ihop Strukturella komponenter
Menyalternativen (knappar) Separatorer för att gruppera alternativen Undermenyer Explicita menyer Ofta fasta positioner markerat av knappar vilka bildar en menyrad Minnesstöd Navigeringen sker hierarkiskt Implicita menyer Menyer som kan öppnas på andra komponenter (ofta genom att högerklicka) Pajmenyer

10 Pekare Visar användarens fokus för användning av knapparna på musen
Visar vad man kan göra genom olika tillstånd Pil (man kan välja) Penna (man kan rita streck) Timglaset (man måste vänta) Fyrkant (man kan sudda…) Hårkors (man kan måla…) Annat hårkors (man kan välja områden…)

11 Markörer Visar användarens fokus för användning av tangentbordet
Var tar musmarkören vägen när man skriver? Kan visa tillstånd för aktiviteter Snedställd för kursivt tillstånd i Word Dock inte i PowerPoint…

12 Textfält & textinmatningsfält
Information till användaren Tillstånd (Slide 12 av 45, Swedish etc.) Exempel (” ” nära fält för att skriva in datum) Tillåter användaren att mata in fritext Aktiveras ofta genom returntangenten eller en OK-knapp Kan vara autokompletterande Lösenordsfält

13 Kortkommandon Tillåter aktivering av funktioner utan att behöva navigera Snabbare Behöver inte flytta koncentrationen från tangentbordet till musen Måste läras in Binära funktioner

14 Övriga Tool-tips Display locks Agenter (MS Office Assistants)
Hjälptexter som dyker upp om man låter en markör vänta över en komponent Display locks Används för att kunna ”ta loss” menyer och fönster från andra fönster Agenter (MS Office Assistants)

15 Vilka kategorier av komponenter finns det?

16 Synliga - Osynliga Synliga (fönster, knappar)
Tar upp plats Behöver inte kommas ihåg Osynliga (tool-tips, kort-kommandon) Tar inte upp plats Man måste komma ihåg dem

17 Spatiala – Icke-spatiala
Har rumslig dimension Icke-spatial Inte har rumslig dimension

18 Statisk - Interaktiv Statisk Interaktiv Rent informativa
Kan ta emot indata från användaren Kan ge information till användaren Kan ge information att användaren använder/har fokus på komponenten

19 Hårdvara

20 Tangentbord Inmatning av text Inmatning av siffror & tal Modifierare
Kortkommandon Windowsknappen Systemknappar Internet, Play, stopp Ljud +, Ljud -

21 Pekdon med relativnavigering
Flyttar markörer Kontinuerlig rörelse Knappar 1, 2 eller fler Scrollwheel Vibrerande Exempel Möss Trackball Joystick Gamepad

22 Pekdon med absolut navigering
Flyttar markörer Behöver inte vara kontinuerlig rörelse Brukar inte ha knappar Exempel PDA:er Pekskärmar Touchpad (wacom)

23 Rast

24 Modeller och guidelines

25 Frågor innan man börjar formge eller utvärdera ett gränssnitt
Vad ska gränssnittet göra? Ett eller flera gränssnitt mot en applikation? Vem ska använda gränssnittet? Har dom speciella krav eller behov? I vilken miljö ska gränssnittet användas? Kommer användaren ha en ”publik”? Hur stora konsekvenser har fel? Hur gör användare nu? Vad fungerar bra? Vad fungerar inte bra?

26 Konceptuella användarmodeller
Modeller för hur användaren är tänkt att interagera med systemet ”a description of the proposed system in terms of a set of integrated ideas and concepts about what it should do, behave and look like, that will be understandable by the users in the manner intended.” Preece, 2002 Modeller är inte exklusivt uteslutande Modeller kan vara aktivitetsbaserade eller objektsbaserade

27 Konceptuella användarmodeller: Instruktionsgivande
Användaren ger systemet en instruktion Systemet genomför instruktionen och visar resultatet Systemet redogör att instruktionen inte kunde genomföras (och varför)

28 Konceptuella användarmodeller: Konversation
Användaren och systemet har en konversation Ena parten gör ett uttalande Den andra parten svarar Avbryta? Vem tar initiativet? Lokalt kontext?

29 Konceptuella användarmodeller: Navigering & manipulering
Systemet beskriver en virtuell rymd som användaren kan navigera och interagera med föremål som finns där Egenskaper hos den virtuella rymden 2D, 2 ½ D, 3D ”Fysiska” lagar Förflyttning Objekts unikhet

30 Konceptuella användarmodeller: Navigering & manipulering
Exempel: Direkt manipulering Kontinuerlig representation av föremål av intresse tillsammans med dom möjligheter användare har att interagera med dom Handlingar ska vara snabba att genomföra, reversibla, och ge direkt respons på vilken effekt handlingen hade Fysiska rörelser och knapptryckningar istället för syntaxstyrda kommandon

31 Konceptuella användarmodeller: Utforskande och ”browsing”
Användaren genomsöker en stor informationsrymd för att avgöra vilka, om några, delar är av intresse. Intressanta delar ska kunna utforskas vidare.

32 Konceptuella användarmodeller: Roll Manager (Shneiderman & Plaisant, 1994)
Enskilda personer flera olika roller Både inom jobbet och inom fritiden Datorapplikation bör stödja detta Byte av roll motsvaras av byte av information och handlingar som systemet tillhandahåller

33 Konceptuella användarmodeller: Aktivitetsbaserade gränssnitt (Björk, 2000)
Användares aktiviteter kan vara svårdefinierade Behöver flera sorters data En applikation används till flera sorters aktiviteter Låt användaren definiera aktiviteter Genom att välja en bit information som nod Ge möjlighet att länka sorters information till den Val av information ger sedan en heterogen informationsvy

34 Konceptuella användarmodeller: Kalkylark
Modellen bakom Excel Stödja ekonomiska kalkyler Speciellt förutsägelser Kalkylark Användes redan av de tilltänkta användarna Men tillät inte experimenterande Skapa gränssnitt som liknar originalet Varje cell kan innehålla en beräkning istället för bara ett värde

35 Konceptuella användarmodeller: Skrivbordet
Skapa datorsystem för kontorsanvändare Identifiera delar Dokument Papperskorg Filarkiv Identifiera användande Ta fram filer och arbeta med dem Sortera filer

36 Konceptuella användarmodeller: Gränssnittsmetafor
Systemet och dess användande kan liknas vid ett fysiskt föremål eller samling av föremål Kalkylark och skrivbordet exempel på detta Andra exempel Sökmoterer Scrollbars Toolbar Portal

37 Konceptuella användarmodeller: Gränssnittsmetafor, forts.
Invändningar mot användande av metaforer Implementeringar bryter mot logiska eller kulturella regler (papperskorgen) För begränsande pga att efterlikna verkligheten (manuellt sökande efter filer) Brott mot design principer (papperskorgen igen) Inte förstå systemet bortom metaforen (vad är egentligen en applikation, arbetsminne, etc?) Fundamentiskt tro på att det som låg till grund för metaforen fungerar bra (miniräknaren) Begränsar designrymden Intuitiva och idiomatiska gränssnitt

38 Systemmodeller Modeller av hur systemet fungerar
Systemet som ett objekt Inte nödvändigtvis från användarens perspektiv

39 Systemmodell: Foley & van Dam 4-nivåmodell (Foley et al., 1990)
Konceptuell nivå Användares mentala modell av systemet Förhoppningsvis samma som designerns Semantisk nivå Beskrivning av betydelsen av indata och utdata Syntaktisk nivå Beskrivning av hur enheter i interaktionen kan kombineras Lexikal nivå Artefaktberoende egenskaper och mekanismer som används för indata och utdata

40 Systemmodell: GOMS (Card et al., 1980)
Goals Användarens mål med att använda systemet Delmål Operators Handlingar och observationer Methods Sekvens av handlingar som kan leda till uppfyllandet av mål Selection Rules Hur användare avgör vilken metod de tänker använda för att uppnå ett mål

41 Systemmodell: Sjustegshandlingar (Norman, 1988)
Bestämma mål Bestämma syfte Specificera handlingen Genomföra handlingen Uppfatta förändringar i systemet Tolka förändringar i systemet Evaluera resultatet av handlingen

42 Systemmodell: Kunskapskristallisering (Russell et al., 1993)
Uppgift Datasökning Beslut/Handling Struktursökning Problemlösning Strukturimplementering

43 Systemmodell: Objekt-Handling modellen (Sheiderman, 1980)
Analysera krav från användare och system så delar kan beskrivas som antingen objekt eller handlingar Objekt Informationsbärare Handlingar Förändringar som kan göras på informationen i objekt eller på objekten själva

44 Guidelines: Shneidermans 8 gyllene regler för interaktionsdesign
Konsekvens T.ex. genom grammatiker Genvägar för erfarna användare Informativ feedback ”Design dialogs to yield closures” Erbjud möjligheter att motverka eller återställa fel Erbjud möjligheter att ångra handlingar Stöd uppfattning av användarens kontroll-lokus Minska belastningar på korttidsminnet

45 Guidelines: organisering av datapresentation (Smith & Moser, 1986)
Konsekvens Terminologi, färg, format, placering, ordning Tillåt effektiv informationsupptagning Använd konventioner kring uppställningar, decimaler, mätenheter, etc. Minimera belastning av användarens minne Konsekvens mellan inmatning och presentation Om möjligt gör så resultatfält kan användas för ny indata Tillåt användaranpassning av presentation Sortering av fält enligt användarens egna behov Detta kan bryta mot konsekvensprincipen Speciellt om flera personer ska använda samma system

46 Guideslines: Att fånga användarens uppmärksamhet (Wickens, 1992)
Intensitet Använd 2 nivåer (och inte för intensiva nivåer) Markeringar Understrykning, överstrykning, pilar Storlek Upp till 4 storlekar på typsnitt, större för uppmärksamhet Typsnitt Upp till 3 typsnitt Inverterade färger Färger Upp till 4 färger, ytterligare färger sparsamt Blinkande (och bytande av färger regelbundet) ”user changes in color with great care and in limited areas” Ljud Mjuka toner för positiv feedback och hårda för sällsynta undantag

47 Guidelines: datainmatning (Smith & Moiser, 1986)
Konsekvens för datainmatning Liknande datainmatning ska ha samma sekvens Minimera mängden handlingar krävda av användare För att minska risken för fel T.ex. genom att kopiera information för användaren Minimera belastning på användarens minne Konsekvens mellan inmatning och presentation Om möjligt gör så resultatfält kan användas för ny indata Tillåt användaranpassning av inmatning Inmatning i den ordning som passar användarens egna behov Detta kan bryta mot konsekvensprincipen Speciellt om flera personer ska använda samma system

48 Guidelines: Sista råd Användare ser inte applikationen hela tiden
Upptagen med andra aktiviteter Har andra fönster eller applikationer uppe Tänk på att användare är vana vid andra program Inlärningströsklar Vanor Kulturskillnader

49 Ta ikonlapparna för eftermiddagens övning
Slut Ta ikonlapparna för eftermiddagens övning