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

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

DOKUMENTASJON AV FLAUM- OG SKREDHENDINGAR

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

ROS-analyser og temadata i kommuneplanarbeidet

Industritomter i Surnadal

Regulatory affairs: Fra klinisk studierapport til reklametekst. Inge Johansen 10. april 2018

Grafisk profilhåndbok

RETNINGSLINJER FOR DESIGN

GRAFISK PROFILMANUAL KRAFTSENTERET ASKIM

Innhold. 4-5 Om profilen 6-7 Konsept og slagord

Vi skaper sterke opplevelser midt i Vesterålen.

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

Profilhåndbok PROFILHÅNDBOK

Profilhåndbok PROFILHÅNDBOK

SOVER? NÅR VI HVA SKJER UNGDOM OG SØVN TIPS FOR. A better sleep. A better you. loggen HVOR MYE SØVN TRENGER VI? HELSE, HUMØR, LÆRING OG PRESTASJONER

Designmanual. Versjon 1.1/2018

Hvorfor bruker vi designprinsipper?

HÅNDBOK: GRAFISK PROFIL ... Logo Fonter Støtteelementer Visittkort Brevark. Konvolutter Støttefarger. Bildebeskjæring Folder

BackeGruppen Designmanual. AS Backe Widerøeveien 1 Postboks Lysaker telefon: post.ba@backe.no

DFI Profilmanual 2017

SPYDEBERG. Velkommen SMÅBYEN HJEM NÆRINGSLIV KULTURLIV FRITIDSTILBUD NATUROPPLEVELSER

NYTT NORSKVERK FOR STUDIE- FORBEREDENDE

il f o r p k is f a r G

Profilhåndbok. NRK P13 Profilhåndbok Sist endret:

PROFILHÅNDBOK Sortland kommune. Sortland kommunes profilhåndbok er utarbeidet av reklamebyråene Mål & mening og God strek.

Tittel i The Sans SemiLight 24 punkt Over en eller to linjer

D e s i g n P o r t e f ø l j e

Samhandling i bruk av ny teknologi gir økt produktivitet

MUNCH 150 DESIGNMANUAL

Invitasjon til Konferansetittel

GRAFISK PROFIL. Bibelskolen i Tromsø

Oppgradert logo. CTM Lyng AS / miniprofil. Oppsettet er fast, proporsjonene må ikke endres Minste tillatte str. = 10 mm Kun en fargevariant som vist

PROFILHÅNDBOK ST. OLAVS HOSPITAL Versjon 1.0. Forord. Logo og symbol. Farger / mønster. Typografi. Bruk av logo. Stillingsannonser

Nasjonal kommersialiseringsaktør i mikro- og nanoteknologi.

Profilhåndbok Ansvarlig: Informasjonsavdelingen Vedtatt: (Versjon 1)

Grafisk profil. Norfjord Skifer

DESIGNMAL FLEXX ØSTFOLD Q1 versjon 0.0.1

L A TEX for viderekomne

L A TEX for viderekomne

Visuell identitet Profilmanual

Repetisjon. Plenum IN1050 Uke 14 Maria og Helle

Vår grønne. menighet PROFILMANUAL

GR AFI SK PR OFI L Desember 2015

GRAFISKE RETNINGSLINJER

PROFILMANUAL ÁRRAN - JULEVSÁME GUOVDÁSJ / LULESAMISK SENTER

Ny oppdatert profil. SiO har i løpet av 2005 fornyet sin eksisterende profil.

Visuell identitet Profilmanual

Hovedtittel B5 Plain 24/30 punkt

NRK Super. Merking av lisensprodukter. Merking av lisensprodukter med NRK Super-logo Side 2 NRK Aktivum Sist endret

Designmanual. D e s i g n m a n u a l f o r G r a n k o m m u n e a p r i l

PROFILVEILEDER V

Tittel på presentasjonen kommer her og kan gå over to linjer

INF1500 Høst 2015 Magnus Li Martine Rolid Leonardsen. Design og prototyping

Innhold. Bamble kommunes visuelle profil s. 3

PROFILHÅNDBOK RUSBEHANDLING MIDT-NORGE Versjon 1.0. Logo og symbol. Farger / mønster. Typografi. Bruk av logo. Stillingsannonser

Retningslinjer for bruk av Svanemerket. på produkter og tjenester

Designmanual v

Denne håndboken presenterer Skibladners nye profil og hvordan Skibladner skal fremstå på best

Visuell identitet Profilmanual

Overskrift linje 2 FOTO. Punkt 1 Punkt 2 Punkt 3. ved ønske om et mer utdypende budskap i form av maks 3 punkter måned 200X By/sted evt.

