SKISSER OG PROTOTYPER Forelesning 17. januar, Utvikling av interaktive nettsteder 17.01.2017 Tore Marius Akerbæk Avdeling for Informatikk 1
Skisser og prototyper Prototype Prototype er en tidlig modell eller versjon av et design eller produkt, som brukes for å vise, diskutere, teste og evaluere produktet eller designet. I interaksjonsdesign skilles det gjerne mellom low fidelity og high fidelity prototyper. Wireframes er en low fidelity prototype, mens en dynamisk skisse er en high fidelity prototype. 17.01.2017 Tore Marius Akerbæk Avdeling for Informatikk 2
Skisser og prototyper Wireframes Wireframes, som på norsk gjerne kalles strukturskisser, er strektegninger av struktur og format av nettsiden eller systemet. Hensikten er å kunne diskutere, teste og evaluere struktur uten å bli distrahert av grafiske, visuelle elementer. Wireframes kan tegnes med penn på papir for hånd, eller i noe så enkelt som Microsoft PowerPoint. Se eksempler på Wireframes her: https://speckyboy.com/20-effective-examples-of-web-andmobile-wireframe-sketches/. 17.01.2017 Tore Marius Akerbæk Avdeling for Informatikk 3
Skisser og prototyper Mock-ups form for prototype Ofte i fullskala en forenklet replika av et produkt En skisse, slik det er beskrevet under for nettstedprosjekter, er en mock-up 17.01.2017 Tore Marius Akerbæk Avdeling for Informatikk 4
Skisser og prototyper Skisse kan omfavne alle de tre andre begrepene. Tradisjonelt sett en tegnet, visuell representasjon av et produkt/design. Bransjestandard Adobe PhotoShop, men alternativene er på vei Skisser i nettsideverden dreier mer og mer mot en form for tradisjonell prototype eller mock-up, kalt dynamiske skisser gjerne en prototype laget med HTML og CSS ingen dynamisk/funksjonell programmering. Fordelen: HTML og CSS kan gjenbrukes 17.01.2017 Tore Marius Akerbæk Avdeling for Informatikk 5
Skisser og prototyper Wireframes, skisser og mock-ups er verdifull dokumentasjon og diskusjonsgrunnlag i en kundesituasjon. Dette kan være med å bestemme (begrense) leveransen. Alle de nevnte teknikkene kan (med kan mener jeg BØR. Og med BØR mener jeg SKAL!) brukes for testing (usability testing). 17.01.2017 Tore Marius Akerbæk Avdeling for Informatikk 6
Universell utforming (UU) Mål med UU: Nettsider skal tilrettelegges for alle, uavhengig av funksjonsnedsettelse Nye nettsider (etter 1. juli 2014) er pålagt å møte et minstekrav av regler for UU. Minstekravet er 35 av 61 suksesskriterier for UU: https://uu.difi.no/krav-ogregelverk/wcag-20-standarden Utdrag av reglene: Man skal kunne endre tekststørrelse og velge høykontrast Kontrastforhold i farger skal møte forholdet 4:1 Det skal finnes tekstlig alternative til medier som er kun audio/visuelle, og vice versa All funksjonalitet skal kunne brukes med kun tastatur 17.01.2017 Tore Marius Akerbæk Avdeling for Informatikk 7
KLASSEROMSEKSPERIMENT Marius skal lage et system for å registrere kursdeltagere og hvilken kravspesifikasjon de velger for eksamen. 17.01.2017 Tore Marius Akerbæk Avdeling for Informatikk 8
Eksamensvalg: Moduler Registreringsmodul Et sted/en funksjon hvor studentene registrerer seg med nødvendig personlig informasjon og valgt kravspesifikasjon Administrasjonsmodul Et sted hvor Marius får oversikt og kan behandle registreringene og utføre administrative funksjoner 17.01.2017 Tore Marius Akerbæk Avdeling for Informatikk 9
Eksamensvalg: Krav til administrasjonsmodul 1. Usabilitykrav 1. Admin skal 1. Raskt skille funksjonene fra hverandre 2. Tidlig få en oversikt over studenter og valgt spesifikasjon 1. Funksjonelle krav 1. Admin skal 1. I oversikten kunne åpne innleveringene til studentene 2. Kunne editere opplysninger om en student 17.01.2017 Tore Marius Akerbæk Avdeling for Informatikk 10
Eksamensvalg: Krav til registreringsmodul 1. Usabilitykrav 1. Funksjonelle krav 17.01.2017 Tore Marius Akerbæk Avdeling for Informatikk 11
Eksamensvalg: Wireframe registreringsmodul 17.01.2017 Tore Marius Akerbæk Avdeling for Informatikk 12