INF1500 Høst 2015 Magnus Li Martine Rolid Leonardsen. Designprinsipper del 2

Størrelse: px

Begynne med side:

Download "INF1500 Høst 2015 Magnus Li Martine Rolid Leonardsen. Designprinsipper del 2"

Arnhild Ødegård
7 år siden
Visninger:

1 INF1500 Høst 2015 Magnus Li Martine Rolid Leonardsen Designprinsipper del 2

2 Nå Plenum: Repetisjon 15. november: Levere oblig 3 Plenum: Repetisjon Plenum: Prøveeksamen 10. desember: Eksamen

3 HOVEDPRINSIPPER Rask repetisjon

4 DESIGNPRINSIPPER Constraints Visibility Begrense valgmuligheter for å øke fokus på det som er viktig, ofte for å unngå at brukeren gjør feil. Viktig funksjonalitet skal komme klart frem i grensesnittet. Usynlige og automatiske funksjoner kan være forvirrende. Behov for en constraint? Muligheten for å slette Recycle Bin kan være forvirrende på bruker. Kanskje kunne valget vært grået ut eller tatt helt bort. God visibility? Skatteetaten har de tingene brukere som regel ser etter på nettsiden godt synlig, øverst på sidene.

DESIGNPRINSIPPER Consistency Affordance Utforming av designelementer bør være konsistent internt i systemet og eksternt i forhold til liknende og

For oss handler ofte god affordance om å utforme interaksjonsobjekter, for eksempel knapper, slik at man enkelt skjønner hvordan de skal opereres.

5 DESIGNPRINSIPPER Consistency Affordance Utforming av designelementer bør være konsistent internt i systemet og eksternt i forhold til liknende og relaterte funksjoner, tjenester og systemer. For oss handler ofte god affordance om å utforme interaksjonsobjekter, for eksempel knapper, slik at man enkelt skjønner hvordan de skal opereres. Dårlig consistency? Affordance: Editoren emacs benytter andre hurtigtaster enn ctrl+s for lagring. Dette kan føre til mye irritasjon Fysiske knapper gir bruker umiddelbar informasjon om at de er klikkbare. Dermed er utformingen på det nederste bildet ofte mer brukervennlig.

er gjort og hva som foregår Dårlig mapping?

6 DESIGNPRINSIPPER Mapping Feedback Relasjonen mellom en kontroll og dens Gi klare tilbakemeldinger på hva som effekt skal komme klart frem. er gjort og hva som foregår Dårlig mapping? Det burde komme klart frem hva som skjer dersom man klikker på en knapp. Hva skjer om man her klikker på PANIKK? Man ser at klikk er registrert ved hjelp av et godt synlig lys

7 DESIGNPRINSIPPER Hva er galt, og hvilke prinsipper brytes?

8 DESIGNPRINSIPPER Hva er galt, og hvilke prinsipper brytes på mikrobølgeovnen til høyre, kontra venstre?

9 DESIGNPRINSIPPER Hvilke faktorer spiller inn for at bruker skal skjønne hva den grønne knappen gjør?

10 DESIGNPRINSIPPER Stiftemaskinen (!) på biblioteket er så vanskelig å bruke at det henger en bruksanvisning på flere sider på veggen bak.

11 DESIGNPRINSIPPER Hva er galt, og hvilke prinsipper brytes?

12 DESIGNPRINSIPPER Hva er galt, og hvilke prinsipper brytes?

13 STRUKTURELLE PRINSIPPER

Fem strukturelle prinsipper Jeff Johnson s fem strukturelle prinsipper Disse er hentet fra Gestaltpsykologien. Så hva er Gestaltpsykologi?

14 Fem strukturelle prinsipper Jeff Johnson s fem strukturelle prinsipper Disse er hentet fra Gestaltpsykologien. Så hva er Gestaltpsykologi? En psykologisk skoleretning grunnlagt i 1912 av tyskerne Max Wertheimer, Wolfgang Köhler og Kurt Koffka. Et studie av sanseoppfatning (persepsjon), de la vekt på at mentale fenomener ikke lar seg forstå som en sum av enkle elementære enheter. Alt oppfattes som en helhet. Men som organiserte helheter med egen struktur og form. Det tyske ordet gestalt betyr: Figur, skikkelse, utseende, form, helhet eller meningsfullt hele.

16 Nærhet Forklaring - Avstanden på objektene på skjermen kan få oss til å oppfatte om de er gruppert eller ikke. - Man slipper å bruke distinkte skilletegn

17 Likhet Forklaring - Gjenstandenes likhet gir oss en idé om hva som henger sammen. - Farger, størrelser og former for å adskille objekter fra hverandre.

18 Kontinuitet Definisjon - Vi fyller inn manglende data - Vi ser kontinuerlige former - Hjernen kobler sammen løse stykker

19 Kompletthet Definisjon - Vi lukker åpne figurer, slik at de oppfattes helhetlige. - Gir oss mulighet til å utnytte negative-space - Kan få ting til å se annerledes ut enn det de er.

20 Symmetri Definisjon - Loven om symmetri sier at sinnet oppfatter gjenstander for å være symmetriske og de formerer seg rundt et midtpunkt. - Komplekse former tolkes på en slik måte at de ikke blir så komplekse. - Gir oss muligheten til å visualisere 3D på en ellers så flat 2D-skjerm

22 STRATEGIER FOR ENKELHET

23 ENKELHET Fire strategier - Fjern Organiser Skjul Forflytt

24 STRATEGIER FOR ENKELHET Fjern Organiser Hold fokus på hovedoppgaven Organiser relaterte elementer

25 STRATEGIER FOR ENKELHET Skjul Forflytt Sorter ut ekstrafunksjonalitet i undermenyer Ta ut elementer som ikke er avgjørende

26 EKSEMPEL

27 FJERN

28 ORGANISER

29 FORFLYTT

30 MULIG RESULTAT Ambulanse: 113 Forgiftning: Legevakt: doktar.no Ski legesenter Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Åpningstider Adresse Kontakt Mandag - onsdag Torsdag - lørdag 9-17 Jan Jansensvei Ski Telefon Epost: shs@kjsk.no Se kart

31 RELEVANTE EKSAMENSOPPGAVER

32 EKSAMENSOPPGAVER Designprinsipper (og mentale modeller) Hva skiller affordance fra consistency? (eksamen 2014) Hva er en mental modell? (prøveeksamen 2013) Hva er forskjellen på en mental modell og en implementert modell? (eksamen 2013) Når kan designprisippet constraints være et nyttig virkemiddel? Forklar med et eksempel. (prøveeksamen 2012) Gi et eksempel på et design du mener har god affordance. Begrunn hvorfor. (prøveeskamen 2012)

Like dokumenter

Odda er et spesielt sted. En fargeklatt innerst i fjorden.

Odda er et spesielt sted. En fargeklatt innerst i fjorden. Jeg har valgt å frig jøre den grafiske profilen på jubileet fra det grå monotone og plassere odda i en optimistisk, kreativ, leken, modig, (naiv/funkis?)