Presentation laddar. Vänta.

Presentation laddar. Vänta.

Traditionella grafiska gränssnitt. Upplägg  Innan rasten  Vilka komponenter har man att tillgå när man ska göra en grafiskt gränssnitt  Kategorier.

Liknande presentationer


En presentation över ämnet: "Traditionella grafiska gränssnitt. Upplägg  Innan rasten  Vilka komponenter har man att tillgå när man ska göra en grafiskt gränssnitt  Kategorier."— Presentationens avskrift:

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 Utvärdering Design Användarstudie Kravspecifikation  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  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 (” ” 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,  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) 1. Bestämma mål 2. Bestämma syfte 3. Specificera handlingen 4. Genomföra handlingen 5. Uppfatta förändringar i systemet 6. Tolka förändringar i systemet 7. Evaluera resultatet av handlingen

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

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


Ladda ner ppt "Traditionella grafiska gränssnitt. Upplägg  Innan rasten  Vilka komponenter har man att tillgå när man ska göra en grafiskt gränssnitt  Kategorier."

Liknande presentationer


Google-annonser