Prosjektrettet systemarbeid - NTNUaitel.hist.no/fag/it1/prs/it1-prs-f6-h08.pdf · Inkluderer anatomi, psykologisk neurologi og ... Øyet tar i mot informasjonen, hjernen tolker informasjonen

Prosjektrettet systemarbeidTema: Brukergrensesnitt

Høsten 2008

Lærere: Tore Mallaug, Kjell Toft Hansen

Tema for dagen er…

Hva er HCI og MMI?

Hva omfatter MMI?

MMI er tverrfaglig

Kognitiv psykologi

Persepsjonspsykologi

Brukergrensesnitt

Magiske tall

Godkjenning vs. Hukommelse

Brukerens tålmodighet

Mentale modeller og metaforer

Syn, illusjoner, hvor mange

Farger, fargesirkel, synlige farger, hvorfor bruke farger, farge‐harmonier, monokromatiske farger, komplementære farger, analoge farger, triade, tekst‐ og bakgrunnsfarger

Mørk tekst, tekst uten kontrast, rød tekst

Hørsel

Mål for HCI

Brukbarhet

Prototyp

Eksempler på brukergrensesnitt

09.10.2008 ©Kjell Toft Hansen 2

Hva er HCI og MMI?

Human Computer Interaction (HCI) eller Menneske‐Maskin‐Interaksjon (MMI)

En fagdisiplin som omfatter design, evaluering og implementering av interaktive informasjonssystemer for menneskelige bruk og studiet av de viktigste fenomener som omgir disse systemene.Et fagområder som bidrar til forståelsen av samspillet mellom mennesker, maskiner og organisasjoner.


Hva omfatter MMI?


MMI er tverrfaglig


Dataspråk

Kognitiv psykologi

Sosiologi

Systemutvikling

Sosialpsykologi

Matematikk

Organisasjonspsykologi

Menneske-Maskin-Interaksjon

Kunstig intelligens

Ergonomi

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 informasjongjenfinner informasjonorganiserer informasjon assosierer informasjon utnytter informasjon

Kognitiv psykologi er studiet omkring:læring, lagring og glemselkodingkontekstinnvirkningeroppmerksomhet


Kognitiv psykologi

• Persepsjonspsykologi:– Studiet omkring sansene og hvordan disse prosesserer informasjon

– Inkluderer anatomi, psykologisk neurologi og informasjonsprosesseringskarakteristika


Brukergrensesnitt

• Brukergrensesnitt = Graphical User Interface (GUI)• 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 Indre deler avdatamaskinen

Magisk tall: 7 +/- 2

73551783

73 55 17 83

Kan du huske:Vfgnh76dks54bcg

Hvor mange grupperinger i:www.bestbookbuys.com


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?


Responstid Brukerreaksjon< o,1 sek Virker øyeblikkelig

< 1 sek Merker forsinkelsen, men mister ikke fatningen

> 10 sek Skifter til en annen oppgave

Mentale modeller og metaforer


Hvordan bruker mennesker kunnskapen til å forstå eller lage forutsigelser omkring nye situasjoner?

Mennesker lager mentale modellerKan ikke ignorere brukernes mentale modellerBruker testing for å avdekke brukernes mentale modellerMetaforer ‐ 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


Illusjoner


Kan du se dette som et tredimensjonalt bilde?

Hvor mange terninger


Farger

Farge bli bestemt i forhold til følgende faktorer:Fargetone

Lysintensitet

Metning


Fargesirkel


Synlig fargespekter


Hvorfor bruke farger


Estetisk tiltrekkende

Øke effektiviteten

Ekstra koding

Lettere å huske

Kan lett bli misbrukt

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


Monokromatiske farger


Alle er blå Alle er oransje

Komplementære farger


Analog – lys oransje, mørkere gul‐oransje og lys gul


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


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


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.

Uten kontrast


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.

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


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 mot grønn bakgrunn eller omvendt


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

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 MMI

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

NytteAt systemet har tilstrekkelig nytteverdi

EffektivitetUttrykker hvor lett det er å nå målet

HurtighetUttrykker hvor lang tid man trenger på å nå målet

BrukbarhetSystemets brukbarhet er kanskje det viktigste

AttraktivitetSystemet må appellere til brukerne


Brukbarhet

