Traditionella grafiska gränssnitt

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

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

Komponenter i grafiska gränssnitt

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

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

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 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)

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 Har rumslig dimension Icke-spatial Inte har rumslig dimension

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

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) 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

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

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

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