Prototyping Trondheim, 2001 http://www.design..ntnu.no/
ISO 9241-210: User-centred design
Prosjekters liv! En prosess med divergens og konvergens Divergens (åpne) Iterate Konvergens (lukke) Iterate Iterate Idé Å skape valg Iterate Å ta valg Iterate Produkt Iterate Tid
Fasene i bruker-sentrert design (3) Identifisere behov for brukersenteret design! Utvikle designløsninger Evaluere design mot krav! ISO 13407 Forstå og spesifisere brukssammenheng! Systemet tilfredstiller bruker og organisasjons krav! Utvikle designløsninger! Spesifisere bruker og organisasjons krav! Teknikker for å utvikle designløsninger:!utvikle konseptuell modell / metafor.!prototyping:! Papirprototyper! Powerpoint, Flash el.l. prototyper! Funksjonelle prototyper!scenarier m/personas for løsning i bruk. Teknikker for å formidle designløsninger:!framvising/utprøving av selve prototypene!vise scenarier m/personas for tenkt system i bruk.
Hvorfor modellere interaksjon?! Primært! Kunne teste ut en design ide empirisk - mot virkeligheten! Sekundært! Utforske design rommet /frihetsgradene! Kommunisere med andre utviklere! Kommunisere med oppdragsgiver! Kommunisere med sluttbrukere! Teste tekniske problemer
Konsekvenser for modellen/prototypen! Den trenger ikke å overleve lenger enn brukbarhetstesten! Den behøver ikke være robust, detaljert, rask realistisk, vakker, utvidbar, eller komplett! Alle triks er lov!! Dens verdi skal være lav Just enough prototyping Gillian Crampton Smith
Horisontale vs. Vertikale prototyper! Horisontale: Vise totalsystemet uten særlig mye interaktivitet og funksjonalitet.! Vertikale: Gå i dybden på en detalj, d.v.s implementere nok interaktivitet og funksjonalitet til å kunne teste dette.
3 dimensjoner i prototyping Funksjon/rolle! Implementasjon! What is significant is not what media or tools were used to create them, but how they are used by a designer to explore or demonstrate some aspect of the future artifact. [Houde&Hill] Look and Feel!
Rolle! Role refers to questions about the function that an artifact serves in a user s life the way in which it is useful to them.
Look & feel! Look and feel denotes questions about the concrete sensory experience of using an artifact what the user looks at, feels and hears while using it.
Implementasjon! Implementation refers to questions about the techniques and components through which an artifact performs its function the nuts and bolts of how it actually works.
Mapping prototyping techniques
Implications for prototyping!!! It is not the product. It does not need to be robust, beautiful, extendable,, Cheating is encouraged!! Just enough prototyping (Gillian Crampton Smith)
Tidsforbruk på å lage en prototyp vs. funksjonalitet Prototyping e!ectiveness. Each! prototyping step allows for a greater level of! functionality and takes more time to implement.!
Wizard-of-Oz modeller! Utseendemodell animert med mennesker og tilgjengelig teknologi bak kulissene.!! Realistisk gjengivelse hvis alt fungerer Kostbar men svært realistisk simulering
Lag og kast vs. Evolusjonær utvikling! Det er mulig å utvikle et system evolusjonært, og la hver versjon bli testet.! Fordeler i forhold til Lag og kast prototyper:! Man kaster ikke bort arbeidet med prototypene.! Man kan bygge videre mot ferdig produkt.! Ulemper:! Koden blir fort veldig uryddig.! Det tar lenger tid å utvikle med tanke på at koden skal kunne utvides.! Begrenser valgmuligheter i forhold til verktøy.
Lo-fi vs. Hi-fi prototyper! Lo-Fi (Low fidelity):! Enkle prototyper uten mye detaljer verken grafikk eller interaksjon! Brukes tidlig i prosjekter! Enkle å lage, men mangler detaljrikdom! Hi-Fi (High fidelity):! Komplekse prototyper med mer detaljer! Brukes senere i prosjekter! Koster med å lage. Lages ofte v.h.a. prototypingsverktøy.! Ligner med på det ferdige produktet.
Interaktive prototyper! Fortrinnsvis vertikale prototyper, evt. kombinasjon.! Lag en quick and dirty implementasjon av interaktivitet v.h.a. et egnet verktøy.! Spesialsydd for å teste ut designidéer.! Behøver ikke kunne leve sitt eget liv.
Papirprototyper!! Meget hurtig Design av grensesnittet slik brukeren opplever det!! Ikke riktig responstid, lyder og animasjoner Krever god forestillingsevne hos brukere (bedres med rollespill!)
Papir-prototyper! Lage skisser av skjermbilder.! Lage et tilstandsdiagram som viser sammenhengen mellom skjermbildene.! Lage små lapper for vinduer, menyer, knapper,, som kan flyttes på under en Wizard of Oz test.! Måter å produsere prototypene på:! Frihånds-skisse! Klippe og lime ferdiglagede GUI elementer! PhotoShop el.l. som skrives ut
Eksempler på papirprototyper
Eksempler på papirprototyper
Types of paper prototypes! Sketches "! Easy to make and to modify "! Signals that it is a sketch -! Paper is not the screen. (font sizes, pixels,,)! Cut & paste GUI elements "! Efficient when making one kind of application -! You need a GUI kit. -! Limits GUI to the elements.! PhotoShop! printer "! Closer to what it will look like on the screen! Takes more time than the above. Hybrids: scan sketches; GUI elements + pencil;..
Magnet GUI elements Agile, Multidisciplinary Teamwork (c) 2004 Gautam Ghosh, Userminded, Oslo, Norway, www.userminded.no! http://www.methodsandtools.com/archive/archive.php?id=17 accessed 160907!
Prototyping the dialogue Draw the links between the screens.! State-transition diagrams.! Navigation maps.! Navigation hierarchies.!
Linking the screens
Eksempler på papirprototyper
Papirprototype
Tilstandsdiagrammer! Viser sammenhengen mellom skjermbildene.! Tilstander, hendelser, handlinger og transisjoner. Startbilde! Gå inn /vis meny! Hoved! Se tilbud! Valg av vare! Handel!
Eksempel: Webtjeneste for bestilling av pizza
Slide shows! Bruk PowerPoint el.l. som prototypingverktøy! Fordel: Veldig enkelt å gjøre design.! Ulempe: Meget begrenset funksjonalitet (kun det å skifte mellom skjermbilder)
Powerpoint Prototyper
Mock-ups. Konkretisering av ideer
Skjermsimuleringer!!! Helst lineær interaksjon Gir riktig respons, lyd og skjermbilde Lett å variere utseendet med høy oppløsning!!! 2D Tidkrevende hvis det skal lages fleksibelt Kan gi inntrykk av å være for ferdig
Funksjonsmodell
Prototyper - Arduino! Toolkit for HW prototyper.
Prototypingsverktøy! Adobe Flash! Visual Basic! Web verktøy: f.eks. Dreamweaver.! Java SWING Quick and dirty! Powerpoint! Photoshop
!"#$%&$'()*(#+++,-.%/0%1+02+&$3-%$.%("$%$"+)%.45(+ 6%"147%+8%.%'$9:+;<<=+
>$#"#"?0%+3()%$+."')45+%()$4(5++
>$#"#"?0%+.#/+'$&%4).@%$-"A?+
B-#(%$+
B-#(%$+#5+73(-.C#('14"%"+
Eksempel: Mikronavigering
Forsøksplan
Forsøksområde
Wizard-of-Oz med mobil IT
Forsøksperson med trådløs PDA
Tilstandsdiagram
Skjermbilde
Interaktivitet
Pulse Interactive Jewlry A gift to the participants at NTH s 75 year anniversary and the opening of Realfagsbygget Should be...! Both real and virtual! Symbolise cross disciplinarity! Symbolise togetherness Trondheim, 2000 http://www.design..ntnu.no/
The Puls Development Process Sketches & Materials! Industrial design! Production! 31. May 2000! &! Design brief! Idea 15. Des 1999! formation! 7. Jan! Hardware 10. Feb! prototypes! Electronics design! Packaging design! Interaction design! Software development! Trondheim, 2000 http://www.design..ntnu.no/
Idea Formation! 3 weeks! Director simulation of behaviour! Sketches of shell principles! Materials and production methods Trondheim, 2000 http://www.design..ntnu.no/
Inspirations & Related work! Aesthetic object! Interactive and social wearable! The interaction as metaphor for social life! Slow pulse! Related work:! MIT MediaLab badges! Olivetti Active badge! Bill Gaver (RCA) Feather! Lovegetty! Work at Interval Research on similar ideas Trondheim, 2000 http://www.design..ntnu.no/
Trondheim, 2000 http://www.design..ntnu.no/
Feasibility study! 4 weeks! BasicStamps for function models! Choice of principle form / visual expression! Choice of materials and production methods Trondheim, 2000 http://www.design..ntnu.no/
Trondheim, 2000 http://www.design..ntnu.no/
Trondheim, 2000 http://www.design..ntnu.no/
Product development! 12 weeks Parallel development of...! Shell! Electronics! Software Trondheim, 2000 http://www.design..ntnu.no/
A fixed volume for electronic HW was the interface between electronics and industrial design Trondheim, 2000 http://www.design..ntnu.no/
Trondheim, 2000 http://www.design..ntnu.no/
Trondheim, 2000 http://www.design..ntnu.no/
Production, package design & packaging! 10 days! Breaking up PCB s! Mounting batteries! Programming! Putting into shell! Packaging Trondheim, 2000 http://www.design..ntnu.no/
Programming Trondheim, 2000 http://www.design..ntnu.no/
The big day!! 400 guests at official opening! Puls lighted up as HMK Harald opened the protocol! The Pulse of! ~ 1200 guests at evening gettogether! Puls as gift at the entrance Trondheim, 2000 http://www.design..ntnu.no/
Using handhelds and PCs together Today! PDA replaces the PC when the user is mobile Future! PDA used together with the PC when both are available! utilizes the best of both
Technology in the new hospital! Medical Digital Assistant (MDA)! Physicians and nurses in key positions are equipped with handheld PDAs.! PDA with 4 screen.! Touch sensitive screen and stylus-based input
Technology in the new hospital! Patient terminal! Every patient has a terminal available by their bed! A kind of home entertainment system! TV, radio, video, telephone,
Technology in the new hospital! Communication! PDAs and patient terminals are capable of communicate through the IT-infrastructure
The idea Combining the devices in a distributed interface
Distributed interface What interaction techniques should the distributed interface be based on??
Research design 1.! Finding interaction metaphors! Inspired by existing systems, papers, imagination 2.! Focus group! Personnel from St Olav Hospital 3.! Interview! Specialist from St Olav Hospital 4.! Comparative usability test! Test eight different interaction methods on physicians and patients! Use Card Sort to catch the users preferences
Focus group and interview!!! Group interview with four employees at St. Olav's Hospital! Discussing ideas and possible scenarios for using PDA and patient terminal together! Meeting in realistic environment (NSEP s usability lab)! PDA and patient terminal available Interview with physician Gave directions for further work! Using PDA as private screen,! Patient terminal as public screen
Product idea! X-ray image viewer! Let the physician see avaliable x-ray images on the handheld! The handheld screen is too small to view x-ray images! Selected images is sent to the terminal as a tool to convince the patient! The physician has full control over what the patient see! Patient don t see disturbing elements on the screen
Interaction techniques! Technique A:! Technique B:! Technique C:! Technique D:! Technique E:! Technique F:! Technique G:! Technique H: WIMP on PC (Non-PDA baseline) Drag and drop Screen extension PDA as input device Remote control WIMP on PDA Proximity Mirroring
Developing prototypes! One prototype for each technique! Simple prototypes i Flash! Communicate over IP! Let the physician change between x-ray images! Control group! Direct interaction with patient terminal
Technique A: WIMP on PC! Touch screen WIMP interface on patient terminal.
Technique B: Drag and drop! PDA displays objects! User drags objects over a patient terminal icon
Technique C: Screen extension! PDA and patient terminal is one common screen! Objects can be transferred from one screen to another
Technique D: PDA as input device! PDA used as input device
Technique E: Remote control! PDA used as remote control! As on a DVD-player
Technique F: WIMP on PDA! PDA displays list with links! Link opens in patient terminal
Technique G: Proximity! PDA is a torch that ignite the PC! Objects can be transferred from the handheld by moving it near the PC
Technique H: Mirroring! PDA mirrors the patient terminal! Displays a tiny copy of the screen