PROFILHÅNDBOK RANA KOMMUNE

Visuell identitet Profilmanual

Designhåndbok. versjon 1 / august Nær naturen nær byen!

Videregående L A TEX

Profilhåndbok. REKLAME Utgiver av temaaviser. Markedskonsulent. GRAFISK Grafisk design og produksjon BOLIG Interiørkonsulent

PROFILHÅNDBOK ST. OLAVS HOSPITAL Versjon 1.0. Forord. Logo og symbol. Farger / mønster. Typografi. Bruk av logo. Stillingsannonser

Profilhåndbok Aktiv mot kreft. Revidert 2014

Logo med slogan. Slideshow med store bilder og tekst. Artikkel som kan være video/bilde 2. Om Distriktssenteret. Videoartikkel. Artikkel.

Designmanual. Versjon 1.0

Suspektorientert programmering. Bouvet One Trondheim 4. mai Bjørn Herve Moslet

Design, bruk, interaksjon

Japansk språklærings-app. Skisseprosessheftet. Skisseprosessheftet

Spørreundersøkelse blant besøkende på turistinformasjon

Midnattsolveien. Profilhåndbok. Rettningslinjer for Midnattsolveien

Prosjekter i et kjønns- og likestillingsperspektiv


UKE 7 Design og prototyping. Plenum IN1050 Julie og Maria

Logo. Farger. Fonter. Designelement. Bilder. Implementering

Guide til system for flervalgsprøver

Designmanual. vol. 05

HTML5 og CSS. Webdesign med Dreamweaver. Glemmen vgs - Medier og kommunikasjon 1. januar Arly Dale 2013 Side 1

Studie av hummer og kanari

Logo: Distriktssenterets designprofil. Logoen er i gult, grønt og orange, og kan brukes på følgende måter: Til bruk over bilde:

UNIVERSITETET I OSLO

Registrere ditt lag/forening og aktiviteter på Eidsvoll kommunes Innbyggerportal?

NUPI designmanual. Foreløpig utgave

Profilhåndbok. for Tromsø kommune

LOGO på grønn bunn Denne versjonen av logoen er forbeholdt grønn bunn. LOGO på hvit bunn Denne versjonen av logoen skal benyttes på alle lyse flater

Designmanual. En introduksjon til SVs visuelle identitet. sv.no

PROFILHÅNDBOK HALDEN KOMMUNE 2017 Q4 versjon 1

Kompetanse HISTORIEFORTELLING PÅ NETT KURSPROGRAM. NRK, november og 7. desember Kursholder: Steen Steensen

Profilhåndbok. Revidert Barne-, ungdoms- og familieetaten Barne-, ungdoms- og familiedirektoratet

BODØ 2016 PROFILMANUAL

Utgave Designmanual. Innledning Grafiske elementer Farger Typografi Postale trykksaker Brosjyrer Presentasjoner Nedlastbare filer

I n f o r m a s j o n s b l a d f o r G j e m n e s k o m m u n e. Sentraladministrasjonen. Norges grunnlov 200 år i 2014

Oblig 2: Oppgave 1. section { width: 50%; height: 30%; margin: 5% 0 0 0; } h1 { color:#000000; font-size:2em;

PROFILHÅNDBOK BÆRUM KOMMUNE HOVEDELEMENTER NØKKELTRYKKSAKER

WordPress startguide

LOGGA KALENDARIUM STÅNDPUNKTER VERKTYG REFERENSGRUPPER BOKHANDEL OM ICC KONTAKT

Transkript:

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

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

HOVEDPRINSIPPER Rask repetisjon

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

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

DESIGNPRINSIPPER Hva er galt, og hvilke prinsipper brytes?

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

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

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

DESIGNPRINSIPPER Hva er galt, og hvilke prinsipper brytes?

DESIGNPRINSIPPER Hva er galt, og hvilke prinsipper brytes?

STRUKTURELLE PRINSIPPER

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.

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

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

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

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.

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

STRATEGIER FOR ENKELHET

ENKELHET Fire strategier - Fjern Organiser Skjul Forflytt

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

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

EKSEMPEL

FJERN

ORGANISER

FORFLYTT

MULIG RESULTAT Ambulanse: 113 Forgiftning: 22591122 Legevakt: 22991100 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 10-16 Torsdag - lørdag 9-17 Jan Jansensvei 28 8877 Ski Telefon 99882200 Epost: shs@kjsk.no Se kart

RELEVANTE EKSAMENSOPPGAVER

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)