Allocated Flow Diagramming: A Structured Process and Methods for Teaching Interactive Product Prototyping in Industrial Design

다국어 초록 (Multilingual Abstract)

Background Interactive product prototyping has been widely taught in industrial design studio courses to prepare design students in dealing with dynamic interactions of using digital products. While it requires the integration of design and technology, the lack of systematic approaches of the studio curricula creates a great challenge for students who are not familiar with technology in creating interactive prototypes successfully.




Methods A theoretical framework is developed from the human-machine interaction model and the sequential flow of task analysis methods. Based on this framework, a human-machine interaction (HMI) flow diagram is proposed with which interaction elements, relationships, and flows are specified and categorized. The flow diagram is utilized to create a storyboard and an allocation flowchart subsequently. A structured design process based on these methods was applied to an interactive product design studio course in an undergraduate industrial design program.




Results Students created working prototypes of interactive products, following the structured design process consisting of an HMI flow diagram, a storyboard, and an allocation flowchart. 104 students (87.4%) among 119 succeeded in translating their ideas to functioning circuits. 74 students (62.2%) successfully integrated electronics components into working physical prototypes while 30 students (25.2%) just made the circuits work.




Conclusions The structured design process makes a transition from initial ideation to programming smooth and incremental. This helps students without previous programming experience to understand the logic flow and to develop algorithms. The HMI flow diagram is useful for analysis, concept development, and the specification of interactions, and helps students to grasp the effect of interactive features on user experience.

다국어 초록 (Multilingual Abstract)

Background Interactive product prototyping has been widely taught in industrial design studio courses to prepare design students in dealing with dynamic interactions of using digital products. While it requires the integration of design and technology, the lack of systematic approaches of the studio curricula creates a great challenge for students who are not familiar with technology in creating interactive prototypes successfully.


Methods A theoretical framework is developed from the human-machine interaction model and the sequential flow of task analysis methods. Based on this framework, a human-machine interaction (HMI) flow diagram is proposed with which interaction elements, relationships, and flows are specified and categorized. The flow diagram is utilized to create a storyboard and an allocation flowchart subsequently. A structured design process based on these methods was applied to an interactive product design studio course in an undergraduate industrial design program.


Results Students created working prototypes of interactive products, following the structured design process consisting of an HMI flow diagram, a storyboard, and an allocation flowchart. 104 students (87.4%) among 119 succeeded in translating their ideas to functioning circuits. 74 students (62.2%) successfully integrated electronics components into working physical prototypes while 30 students (25.2%) just made the circuits work.


Conclusions The structured design process makes a transition from initial ideation to programming smooth and incremental. This helps students without previous programming experience to understand the logic flow and to develop algorithms. The HMI flow diagram is useful for analysis, concept development, and the specification of interactions, and helps students to grasp the effect of interactive features on user experience.

참고문헌 (Reference)

1 최정민, "피지컬-스크린 인터랙션을 연결하는 사용자 경험(UX) 디자인 커리큘럼 제안" 한국디자인트렌드학회 (50) : 155-162, 2016

2 Xinogalos, S., "Using flowchart-based programming environments for simplifying programming and software engineering processes" 1313-1322, 2013

3 Maguire, M. C., "User-Centred Requirements Handbook . EC Telematics Applications Programme, Project TE 2010 RESPECT (Requirements Engineering and Specification in Telematics)"

4 Hackos, J. T., "User and task analysis for interface design" Wiley 1998

5 Denis Weil, "Tomorrow’s Critical Design Competencies: Building a Course System for 21st Century Designers" Elsevier BV 6 (6): 157-169, 2020

6 Crews, T., "The flowchart interpreter for introductory programming courses" 307-312, 1998

7 Card, S. K., "The Psychology of Human-Computer Interaction" Lawrence Erlbaum 1983

8 Scanlan, D. A., "Structured flowcharts outperform pseudocode : an experimental comparison" 6 (6): 28-36, 1989

9 Kolko, J., "Mixing disciplines in anticipation of convergence : a curriculum for teaching interaction design to industrial designers" 11 (11): 18-23, 2004

10 Norman, D. A., "Living with complexity" MIT press 2016

11 김향아, "Learning from Two Types of Class Projects in Interactive Physical Prototyping: Comparison between Technology-driven and Experience-driven Project Results" 한국디자인학회 33 (33): 75-87, 2020

12 Aprile, W. A., "Interactive technology design at the Delft University of Technology-a course about how to design interactive products" 553-558, 2011

13 Koskinen, I., "Interactive prototyping: teaching interaction to industrial designers" 2014

14 Preece, J., "Interaction design : beyond human-computer interaction" John Wiley & Sons 2002

15 Ena Voûte, "Innovating a Large Design Education Program at a University of Technology" Elsevier BV 6 (6): 50-66, 2020

16 Omar Mubin, "Infusing technology driven design thinking in industrial design education: a case study" Emerald 14 (14): 216-229, 2017

17 Jim Budd, "Industrial Design Education: Taming Technology to Enhance User Experience" 한국디자인학회 30 (30): 17-27, 2017

18 Işıl Oygür Ilhan, "Industrial Design Education in the Age of Digital Products" Informa UK Limited 22 (22): 1973-1982, 2019

19 Dumas, B., "Human Machine Interaction" Springer 3-26, 2009

20 Pontus Wärnestål, "Formal Learning Sequences and Progression in the Studio: A Framework for Digital Design Education" Informing Science Institute 15 : 035-052, 2016

21 Mikkonen, J., "Flowcards - a communication tool" 1215-1229, 2012

22 Böhm, C., "Flow diagrams, Turing machines and languages with only two formation rules" 9 (9): 366-371, 1966

23 Nam Tek jin, "Education Framework for Interactive Product Prototyping" 한국디자인학회 19 (19): 93-104, 2006

24 Frens, J. W, "Designing for rich interaction: Integrating form, interaction and function" Eindhoven University of Technology 2006

25 Wärnestål, P., "Designerly ways of teaching and learning: a course structure for interaction design" 9 (9): 179-188, 2013

26 Stappers, P. J., "Design for interaction: consolidating the usercentred focus in industrial design engineering" 69-74, 2007

27 Hummels, C., "Competency-centered education for designing interactive and intelligent products" 13 (13): 4-17, 2011

28 Tung, F. W., "A study on integrating interaction design into industrial design processes" 2004