PRS Brukergrensesnitt Leksjon7aitel.hist.no/fag/it1/prs/PRS_Brukergrensesnitt_Leksjon7.pdf · • Øyet tar i mot informasjonen, hjernen tolker informasjonen • To hovedfaktorer:

1

Brukergrensesnitt

Prosjektrettet systemarbeid

25. september 2007 - Knut Arne Strand

Prosjektorganisering, roller og støttefunksjoner 2

Hva er HCI og MMI?• Human Computer Interaction (HCI):

– En fagdisiplin som omfatter design, evaluering og implementering av interaktive informasjonssystemer for menneskelige bruk og studiet av de viktigste fenomener som omgir disse systemene.

• Menneske-Maskin Interaksjon (MMI):– I Norge er det vanlig å benytte betegnelsen

MMI for dette fagområdet.

2


Hva HCI omfatter


Dataspråk

Kognitiv psykologi

Sosiologi

Systemutvikling

Sosialpsykologi

Matematikk

Organisasjonspsykologi

Et fagområder som bidrar til forståelsen av samspillet mellom mennesker, maskiner og organisasjoner.

HCI er tverrfaglig

Menneske-maskin interaksjon

Kunstig intelligens

Ergonomi

3


Kognitiv psykologi

• Hvorfor trenger vi kunnskaper om kognitiv psykologi?– Vi lærer hva vi kan forvente at brukerne gjør.– Det blir lettere å forklare og identifisere

årsakene til de problemene som oppstår.– Fagområdet bidrar til standarder, metoder for

testing og modeller for å forutsi brukerens oppførsel.


Kognitiv psykologi…• Kognitiv psykologi omhandler hvordan mennesket:

– tilegner seg informasjon. – gjenfinner informasjon. – organiserer informasjon. – assosierer informasjon. – utnytter informasjon.

• Kognitiv psykologi er studiet omkring:– læring, lagring og glemsel.– koding.– kontekstinnvirkninger.– oppmerksomhet.

4


• Persepsjonspsykologi:– Studiet omkring sansene og hvordan disse

prosesserer informasjon. – Inkluderer anatomi, psykologisk neurologi og

informasjonsprosesseringskarakteristika.

Persepsjonspsykologi


• Det grensesnittet som gjør at en bruker kan kommunisere med maskiner.

• Synlige bilder på skjermen som f. eks. vinduer, menyer, meldinger, hjelpefunksjoner, etc.

• Brukerdokumentasjon.

Brukergrensesnitt

Brukergrensesnitt Indre deler avdatamaskinen

5


• For 50 år siden tilsvarte kostnaden til en datamaskin 200 årslønner.

• I dag tilsvarer en god årslønn kostnaden til 200 datamaskiner.

• Oppgaven blir derfor å gjøre dem enkle åbruke samt å gjøre oppgavene for brukeren mer tidseffektiv.

Kostnadsskifte


Model Human Processor (MHP)

6


Ulike deler av minnet og deres interaksjon


T = 0. Dvs. symbolet kommer opp på skjermen

OPPGAVE: Når et symbol kommer opp på skjermen skal brukeren trykke J tasten påtastaturet. Antar at hendene er på tastaturet.

Eksempel MHP- enkel respons

7


T = Tp. Dvs. symbolet er overført til VIS av den perseptuelle prosessor P og flyter (omkodet) etter en kort tidsforsinkelse inn i WM.

Eksempel MHP…


T = Tp+Tk. Dvs. den kognitive prosessor K registrerer stimulus i WM og initiere respons (trykk J)

Eksempel MHP…

8


T = Tp+Tk+Tm. Dvs. motorkommando (respons) utføres av motorprosessoren. Dermed blir svaret på reaksjonstiden T = 240 ms.

Eksempel MHP…


Magisk tall: 7 +/- 2

• 73551783• 73 55 17 83• Kan du huske:

– Vfgnh76dks54bcg• Hvor mange grupperinger i:

– www.bestbookbuys.com

9


Gjenkjenning vs. hukommelse

