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

Transkript

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

2 I DAG GENERELT - Igjen om oblig 2 EKSAMENSOPPGAVER KAHOOT KONSEPTUELLE MODELLER & GRENSESNITTMETAFORER - Definisjon - Eksempler DESIGNPRINSIPPER - Seks hovedprinsipper - Fem strukturelle prinsipper - Fire strategier for enkelhet Strukturelle prinsipper og strategier for enkelhet vil bli gjennomgått på neste fellesøvelse

3 OBLIG 2 Frist 18. oktober Analyse av data - Behov - Krav - Strukturere i ett eller flere scenario - Gjerne også ett eller flere persona som brukes i scenario To prototyper. For begge: - Papirprototype som gir en grov skisse - En mer høyoppløslig prototype hvor flere designvalg kommer frem For begge prototyper: Beskrive, drøfte og utdype - Grensesnitt, funksjonalitet og interaksjon - Designprinsipper og retningslinjer - Prototypingsdimensjoner - Hvordan behovene blir adressert

4 OBLIG 2 Frist 18. oktober For de to mer høyoppløslige prototypene skal ulik prototypeteknikk benyttes. For eksempel wireframing og videoprototype. Kun en av de to prototypene kan ha et grensesnitt som baserer seg på WIMP/GUI. I stedet kan man benytte tangible, haptisk, sharable, speech, air-based eller liknende grensesnitt.

5 KONSEPTUELLE MODELLER & GRENSESNITTMETAFORER

6 KONSEPTUELLE MODELLER Som vi snakket om i uke 2, gir 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.

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

8 GRENSESNITTMETAFORER Implementert modell Representert modell Mental modell

9 GRENSESNITTMETAFORER Implementert modell Representert modell Mental modell

10 GRENSESNITTMETAFORER Eksempel - Digipost skal lage en digital postkasse. Må være mulig å benytte for alle i befolkningen. - Finnes det mentale modeller som kan benyttes til å utarbeide en grensesnittmetafor?

11 GRENSESNITTMETAFORER Eksempel: mental modell

12 GRENSESNITTMETAFORER Implementert modell Representert modell Mental modell

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

14 DESIGNPRINSIPPER

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

16 DESIGNPRINSIPPER 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

17 Constraints Hva kan jeg ikke gjøre?

18 CONSTRAINTS Definisjon Begrense valgmuligheter for å øke fokus på det som er viktig, ofte for å unngå at brukeren gjør feil.

19 CONSTRAINTS Valgene i Photoshop er begrensett etter hva som er mulig å gjøre i den aktuelle situasjonen.

20 CONSTRAINTS 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.

21 Visibility Kan jeg se det?

22 VISIBILITY En lite synlig plassering av knapp i fotgjengerovergang i Kirkeveien Definisjon Viktig funksjonalitet skal komme klart frem i grensesnittet. Usynlige og automatiske funksjoner kan være forvirrende. Jeg vil over veien -knapp Knappen er der for at rullestolbrukere skal kunne si ifra at det trengs ekstra tid for å komme over feltet. Med en slik plassering må man vite om denne knappen for å kunne be om ekstra tid.

23 VISIBILITY Det brukeren mest sannsynlig er ute etter bør få hovedfokus på en nettside

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

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

26 VISIBILITY & CONSTRAINTS Endret fokus på nettsidene til NSB

27 VISIBILITY & CONSTRAINTS Flytoget har fokusert på god visibility på sine nettsider

28 Affordance Hvordan bruker jeg det?

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

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

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

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

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

34 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

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

36 Mapping

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

38 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

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

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

41 MAPPING

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

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

44 MAPPING

45 Consistency Hvor har jeg sett dette før?

46 CONSISTENCY Definisjon Gjøre utformingen konsistent internt i systemet og eksternt i forhold til liknende og relaterte funksjoner, tjenester og systemer.

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

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

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

50 Feedback Hva gjør det nå?

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

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

53 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

54 FEEDBACK Grønt lys og pipelyd forteller at kort er godkjent og dør er åpen

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

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

57 RELEVANTE EKSAMENSOPPGAVER

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