Interactive methods in blended learning of the fundamentals of UI/UX design by pre-service specialists Interactive methods in blended learning of the fundamentals of UI/UX design by pre-service specialists Liudmyla I. Bilousova1, Liudmyla E. Gryzun2 and Natalia V. Zhytienova3 1Independent researcher, Professor, Kharkiv, Ukraine 2Simon Kuznets Kharkiv National University of Economics, 9A Nauky Ave., Kharkiv, 61166, Ukraine 3H. S. Skovoroda Kharkiv National Pedagogical University, 2 Valentynivska Str., Kharkiv, 61168, Ukraine Abstract. The problems of blended learning implementation in the context of university students training in the subject domain of UI/UX design are discussed in the paper. Based on the literature review and educational practice analysis, it is revealed that the elaboration of the proper learning activities and methods is underestimated and overseen by the researchers and practitioners of blended learning implementation. It is admitted the urgency of finding out proper learning techniques (or their combination), which are necessary to involve the university students into interactive forms of work in order to overcome the core challenges of the blended learning implementation, and to add classroom atmosphere into the tutorial process in terms of online studying. In the progress of work, there were analyzed the core features and challenges of blended learning, and covered the possibilities of interactive methods in blended learning implementation into the tutorial process of students’ mastering of UI/UX design basics, according to authors’ approach to their curriculum building. The experience of interactive methods practical realization in the process of the fundamentals of UI/UX design learning by university students of different specialties is presented. It was demonstrated how the considered leaning techniques which are typically used at blended learning in its flex model (flipped learning, gamification, storytelling etc.) can be enhanced and enriched via using different interactive methods. Exact examples of their applications in real blended learning process are given and discussed. The prospects of the research are outlined. Keywords: blended learning, fundamentals of UI/UX design, potential specialists’ training 1. Introduction Due to the risk of the recent pandemic and involvement into military conflict, educational establishments of Ukraine are facing the troubles how to continue tutoring process while keeping their staff and trainees safe. One of the options in these situations might be blended learning implementation with the focus on choosing its proper model with best practices tailored to our national reality. " Lib215@ukr.net (L. I. Bilousova); Lgr2007@ukr.net (L. E. Gryzun); melennaznv@gmail.com (N. V. Zhytienova) ~ http://web.archive.org/web/20201027120942/http://hnpu.edu.ua/uk/bilousova-lyudmyla-ivanivna (L. I. Bilousova); https://kafis.hneu.net/grizun-lyudmila-eduardivna/ (L. E. Gryzun); http://hnpu.edu.ua/en/zhytyenova-natalya-vasylivna (N. V. Zhytienova) � 0000-0002-2364-1885 (L. I. Bilousova); 0000-0002-5274-5624 (L. E. Gryzun); 0000-0002-3083-1070 (N. V. Zhytienova) © Copyright for this paper by its authors, published by Academy of Cognitive and Natural Sciences (ACNS). This is an Open Access article distributed under the terms of the Creative Commons License Attribution 4.0 International (CC BY 4.0), which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited. mailto:Lib215@ukr.net mailto:Lgr2007@ukr.net mailto:melennaznv@gmail.com http://web.archive.org/web/20201027120942/http://hnpu.edu.ua/uk/bilousova-lyudmyla-ivanivna https://kafis.hneu.net/grizun-lyudmila-eduardivna/ http://hnpu.edu.ua/en/zhytyenova-natalya-vasylivna https://orcid.org/0000-0002-2364-1885 https://orcid.org/0000-0002-5274-5624 https://orcid.org/0000-0002-3083-1070 https://acnsci.org/journal https://creativecommons.org/licenses/by/4.0 https://acnsci.org Educational Technology Quarterly, Vol. 2021, Iss. 3, pp. 415-428 https://doi.org/10.55056/etq.34 According to studies, the concept of blended learning is understood as a combination of in-person education and online opportunities, when materials are presented and worked out online but with the typical (conventional) classroom spirit [11]. Despite the definite advantages of blended learning (openness of the access to education, flexibility, increasing of trainees’ motivation and independence etc.) and numerous attempts to implement blended learning activities into conventional education, there are surveys which report about the problems and challenges of such an experience [3]. Among the reasons there are called the lack of proper awareness about the blended learning paradigm and not satisfactory didactic and methodological provision for its successful implementation in the context of current educational process. The situation is complicated with the necessity to deploy tutoring process under the terms of stressful time caused by pandemic and war. It is also pointed out, that in order to succeed, the correct blending of the conventional and online educational delivery needs to be realized first. Conventional approaches to the learning aids creation, educational content design, and techniques of tutoring do not totally suit blended learning paradigm. This causes necessity of understanding of the core requirements for the proper model of the blended learning introducing into practice. According to the studies [1, 3, 11], blended learning environment demands consolidation of proper software and hardware base, and a high-speed network that will enable efficient combination of online and conventional learning. However, it is felt that the elaboration of the proper learning activities and methods is under- estimated and overseen by the researchers and practitioners of blended learning implementation. Thus, it looks really essential to find out proper learning techniques (or their combination), which are necessary to involve the students into active forms of work in order to overcome the core challenges of the blended learning implementation, and to add classroom atmosphere into the tutorial process in terms of online studying. Especially, it seems to be essential in the context of various specialists’ training at universities. The aim of the paper is to analyze the core features and challenges of blended learning, to cover the potential of interactive methods in blended learning implementation, and to highlight the experience of their practical realization in the process of the fundamentals of UI/UX design learning by university students of different specialties. 2. Theoretical framework Theoretical background of the work is made by the analysis of the (1) core features of blended learning, (2) basic approaches to the learning of the fundamentals of UI/ UX design in the training of different specialists, and (3) common learning techniques used in the practice of blended learning. Analysis of the main advantages and peculiarities of blended learning and its basic models of implementation, made regarding the recent studies, will enable to find out proper solutions for exact cases of blended learning of the UI/UX fundamentals. As it was said above, blended learning is understood as a combination of face-to-face education and virtual learning, when materials are presented and worked out online but with some features of typical classroom studying. Thus, the great deal of blended learning is made by digitalized 416 https://doi.org/10.55056/etq.34 Educational Technology Quarterly, Vol. 2021, Iss. 3, pp. 415-428 https://doi.org/10.55056/etq.34 learning with the help of networking platforms. According to studies [10, 12], the main aim of the virtual learning is to enable the access to education in a simple and flexible way via the Internet in order to achieve personal educational goals. The final result of virtual learning use is to provide distant learning supported by an online learning management system. These online systems assist students to obtain the necessary materials and trainers’ responses at their outworking from any point with the Internet access when it is necessary. In terms of blended learning, this model is called online driver [12]. However, it is pointed out that this approach is not efficient enough, as the students’ learning activity is not directed by the affiliated educational staff. The most appropriate for higher education seemed by the researchers to be two other blended learning models: flex model (concentration mostly on the online learning provided by trainers’ support during online classes on a flexible basis with attraction of the combination of different learning activities and rotation model (interchange of in-person and online learning). Their main advantages are their quite high degree of the control over the students’ learning, and high level of customizing and flexibility, as the trainees are provided with learning techniques and platforms designed on purpose for them regarding blended learning strategy. In particular, the researchers and practitioners [1, 13] point out that the learning systems in flex and rotation models should be developed based on deep understanding of the peculiarities of the national educational systems, tutoring processes, trainees’ profiles etc. We would also include into the influential factors of successful and efficient implementation of blended learning in its flex and rotation models the factor of minding the specifics of the subject domain and the subject itself, because the variation of majors and subjects differs a lot. Thus, the blended learning of the specific subject has to involve the trainees into special kinds of learning activities which are beneficial for shaping the set of knowledge and skills in exactly this subject domain and for the trainees of the exact major. The said learning activities must be selected in accordance with the proper educational content also designed regarding the peculiarities of training these or that major. In this context, we would like to concentrate on giving our understanding of the features and approaches to learning of the UI/ UX design fundamentals in the training of different specialists. The focus on the educational challenges in this field is caused by the evidence of the national course on the digitalization of economy which raises the urgency of the training high level specialists in different areas who have advanced digital skills. Among such skills there is a competence in the field of user interface and user experience design (UI/UX design) which is essential today for a wide range of professionals from pure IT specialists to the experts in digital products development, marketing and human-computer interaction. In our earlier works we presented special approach to the curriculum building for students’ training in this area which was elaborated with understanding that UI/UX design is complicated subject domain that integrates the set of related areas, like graphical design, software develop- ment, digital products promotion, psychology, engineering, ergonomics and others. Thus, a designer is expected to master special inter-discipline knowledge and skills. Characterizing our approach to the curriculum and educational content building for potential specialists’ learning of the basics of UI/UX design, we would point out that it was also created based on the analysis of the essence of the UI/UX design and role of its mastering in the vocational training of different specialists. 417 https://doi.org/10.55056/etq.34 Educational Technology Quarterly, Vol. 2021, Iss. 3, pp. 415-428 https://doi.org/10.55056/etq.34 In fact, the UI design rather focuses on the product appearance and supplies exactly interaction functions [2]. UI design is developed on some core regulations shaped regarding mostly the psychological features of the human perception of information, influence of visual language on this process, peculiarities of human interaction with devices and their software [6]. UX design differs from UI type of design. It is understood by the experts as a tool for provision of the best user’s impression, practice and satisfaction of the interaction with the product of any kind [7]. It rests on the deep understanding of the user’s profile, their needs and requirements; functionality of the product; possible user’s behavior etc. However, the both types of design are two sides of the same process and serve the same purpose of the best final marketing result, using different means. Hence, the mastering of the UI/UX fundamentals by the students of different branches should rest on understanding of some unique postulates and common instruments, and at the same time reflect the state-of-art tendencies in design shaped in different branches. Thus, it was offered the practically-driven approach to the building of educational content for learning of UI/UX design basics which expects separation of the two parts (stable and varying) in the curriculum of the potential specialists’ training. The stable part includes the modules covering general fundamentals of the design that rest on common principles and must be mastered by the designers in any sphere. It was justified [2] the structure and content of three academic modules of the stable part of the curriculum. The first module “Psychological base of visual perception” is aimed at forming the students’ knowledge for realizing the psychological mechanisms and features of visual information perception. In addition, in the module it is discussed widely the psychological significance of the graphical image semantics due to the involvement of various information channels (logical, aesthetic, semantic) and their roles in the shaping of visual image in human mind [6, 7]. Next module “Graphic interface design” of the stable part is dedicated to mastering basics of the graphical interface creation based on the principles of visual language application. Here it is learnt how to create and render the interface ideas using colors, typography, imagery, bootstraps etc., how to add visual anchors, and how to make interface function smoothly and in user-centric way. Thus, the module gives the trainees understanding of the peculiarities of both types of design and at the same time, their joint role in the successful interface creation. The final module “Tools for interface design” of the stable part of the UI/UX design university curriculum is expected to focus on practical work in one of the common environments (for example, in Figma) for the interface development. In fact, Figma is known an online design tool which enables to make mockups, interactive animations, and efficient apps prototypes [2, 6]. Figma environment also arranges version control, joint work opportunities, code generation and other essential features. In such a way, regarding Figma facilities, the process of the clickable prototype design is greatly coordinated with the multi-step process towards the software development, demonstrating the role of both UI and UX design at each stage of this practice. This promotes cultivating of the best experience for potential designers in any sphere. Thus, Figma is seen to be a state-of-art universal instrument of a designer and it is really beneficial for the trainees of different majors to master basics of UI/UX design on Figma platform. Finally, resting on the psychological knowledge and design skills obtained in the previous modules, the students will apply this methodology within the third module to produce a digital prototypes of their apps, working out the UI/UX design mastery. 418 https://doi.org/10.55056/etq.34 Educational Technology Quarterly, Vol. 2021, Iss. 3, pp. 415-428 https://doi.org/10.55056/etq.34 The stable part of the UI/UX design curriculum of the potential specialists’ training, according to our approach to the building of educational content, must be extended by the modules of varying part. They are recommended to concentrate on the learning other special tools appropriate for solving interface design problems in different subject domains including the facilities of a number of environments (such as Adobe Photoshop, Adobe XD, InVision, Sketch, Adobe Illustrator etc.) [2]. In the context of blended learning in any subject domain and within any model of blended learning, it is essential to pick up proper learning techniques, which causes necessity to analyze common ones available in the practice of blended learning. According to recent studies [1], there are some attempts to create the system of blended learning activities which might provide trainees with a total learning model, successfully using digital technologies and blending them with conventional learning techniques. In the terms of blended learning, in particular, it is pointed out the benefit of using the system of the learning methodologies such as flipped learning approach, gamification strategy, digital storytelling, team work, cooperative learning and others. However, other researchers argue that these kinds of learning activity systems must be innovated in the lines of introducing rather interactive methods of blended learning regarding the challenges in terms of efficient communication [1, 4]. Thus, it was built necessary theoretical framework of the work. In order to implement successfully blended learning of the UI/UX design fundamentals, according to the presented content of learning, it is necessary to pick up proper learning activities (or their combinations) and elaborate proper interactive methods of learning, based on the analyzed features of blended learning and common learning techniques used in the practice of blended learning, which makes the main part of our research. 3. Results and discussion Basing on the provided theoretical framework, we will cover distinguished learning methodolo- gies (flipped learning approach, gamification strategy, digital storytelling, cooperative learning etc.) within the flex model of blended learning, and we will try to enrich them with interactive methods, which can make them more effective in terms of communication efficiency. Flipped learning is depicted by experts as an educational approach where the conventional outlook of classroom-based studying is inverted in the lines of offering trainees to master the learning material before the classroom time [4]. Thus, students arrive at class being ready to discuss the familiar content with their peers and teacher that enables deeper understanding through debating and problem-solving activities facilitated by the teacher. In terms of blended learning, flipped classroom is seen to be quite organic and commonly applicable. However, it demands special teacher’s efforts to arrange and facilitate students’ interaction (discussion, collective problem-solving, efficient feedback etc.) during online classes on the basics of UI/UX design. One of the other learning methodologies which are available in blended learning is gami- fication strategy which enables to apply game-playing practices used in non-game contexts. It is pointed out, that introducing game elements into educational plane stimulates students’ 419 https://doi.org/10.55056/etq.34 Educational Technology Quarterly, Vol. 2021, Iss. 3, pp. 415-428 https://doi.org/10.55056/etq.34 essential needs for their motivation (in particular, the needs to interact and collaborate with other people, to feel own expertise in some environment, and to control individual actions). According to studies, gamification techniques implementation is able to promote collaboration and raise communication, which is significantly important for flex model of blended learning. Some researchers also emphasize the essential feature of the strategy to apply game-based mechanisms and game thinking to diversify learning, to raise students’ eagerness to study, and solve offered non-conventional problems [14]. Besides the common application of the gamification methodology, for blended learning there might be also beneficial to use a gamification variant in the lines of the encouraging students to design a gamified product. Such an activity enables to trigger off gamification mechanisms, on condition of having enough importance for the trainees, involved into the creation of the gamified product, which can stimulate their sense of discovery and encourage them to master challenging material to develop a good product. At the same time, according to the theoretical background of the gamified products development [5], the trainees have to follow some principles which are meaningful in the context of the UI/UX design learning. In particular, it is essential for a potential user of the gamified product to feel that the game has a feasible goal exactly for him. Therefore, the product must have clear reward system and demonstrate individual user’s progress along with its identification within other players who try to achieve the same target. It should make both competition and a feeling of belonging to a similar minded community. In addition, it is necessary to mind at the design of a gamified product that its main aim is to stimulate users to play the game trying to overcome difficulties in order to raise their scores. Thus, gamification strategy application to blended learning of UI/UX design basics can be really beneficial on condition of its didactically correct using. Next learning technique which is recommended to be used in blended leaning is digital storytelling. In common sense digital storytelling is a practice when people apply digital tools to tell and share their narratives which have a special purpose and devoted to important topic, presented in emotional way, and can be interactive. A digital story can be determined as a multimedia presentation that comprises a variety of digital components to convey the target audience a narrative. Besides, digital narratives may be presented as web-based stories, interactive stories, narrative computer games and other types of multimedia products [8]. According to studies and evidence [8, 9], the digital storytelling approach has also been introduced in education. Merging images, sounds and plot within digital story enables to reinforce concepts being appropriate to different learning types of trainees. It is pointed out that digital storytelling can be used by educators with different didactic purposes: to introduce new learning material, to facilitate its discussion by students, to help them get a deeper understanding of complicated concepts etc. In addition, students can be also encouraged to create their own digital stories devoted to some learning elements and pursuer a certain pedagogical aim. Such learning activity can provide important benefits for the students. Through the stories making they have to analyze, synthesize, and finally to take ownership of the information they are presenting. These things provoke higher-level thinking and raise responsibility. In this context, comic-based digital storytelling can play significant role. In particular, it is underlined that student-generated comic-based digital story is a learning technique when trainees create personalized comics to achieve a didactic purpose. This activity can facilitate mastering difficult (or controversial) 420 https://doi.org/10.55056/etq.34 Educational Technology Quarterly, Vol. 2021, Iss. 3, pp. 415-428 https://doi.org/10.55056/etq.34 academic material and work out their research skills [13]. Finally, created by the students digital stories of any type may be used as efficient learning aids and curricular resources. Among different activities applicable to blended learning, group work plays special role. Group work (or cooperative learning) is characterized as an instructional strategy when groups of trainees work together upon a common assignment. Usually, each group participant is individually responsible for a part of the task and has to contribute into the common result. There are some key points which ensure the success of the group work: students should feel responsibility for their share of work and interdependence on the results of other peers; the group should be accountable for achieving its goal; face-to-face students’ interaction and mutual support; group participants should obtain instructions in the interpersonal, social, and collaborative skills necessary to work with others. It is clear that some of the mentioned key points are really challenging in terms of their realization at blended learning. Some challenges also include assessing of the each person’s contribution, resolving conflicts etc., which demands development of special learning strategies. Carefully prepared activities can help students obtain the skills to work together successfully, structured discussion and reflection on group work can predict and avoid some problems. Thus, as it was mentioned above, the discussed kinds of blended learning activities should be innovated with the help of introducing interactive methods of learning to raise the level and quality of communication. According to Edgar Dale’s cone of experience, we can conclude in favor of interactive methods, that after two weeks we tend to remember 50% of the material that we see and hear (option of passive learning) and up to 90% of what we say and do ourselves (option of active learning) [4]. In contrast to just active learning, interactive approach provides trainees’ interaction not only with the teacher but with each other as well. It is characterized by the researchers as a form of learning and communicative activities in which trainees are involved into contemplation on their own knowledge, estimation of their own abilities, skills etc. in comparing with their peers. Teacher’s role changes drastically, as the interactive learning concentrates rather on the trainees’ interests, needs, and abilities. Learners become active participants of the tutoring process and not only perceive information. Being engaged by the learning activity and based on their experience, students have to activate their knowledge and abilities, earn new skills, shape their attitude towards learnt material, and express their opinions. The teacher’s mission in interactive learning is shifted towards achieving the students’ goals. The teacher has to arrange interactive forms of work and tasks, working upon which students receive new information, and an individual assignment is transformed into a group task where each member of the group contributes to the whole group’s success. Some basic types of interactivity are distinguished by the researchers: (1) individual inter- action of the student and the learning object that leads to the student’s intellectual progress; (2) interaction between the trainee and the teacher who encourages trainee’s motivation via offering them exciting learning material and stimulating to apply knowledge for solving specific tasks; (3) interaction between students and teacher that expects involving the students into the interaction among themselves, an individual student with other students in the group, in the presence of the teacher or without him in real time [4]. It is obvious that the last type of interaction provides the highest level of the students’ involvement in to the learning activity. At the same time, it seems to be the most complicated 421 https://doi.org/10.55056/etq.34 Educational Technology Quarterly, Vol. 2021, Iss. 3, pp. 415-428 https://doi.org/10.55056/etq.34 to realize especially in terms of blended learning. Full participation of students in the interactive learning process is guaranteed by application of certain teaching methods. In fact, there is no general classification of the interactive teaching methods. However, it is possible to distinguish some methods which are widely used in practice and have special meaning in the context of their application in terms of blended learning in higher education. These methods may include lectures of selected kinds (enquiry-based, with deliberate errors, with the analysis of the specific situation etc.); game methods (business games, imitations, role-playing); debate methods (mini-conferences, seminars, Socratic dialogue, case studies); group solution method; project making. In this part of the work, it is planned to demonstrate how the typical blended learning activities (flipped learning, gamification, storytelling etc.) can be enriched with interactive methods in the process of blended learning of UI/UX design within the curriculum modules presented above. For mastering the first module which is devoted to psychological fundamentals of visual perception that makes necessary basis for UI/UX design we applied mostly flipped learning and gamification strategies which were enriched by various interactive methods. For example, one of the flipped learning lectures on the topic of psychological mechanisms of data perception was arranged in the form of online mini-conference. There were assigned (in advance) different tasks to the pairs of students to learn proper theoretical material on the features of different data perception, to find out proper examples which illustrate peculiarities of human vision and their connection with interface design, and to elaborate presentation to take part in the mini-conference both as presenters and listeners. For instance, one of the students’ pairs had to learn physiological background of human perception of printed information. The students worked independently with digital sources to understand how our velocity of reading depends on the number of characters available for perception by our vision, and how this feature can be accounted at the interface design. During the flipped learning lecture hold in the form of online mini-conference which aimed at the exchange of results of the tasks assigned to different pairs of students, this pair gave a presentation on the results of their findings. In particular, they explained that the efficiency of reading depends in linear way on the amount of characters visible by eyes, and covered the reason of this fact based on psychological underlying of human eyes’ parabolic movements similar to discrete leaps between words during reading. They also attracted the listeners’ attention to the paradox of this cognitive and psychological phenomena, because despite their non-smooth nature, our eyes jumps improve our reading abilities, as we use the sense of skipped adjacent context to decrease the time of our comprehension of the read information. The rest of the students who were listeners at the moment, were encouraged by the presenters and the teacher to discuss the connection of these findings with the problems of efficient interface. In particular, the listeners were attracted to speculation and making conclusions on the (1) efficiency of perception of isolated words and words connected into the long phrase; (2) the difference between task-driven and content-driven user interface; (3) the dependence of the efficiency of text comprehension in these types of interface; (4) the typographic decision- making at the interface design etc. In the end, the students-presenters supported the prepared discussion with the visual examples of the both types of user interface illustrating fruitful and non-fruitful using of these psychological peculiarities. 422 https://doi.org/10.55056/etq.34 Educational Technology Quarterly, Vol. 2021, Iss. 3, pp. 415-428 https://doi.org/10.55056/etq.34 In similar way there was also arranged presentations of the results of the flipped learning tasks by the rest of the students’ pairs with involvement other listeners into similar interactive debates. The group solutions finding during these mini-conferences within the first module were productively used by the students while their mastering subsequent modules. In addition, according to our own experience, it is recommended to immerse the whole tutorial process into the environment which is able to realize efficiently gamification strategy. It may be, for example, game online environment Classcraft. The environment allows to maintain gamification approach during any academic period, and enables any student to go through the course sections individually or within the group, overcoming practical tasks, tests, and quests, specially prepared by the teacher for all the course modules, and obtaining game bonuses of different types. In order to add interactivity into this gamified blended learning, we arranged the role playing game within Classcraft and involved individual students into the team role game, when each student should choose a character (a role of a Wizard, Warrior, Healer etc.) with proper skills, and cooperatively learn a topic via doing quests. The quests were prepared regarding the educational content and didactic purpose of the module. For example, during the work within module “Graphic interface design” there were prepared the quests on the number of topics. One of them was the quest “Brief creation for UI design” which encouraged students to go through some quest stations. To overcome “Avatar” station, it was necessary to identify a character (in fact, a potential user) who is a target audience for the designing interface. The second station “Competitors” involved the students into analysis of the possible competitors of the interface design for potential user and sphere of their activity. Next quest station expected students to develop a chart of basic use cases for the developing interface. The final quest station “Visualization” encouraged students into determination of proper color palette and fonts as well as into picking up certain tools for the realization of different stages of the interface design regarding the analysis results obtained in previous quest stations. At each quest station the students received specified tasks with exact scheme of actions. For example, at “Competitors” station (figure 1) the trainees’ were focused on the analysis of strong and weak points of the competitors’ interface design with subsequent concentration on successful and non-fruitful design solutions which led students to their unique design outlook for the identified user. The episode of work upon the tasks on the competitors’ analysis at the quest station “Competitors” in the team quest “Brief creation for UI design” is presented at the figure 1. While overcoming the learning quests in the team, each student applied his skills regarding his role and tried to contribute the best into his team success, doing quest tasks and obtaining different bonuses (Experience Points, Gold Pieces, Crystals, and Health) which gave the par- ticipants various additional opportunities and helped their team to achieve common learning result in the most efficient way. Besides the described team roleplaying on doing practical tasks of the quests in the Classcraft, the students were also offered to solve the Boss Battles tests (figure 2) in the same game environment with the option of both individual and team work, which is the most beneficial in terms of blended learning. Doing the tests by the whole team definitely raised the students’ interactivity, as only the joint and thought over efforts of each team member could bring the success to the team. In addition, Boss Battles option enables team members to give and get 423 https://doi.org/10.55056/etq.34 Educational Technology Quarterly, Vol. 2021, Iss. 3, pp. 415-428 https://doi.org/10.55056/etq.34 Figure 1: The episode of work upon the tasks of the quest station “Competitors” in the team quest “Brief creation for UI design”. Figure 2: The episode of the Boss Battles test solving in Classcraft environment in the course of interface design basics. mutual help while test doing, which increases the common responsibility and brings up team spirit. Working in the Classcraft gamified environment, it is also recommended to arrange students’ group work upon specific real-life task. For example, within the third module devoted to mastering Figma tools for interface design it is relevant to assign the students to create in Figma a dynamic prototype of the site with landing pages. The full assignment may be formulated in such a way. Imagine, that you are director of Kava company which is a new player in the coffee trade market. The company buy coffee beans from Latin America, fry, blend, and mix them ourselves. At the 424 https://doi.org/10.55056/etq.34 Educational Technology Quarterly, Vol. 2021, Iss. 3, pp. 415-428 https://doi.org/10.55056/etq.34 moment, you have three ready-made blends that we sell, and you are working on adding three new ones. The company is focused on the retailers, but you also have an offer for specialized retail chains, restaurants and other wholesalers. The company want to create a site to talk about coffee, about the company, our services, offers etc. In addition, the company is going to sell ready-made blends through the site. To solve this real-life problem and make a full-functioning dynamic site prototype in Figma, we offered students to create three groups, according to the roles which are typically fulfilled by UI/UX designers at the different stages of the prototype developing. Therefore, there were selected the groups of Analytics, Developers, and Testers. The didactic benefit of such group work on Classcraft platform in terms of blended learning is seen in following. Each group has to realize perfectly well the aim and essence of work at each stage of the prototype creation, and to allocate the roles inside the group correspondently. Thus, the students (with the teacher’s help) have to interact with each other within the group in order to discuss and understand its specific task, final goal of the whole group, and the importance of their results for the success of other two groups who realize their own mission in the iterative process of the dynamic prototype development. For example, the group of Analytics should be encouraged by the teacher to hold debates with the help of, for instance, Socratic method of discussion as a kind of cooperative argumentative discussion based on asking and responding questions to provoke students’ critical thinking and come with fruitful ideas. The set of questions for discussion by the Analytics during the understanding of their group mission should include: (1) Who are our potential users? What may be their age, education, needs, preferences etc.; (2) What tasks do the users want to solve via the site? How are they going to solve their problems? (3) Which benefits from the users’ standpoint can the site interface provide? (4) How to collect the said data from the users? (5) How can the collected information about users and their potential behavior on the site help the group of Developers? Is it essential also for Testers group? and others. As a result of these argumentative debates, the group can obtain comprehensive understanding of their role in the whole iterative process of the prototype design, and can easily allocate the roles within the group with understanding by each member their own duties, responsibilities and scope of necessary interaction with members of other groups. Similar debates are necessary to prepare and hold in other groups. At some stages of work, it is also important for the teacher to make interact all the groups together in order to analyze the middle results of group work, such as Use Case diagram, Sequence diagram, mockups etc. built by the Developers group basing on the recommendations of the Analytics group. It will help to correlate the previous Analytics work, improve the Developers work immediately and avoid drawbacks and mistakes which may be revealed by the Testers group. Digital storytelling as a common blended learning technique was also implemented in the process of UI/UX design mastering within all the modules. We would like to demonstrate the example of creation of student-generated comic-based story in the progress of learning psychological basics of interface design which had a didactic purpose to investigate the influence of color pallet on the emotional stay of a user and implementation of its impact in the interface development. At the initial step of the comics’ creation the students were encouraged to discuss in group the issues which could help guide them during this creative task: (1) What is the aim of telling 425 https://doi.org/10.55056/etq.34 Educational Technology Quarterly, Vol. 2021, Iss. 3, pp. 415-428 https://doi.org/10.55056/etq.34 your story? (2) Who is the target audience of your digital story? (3) What feelings and ideas would you like to convey to the audience? (4) How can you sequence the story with a beginning, middle part and final? (5) Which tools could be used to create your digital comic-based story? etc. After this group solution findings, the students came to the core stage of the digital story making, according to their plot, and applying some of the graphic design tools on their choice. Then, the groups of students demonstrated their comics and “told” their digital stories on the said topic during online practical classes. Episodes of one of student-generated comic-based digital stories where trainees expressed their ideas for associated meaning of different colors are given in figure 3. Figure 3: Episodes student-generated comic-based digital story where trainees expressed their ideas for associated meaning of different colors in interface design. At the same time, other students were involved into the critical watching of their peers’ work. In fact, ready-made digital stories were used at this stage as cases that enabled to involve all of the students into productive case studies, which added interactivity in the storytelling learning approach. In addition, the said digital stories can be successfully used as didactic aids for further generations of students, for instance, as an initial countdown of their work. 4. Conclusions The problems of blended learning implementation in the context of university students training in the subject domain of UI/UX design are discussed in the paper. Based on the literature review and educational practice analysis, it is revealed that the elaboration of the proper learning activities and methods is underestimated and overseen by the researchers and practitioners of blended learning implementation. It is admitted the urgency of finding out proper learning techniques (or their combination), which are necessary to involve the university students into interactive forms of work in order to overcome the core challenges of the blended learning implementation, and to add classroom atmosphere into the tutorial process in terms of online studying. In the progress of work, there were analyzed the core features and challenges of blended learning, and covered the possibilities of interactive methods in blended learning implementation into the tutorial process of students’ mastering of UI/UX design basics, according to authors’ approach to their curriculum building. The experience of interactive methods practical realization in the process of the fundamentals 426 https://doi.org/10.55056/etq.34 Educational Technology Quarterly, Vol. 2021, Iss. 3, pp. 415-428 https://doi.org/10.55056/etq.34 of UI/UX design learning by university students of different specialties is presented. It was demonstrated how the considered leaning techniques which are typically used at blended learning in its flex model (flipped learning, gamification, storytelling etc.) can be enhanced and enriched via using different interactive methods. Exact examples of their applications in real blended learning process are given. Our observations as for the students’ cognitive behavior allow to conclude that applied methods were productive enough. They enabled to the students to feel the classroom atmosphere during online classes, promoted their cognitive eagerness to work with remote digital resources, contributed a lot into development of efficient learning communication, which helped overcome disconnection between the students and the feeling of dissociation inherent to blended learning in its flex model. The prospects of the research can be focused on finding the most efficient combinations of blended learning techniques and interactive methods in the process of UI/UX design mastering by the students of different branches. References [1] Adel, A. and Dayan, J., 2021. Towards an intelligent blended system of learning ac- tivities model for New Zealand institutions: an investigative approach. Humanities and Social Sciences Communications, 8(1), p.72. Available from: https://doi.org/10.1057/ s41599-020-00696-4. [2] Bilousova, L.I., Gryzun, L.E. and Zhytienova, N.V., 2021. Fundamentals of UI/UX design as a component of the pre-service specialist’s curriculum. SHS Web of Conferences, 104, p.02015. Available from: https://doi.org/10.1051/shsconf/202110402015. [3] Boelens, R., Voet, M. and De Wever, B., 2018. The design of blended learning in response to student diversity in higher education: Instructors’ views and use of differentiated instruction in blended learning. Computers & Education, 120, pp.197–212. Available from: https://doi.org/10.1016/j.compedu.2018.02.009. [4] Dellatola, E., Daradoumis, T. and Dimitriadis, Y., 2020. “exploring students’ engagement within a collaborative inquiry-based language learning activity in a blended environment”. In: S. Yu, M. Ally and A. Tsinakos, eds. Emerging technologies and pedagogies in the curricu- lum. Singapore: Springer Singapore, Bridging Human and Machine: Future Education with Intelligence, pp.355–375. Available from: https://doi.org/10.1007/978-981-15-0618-5_21. [5] Dichev, C. and Dicheva, D., 2017. Gamifying education: what is known, what is believed and what remains uncertain: a critical review. International Journal of Educational Technology in Higher Education, 14(1), p.9. Available from: https://doi.org/10.1186/s41239-017-0042-5. [6] Mikhnova, N.S., 2019. Graphic interface design in the software industry. In: S.A. Vazhnik, ed. Actual problems of humanitarian education, Materials of the VI International scientific- practical Conference. pp.474–477. Available from: https://elib.bsu.by/handle/123456789/ 234235. [7] Platonova, M.N., 2019. Basic principles of visual design used to use user attention. Available from: http://dgng.pstu.ru/conf2019/papers/100. [8] Rutta, C.B., Schiavo, G., Zancanaro, M. and Rubegni, E., 2021. Comic-based digital sto- 427 https://doi.org/10.55056/etq.34 https://doi.org/10.1057/s41599-020-00696-4 https://doi.org/10.1057/s41599-020-00696-4 https://doi.org/10.1051/shsconf/202110402015 https://doi.org/10.1016/j.compedu.2018.02.009 https://doi.org/10.1007/978-981-15-0618-5_21 https://doi.org/10.1186/s41239-017-0042-5 https://elib.bsu.by/handle/ 123456789/234235 https://elib.bsu.by/handle/ 123456789/234235 http://dgng.pstu.ru/conf2019/papers/100 Educational Technology Quarterly, Vol. 2021, Iss. 3, pp. 415-428 https://doi.org/10.55056/etq.34 rytelling for content and language integrated learning. Educational Media International, 58(1), pp.21–36. Available from: https://doi.org/10.1080/09523987.2021.1908499. [9] Sagri, M., Sofos, F. and Mouzaki, D., 2018. Digital Storytelling, comics and new tech- nologies in education: review, research and perspectives. International Education Journal: Comparative Perspectives, 17(4), pp.97–112. Available from: https://openjournals.library. sydney.edu.au/index.php/IEJ. [10] Starkey, L., 2020. A review of research exploring teacher preparation for the digital age. Cambridge Journal of Education, 50(1), pp.37–56. Available from: https://doi.org/10.1080/ 0305764X.2019.1625867. [11] Thompson, K., Jowallah, R. and Cavanagh, T.B., 2019. “Solve the Big Problems”: Leading Through Strategic Innovation in Blended Teaching and Learning. In: Y. Qian and G. Huang, eds. Technology Leadership for Innovation in Higher Education. IGI Global, pp.26–48. Available from: https://doi.org/10.4018/978-1-5225-7769-0.ch002. [12] Wear, J.O. and Levenson, A., 2004. Distance education. In: J.F. Dyro, ed. Clinical Engineering Handbook. Academic Press, The Biomedical Engineering Series. [13] Zaibon, S.B., Azman, F.N. and Shiratuddin, N., 2019. Instrument for evaluating digital educational comic. International Journal of Advanced Computer Research, 9(44), pp.316–324. Available from: https://doi.org/10.19101/IJACR.PID107. [14] Zainuddin, Z., Chu, S.K.W., Shujahat, M. and Perera, C.J., 2020. The impact of gamification on learning and instruction: A systematic review of empirical evidence. Educational Research Review, 30, p.100326. Available from: https://doi.org/10.1016/j.edurev.2020.100326. 428 https://doi.org/10.55056/etq.34 https://doi.org/10.1080/09523987.2021.1908499 https://openjournals.library.sydney.edu.au/index.php/IEJ https://openjournals.library.sydney.edu.au/index.php/IEJ https://doi.org/10.1080/0305764X.2019.1625867 https://doi.org/10.1080/0305764X.2019.1625867 https://doi.org/10.4018/978-1-5225-7769-0.ch002 https://doi.org/10.19101/IJACR.PID107 https://doi.org/10.1016/j.edurev.2020.100326 1 Introduction 2 Theoretical framework 3 Results and discussion 4 Conclusions