Design og Brukergrensesnitt

Presentasjon om: "Design og Brukergrensesnitt"— Utskrift av presentasjonen:

1 Design og Brukergrensesnitt
IKT og læring 2 Onsdag 28. november 2007 Tonje Hilde Giæver

2 Plan for dagen Begreper – definisjoner Design Fagfeltet HCI - MMI
Historisk utvikling Grafisk brukergrensesnitt (GUI) Web-design Universell tilrettelegging

3 Øvelse 1 Gå to og to sammen og bruk 3 minutter på å forsøke å definere begrepet ”brukergrensesnitt” Hva forbinder dere med gode/dårlige grensesnitt?

4 Noen definisjoner grensesnitt i edb: programvare som skaper forbindelse mellom to enheter slik at de virker sammen el. kan kommunisere med hverandre g-et mellom datamaskin og skriver, jf brukergrensesnitt brukergrensesnitt i edb: programvare som gjør det mulig for en bruker å kommunisere med en datamaskin Bokmålsordboka

5 Grensesnitt 1) Angir måten brukeren kommuniserer med maskinen. Dette kan foregå via periferienheter som tastatur, mus, digitaliseringsbord, mikrofon e.l. 2) Ordet brukes også om hvordan skjermbildet gjengir informasjonen, f.eks kun som tekst (tekstbasert grensesnitt), eller også ved hjelp av grafikk (grafisk brukergrensesnitt). 3) Maskin- eller programkomponent som gjør det mulig å koble sammen to enheter slik at data kan utveksles mellom dem. Mitt dataleksikon

6

7

8 Brukergrensesnitt The user interface (or Human Machine Interface) is the aggregate of means by which people (the users) interact with a particular machine, device, computer program or other complex tool (the system). The user interface provides means of: Input, allowing the users to manipulate a system Output, allowing the system to produce the effects of the users' manipulation. eng.wikipedia.org

9 ”The Psychopathology of Everyday Things”
(Norman, D.A. 88) Jacques Carelmans - Umulige objekter

10 ”You Would Need an Engineering Degree to Figure This Out?”
Hvor mange kan programmere eller bruke alle funksjoner ved sin: Digitale klokke Mobiltelefon Videoopptaker Symaskin Vaskemaskin, tørketrommel Stereoanlegg (bil-anlegg?)

11 En annen tilnærming

12 Viktige momenter for design
Synliggjøring av bruksegenskaper (visibility) Bruksmuligheter – de opplevde og faktiske egenskaper ved et objekt (affordances) Begrensninger (constraints) Avbildning av hva du vil gjøre og hva som synes mulig (mapping) Naturlig mapping - bygger på etablerte normer Tilbakemelding på utført handling (feedback) Mentale modeller (conseptual models)

13 ”En sann historie fra virkeligheten”
Caller: "Hello, is this Tech Support?" Tech Rep: "Yes, it is. How may I help you?" Caller: "The cup holder on my PC is broken and I am within my warranty period. How do I go about getting that fixed?" Tech Rep: "I’m sorry, but did you say a cup holder?" Caller: "Yes, it’s attached to the front of my computer." Tech Rep: "Please excuse me if I seem a bit stumped, it’s because I am. Did you receive this as part of a promotional, at a trade show? How did you get this cup holder? Does it have any trademark on it?" Caller: "It came with my computer, I don’t know anything about a promotional. It just has ’4X’ on it."

14 Grunnleggende designprinsipper
Sørg for de riktige bruksegenskaper Sørg for en god konseptuell modell Sørg for en god avbildning Gjør ting synlig Sørg for tilbakemelding visuell, taktil, auditiv

15 Dårlig design kan gi ”falske sammenhenger”
Designerens kunnskap om menneske og psykologi kombinert med kunnskap om hvordan ting virker er avgjørende for godt design Designers modell og brukers modell må være tilnærmet lik for at systemet skal være lett å bruke

