Using Flowcharts and State Diagrams as Tools For Industrial Design of Smart Products

Yıl 2025, Sayı: 36, 205 - 233, 27.06.2025

Hüseyin Özkal Özsoy

https://doi.org/10.18603/sanatvetasarim.1699442

Öz

This article investigates the integration of flowcharts and state diagrams into the industrial design process, focusing on their potential to support process planning, clarify product behavior, and enhance communication between designers and engineers. The study begins with an evaluation of storyboards as traditional design tools, followed by an introduction to flowcharts and state diagrams that explains their origins, structural characteristics, and interdisciplinary applications. A proposed method for incorporating these tools into the design process is presented and is supported by a case study involving the development of a smart lighting product. Storyboards, flowcharts, and state diagrams are comparatively evaluated in terms of their effectiveness in process planning and behavior modeling. Time spent and user interactions are measured and analyzed for each tool. The results show that flowcharts are effective in organizing sequential tasks with logical clarity, while state diagrams are more suitable for representing condition-based behaviors and user interaction in smart products. When used together, the tools offer complementary strengths, combining creative exploration with technical precision. This study provides a comprehensive examination of the combined use of flowcharts and state diagrams in industrial design, emphasizing their value not only in planning but also in fostering a shared design language for interdisciplinary collaboration. It also highlights their adaptability in various formats, demonstrating their flexibility across different design environments.

Anahtar Kelimeler

Flowcharts , State Diagrams , Industrial Design Process , Smart Product Behavior , Interdisciplinary Collaboration

Akıllı Ürünlerin Endüstriyel Tasarımında Akış ve Durum Diyagramlarının Araç Olarak Kullanımı

Öz

Bu makale, akış diyagramları ve durum diyagramlarının endüstriyel tasarım sürecine entegrasyonunu incelemekte; bu araçların süreç planlamasını destekleme, ürün davranışlarını netleştirme ve tasarımcılarla mühendisler arasındaki iletişimi güçlendirme potansiyeline odaklanmaktadır. Çalışma, geleneksel bir araç olan hikâye panolarının (storyboard) kullanımına dair bir değerlendirmeyle başlamakta, ardından akış diyagramları ve durum diyagramlarının kökenleri, yapısal özellikleri ve disiplinler arası kullanım alanları açıklanmaktadır. Bu araçların tasarım sürecinde nasıl kullanılabileceğine dair önerilen bir yöntem sunulmakta ve akıllı bir aydınlatma ürününün geliştirilmesine yönelik bir vaka çalışmasıyla desteklenmektedir. Hikâye panoları, akış diyagramları ve durum diyagramları süreç planlama ve ürün davranışlarının modellenmesi açısından karşılaştırmalı olarak değerlendirilmiştir. Kullanım süresi ve kullanıcı etkileşimleri temelinde ölçümler yapılmıştır. Akış diyagramlarının belirli görevlerin sıralı ve mantıklı şekilde organize edilmesinde etkili olduğunu; durum diyagramlarının ise özellikle akıllı ürünlerin duruma bağlı davranışlarını ve kullanıcı etkileşimlerini temsil etmede daha başarılı olduğunu göstermektedir. Her iki araç birlikte kullanıldığında, yaratıcı düşünme ile teknik netliği bir araya getiren tamamlayıcı avantajlar sunmaktadır. Bu çalışma, akış ve durum diyagramlarının endüstriyel tasarımda birlikte kullanımını vaka çalışmasıyla detaylı biçimde inceleyerek bu araçların yalnızca planlama değil, aynı zamanda disiplinler arası iletişimde ortak bir tasarım dili oluşturma potansiyeline sahip olduğunu ortaya koymaktadır. Ayrıca, bu araçların farklı biçimlerde kullanılabilirliğine de değinilerek, çeşitli çalışma koşullarına uygunlukları gösterilmiştir.

Anahtar Kelimeler

