Traditionella grafiska gränssnitt
Mar 20, 2016
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 av komponenter Det fysiska gränssnittet
Efter rasten Modeller för användare, användande Guidelines
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
Komponenter i grafiska gränssnitt
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
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
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
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
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
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…)
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…
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
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
Ö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)
Vilka kategorier av komponenter finns det?
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
Spatiala – Icke-spatiala
Spatiala Har rumslig dimension
Icke-spatial Inte har rumslig dimension
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
Hårdvara
Tangentbord
Inmatning av text Inmatning av siffror & tal
Modifierare Kortkommandon Windowsknappen
Systemknappar Internet, Email Play, stopp Ljud +, Ljud -
Pekdon med relativnavigering Flyttar markörer
Kontinuerlig rörelse Knappar 1, 2 eller fler Scrollwheel Vibrerande
Exempel Möss Trackball Joystick Gamepad
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)
Rast
Modeller och guidelines
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?
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
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)
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?
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
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
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.
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
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
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
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
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
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
Systemmodeller
Modeller av hur systemet fungerar Systemet som ett objekt Inte nödvändigtvis från användarens perspektiv
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
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
Systemmodell: Sjustegshandlingar (Norman, 1988)1. Bestämma mål2. Bestämma syfte3. Specificera handlingen4. Genomföra handlingen5. Uppfatta förändringar i systemet6. Tolka förändringar i systemet7. Evaluera resultatet av handlingen
Systemmodell: Kunskapskristallisering (Russell et al., 1993) Uppgift
Datasökning
Struktursökning
Strukturimplementering
Problemlösning
Beslut/Handling
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
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
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
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
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
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
Slut
Ta ikonlapparna för eftermiddagens övning