16 Systemets bilde Designers mentale modell Brukerens mentale modell
Hvordan systemet virkelig fungerer. Hvordan designeren ønsker at brukeren skal tro at systemet fungerer. Hvordan brukeren tror systemet fungerer Systemets bilde Hvordan systemet ser ut. Systemets presentasjon av funksjonalitet for brukeren.

17 Hvem har skylden når ting ikke virker som det skal?
”Well-designed objects are easy to interpret and understand. They contain visible clues to their operation” Ulike perspektiver: Designer: Brukeren er for dum Bruker: Designeren har ikke skjønt hvordan brukeren tenker og regner seg selv som typisk bruker Markedsfører: Folk vil ha mer og mer funksjonalitet i mindre og mindre format

18 Øvelse 2 List opp 3 gode og 3 dårlige brukergrensesnitt
Forsøk å si noe om hva som er bra eller hva som er dårlig utfra Normans grunnleggende designprinsipper

19 Fokus på grensenittutvikling
(Jonathan Grudin, 1990)

20 Jonathan Grudin, 1990

21 Fagfelt HCI "Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them.“

22 Menneske-maskin interaksjon MMI
Menneske–maskin-interaksjon (MMI) er studien omkring interaksjonen (samhandlingen) mellom mennesker (brukere) og datamaskiner. De viktige elementene ved denne samhandlingen involverer utformingen av både maskinvare og programvare, og resulterer i et «produkt» hvor bl.a. estetikk, brukervennlighet, ergonomi, kognitiv teknologi, design, psykologi og sosiologi spiller en stor rolle for hvordan sluttbrukeren oppfatter samhandlingen. Samhandlingen mellom mennesker og maskiner har alltid vært et stort spørsmål, etter at maskinene mer og mer har tatt over menneskenes oppgaver.

23 Grafisk brukergrensesnitt
Command line interface (CLI) Graphical user interface (GUI) WIMPs ("window, icon, menu, pointing device") Naturlig språk? Metaforer – eks skrivebordsmetaforen

24 Macintosh 1984

25 Windows 95

26 Windows Vista 2007

27 Noen ”dingser” (widgets)
Menu Context menu Pie menu Toolbar Ribbon Combo box Icon Tree view Button Check box Radio button Slider List box Drop-down list

28 Menyer Samling alternative kommandoer Logiske, meningsfulle kategorier
Valg av terminologi Dybde (antall nivåer i et meny-tre) og bredde (antall enheter per meny) Organisering av menyene – antall menyer, antall enheter Organisering av enhetene Oppgaveorientert, alfabetisk, numerisk, kronologisk, det viktigste eller mest brukte står øverst Kontekstavhengige menyer (eks høyre museknapp)

29 Øvelse 3 Prøv og huske følgende tallrekke: Og så denne
Og så denne Det magiske nummer syv, pluss eller minus to, (Miller, 1956)

30 Ulike brukere ulike behov
Nybegynnere og avanserte brukere har ulike behov Verktøylinje med ikoner og gule etiketter Menylinje med kategorier og nedtrekksmenyer Kontekstmenyer Tastekombinasjoner Hva passer for hvem?

31 Konsistens i brukergrensesnittet
Samme tilnærming i alle deler av grensesnittet – Ord og uttrykk (”fil”, ”dokument”, ”åpne”, ”hente”,,) – Bruk av grensesnittelementer (lister, menyer,) – Visuell kommunikasjon (form, farge, font, layout,) – Interaksjonsstil (drag & drop, ikoner, menyer,) – Konsekvent i forhold til plattform og andre applikasjoner.

32 Bruk av stylesheet:

33 Hit any key

34

35 Shneidermans 8 “gyldne regler” for design av GUI
1. Lag konsistente grensesnitt 2. Muliggjør bruk av snarveier 3. Gi informative tilbakemeldinger 4. Benytt dialoger med klart definert slutt 5. Tilby enkel feilhåndtering 6. Tillat enkel reversering av handlinger 7. La brukeren få følelsen av å ha kontroll 8. Reduser kravene til korttids-hukommelse

