Prototyping NTNU NTNU

Transkript

1 Prototyping Trondheim,

2 ISO : User-centred design

3 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

4 Fasene i bruker-sentrert design (3) Identifisere behov for brukersenteret design! Utvikle designløsninger Evaluere design mot krav! ISO 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.

5 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

6 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

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

8 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!

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

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

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

12 Mapping prototyping techniques

13 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)

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

15 Wizard-of-Oz modeller! Utseendemodell animert med mennesker og tilgjengelig teknologi bak kulissene.!! Realistisk gjengivelse hvis alt fungerer Kostbar men svært realistisk simulering

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

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

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

19 Papirprototyper!! Meget hurtig Design av grensesnittet slik brukeren opplever det!! Ikke riktig responstid, lyder og animasjoner Krever god forestillingsevne hos brukere (bedres med rollespill!)

20 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

21 Eksempler på papirprototyper

22 Eksempler på papirprototyper

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

24 Magnet GUI elements Agile, Multidisciplinary Teamwork (c) 2004 Gautam Ghosh, Userminded, Oslo, Norway, accessed !

25 Prototyping the dialogue Draw the links between the screens.! State-transition diagrams.! Navigation maps.! Navigation hierarchies.!

26 Linking the screens

27 Eksempler på papirprototyper

28 Papirprototype

29 Tilstandsdiagrammer! Viser sammenhengen mellom skjermbildene.! Tilstander, hendelser, handlinger og transisjoner. Startbilde! Gå inn /vis meny! Hoved! Se tilbud! Valg av vare! Handel!

30 Eksempel: Webtjeneste for bestilling av pizza

31 Slide shows! Bruk PowerPoint el.l. som prototypingverktøy! Fordel: Veldig enkelt å gjøre design.! Ulempe: Meget begrenset funksjonalitet (kun det å skifte mellom skjermbilder)

32 Powerpoint Prototyper

33 Mock-ups. Konkretisering av ideer

34 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

35 Funksjonsmodell

36 Prototyper - Arduino! Toolkit for HW prototyper.

37 Prototypingsverktøy! Adobe Flash! Visual Basic! Web verktøy: f.eks. Dreamweaver.! Java SWING Quick and dirty! Powerpoint! Photoshop

38 !"#$%&$'()*(#+++,-.%/0%1+02+&$3-%$.%("$%$"+)%.45(+ 6%"147%+8%.%'$9:+;<<=+

39 >$#"#"?0%+3()%$+."')45+%()$4(5++

40

41 B-#(%$+

42 B-#(%$+#5+73(-.C#('14"%"+

43 Eksempel: Mikronavigering

44 Forsøksplan

45 Forsøksområde

46 Wizard-of-Oz med mobil IT

47 Forsøksperson med trådløs PDA

48 Tilstandsdiagram

49 Skjermbilde

50 Interaktivitet

51 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,

52 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,

53 Idea Formation! 3 weeks! Director simulation of behaviour! Sketches of shell principles! Materials and production methods Trondheim,

54 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,

55 Trondheim,

56 Feasibility study! 4 weeks! BasicStamps for function models! Choice of principle form / visual expression! Choice of materials and production methods Trondheim,

57 Trondheim,

58 Trondheim,

59 Product development! 12 weeks Parallel development of...! Shell! Electronics! Software Trondheim,

60 A fixed volume for electronic HW was the interface between electronics and industrial design Trondheim,

61 Trondheim,

62 Trondheim,

63 Production, package design & packaging! 10 days! Breaking up PCB s! Mounting batteries! Programming! Putting into shell! Packaging Trondheim,

64 Programming Trondheim,

65 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,

66 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

67 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

68 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,

69 Technology in the new hospital! Communication! PDAs and patient terminals are capable of communicate through the IT-infrastructure

70 The idea Combining the devices in a distributed interface

71 Distributed interface What interaction techniques should the distributed interface be based on??

72 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

73 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

74 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

75 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

76 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

77 Technique A: WIMP on PC! Touch screen WIMP interface on patient terminal.

78 Technique B: Drag and drop! PDA displays objects! User drags objects over a patient terminal icon

79 Technique C: Screen extension! PDA and patient terminal is one common screen! Objects can be transferred from one screen to another

80 Technique D: PDA as input device! PDA used as input device

81 Technique E: Remote control! PDA used as remote control! As on a DVD-player

82 Technique F: WIMP on PDA! PDA displays list with links! Link opens in patient terminal

83 Technique G: Proximity! PDA is a torch that ignite the PC! Objects can be transferred from the handheld by moving it near the PC

84 Technique H: Mirroring! PDA mirrors the patient terminal! Displays a tiny copy of the screen