Viktigste kvaliteten ved brukergrensesnittetVanskelig å oppnåUtviklerne må ha evnen til å ”se verden” fra en annen vinkelSe på oppgavene systemet skal uføre ut fra sluttbrukerens situasjonBrukbarhet er en leve eller dø avgjørelse for utviklereGod brukbarhet gir:

Reduserte kostnader og økt produktivitetRaskere utførelsestidFærre feilMindre opplæring


Brukbarhet


Brukbarhet og lønnsomhet

Brukergrensesnitt med høy brukbarhet krever:Større dyktighet av designerne, mer innsats og timeforbrukMer programmeringsinnsats for å lage alternativer, flere meldinger og advarsler. Ekstra kode kan være kompleks

Et godt designet brukergrensesnitt gir:Større produktivitet grunnet bedre effektivitetFærre brukerfeilRedusert 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!


Brukergrensesnitt : enkel prototype


Brukergrensesnitt : avansert prototype


Brukergrensesnitt : konsistens og bruk av komponenter


Brukergrensesnitt : eksempel


Skjemaet brukes når nye personkunder skal registreres i systemet – hva er galtog hva kan forbedres?

Navnefeltet er for lite og i tillegg mangler det en beskrivelse av ønsket format. Dettekan gjerne gis i form av et eksempel: Olsen, Hans Jacob.



Her er det forsøkt å registrere en bruker som har oppgitt et passord på 3 tegn.

Det burde har vært opplyst i grensesnittet at passord må være på minst 6 tegn, for eksempel i ledeteksten eller bak feltet, slik at feilmeldingen kan unngås. Norsk ledetekst og engelsk feilmelding bør unngås. ”Sorry” menneskeliggjør datamaskinen og er unødvendig.



I et lager for et kosmetikkfirma må en registrere innkommende varer i datasystemet. Hvert produkt er beskrevet med produktnavn, produsent og type produkt. Alle disse data er lagret i systemet. Når en ny forsendelse ankommer må lageroperatøren velge produkt fra en komboboks, slik som vist til høyre.

Det burde ha vært gitt flere data om hvert punkt i denne listen (navn, etc.) slik at en unngår galt valg eller at en må lete opp denne informasjonen andre steder. Listen burde kunne sorteres etter forskjellige kriterier med egne taster for dette, eventuelt ekstra kombobokser.



I dette ordresystemet oppgis først ordrenummer, deretter trykkes tasten VIS ORDRE for å få fram alle lagrede data om ordren.

Siden ordrenummer er kjent for systemet burde dette kunne velges fra enkomboboks e.l.



En kunde har lagt inn dataene over i NSB’s reiseplanlegger, og får følgendefeilmelding:

Systemet burde godta dato på formen 12.12, og på alle andre vanlige former (til tross for at det er oppgitt ddmm formatet).Feilmeldingen er upresis. Denne burde vært spesifikk m.h.t felt og eventuelt også hvilken feil som er gjort.Syntaksen har en egen ”look and feel”, som ikke har noe til felles med andre systemer.



Feilmelding

Feilmeldingen skal hjelpe bruker og den skal ikke være dømmende som her. Ordbruken er også for tøff. Et bedre system ville først forsøke å unngå at bruker gjør feil, om hun gjør feil skal det gis en forklarende melding, og brukeren må få anledning til å rette opp det som er galt eller trykke undo



Dialog

Systemet er antropomorfistisk, datamaskinen blir menneskeliggjort. Dette skaper urealistiske forventninger,i tillegg til at ledeteksten blir for lang og uoversiktlig. Enklere å kun oppgi ledetekst for avgangssted (bedre enn flyplass)og la bruker velge i en komboboks.



Antall deltagere i undersøkelsen: 67Kvinner: 40Menn: 27Antall med mobiltelefon: 52Antall med egen PC: 34Antall kvinner med mobiltelefon: 20Antall menn med mobiltelefon: 32

Rapport

Data bør gis på den formen som leseren har behov for. Her kunne f.eks. resultatene ogsåvære gitt som prosenter.Med en tabellorientert layout ville da leseren lett kunne oppdage sammenhenger og avvik.



Valg

Vanligvis brukes radioknapper for å velge en av mange og sjekkbokser for å kunne foreta flere valg, her er det omvendt.

Documents

Prosjektrettet systemarbeid - NTNUaitel.hist.no/fag/it1/prs/it1-prs-f6-h08.pdf · Inkluderer anatomi, psykologisk neurologi og ... Øyet tar i mot informasjonen, hjernen tolker informasjonen