• Hvorfor er en flervalgstest lettere enn en skriftlig prøve?– Flervalgstest: Kan gjenkjenne svaret.– Skriftlig prøve: Må huske svaret.

• Et brukergrensesnitt gir oss mulighet til ågjenkjenne kommandoene i en meny, i stedet for å huske dem slik som i DOS og UNIX.


Brukerens tålmodighet• Hvor hurtig må et system respondere før

brukerens tålmodighet er slutt?

Skifter til en annen oppgave

> 10 sek

Merker forsinkelsen, men mister ikke fatningen

< 1 sekVirker øyeblikkelig< o,1 sekBrukerreaksjonResponstid

10


Mentale modeller og metaforer• Hvordan bruker mennesker kunnskapen til å

forstå eller lage forutsigelser omkring nye situasjoner?– Mennesker lager mentale modeller.

• Kan ikke ignorere brukernes mentale modeller.• Bruker testing for å avdekke brukernes mentale

modeller.• Metaforer - Et uttrykk som brukes i overført eller

billedlig betydning. – Bruk av ikoner eller tilsvarende gjør gjenkjenning

lettere.


Syn• Øyet tar i mot informasjonen, hjernen tolker

informasjonen• To hovedfaktorer:

– Lysintensitet– Farge (bølgelengde)

• Fortolkningen i hjernen bestemmer hva vi ser.• Optiske illusjoner er et resultat av hjernens

fortolkning.

11


Kan du se dette som et tredimensjonalt bilde?

Illusjoner


Hvor mange terninger?

12


Farger

• Farge bli bestemt i forhold til følgende faktorer:– Fargetone (Hue)– Lysintensitet– Metning


Fargesirkelen

13


Synlig fargespekter


Hvorfor bruke farger

• Estetisk tiltrekkende.• Øke effektiviteten• Ekstra koding.• Lettere å huske.• Kan lett bli misbrukt.

14


Fargeharmonier• Monokromatisk:

– Samme farge men forskjellig lysstyrke og metning.• Komplementær:

– Farger overfor hverandre i fargesirkelen.• Analog:

– Farger som ligger ved siden av hverandre påfargesirkelen.

• Triade:– Farger som utgjør et triangel på fargesirkelen


Alle er blå Alle er oransje

Monokromatiske farger

15


Komplementære farger


Analog - lys oransje, mørkere gul-oransje og lys gul

16


Triade - rød, gul og blå


Tekst og bakgrunnsfarger for lesbarhet

• Regel 1: – Bruk passende kontrast.

• Regel 2: – Ikke bruk for mye, sort og hvit har for mye

kontrast.• Regel 3:

– Mørk tekst på lys bakgrunn, ikke lys tekst påmørk bakgrunn.

17


Color is one of the pleasurable aspects of eyesight and is an integral part of Web pages. Properly used, color makes a page both attractive and usable. It can provide cues that indicate a button’s function or state. It can distinguish between navigational aids and content, unobtrusively guiding the user through a page. This chapter presents some color basics and design tips to enhance both the effectiveness and appeal of a Web site.

Mørk tekst på en bakgrunn i en lys komplementærfarge går bra


Offer expires 07/31/03. Offer available to new High Speed Internet subscribers only. May not be used in conjunction with any other offer. Service is not available in all areas. Certain taxes and fees may apply. DSL: Offer requires a 12 month subscription. First six months will be billed at $29.95 per month, 49.95 thereafter. Early termination fees apply. Includes Standard DSL Installation Kit. Does not include shipping and handling charges. Additional equipment may be required.

Uten kontrast

18


Blue has the shortest wavelength of visible light and red the longest. Blue is refracted more strongly than red in our lenses. (Compare with what a prism does to white light.) Result: our eyes can’t focus on red and blue at the same time, and the boundary seems to vibrate. It gets painful.Camera lenses deal with this by using lens components with different indexes of refraction, to produce an achromatic lens, so that red and blue both focus at the focal plane. Our eyes don’t work that way. This hurts.

