Presentasjon lastes. Vennligst vent

Presentasjon lastes. Vennligst vent

Høgskolen i Oslo Design og Brukergrensesnitt IKT og læring 2 Onsdag 28. november 2007 Tonje Hilde Giæver.

Liknende presentasjoner


Presentasjon om: "Høgskolen i Oslo Design og Brukergrensesnitt IKT og læring 2 Onsdag 28. november 2007 Tonje Hilde Giæver."— Utskrift av presentasjonen:

1 Høgskolen i Oslo Design og Brukergrensesnitt IKT og læring 2 Onsdag 28. november 2007 Tonje Hilde Giæver

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

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

4 Noen definisjoner l 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 l 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 l 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” Jacques Carelmans - Umulige objekter (Norman, D.A. 88)

10 ”You Would Need an Engineering Degree to Figure This Out?” »Hvor mange kan programmere eller bruke alle funksjoner ved sin: l Digitale klokke l Mobiltelefon l Videoopptaker l Symaskin l Vaskemaskin, tørketrommel l 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) l Naturlig mapping - bygger på etablerte normer –Tilbakemelding på utført handling (feedback) –Mentale modeller (conseptual models)

13 ”En sann historie fra virkeligheten” l Caller: "Hello, is this Tech Support?" l Tech Rep: "Yes, it is. How may I help you?" l Caller: "The cup holder on my PC is broken and I am within my warranty period. How do I go about getting that fixed?" l Tech Rep: "I’m sorry, but did you say a cup holder?" l Caller: "Yes, it’s attached to the front of my computer." l 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?" l Caller: "It came with my computer, I don’t know anything about a promotional. It just has ’4X’ on it."

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

15 l Dårlig design kan gi ”falske sammenhenger” l Designerens kunnskap om menneske og psykologi kombinert med kunnskap om hvordan ting virker er avgjørende for godt design l 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 System DesignerBruker Hvordan systemet virkelig fungerer. Hvordan designeren ønsker at brukeren skal tro at systemet fungerer. Hvordan brukeren tror systemet fungerer Hvordan systemet ser ut. Systemets presentasjon av funksjonalitet for brukeren.

17 Hvem har skylden når ting ikke virker som det skal? l ”Well-designed objects are easy to interpret and understand. They contain visible clues to their operation” l 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 l List opp 3 gode og 3 dårlige brukergrensesnitt l Forsøk å si noe om hva som er bra eller hva som er dårlig utfra Normans grunnleggende designprinsipper

19 Fokus på grensenittutvikling l (Jonathan Grudin, 1990)http://research.microsoft.com/~jgrudin/

20 Jonathan Grudin, 1990

21 Fagfelt HCI l "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) ▫ Button Button  Check box Check box  Radio button Radio button ▫ Slider Slider ▫ List box List box ▫ Drop-down list Drop-down list ▫ Menu Menu  Context menu Context menu  Pie menu Pie menu ▫ Toolbar Toolbar ▫ Ribbon Ribbon ▫ Combo box Combo box ▫ Icon Icon ▫ Tree view Tree view

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 l Prøv og huske følgende tallrekke: – l Og så denne – l Det magiske nummer syv, pluss eller minus to, (Miller, 1956)

30 Ulike brukere ulike behov l Nybegynnere og avanserte brukere har ulike behov –Verktøylinje med ikoner og gule etiketter –Menylinje med kategorier og nedtrekksmenyer –Kontekstmenyer –Tastekombinasjoner l 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 l Bruk av stylesheet: l

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 l Høy feilrate –Kan måles i antall sammenbrudd per time (når brukeren må fokusere på verktøyet og ikke på oppgaven) l Mye stress l Usikkerhet, utrygghet, uforutsigbarhet l Ventestress l Fremmedgjøring, negative holdninger og lært hjelpeløshet l ”Jeg forstår ikke data” - ”Jeg hater data”

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

41 • Brukeren: • 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 l Finne flytider l Fullføre banktransaksjoner l Avbestilling i bokklubb l Websteder som leder deg dit designeren vil – ikke mot de behov du selv har

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

44 l 7. Systemet skal være fleksibelt og effektivt i bruk. Tilby snarveier l 8. Estetisk og minimalistisk design. Enkel og naturlig dialog. l 9. Gode feilmeldinger skal hjelpe brukeren å gjenkjenne, finne årsaken til, og rette opp feil l 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?


Laste ned ppt "Høgskolen i Oslo Design og Brukergrensesnitt IKT og læring 2 Onsdag 28. november 2007 Tonje Hilde Giæver."

Liknende presentasjoner


Annonser fra Google