Papirprototyping - NTNU
Papirprototyping - NTNU
Papirprototyping - NTNU
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
<strong>NTNU</strong><br />
Prototyping av brukergrensensitt<br />
Designprosessen - bakgrunn og filosofi<br />
Designteknikker - fremgangsmåter, fordeler/ulemper<br />
Trondheim, 2001<br />
http://www.design..ntnu.no/
<strong>NTNU</strong><br />
Jacob Nielsen “Usability Engineering”<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Iterativt Design<br />
Iterativt design<br />
Produksjon<br />
Design/Redesign<br />
-> Prototyp<br />
<strong>NTNU</strong><br />
Analyse av<br />
videologg<br />
... ... . . .<br />
..... . . . .<br />
.<br />
... . . . . .<br />
..<br />
Brukertesting<br />
... ... ..<br />
... . ... .<br />
Trondheim, 2001<br />
http://www.design..ntnu.no/
Brukbarhetsproblemer halveres<br />
for hver iterasjon<br />
<strong>NTNU</strong><br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Hvorfor modellere interaksjon?<br />
<strong>NTNU</strong><br />
• Primært<br />
– Kunne teste ut en design ide´empirisk - mot virkeligheten<br />
• Sekundært<br />
– Utforske design “rommet”/frihetsgradene<br />
– Kommunisere med andre utviklere<br />
– Kommunisere med oppdragsgiver<br />
– Kommunisere med sluttbrukere<br />
– Teste tekniske problemer<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Tre dimensjoner som krever ulike modeller<br />
Funksjon<br />
<strong>NTNU</strong><br />
Teknologi<br />
Intensjoner<br />
Implementasjon<br />
Opplevelser<br />
Look and Feel<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Konsekvenser for modellen/prototypen<br />
<strong>NTNU</strong><br />
• Den trenger ikke å overleve lenger en brukbarhetstesten<br />
• Den behøver ikke være robust, detaljert, rask realistisk, vakker,<br />
utvidbar, eller komplett<br />
• Alle triks er lov!<br />
• Dens verdi skal være lav<br />
“Just enough prototyping” Gillian Crampton Smith<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Kost/nytte av modeller<br />
<strong>NTNU</strong><br />
Høy<br />
nytte<br />
Alpha/<br />
0-serie<br />
Skjermsimulering<br />
Funksjons<br />
modell<br />
Lav<br />
nytte<br />
Papir<br />
Rask å bygge<br />
Langsom å bygge<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Lo-fi vs. Hi-fi prototyper<br />
<strong>NTNU</strong><br />
• Lo-Fi (Low fidelity):<br />
– Enkle prototyper uten mye detaljer verken grafikk eller<br />
interaksjon<br />
– Brukes tidlig i prosjekter<br />
– Enkle å lage, men mangler detaljrikdom<br />
• Hi-Fi (High fidelity):<br />
– Komplekse prototyper med mer detaljer<br />
– Brukes senere i prosjekter<br />
– Koster med å lage. Lages ofte v.h.a. prototypingsverktøy.<br />
– Ligner med på det ferdige produktet.<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Horisontale vs. Vertikale prototyper<br />
<strong>NTNU</strong><br />
• Horisontale: Vise totalsystemet uten særlig mye<br />
interaktivitet og funksjonalitet.<br />
• Vertikale: Gå i dybden på en detalj, d.v.s<br />
implementere nok interaktivitet og funksjonalitet til å<br />
kunne teste dette.<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
”Lag og kast” vs. Evolusjonær utvikling<br />
<strong>NTNU</strong><br />
• Det er mulig å utvikle et system evolusjonært, og la hver<br />
versjon bli testet.<br />
• Fordeler i forhold til ”Lag og kast” prototyper:<br />
– Man kaster ikke bort arbeidet med prototypene.<br />
– Man kan bygge videre mot ferdig produkt.<br />
• Ulemper:<br />
– Koden blir fort veldig uryddig.<br />
– Det tar lenger tid å utvikle med tanke på at koden skal kunne<br />
utvides.<br />
– Begrenser valgmuligheter i forhold til verktøy.<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Interaktive prototyper<br />
<strong>NTNU</strong><br />
• Fortrinnsvis vertikale prototyper, evt. kombinasjon.<br />
• Lag en ”quick and dirty” implementasjon av<br />
interaktivitet v.h.a. et egnet verktøy.<br />
• Spesialsydd for å teste ut designidéer.<br />
• Behøver ikke kunne leve sitt eget liv.<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
<strong>NTNU</strong><br />
Designteknikker<br />
Skissere interaksjon med storyboarding<br />
Detaljere grensesnittet med papirprototyper og rollespill<br />
Designe “Look and Feel” med skjermsimuleringer<br />
Prøve det ut i virkeligheten med “Wizard of Oz”<br />
simuleringer<br />
Trondheim, 2001<br />
http://www.design..ntnu.no/
Storyboard<br />
<strong>NTNU</strong><br />
• Serie med bilder<br />
• Beskrivende tekst<br />
• Av hvordan ting<br />
gjøres i dag<br />
• Av hvordan ting kan<br />
gjøres i fremtiden<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Storyboard<br />
<strong>NTNU</strong><br />
Tekst og bilde kan være<br />
utgangspunkt for<br />
ideskissing<br />
Legg til tegninger og tekst<br />
som beskriver:<br />
• Nye funksjoner<br />
• Nye produkter<br />
• Nye grensesnitt<br />
• Nye handlinger<br />
• Overflødige gamle<br />
handlinger<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Leke med “dukker”<br />
<strong>NTNU</strong><br />
• Flytende overgang fra<br />
scenarioskriving til rollespill<br />
• Tillater dynamiske analyser<br />
av kommunikasjon og<br />
handling<br />
• Tillater eksperimentering<br />
med flere aktører og ulike<br />
personas<br />
• Stor informasjonsrikdom,<br />
men vanskligere å<br />
dokumentere enn storyboard<br />
(bruk video og grafiske<br />
teknikker i etterkant)<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Rollespill<br />
<strong>NTNU</strong><br />
"Roleplaying is a great tool for communicating concepts”<br />
" I´m already looking forward to the next possibility of participating<br />
although hopefully not as a virtual princess!"<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Rollespill - fremgangsmåte<br />
<strong>NTNU</strong><br />
• Planlegg hovedaktivitetene<br />
• Lag/finn omgivelser og ting å<br />
tenke med (gjerne enkle &<br />
abstrakte representasjoner)<br />
• Kjenn din rolles motivasjon og<br />
interesser<br />
• Kjør rollespill inntill problemer<br />
oppdages.<br />
• Redesign, spol tilbake og prøv på<br />
nytt!<br />
• Dokumentér med video<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Designworkshop - eksempel<br />
<strong>NTNU</strong><br />
• Håndholdt trådløs peer-topeer<br />
for tenåringer.<br />
• Starte med en teknologi<br />
• Starte med en brukergruppe<br />
• Lage scenarier<br />
• Lage low-fi prototyper<br />
• Teste ut prototypene mot<br />
scenariene<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Designworkshop - eksempel<br />
• Gruppearbeid med brukere som designere<br />
<strong>NTNU</strong><br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Designworkshop - eksempel<br />
• Mock-ups for konkretisering av ideer<br />
<strong>NTNU</strong><br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Designworkshop - eksempel<br />
<strong>NTNU</strong><br />
• Fremføring av scenarier med<br />
skissemodellene<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Papirprototyper<br />
<strong>NTNU</strong><br />
• Meget hurtig<br />
• Design av grensesnittet slik<br />
brukeren opplever det<br />
• Brukes til å prøvekjøre<br />
interaksjonsideer<br />
• Ikke riktig responstid, lyder<br />
og animasjoner<br />
• Krever god forestillingsevne<br />
hos brukere (bedres med<br />
rollespill!)<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Papir-prototyper<br />
<strong>NTNU</strong><br />
• Lage skisser av skjermbilder.<br />
• Lage et tilstandsdiagram som viser sammenhengen<br />
mellom skjermbildene.<br />
• Lage små lapper for vinduer, menyer, knapper,, som<br />
kan flyttes på under en ”Wizard of Oz” test.<br />
• Måter å produsere prototypene på:<br />
– Frihånds-skisse<br />
– Klippe og lime ferdiglagede GUI elementer<br />
– PhotoShop el.l. som skrives ut<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
<strong>NTNU</strong><br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Papirprototype - dokumentasjon<br />
<strong>NTNU</strong><br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Tilstandsdiagrammer - dokumantasjon<br />
<strong>NTNU</strong><br />
• Viser sammenhengen mellom skjermbildene.<br />
• Tilstander, hendelser, handlinger og transisjoner.<br />
Startbilde<br />
”Gå inn”/vis meny<br />
Se tilbud<br />
Hoved<br />
Valg av vare<br />
Handel<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Skjermsimuleringer<br />
<strong>NTNU</strong><br />
• Helst lineær interaksjon<br />
• Gir riktig respons, lyd og<br />
skjermbilde<br />
• Lett å variere utseendet med<br />
høy oppløsning<br />
• 2D<br />
• Tidkrevende hvis det skal<br />
lages fleksibelt<br />
• Kan gi inntrykk av å være for<br />
ferdig<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Slideshows<br />
<strong>NTNU</strong><br />
• Bruk PowerPoint el.l. som prototypingverktøy<br />
• Fordel: Veldig enkelt å gjøre design.<br />
• Ulempe: Meget begrenset funksjonalitet (kun det å<br />
skifte mellom skjermbilder)<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
erPoint el.l. som prototypingverktøy<br />
eldig enkelt å gjøre design.<br />
eget begrenset funksjonalitet (kun det å<br />
lom skjermbilder)<br />
<strong>NTNU</strong><br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Powerpoint prototyp - eksempel<br />
<strong>NTNU</strong><br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Powerpoint prototyp - eksempel<br />
<strong>NTNU</strong><br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Wizard-of-OZ modeller<br />
<strong>NTNU</strong><br />
• Utseendemodell animert med<br />
mennesker og tilgjengelig<br />
teknologi bak kulissene.<br />
• Realistisk gjengivelse hvis<br />
alt fungerer<br />
• Kostbar men svært realistisk<br />
simulering<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Funksjonsmodell<br />
<strong>NTNU</strong><br />
Modellering med riktige egenskaper<br />
• Skjermbilder<br />
• Software<br />
• Elektronikk<br />
• Skall/hardware<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Alpha versjon / 0-serie<br />
<strong>NTNU</strong><br />
• Fullverdig produkt<br />
• Mangler<br />
kvalitetssikring og<br />
ubetydelige<br />
funksjoner<br />
• Produseres og<br />
distribueres til<br />
brukere for feedback<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Prototypingsverktøy<br />
<strong>NTNU</strong><br />
• Macromedia Director/Flash<br />
• Visual Basic<br />
• Web verktøy: eks. Dreamweaver.<br />
• HyperCard, SuperCard<br />
• Smalltalk<br />
• JBuilder, Delphi++<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
<strong>NTNU</strong><br />
Oppsummering:<br />
Konkret tenking - for å se det fra brukerens perspektiv.<br />
Visuell tenking - for å formidle kontekst og en rik helhet.<br />
Rollespill - for å oppleve det selv og få empati.<br />
Først parallelle design versjoner for å utforske muligheter<br />
Så iterativ design for å teste og rafinere<br />
Trondheim, 2001<br />
http://www.design..ntnu.no/
Mobil IT, noen momenter<br />
Forgrunn /<br />
Bakgrunn<br />
<strong>NTNU</strong> Hardware og<br />
ergonomi<br />
Mind/Body<br />
Omgivelses-data<br />
Skjerm-størrelse<br />
PC på internett<br />
Hovedfokuset er på bruk av PCen.<br />
PCen har funnet sin fysiske form.<br />
Symbolmanipulasjon (mind)<br />
Fysiske posisjon er irrelevant<br />
(CyberSpace)<br />
Store skjermer<br />
Mobil, trådløs IT<br />
PDA/mobil er integrert med andre<br />
aktiviteter<br />
Hardware blir viktig (størrelse, vekt,<br />
batteri,,)<br />
Også fysiske handlinger (bodymind)<br />
Lokasjon og sensordata kan brukes.<br />
Små skjermer, sollys.<br />
Input<br />
Tastatur og mus<br />
Pen, knapper, en-hånds løsninger.<br />
Trondheim, 2003<br />
http://www.design..ntnu.no/
Ny teknologi, Ny praksis<br />
<strong>NTNU</strong><br />
• Ny teknologi åpner for nye måter å utføre oppgaver og<br />
nye samhandlingsmønstre.<br />
Teknologi<br />
Framtid<br />
Oppgaveanalyse<br />
Drama workshop med<br />
prototyp improvisasjon<br />
Nåtid<br />
Trondheim, 2003<br />
Feltstudier<br />
Nåtid<br />
”Future workshops”<br />
Praksis<br />
Framtid<br />
http://www.design..ntnu.no/
Change language