A graphical description and formal representation of the web resource interface development process are carried out using functional modelling, utilizing the IDEF0 methodology.
An information system prototype is an initial version of the system created to showcase its key elements and functionality. Prototyping is intended for demonstrating concepts, verifying requirement variations, and identifying potential issues. The primary idea of prototyping is to quickly create a working model of the system to allow users and stakeholders to interact with it. The prototype also provides a visual demonstration of the system’s main functions and operations, helping stakeholders and users better understand how the system will work in practice.
A context diagram is developed, consisting of a rectangle indicating the main system function and four types of boundary arrows: input (need for development), output (developed prototype at the high-fidelity level), control (normative-technical and technological documentation; specification), mechanisms (hardware and software, including Figma, Google Docs; UX/UI designers, testers). The context diagram is divided into six main functional blocks: to analyse competitor websites, to study the target user audience, to create personas, to create empathy maps, to create story maps, to create design. Relationships between them are illustrated. Decomposition of each functional block of the first-level decomposition diagram is carried out, resulting in six second-level decomposition diagrams. A hierarchical multi-level tree diagram is developed, containing functional blocks of all levels of decomposition and reflecting the structure of the IDEF0 functional model.
Keywords: prototype, interface, website, functional model, IDEF0 model.
doi: 10.32403/1998-6912-2024-1-68-13-22
- 1. Lamanskyi, Ye. A., & Horchynskyi, S. V. (2018). Design veb-saitu elektronnoho metodychnoho kompleksu navchalnoi dyscypliny: Visnyk Chernihivskoho natsionalnoho pedahohichnoho universytetu. Seriia: Pedahohichni nauky, 155, 52–56 (in Ukrainian).
- 2. Kovalivska, A. V., & Dombrovskyi, M. Z. (2022). Rozrobka dyzainu veb-oriientovanoi systemy inkluzivnoi sotsialnoi vzaiemodii. Mizhnarodna naukova internet-konferentsiia «Informatsiine suspilstvo: tekhnolohichni, ekonomichni ta tekhnichni aspekty stanovlennia»: tezy dopovidei (8–9 hrudnia 2022 r.). Ternopil, 49–54 (in Ukrainian).
- 3. Fan, Kh. M. (2017). Proektuvannia veb-saita dlia suchasnoi fotoshchadii z vykorystanniam novitnikh dosiahnen veb-dyzainu: Naukovi rozrobky molodi na suchasnomu etapi. Kyivskyi natsionalnyi universytet tekhnolohii ta dyzainu, 450–451 (in Ukrainian).
- 4. Kudriashova, A. V., Lyshak, O. M., & Panchyshyn, O. O. (2021). Elementy stratehii rozroblennia informatsiinykh resursiv. VI Mizhnarodna naukovo-praktychna konferentsiia «Informatsiini tekhnolohii v kulturi, mystetstvi, osviti, nauk tsii, ekonomitsi ta biznesi»: materialy konferentsii (Kyiv, 22–23 kvitnia 2021 r.). Kyiv : Vydavnychyi tsentr KNUKiM, 86–88 (in Ukrainian).
- 5. Senkivskyy, V. M., Pikh, I. V., & Kudriashova, A. V. (2020). Systematyzatsiia faktoriv prototypuvannia veb-resursu. Informatsiini tekhnolohii i avtomatyzatsiia. XIII Mizhnarodna naukovo-praktychna konferentsiia: tezy dopovidei (Odesa, 22–23 zhovtnia 2020 r.). Odes. nats. akad. kharch. tekhnolohii. Odesa, 304–306 (in Ukrainian).
- 6. Shakhovska, N. B., & Lytvyn, V. V. (2011). Proektuvannia informatsiinykh system. Lviv: «Magnoliia-2006» (in Ukrainian).
- 7. Senkivskyy, V. M., Pikh, I. V., & Kudriashova, A. V. (2021). Modeli faktoriv prototypuvannia veb-resursu. U monohrafii «Na shliakhu do industrii 4.0: informatsiini tekhnolohii, modeliuvannia, shtuchnyi intelekt, avtomatyzatsiia», kol. avt.: V. B. Artemenko, L. V. Artemenko, O. V. Artemenko [ta in.]; za red. S. V. Kotlyka. Odesa : Astroprint (340–354) (in Ukrainian).
- 8. Cooper, A., Reimann, R., Cronin, D., & Noessel, C. (2014). About face: the essentials of interaction design. John Wiley & Sons (in English).