Traditionella grafiska gränssnitt

1. Traditionella grafiska gränssnitt

2. Upplägg • Innan 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 Användarstudie • Alla dessa behöver • Begrepp för enskilda objekt och handlingar • Modeller för hur dessa fungerar tillsammans Kravspecifikation Utvärdering Design

4. Komponenter i grafiska gränssnitt

5. Fönster • 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 • 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 (”20030506” 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 • 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 • Spatiala • Har rumslig dimension • Icke-spatial • Inte har rumslig dimension

18. Statisk - Interaktiv • Statisk • Rent informativa • Interaktiv • 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, Email • 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. Slut Ta ikonlapparna för eftermiddagens övning