Ikke bruk rød tekst mot blå bakgrunn eller omvendt


Red on green also hurts the eyes. I refuse to show any more of it!

Ikke bruk rød mot grønn bakgrunn eller omvendt

19


Hørsel

• Brukes når:– Informasjonen er kort.– Informasjonen ikke vil bli referert til senere.– For oppmerksomhet og advarsler når

øyeblikkelig respons er påkrevd.– Det visuelle system er overbelastet.– Brukeren er mobil.


Mål for HCI• Safety

– At systemet er sikkert og at man ikke kommer i skade for å gjøre feil.

• Utility– At systemet har tilstrekkelig nytteverdi.

• Effectiveness– Uttrykker hvor lett det er å nå målet.

• Efficiency– Uttrykker hvor lang tid man trenger på å nå målet.

• Usability– Systemets brukbarhet er kanskje det viktigste.

• Appeal– Systemet må appellere til brukerne.

20


Brukbarhet• Viktigste kvaliteten ved brukergrensesnittet.• Vanskelig å oppnå.• Utviklerne må ha evnen til å ”se verden” fra en annen

vinkel.• Se på oppgavene systemet skal uføre ut fra

sluttbrukerens situasjon.• Brukbarhet er en leve eller dø avgjørelse for utviklere.• God brukbarhet gir:

– Reduserte kostnader og økt produktivitet.– Raskere utførelsestid.– Færre feil.– Mindre opplæring.


Brukbarhet

21


Brukbarhet og lønnsomhet• Brukergrensesnitt med høy brukbarhet krever:

– Større dyktighet av designerne, mer innsats og timeforbruk– Mer programmeringsinnsats for å lage alternativer, flere

meldinger og advarsler. Ekstra kode kan være kompleks• Et godt designet brukergrensesnitt gir:

– Større produktivitet grunnet bedre effektivitet.– Færre brukerfeil.– Redusert opplæringstid og opplæringskostnad

• Lettere å ha en fleksibel ansettelsespraksis med skifte arbeidsfunksjon og utskifting av personell.

– Brukerne oppfatter systemet behagelig og er tilfredse.


Brukskvalitet• Brukskvalitet er den opplevde kvaliteten av et

produkt i bruk.• Hva kjennetegner høy kvalitet i programvare?

– Funksjonelle egenskaper som setter brukeren i stand til å utføre sine oppgaver.

– Lite behov for hjelp, få “sammenbrudd”.– Lett å lære, lett å finne informasjon.– Kan vokse med brukeren.

• Brukeren har alltid rett!

22


Trinnene i en brukersentrert utvikling1. Behovsanalyse2. Bruker og oppgaveanalyse3. Funksjonsanalyse4. Kravanalyse5. Brukbarhetsspesifikasjoner6. Design7. Prototyping8. Evaluering• Utvikler har ansvar for at god brukbarhet oppnås og må samarbeide med

sluttbrukeren:– Utvikler må vite i detalj hvem sluttbrukeren er.– Sluttbruker bør ha en aktiv rolle i analyse- og designfasen. Sluttbrukerens syn på

”hvordan vil jeg bruke systemet til å gjøre arbeidet mitt” er et viktig bidrag til alle aktiviteter i analyse- og designprosessen.

– Utvikler og sluttbruker evaluerer brukbarheten av foreslått design så tidlig som mulig. Designet modifiseres gjentatte ganger ut fra feedback fra evalueringen.


Enkel prototyp

23


Mer avansert prototyp


Konsistens og bruk av komponenter

24


DESIGN

PROTOTYPE

EVALUAER

KLAR FORIMPLEMENTERING

ER BRUKERKRAVENEINNFRIDD?

Nei Ja

Brukersentrert utvikling

Documents

PRS Brukergrensesnitt Leksjon7aitel.hist.no/fag/it1/prs/PRS_Brukergrensesnitt_Leksjon7.pdf · • Øyet tar i mot informasjonen, hjernen tolker informasjonen • To hovedfaktorer: