INF1500 Høst 2016 Magnus Li Martine Rolid Leonardsen. Designprinsipper

Transkript

1 INF1500 Høst 2016 Magnus Li Martine Rolid Leonardsen Designprinsipper

2 I DAG KAHOOT KONSEPTUELLE MODELLER GRENSESNITTMETAFORER DESIGNPRINSIPPER - Seks hovedprinsipper - Fem strukturelle prinsipper Gjennomgang av eksempler på OBLIG 2 Kl. 15:15 på Shell (45 min) I DAG

3

4

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

6

7 DESIGNPRINSIPPER Hva er designprinsipper? Designprinsipper blir tatt i bruk av designere for å hjelpe dem til å designe gode og effektive brukergrensesnitt. De er generaliserte abstraksjoner med intensjon om å orientere designerne om forskjellige aspekter av deres design. Intuitivt Krevende

8 SANSING OG PERSEPSJON FØR: Tidligere opplevelser Sansing Persepsjon NÅ: Andre sanser FREMTID: Mål

9 SANSING OG PERSEPSJON

10 DESIGNPRINSIPPER I PENSUM En oversikt Det finnes et stort antall universelle designprinsipper. I pensum har vi valgt ut noen av de viktigste. Seks hovedprinsipper - Constraints - Visibility - Consistency - Affordance - Mapping - Feedback Fem strukturelle prinsipper - Nærhet - Likhet - Kontinuitet - Kompletthet - Symmetri

11 KONSEPTUELLE MODELLER Individuelle og kulturelle forskjeller opphav til forskjellige mentale modeller. Det er derfor viktig å forstå brukergruppen for å kunne lage en representert modell som ligger nær den mentale modellen til bruker.

12 GRENSESNITTMETAFORER Definisjon Bruk av etablerte konsepter i utvikling og design av nye tjenester for å legge grensesnittet så nær som mulig brukers mentale modeller Her benyttes visuelle og strukturelle virkemidler for å utnytte kunnskap brukeren allerede har. Målet er at brukeren umiddelbart vil kunne interagere og orientere seg i et nytt system.

13 GRENSESNITTMETAFORER Implementert modell Representert modell Mental modell

14 GRENSESNITTMETAFORER Implementert modell Representert modell Mental modell

15 GRENSESNITTMETAFORER Det er viktig å ikke gå for langt i bruk av grensesnittmetaforer, slik vi ser på dette eksemplet fra et regnskapsprogram fra 90-tallet, som ble for krunglete å bruke. Balanse mellom bruk av tidligere konsepter og tilpasning til nye medier er essensielt.

16 Seks prinsipper i fokus Constraints Visibility Consistency Affordance Mapping Feedback

17 CONSTRAINTS Definisjon Begrense valgmuligheter for å øke fokus på det som er viktig, ofte for å unngå at brukeren gjør feil. Iphone er ofte sett på som en mer egnet smarttelefon for personer med mindre teknisk erfaring i forhold til Android. Mye på grunn av begrensninger lagt i systemet.

18 CONSTRAINTS

19 VISIBILITY Definisjon Viktig funksjonalitet skal komme klart frem i grensesnittet. Usynlige og automatiske funksjoner kan være forvirrende. Kan jeg se det?

20 VISIBILITY Forskjell i fokus på nettsidene til UiO og MIT.

21 VISIBILITY Å laste ned spotify kan være irriterende om du ikke liker å lete etter små lenker. se

22 VISIBILITY

23 MIDTVEISEVALUERING AV FELLESØVELSENE goo.gl/138tzj

24 Affordance Hvordan bruker jeg det?

25 AFFORDANCE Definisjon Afford = råd eller gir et hint Affordance er relasjoner og ikke egenskaper Brukeren forstår hvordan den skal brukes, kun ved å se. Termen Affordance refererer til relasjonen mellom fysiske objekter og en person. (Egentlig alle interagerende agenter, som dyr, mennesker, roboter og maskiner) For oss handler ofte god affordance om å utforme interaksjonsobjekter, for eksempel knapper, slik at man enkelt skjønner hvordan de skal opereres.

26 AFFORDANCE Flere begreper Affordances: Mulige interaksjoner mellom mennesker og miljø. Noen er lette å oppfatte, andre ikke.. Oppfattet affordances: Kan ofte opptre som signifiers, men de kan også være tvetydige. Signifiers: Signaliserer ting. Hva slags handlinger er mulige og hvordan burde de gjøres.

27 AFFORDANCE Eksempel

28 AFFORDANCE Fysiske knapper gir ofte en bedre affordance da det er lettere å oppfatte at de er klikkbare.

29 AFFORDANCE De runde håndtakene på glassdørene signaliserer så klart at disse kan åpnes, at Dana bakeri må sette opp en lapp for å unngå at noen åpner de.

30 AFFORDANCE Iphones låse-opp-skjerm innehar elementer som bedre signaliserer hvordan man skal gå frem for å låse opp skjermen. Dette handler også om visibility og mapping.

31 AFFORDANCE Noe som likner dårhåndtak, også på vinduene Eneste dør Hva som er dør og vindu på fysikkbygget er ikke lett å se på grunn av en noe rar bruk av dørhåndtak

32 AFFORDANCE I webdesign; flat utforming Flat utforming kan i mangel på skyggelegging og andre effekter, gjøre det mer vanskelig å oppfatte hva som er klikkbart.

33 AFFORDANCE

34 Mapping Definisjon Mapping er en teknisk term, lånt fra matematikken. Mapping = Relasjonen mellom elementene til to sett av ting Relasjonen mellom en kontroll og dens effekt er lettest å lære når det er en forståelig mapping mellom kontrollen, handlingen og dens tiltenkte resultat.

35 Mapping Flere begreper Natural mapping: De kan være kulturelle eller biologiske. Vi har mange universelle standarder: - Bevege hånden oppover signaliserer Mer Bevege hånden nedover signaliserer Mindre Gruppering og nærhet er viktige prinsipper i gestalt psykologien, men kan også brukes til å mappe kontroll til funksjon. Altså: Relaterte knapper burde være gruppert sammen og være i nærheten av det som blir kontrollert med knappene

36 Mapping Natural Mapping Best mapping: Kontrollen er plassert direkte på elementet som blir kontrollert Second-best mapping: Kontrollen er så nært som mulig objektet som blir kontrollert. Third-best mapping: Kontrollen er arrangert i samme romlige konfigurasjon som objektet som blir kontrollert.

37 MAPPING Definisjon Utforme interaksjonsobjekter, for eksempel knapper, slik at man enkelt skjønner hva som skjer i systemet dersom de brukes. Hva skjer når vi trykker PANIKK? Dårlig mapping kan være forvirrende.

38 MAPPING

39 MAPPING Funksjonsknappene øverst på taststurene har ofte god mapping, forutsatt at man skjønner hva de ulike symbolene betyr.

40 MAPPING Ovnsvifte Hva skjer når man trykker på int eller F?

41 CONSISTENCY Dette har jeg sett før Definisjon Gjøre utformingen konsistent internt i systemet og eksternt i forhold til liknende og relaterte funksjoner, tjenester og systemer. Estetiske Funksjonelle Interne Eksterne

42 CONSISTENCY Consistency i designet på apper i IOS og Android gjør det enklere å ta i bruk nye applikasjoner, noe som har vært en suksessfaktor for native apps. Material og ios Guidelines

43 CONSISTENCY Emacs er kjent for å benytte andre hurtigknapper enn andre liknende programmer.

44 CONSISTENCY & MAPPING Hvilken vei man vrir for kaldt og varmt vann pleier å være det samme på de fleste vasker. Når vi finner en vask hvor dette er byttet om kan det fort bli irriterende, selv om det er markert med grei mapping.

45 Feedback Hva skjer nå? Definisjon Kommuniserer resultatet av en handling. Mennesket er utstyrt med mange feedback-mekanismer: - Syn - Hørsel - Taktil En måte å la brukeren få vite at systemet virker ved din forespørsel. - Feedback(en) må skje med engang Feedback(en) må være informativ

46 Feedback Flere begreper Dårlig feedback: Dårlig feedback kan noen ganger være værre en ingen feedback. Kan virke distraherende, lite informativ, irriterende og angstfremkallende. Backseat driver : Er ofte korrekte, men de kommer stadig og de er mer irriterende enn behjelpelig.

47 FEEDBACK Definisjon Gi klare tilbakemeldinger på hva som er gjort og hva som foregår Man ser at klikk er registrert ved hjelp av et godt synlig lys

48 FEEDBACK På toget. Når knapp for å åpne dør klikkes mens toget er i fart blinker knappen grønt, før det grønne lyset slukkes igjen. Dette skaper usikkerhet på hvor vidt systemet husker at åpneknapp er klikket når toget har stanset. På t-banen i Oslo lyser knappen grønt helt til banen har stoppet og døren er åpen. Dette er en bedre feedback-mekanisme.

49 FEEDBACK Diverse motstridende elementer gjør dette til en dårlig utformet tilbakemelding / feedback.

50 STRUKTURELLE PRINSIPPER

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

52

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

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

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

56 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.

57 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

58

59 RELEVANTE EKSAMENSOPPGAVER

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