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