Designprinsipper - Universitetet i oslo · Et studie av sanseoppfatning (persepsjon), de la vekt på at mentale fenomener ikke lar seg forstå som en sum av enkle elementære enheter.

INF1500 | Høst 2016Magnus LiMartine Rolid Leonardsen

Designprinsipper

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

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

DESIGNPRINSIPPER

Intuitivt Krevende

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.

SANSING OG PERSEPSJON

Persepsjon

FØR: Tidligere opplevelser

FREMTID: Mål

NÅ: Andre sanser

Sansing

SANSING OG PERSEPSJON

DESIGNPRINSIPPER I PENSUMEn oversikt

Seks hovedprinsipper- Constraints- Visibility- Consistency- Affordance- Mapping- Feedback

Fem strukturelle prinsipper- Nærhet- Likhet- Kontinuitet- Kompletthet- Symmetri

Det finnes et stort antall universelle designprinsipper. I pensum har vi valgt ut noen av de viktigste.

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

GRENSESNITTMETAFORERDefinisjon

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.

GRENSESNITTMETAFORER

Implementert modell Representert modell Mental modell

GRENSESNITTMETAFORER

Implementert modell Representert modell Mental modell

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.

Seks prinsipper i fokusConstraints Visibility Consistency Affordance Mapping Feedback

CONSTRAINTS

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

Definisjon

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.

CONSTRAINTS

VISIBILITY

Viktig funksjonalitet skal komme klart frem i grensesnittet. Usynlige og automatiske funksjoner kan være forvirrende.

Definisjon

“Kan jeg se det?”

VISIBILITYForskjell i fokus på nettsidene til UiO og MIT.

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

se www.spotify.com

VISIBILITY

VISIBILITY

MIDTVEISEVALUERING AV FELLESØVELSENE

goo.gl/138tZj

Affordance “Hvordan bruker jeg det?”

AFFORDANCE

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.

Definisjon

Afford = råd eller “gir et hint”

Affordance er relasjoner og ikke egenskaper

“Brukeren forstår hvordan den skal brukes, kun ved å se.”

AFFORDANCE

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.

Flere begreper

AFFORDANCEEksempel

AFFORDANCE

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

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

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.

AFFORDANCE Hva som er dør og vindu på fysikkbygget er ikke lett å se på grunn av en noe rar bruk av dørhåndtak

Eneste dør

Noe som likner dårhåndtak, også på vinduene

AFFORDANCEI webdesign; flat utforming

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

AFFORDANCE

Mapping

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

Definisjon

Mapping er en teknisk term, lånt fra matematikken.

Mapping = Relasjonen mellom elementene til to sett av ting

Mapping

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

Flere begreper

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.

Natural Mapping

MAPPING

Utforme interaksjonsobjekter, for eksempel knapper, slik at man enkelt skjønner hva som skjer i systemet dersom de brukes.

Definisjon

Hva skjer når vi trykker PANIKK? Dårlig mapping kan være forvirrende.

MAPPING

MAPPING

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

MAPPING

Ovnsvifte

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

CONSISTENCY

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

● Estetiske ● Funksjonelle ● Interne ● Eksterne

Definisjon

“Dette har jeg sett før”

CONSISTENCYConsistency 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

CONSISTENCYEmacs er kjent for å benytte andre hurtigknapper enn andre liknende programmer.

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.

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

“Hva skjer nå?”

Feedback

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.

Flere begreper

FEEDBACK

Gi klare tilbakemeldinger på hva som er gjort og hva som foregår

Definisjon

Man ser at klikk er registrert ved hjelp av et godt synlig lys

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.

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

STRUKTURELLE PRINSIPPER

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.

Jeff Johnson’s fem strukturelle prinsipper

Nærhet

- Avstanden på objektene på skjermen kan få oss til å oppfatte om de er gruppert eller ikke.

- Man slipper å bruke distinkte skilletegn

Forklaring

Likhet

- Gjenstandenes likhet gir oss en idé om hva som henger sammen.

- Farger, størrelser og former for å adskille objekter fra hverandre.

Forklaring

Kontinuitet

- Vi fyller inn manglende data

- Vi ser kontinuerlige former

- Hjernen kobler sammen løse stykker

Definisjon

Kompletthet

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

Definisjon

Symmetri

- 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

Definisjon

RELEVANTE EKSAMENSOPPGAVER

EKSAMENSOPPGAVERDesignprinsipper (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)