Akış Diyagramları , Durum Diyagramları , Endüstriyel Tasarım Süreci , Akıllı Ürün Davranışı , Disiplinlerarası İş Birliği

Etik Beyan

makalede kullanılan her tür veri kişisel üretimim olup, alıntı yapılan kaynaklar hem metin içerisinde hem de makale sonundaki referanslarda detaylı belirtilmiştir.

Kaynakça

• Adelt, J., Liebrenz, T., & Herber, P. (2021). Formal Verification of Intelligent Hybrid Systems that are Modeled with Simulink and the Reinforcement Learning Toolbox. In M. Huisman, C. Păsăreanu, & N. Zhan (Eds.), Formal Methods (pp. 349–366). Springer International Publishing. https://doi.org/10.1007/978-3-030-90870-6_19
• Alhir, S. S. (2003). Learning UML. O’Reilly Media, Inc.
• Alhumaidan, F. (2012). State Based Static and Dynamic Formal Analysis of UML State Diagrams. Journal of Software Engineering and Applications, 5(7), Article 7. https://doi.org/10.4236/jsea.2012.57056
• Bagnati, E., & Del Bello, A. (2024). Modular UML statechart modelling for simulating the behaviour of production systems with integrated dispatching policies. https://www.politesi.polimi.it/handle/10589/230526
• Basheri, M. (2010). Collaborative Learning of UML-State diagrams using Multi-Touch Technology. Durham University.
• Bowman, A. (2024). Intelligent Student Learning System (iSLS) [M.S.]. https://www.proquest.com/docview/3093581801/abstract/5AFEA474A8464340PQ/1
• Campbell, L. H., & McDonagh, D. (2009). Visual Narrative Research Methods as Performance in Industrial Design Education. Qualitative Inquiry, 15(3), 587–606. https://doi.org/10.1177/1077800408318306
• Chinofunga, M. D., Chigeza, P., & Taylor, S. (2025). How can procedural flowcharts support the development of mathematics problem-solving skills? Mathematics Education Research Journal, 37(1), 85–123. https://doi.org/10.1007/s13394-024-00483-3
• Creately. (2025). Horizontal Flowchart. https://creately.com/diagram/example/jny57xed8/horizontal-flowchart-template Diagramming Powered By Intelligence. (2025). Lucidchart. https://www.lucidchart.com/pages/landing
• Doyle, P. (2002). Believability through context using “knowledge in the world” to create intelligent characters. Proceedings of the First International Joint Conference on Autonomous Agents and Multiagent Systems: Part 1, 342–349. https://doi.org/10.1145/544741.544822
• Draw.io. (2025). https://app.diagrams.net/
• Garzon, S. R., & Louis, B. (2020). Context Flow Graphs: Situation Modeling for Rule-Based Proactive Context-Aware Systems. IEEE Journals & Magazine, IEEE Access, 8, 212939–212960. https://doi.org/10.1109/ACCESS.2020.3040060
• Giuliani, F., Frizziero, L., & Donnici, G. (2024). Industrial Design Structure Plus: Industrial Design Structure Method Implemented with Theory of Inventive Problem Solving and Conceptual Method. https://cris.unibo.it/handle/11585/1006529
• Goldberg, R. P. (1973). Architecture of virtual machines. Proceedings of the Workshop on Virtual Computer Systems, 74–112. https://doi.org/10.1145/800122.803950
• Goldman, D. B., Curless, B., Salesin, D., & Seitz, S. M. (2006). Schematic storyboarding for video visualization and editing | ACM Transactions on Graphics. ACM Transactions on Graphics, 25(3), 862.
• Granfelt, S. A. (2017). A Flowchart Guide For Micro & Small Business [BSc., Arcada]. https://www.theseus.fi/bitstream/handle/10024/125035/Stephan%20Aschwanden-Granfelt.pdf?sequence
• Greenberg, S., Carpendale, S., Marquardt, N., & Buxton, B. (2012). The narrative storyboard: Telling a story about use and context over time. Interactions, 19(1), 64–69. https://doi.org/10.1145/2065327.2065340
• Guiochet, J. (2015). Trusting robots: Contributions to dependable autonomous collaborative robotic systems [Thesis, Université de Toulouse 3 Paul Sabatier]. https://hal.science/tel-01276555
• Harel, D. (1987). Statecharts: A visual formalism for complex systems. Science of Computer Programming, 8(3), 231–274. https://doi.org/10.1016/0167-6423(87)90035-9
• Helin, K., Evilä, T., Viitaniemi, J., Aromaa, S., Kilpeläinen, P., Rannanjärvi, L., Vähä, P., Kujala, T., Pakkanen, T., Raisamo, R., Salmenperä, P., Miettinen, J., & Patel, H. (2007). HumanICT. New Human-Centred Design Method and Virtual Environments in the Design of Vehicular Working Machine Interfaces. VTT Working Papers, 1459(7683). http://www.vtt.fi/publications/index.jsp
• Herman, G. L., & Choi, D. S. (2017). The Affordances and Constraints of Diagrams on Students’ Reasoning about State Machines. Proceedings of the 2017 ACM Conference on International Computing Education Research, 173–181. https://doi.org/10.1145/3105726.3106172
• Hossain, Q., Yasmin, F., Biswas, T. R., & Asha, N. B. (2024). Integration of Big Data Analytics in Management Information Systems for Business Intelligence. Saudi Journal of Business and Management Studies, 9(09), 192–203. https://doi.org/10.36348/sjbms.2024.v09i09.002
• Jacob. (1985). A State Transition Diagram Language for Visual Programming. Computer, 18(8), 51–59. https://doi.org/10.1109/mc.1985.1662976
• Jäger, D., Schleicher, A., & Westfechtel, B. (1999). Using UML for software process modeling. SIGSOFT Softw. Eng. Notes, 24(6), 91–108. https://doi.org/10.1145/318774.318788
• Jonassen, D. H. (2000). Toward a design theory of problem solving. Educational Technology Research and Development, 48(4), 63–85. https://doi.org/10.1007/BF02300500
• Kant, E. (1985). Understanding and Automating Algorithm Design. IEEE Transactions on Software Engineering, SE-11(11), 1361–1374. https://doi.org/10.1109/TSE.1985.231884
• Kim, K., & Lee, K. (2016). Collaborative product design processes of industrial design and engineering design in consumer product companies. Design Studies, 46, 226–260. https://doi.org/10.1016/j.destud.2016.06.003
• Konrad, S., & Cheng, B. H. C. (2002). Requirements patterns for embedded systems. Proceedings IEEE Joint International Conference on Requirements Engineering, 127–136. https://doi.org/10.1109/ICRE.2002.1211541
• Koskimies, K., & Mäkinen, E. (1994). Automatic synthesis of state machines from trace diagrams. Software: Practice and Experience, 24(7), 643–658. https://doi.org/10.1002/spe.4380240704
• Lucidchart. (2025). Lucidchart. https://www.lucidchart.com/pages/landing
• Ma, J., & Yu, S. (1998). Practical rules for reduction on the number of states of a state diagram. Proceedings. Technology of Object-Oriented Languages. TOOLS 26 (Cat. No.98EX176), 46–55. https://doi.org/10.1109/TOOLS.1998.711002
• Micheli, P., Jaina, J., Goffin, K., Lemke, F., & Verganti, R. (2012). Perceptions of Industrial Design: The “Means” and the “Ends.” Journal of Product Innovation Management, 29(5), 687–704. https://doi.org/10.1111/j.1540-5885.2012.00937.x
• Millhouse, T. (2018). Virtual Machines and Real Implementations. Minds and Machines, 28(3), 465–489. https://doi.org/10.1007/s11023-018-9472-7
• Newman, R. M. (1998). A VISUAL DESIGN METHOD AND ITS APPLICATION TO HIGH RELIABILITY HYPERMEDIA SYSTEMS [PhD. Thesis, University of Plymouth.]. https://pearl.plymouth.ac.uk/fose-theses-other/355
• Norman, D. (1986). User-Centered System Design: New Perspectives on Human-Computer Interaction. Lawrence Erlbaum Associates.
• Norman, D. (1988). The psychology of everyday things (pp. xi, 257). Basic Books.
• Olivé, A. (Ed.). (2007). State Transition Diagrams. In Conceptual Modeling of Information Systems (pp. 299–323). Springer. https://doi.org/10.1007/978-3-540-39390-0_13
• Östlund, A. (2022). Telling a story of the future: Using storyboards and narratives to evaluate anticipated experiences. https://urn.kb.se/resolve?urn=urn:nbn:se:sh:diva-49410
• Palovuori, J. (2017). Towards harmonious experiences – A service design approach to evaluating and optimizing multi-touchpoint user experience [MSc.]. https://aaltodoc.aalto.fi/handle/123456789/27146
• Pavel, M. (1978). MICROPROCESSORS IN PSYCHOLOGY: Behavior Research Methods & Instrumentation, 10(2), 238–240.
• R. Ponelis, S. (2015). Using Interpretive Qualitative Case Studies for Exploratory Research in Doctoral Studies: A Case of Information Systems Research in Small and Medium Enterprises. International Journal of Doctoral Studies, 10, 535–550. https://doi.org/10.28945/2339
• Rodda, J., Ranscombe, C., & Kuys, B. (2022). A method to explore strategies to communicate user experience through storyboards: An automotive design case study. AI EDAM, 36, e16. https://doi.org/10.1017/S0890060421000287
• Self, J. A. (2012). The Use of Design Tools in Industrial Design Practice [PhD. Thesis, Kingston University]. https://www.researchgate.net/publication/289674998_The_Use_of_Design_Tools_in_Industrial_Design_Practice
• Shaw, A. C. (1992). Communicating Real-Time State Machines—ProQuest. IEEE Transactions on Software Engineering, 18(9), 805–816.
• Shina, S. G. (2012). Concurrent Engineering and Design for Manufacture of Electronics Products. Springer Science & Business Media.
• Simon, M. (2012). Storyboards: Motion In Art (3rd ed.). Routledge. https://doi.org/10.4324/9780080465951
• Spencer, V. (2025, April 19). Storyboarding for Product Design. Instructables. https://www.instructables.com/Storyboarding-for-Product-Design/
• State diagram. (2025). In Wikipedia. https://en.wikipedia.org/w/index.php?title=State_diagram&oldid=1282429372
• Truong, K. N., Hayes, G. R., & Abowd, G. D. (2006). Storyboarding: An empirical determination of best practices and effective guidelines. Proceedings of the 6th Conference on Designing Interactive Systems, 12–21. https://doi.org/10.1145/1142405.1142410
• Vegte, W. F., & Breemen, E. J. J. (2009). Flowchart-Assisted Function Analysis of Products to Support Teaching of the Exact Sciences. DS 58-10: Proceedings of ICED 09, the 17th International Conference on Engineering Design, Vol. 10, Design Education and Lifelong Learning, Palo Alto, CA, USA, 24.-27.08.2009, 101–112.
• Vizcom AI. (2025, February). Online Artificial Intelligence Visualization Services. https://www.vizcom.ai/ Vpadmin. (2023, March 22). Introduction to State Diagrams: A Comprehensive Guide for Software Engineering. Visual Paradigm Guides. https://guides.visual-paradigm.com/introduction-to-state-diagrams-a-comprehensive-guide-for-software-engineering/
• Wah, B. W., Ieumwananonthachai, A., Yao, S., & Yu, T. (1995). Statistical generalization: Theory and applications. Proceedings of ICCD ’95 International Conference on Computer Design. VLSI in Computers and Processors, 4–10. https://doi.org/10.1109/ICCD.1995.528783
• Wang, J., Ranscombe, C., & and Eisenbart, B. (2024). An integrated prototyping tool to enhance interdisciplinary communication in smart product design. Ergonomics, 1–19. https://doi.org/10.1080/00140139.2024.2418949
• Wang, J., Ranscombe, C., & Eisenbart, B. (2023). Prototyping in smart product design: Investigating prototyping tools to support communication in the early stage smart product development. International Journal of Design Creativity and Innovation, 11(3), 159–184.
• Welte, T. M. (2009). Using State Diagrams for Modeling Maintenance of Deteriorating Systems. IEEE Transactions on Power Systems, 24(1), 58–66. https://doi.org/10.1109/TPWRS.2008.2005711
• Weng, W. (2024). Flowchart. In W. Weng (Ed.), A Beginner’s Guide to Informatics and Artificial Intelligence: A Short Course Towards Practical Problem Solving (pp. 13–20). Springer Nature. https://doi.org/10.1007/978-981-97-1477-3_2
• Willett, D. L., Pandey, A., Ifejika, Nn. L., Kannan, V., Berry, J. D., & Basit, M. A. (2018). State Diagrams for Automating Disease “Risk Pyramid” Data Collection and Tailored Clinical Decision Support. Proceedings of the 2018 ACM International Conference on Bioinformatics, Computational Biology, and Health Informatics, 551–552. https://doi.org/10.1145/3233547.3233660
• Wynn, D. C., & Eckert, C. M. (2017). Perspectives on iteration in design and development. Research in Engineering Design, 28(2), 153–184. https://doi.org/10.1007/s00163-016-0226-3
• GÖRSEL KAYNAKLAR: Figure 1: Spencer, V. (2025, April 19). Storyboarding for Product Design. Instructables. https://www.instructables.com/Storyboarding-for-Product-Design/ Figure 2: Creately. (2025). Horizontal Flowchart. https://creately.com/diagram/example/jny57xed8/horizontal-flowchart-template Figure 3: Left-State diagram. (2025). In Wikipedia. https://en.wikipedia.org/w/index.php?title=State_diagram&oldid=1282429372 Right- Author’s work Figure 4: Vpadmin. (2023, March 22). Introduction to State Diagrams: A Comprehensive Guide for Software Engineering. Visual Paradigm Guides. https://guides.visual-paradigm.com/introduction-to-state-diagrams-a-comprehensive-guide-for-software-engineering/ Figure 5: Author’s drawings Figure 6: Author’s drawings Figure 7: Author’s drawings Figure 8: Author’s drawings Figure 9: Author’s drawings Figure 10: Author’s drawings
• INTERNET KAYNAKLARI
• Creately. (2025). Horizontal Flowchart. https://creately.com/diagram/example/jny57xed8/horizontal-flowchart-template
• Diagramming Powered By Intelligence. (2025). Lucidchart. https://www.lucidchart.com/pages/landing
• Draw.io. (2025). https://app.diagrams.net/
• Lucidchart. (2025). Lucidchart. https://www.lucidchart.com/pages/landing
• Spencer, V. (2025, April 19). Storyboarding for Product Design. Instructables. https://www.instructables.com/Storyboarding-for-Product-Design/
• State diagram. (2025). In Wikipedia. https://en.wikipedia.org/w/index.php?title=State_diagram&oldid=1282429372
• Vizcom AI. (2025, February). Online Artificial Intelligence Visualization Services. https://www.vizcom.ai/
• Vpadmin. (2023, March 22). Introduction to State Diagrams: A Comprehensive Guide for Software Engineering. Visual Paradigm Guides. https://guides.visual-paradigm.com/introduction-to-state-diagrams-a-comprehensive-guide-for-software-engineering/