Brukergrensesnitt og interaksjonsdesign Kirsten Ribu 11.02.04 11.02.2004 1
I dag Brukergrensesnitt Interaksjonsdesign 11.02.2004 2
Interaksjon menneske /maskin Avhengig av tidligere erfaringer Forventninger til hvordan en ting skal fungere Mye dårlig design! Tenk over brukerne: Ulike grupper: nye brukere, erfarne, tilfeldige, eksperter. Brukere har ulike mål: eks. økt produktivitet, større nøyaktighet, bedre tilfredsstillelse, lek, læring 11.02.2004 3
Hva er et brukergrensesnitt? Alle produkter har et brukergrensesnitt Eks: Pantemanskinen i butikken: Lys lyd, bevelgelse Bil: menneske/maskin grensesnittet PC: Mer enn skjermbildet: mus, tastatur, og skjerm med diverse knapper for lys og lydkontroll 11.02.2004 4
Hva er hva? 11.02.2004 5
Brukerens rolle Utfordringer: å kjenne brukeren og dennes oppførsel I alle systemer er det brukeren som avgjør hvorvidt et system er en suksess eller ikke. 11.02.2004 6
Meny-baserte GUI Brukeren utfører oppgaver ved å velge fra menyer (ofte nøstede) Menyene består som oftest av tekst, men det er også mulig å ha grafikkmenyer eller en kombinasjon av tekst og grafikk. Ved design av tekstmenyer er det viktig at man bruker terminologi som er kjent for brukeren. Teksten til menyvalg bør være vært knyttet til den tjenesten som tilbys. Det er også viktig at terminologi blir benyttet på en konsistent måte gjennom alle menyene til et system. 11.02.2004 7
Drop down menyer 11.02.2004 8
Navigering 11.02.2004 9
Vanlige feil Samme design på intranettet som på websidene Hvor er jeg? Internt eller på nettet? Dårlig navigering Hvor er jeg? Hvordan kommer jeg tilbake? Tekst er tekst og linker er linker Tekst er ikke understreket, linkene er det Glemmer å teste i ulike browsere og plattformer For mye detaljer på sidene Ulike fonter Bilder som tekst - OK, men ikke bruk ulike fonter Bilder som ser ut som linker, men ikke er det 11.02.2004 10
Enkle menyer Enkle menyer som er konstant synlig og tilgjengelig i skjermbildet. Menyvalg blir markert etter hvert som brukeren forflytter seg mellom dem. Til dette formål kan det benyttes farger /understreking 11.02.2004 11
Navigering 11.02.2004 12
Grafiske menyer Må gi brukeren en intuitiv forståelse av hva de betyr. Hvis ikke blir mye av intensjonen med grafiske menyobjekter borte, og brukeren ville vært bedre tjent med vanlige tekstbaserte menyer. Ved design av grafiske menyer bør man bruke folk som har erfaring med grafikk og farger. 11.02.2004 13
Skrekkeksempel www.webpagesthatsuck.com 11.02.2004 14
Eksempel 2 http://www.francisfrancis.com/ 11.02.2004 15
Teknikker Storyboards Sitemaps Metaforer 11.02.2004 16
Sammenligning med film Heckel (1984) foreslår at designere bør tenke som filmskapere, og legge vekt på at det ferdige program skal gi brukeren en forestilling på samme måte som en film. Movies did not flourish until the engineers lost control to artists, or more precisely, to the communications craftsmen. The same thing is happening now with personal computers. (Heckel, 1984) Making software is like making movies because both are about how moving presentations affect the mind and feelings of the viewer. (Nelson, 1990) 11.02.2004 17
Storyboards Storyboards brukes av design-team for å kommunisere ideer om struktur og navigering Brukes ikke til å kommunisere med kunder 11.02.2004 18
Stroyboards Storyboards representerer handlingssekvenser som brukeren gjør for å utføre en handling. Dette storyboardet viser hvordan en bruker interagerer med en tutorial for å finne informasjon om et gitt emne. 11.02.2004 19
Site-map Site-maps viser systemets struktur (navigering). Brukes av designteamet for å strukturere systemet og skjermbildene 11.02.2004 20
Metaforer Metaforer kan forklares som de bakenforliggende ideer som blir benyttet i det daglige språk. GUI bruker symboler på objekter fra den virkelige verden for å gjøre dem konkrete og forståelige. En populær metafor er skrivebordsmetaforen opprinnelig utviklet av Xerox PARC og senere kommersielt utnyttet av Apple og Windows Er blitt kritisert: Dette ligner ikke et skrivebord! 11.02.2004 21
Gjenkjennelige objekter 11.02.2004 22
Fargesirkel/gråskala 11.02.2004 23
7 slags fargekontraster Kontrast betyr motsetning, og oppstår når en tydelig kan skille farger fra hverandre. Egenkontrast Kontrasten mellom de enkelte fargene kalles egenkontrast. Den sterkeste kontrasten er mellom de rene primærfargene: gul, rød, blå. Lys/mørk-kontrast Hvitt og svart er den sterkeste kontrasten. I mellom har du hele gråtoneskalaen. Gult er den lyseste fargen, fiolett er den mørkeste. Kald/varm-kontrast De kalde fargene ligger til venstre på fargesirkelen, de varme til høyre. De kalde er passive, fjerne. De varme er aktive og nære. Blågrønt og rødorange er den sterkeste kontrasten. 11.02.2004 24
Kontraster forts. Komplementærkontrast Farger som står rett overfor hverandre i fargesirkelen er komlementære: rød-grønn, gul-fiolett, orange-blå. Når de blandes blir fargen grå. Kvantitetskontrast Fargenes lysstyrke er forskjellig. Rødt og grønt har samme lysstyrke og får lik oppmerksomhet. Gult sammen med fiolett har forholdet 1:3. Forholdet er: gult 3, orange 4, rødt 6, grønt 6, blått 8, fiolett 9. Kvalitetskontrast Motsetningen mellom rene og urene (dempede) farger er kvalitetskontrasten. En farge dempes med å blande inn hvitt, svart, grått, brunt eller komplementærfargen. 11.02.2004 25
Simultankontrast En farge blir alltid påvirket av andre farger. Øyet framkaller komplementærfargen for å få fargebalanse når vi betrakter en farge. Vi ser fenomenet tydelig hvis vi plasserer den samme gråfargen sammen med andre farger. Gråfargen vil få et skjær av komplementærfargen. 11.02.2004 26
Induksjon Se på den røde firkanten i ca. 20 sekunder 11.02.2004 27
Se på det hvite arket. Gjenta, lukk øynene 11.02.2004 28
Gyldne regler forfargebruk Vær konsistent i bruk av farger. Samme farge på de ulike skjermbildene = gjenkjennelse Sørg for en kontrastrate på mer enn 3:1 mellom data og bakgrunnen Unngå å kombinere farget tekst med sterkt farget bakgrunn Bruk sterke farger med stor forsiktighet Get it right in Black and White (8% av alle menn er fargeblinde) 11.02.2004 29
Et eksempel Et eksempel Et eksempel Et eksempel Et eksempel 11.02.2004 30
Kontraster mørk på lys og lys på mørk Dette er et eksempel på lav kontrast Dette er et eksempel på litt bedre kontrast Dette er et eksempel på bedre kontrast Dette er et eksempel på god kontrast 11.02.2004 31
Generelle designregler 11.02.2004 32
Gyldne regler Gi informative tilbakemeldinger Tilbakemelding (feedback) for hver operasjon Gi enkle, forståelige feilmeldinger Ikke: Feil har oppstått. Gå tilbake. Handlinger bør være reversible Brukere krever å ha følelsen av kontroll at systemet responderer på deres aksjoner 11.02.2004 33
Begrens antall enheter Reduser kravene til korttidshukommelse Krever enkle skjermbilder Tommelfingerregel: The magical number seven, plus and minus two. (Miller, 1956) 11.02.2004 34
Mer om farger Antall farger i et gitt skjermbilde bør begrenses til 4 pr. skjermbilde, og 7 for et system som et hele Vær oppmerksom på utbredte forventninger om farger Forstå hvordan farger kan utnyttes i koding: (F.eks. farge på overtrukne konti) Fargekoding bør kunne styres av brukeren Farger kan hjelpe til med å gruppere objekter som hører sammen 11.02.2004 35
Konsistens og standarder Konsistens: For samme aksjon (klikk) = sammen hendelse. Plasser knapper på samme sted i skjermbildet Standarder: Hold deg gjerne til industristandarder Enkel navigering mellom skjermbilder La brukeren forstå hvor han er (navigeringspil eller tekst) Eks: Hio->velkommen->studenter->emner 11.02.2004 36
forts Begrens bruken av animasjon Forsiktig med lyd Video krever ressurser Organiser feltene ryddig Ikke lag overfylte skjermbilder (7-regelen) 11.02.2004 37
Interaksjonsdesign 11.02.2004 38
Hva er interaksjonsdesign? Å designe interaktive produkter som hjelper folk I deres hverdags- og arbeidsliv Designing interactive products to support people in their everyday and working lives Sharp, Rogers and Preece (2002) 11.02.2004 39
Interaksjonsdesign Interaksjonsdesign er prosessen med å utarbeide løsninger slik at samspillet mellom menneske og maskin - bruker og løsning - blir best mulig. Løsningen skal være best mulig tilpasset brukerne og de oppgavene som skal utføres og samtidig ta tilstrekkelig hensyn til den tekniske plattformen. I tillegg til å være brukervennlige skal applikasjonene også være effektive for brukerne. 11.02.2004 40
Eksempel 11.02.2004 41
Brukersentrert designprosess 1) Identifisere behov og etablere krav. 2) Utvikle alternative design som møter disse krav. 3) Bygge interaktive versjoner av de ulike design slik at de kan bli kommunisert og vurdert. 4) Evaluere det som er kommet frem i prosessen. Disse aktivitetene påvirker hverandre og gjentas (iterativt arbeid) 11.02.2004 42
En samling av egenskaper til en typisk bruker = en brukerprofil. 11.02.2004 43
Interaksjonsdesign omfatter bl.a. Hvilken funksjonalitet som skal ligge i løsningen Utforming av navigasjon (gjøre funksjonalitet lettest mulig tilgjengelig) Utforming av sider/vinduer Finne dekkende tekster til menyvalg, linker og ledetekster Presentasjon av resultater Gode tilbakemeldinger når feilsituasjoner oppstår. 11.02.2004 44
Mål for interaksjonsdesign Å utvikle brukervennlige produkter Brukervennlig betyr: Lett å lære Effektivt I bruk En glede å bruke Involver brukerne i designprosessen 11.02.2004 45
God og dårlig design Nederste rad: Knappene ligner ikonet, lett å ta feil. Løsning: Øverste rad. 11.02.2004 46
Forstå brukernes behov Må forstå hva mennesker kan og ikke kan, hva de er gode til /mindre gode til Tenk over hva som kan være en hjelp i arbeidet folk utfører daglig Hør på hva brukeren ønsker og bli engasjert 11.02.2004 47
Utseende for like? Shampo og balsam 11.02.2004 48
Hvordan skru på dusjen? 11.02.2004 49
Hvordan åpne døra? 11.02.2004 50
Neste uke Undervisningsfri Uke 9: Systemutviklingsverktøy Emne 1 G&H Uke 10: Merk! Gjesteforelesning om XP (Agile) er flyttet til Tirsdag 02.03: Møt opp! 11.02.2004 51