Brukergrensesnitt og interaksjonsdesign

Transkript

1 Brukergrensesnitt og interaksjonsdesign Kirsten Ribu

2 I dag Brukergrensesnitt Interaksjonsdesign

3 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

4 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

5 Hva er hva?

6 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

7 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

8 Drop down menyer

9 Navigering

10 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 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

12 Navigering

13 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

14 Skrekkeksempel

15 Eksempel

16 Teknikker Storyboards Sitemaps Metaforer

17 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)

18 Storyboards Storyboards brukes av design-team for å kommunisere ideer om struktur og navigering Brukes ikke til å kommunisere med kunder

19 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

20 Site-map Site-maps viser systemets struktur (navigering). Brukes av designteamet for å strukturere systemet og skjermbildene

21 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!

22 Gjenkjennelige objekter

23 Fargesirkel/gråskala

24 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

25 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

26 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

27 Induksjon Se på den røde firkanten i ca. 20 sekunder

28 Se på det hvite arket. Gjenta, lukk øynene

29 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)

30 Et eksempel Et eksempel Et eksempel Et eksempel Et eksempel

31 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

32 Generelle designregler

33 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

34 Begrens antall enheter Reduser kravene til korttidshukommelse Krever enkle skjermbilder Tommelfingerregel: The magical number seven, plus and minus two. (Miller, 1956)

35 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

36 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

37 forts Begrens bruken av animasjon Forsiktig med lyd Video krever ressurser Organiser feltene ryddig Ikke lag overfylte skjermbilder (7-regelen)

38 Interaksjonsdesign

39 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)

40 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

41 Eksempel

42 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)

43 En samling av egenskaper til en typisk bruker = en brukerprofil

44 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

45 Mål for interaksjonsdesign Å utvikle brukervennlige produkter Brukervennlig betyr: Lett å lære Effektivt I bruk En glede å bruke Involver brukerne i designprosessen

46 God og dårlig design Nederste rad: Knappene ligner ikonet, lett å ta feil. Løsning: Øverste rad

47 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

48 Utseende for like? Shampo og balsam

49 Hvordan skru på dusjen?

50 Hvordan åpne døra?

51 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!