36 Høyttenkning En metode fra kognitiv psykologi
For å analysere menneskers kognitive prosesser under problemløsing Brukerne blir bedt om å tenke høyt når de løser et problem Bare tanker som er relevante for problemet skal verbaliseres Gir en evaluering av grensesnitt og funksjonalitet – brukerens interaksjon med systemet

37 Øvelse 4 Gå to sammen. Gjennomfør en høyttenknings evaluering av hverandres læringssti. Gå helst sammen med noen som ikke har sett læringsstien før. Formålet med evalueringen er å kartlegge hva som fungerer og hva som ikke fungerer i designets utforming. Evalueringen skal gi opphav til forslag til fremtidige forbedringer av designet. Tilretteleggeren har som sin oppgave å minne brukeren om å tenke høyt når brukeren glemmer å verbalisere sine tanker, men skal ikke forstyrre brukeren. Tilretteleggeren bør ikke tiltrekke seg brukerens oppmerksomhet ved å stille spørsmål under sesjonen eller lignende. Brukeren skal ikke på noe tidspunkt motta noen form for opplæring. Tilretteleggeren kan gi brukeren mindre hint hvis brukeren står fast over lengre tid. Sørg for å dokumentere hva brukeren tenker og gjør når han står fast eller gjør feilslutninger.

38 Web-design - Usability
Hvor lett er grensesnittet å bruke? 5 kvalitetskomponenter: Learnability: Hvor lett er det å få gjort det som skal gjøres – første gang Efficiency: Når brukeren har lært utformingen – hvor raskt får en gjort det en skal? Memorability: Når brukeren kommer tilbake til stedet etter en tid – hvor lett er det å etablere gode ferdigheter? Errors: Hvor mange feil gjør brukeren? Hvor alvorlige er feilene? Hvordan rette opp feilene? Satisfaction: Hvor behagelig/tilfredsstillende er det å bruke stedet

39 Symptomer på dårlig brukbarhet
Høy feilrate Kan måles i antall sammenbrudd per time (når brukeren må fokusere på verktøyet og ikke på oppgaven) Mye stress Usikkerhet, utrygghet, uforutsigbarhet Ventestress Fremmedgjøring, negative holdninger og lært hjelpeløshet ”Jeg forstår ikke data” - ”Jeg hater data”

40 "Keep It Simple, Stupid“ "Less is more“
”Content is king” la innholdet bestemme designet hold informasjonen i fokus Lenker til lange historier "Keep It Simple, Stupid“ "Less is more“ Vær konsistent – velg en grafisk stil og hold deg til den

41 Brukeren: Designeren: Hvor er jeg?
Hvor er den informasjonen jeg trenger? Hvor kan jeg gå videre? Designeren: Hvordan vil brukeren navigere? Hva kommuniserer informasjonen? Hvordan kan brukeren få maksimalt med informasjon med et minimum av mental innsats?

42 Egne erfaringer/refleksjoner
Finne flytider Fullføre banktransaksjoner Avbestilling i bokklubb Websteder som leder deg dit designeren vil – ikke mot de behov du selv har

43 Nielsens 10 tommelfingerregler for brukbarhet
1. Visning av systemets status. Gi brukeren tilbakemelding 2. Systemet skal være tilpasset brukeren. Snakk brukerens språk 3. Brukerkontroll, frihet og klare utganger 4. Konsistens og standarder 5. Forhindre feil 6. Gjenkjenning fremfor erindring

44 7. Systemet skal være fleksibelt og effektivt i bruk. Tilby snarveier
8. Estetisk og minimalistisk design. Enkel og naturlig dialog. 9. Gode feilmeldinger skal hjelpe brukeren å gjenkjenne, finne årsaken til, og rette opp feil 10. Hjelp og dokumentasjon

45 Øvelse 5 Sammenligne Schneidermanns 8 gyldne regler og Nielsens 10 tommelfingerregler. Hvilke likheter og hvilke ulikheter finner dere? I hvilken grad er disse reglene aktuelle og ivaretatt i deres læringssti?