UI/UX design of educational on-line courses CTE Workshop Proceedings, 2022, Vol. 9: CTE-2021, pp. 184-199 UI/UX design of educational on-line courses Kateryna V. Vlasenko1,2, Iryna V. Lovianova3, Sergii V. Volkov4, Iryna V. Sitak4, Olena O. Chumak5, Andrii V. Krasnoshchok6, Nataliia G. Bohdanova7 and Serhiy O. Semerikov3,8,9,10 1National University of “Kyiv Mohyla Academy”, 2 Hryhoriya Skovorody Str., Kyiv, 04070, Ukraine 2Technical University “Metinvest Polytechnic” LLC, 71A Sechenov Str., Mariupol, 87524, Ukraine 3Kryvyi Rih State Pedagogical University, 54 Gagarin Ave., Kryvyi Rih, 50086, Ukraine 4Volodymyr Dahl East Ukrainian National University, 59A Tsentralnyi Ave., Severodonetsk, 93400, Ukraine 5Donbas National Academy of Civil Engineering and Architecture, 14 Heroes of the Heavenly Hundred Str., Kramatorsk, 84333, Ukraine 6Donetsk State University of Internal Affairs, Kryvyi Rih Research Education Institute, 21 Stepana Tilhy Str., Kryvyi Rih, 50065, Ukraine 7Educational Scientific Professional Pedagogical Institute of Ukrainian Engineering Pedagogical Academy, 9a Nosakova Str., Bakhmut, 84511, Ukraine 8Kryvyi Rih National University, 11 Vitalii Matusevych Str., Kryvyi Rih, 50027, Ukraine 9Institute for Digitalisation of Education of the National Academy of Educational Sciences of Ukraine, 9 M. Berlynskoho Str., Kyiv, 04060, Ukraine 10University of Educational Management, 52A Sichovykh Striltsiv Str., Kyiv, 04053, Ukraine Abstract. This paper considers the problem of an interface for educational platform, which is fully effective for achieving the outcomes of educational activity. The current research is a theoretical analysis of existing recommendations on UI/UX design, applied when creating educational systems, as well as of research papers that study user interface (UI) usability and evaluate user experience (UX) in designing on-line platforms. This article describes a mechanism for evaluating usability with the help of baseline and final evaluation tool. It also studies UX components, that ensure its high quality. A list of standard components of web-design is being discussed in the present paper; modern trends in web-design of educational platforms are identified. The paper provides the description of an on-line course model, which is built on the basis of analysis of the prerequisites for existing and functioning of educational on-line systems and which is aimed at achieving outcomes of educational activity. There is ground to believe that the design of educational on-line courses will contribute to achieving the outcomes of educational activity, if user interface components comply with a list of criteria, such as easy-to-perceive content, no extra information, easy and simple navigation on the pages of the course, following the principles of usability. Keywords: educational platform interface, user interface components, UI/UX design, principles of usability, achieving educational activity outcomes, designing on-line platforms, educational on-line course model. 184 CTE Workshop Proceedings, 2022, Vol. 9: CTE-2021, pp. 184-199 1. Introduction The process of designing interface for educational platforms is a complex task, but crucial for achieving educational activity outcomes. Every time, when course users interact with an educational platform, they become smarter and closer to their goal, which is to get a real sense of achievement. This incremental progress is attained owing to both, the developers, who designed the educational resource and teaching staff, who filled it with educational materials. The main goal of the systems for electronic learning (SEL) is to deliver knowledge, to share information and to help students in their educational activity effectively, using the cutting-edge information technologies. Usability of SEL is of importance, as its success depends on applying the key principles of usability. The evaluation criteria for success can be defined by the level of user satisfaction after their interaction with the SEL interface [4]. Users see in the software system not the coding languages, but the interface, which contributes to the success or failures of this system. Students are willing to see the system interface in accordance with their needs and requirements. If the interface is rigid, difficult and boring, it will not allow users to use the system. So, the user interface plays a vital role in any software system. According to ISO 9241-210:2019 [23] user interface (UI) specifies all the components of the interactive system (software or hardware), which provide information and ways to manage it, which allow users to perform certain tasks with the help of an interactive system. In other words, a user interface is an intermediary between a human and a computer, fostering interaction; usability is a tool which provides activities for effective interaction for achieving definite goals. Standard ISO 9241-210:2019 [23] also defines system usability as a degree, to which a system, a product or a service can be used by certain users for achieving certain goals with effectiveness, efficiency, and satisfaction in a certain context of its usage. Effectiveness in this case shows accuracy and the extent, to which users achieve their goals. Effectiveness measures resources, which are consumed to achieve precision and comprehensiveness of the achieved goals; satis- faction is convenience and accessibility of the work of the system for users [45]. Usability is a basis for the success of any system and a prerequisite for the success of on-line learning, but design is also critical in evaluating quality thereof [3]. Thus, the purpose of this article is conducting a theoretical analysis of user interface (UI) features and user experience (UX) in " vlasenkokv@ukr.net (K. V. Vlasenko); lirihka22@gmail.com (I. V. Lovianova); sergei.volkov@ukr.net (S. V. Volkov); sitakirina@gmail.com (I. V. Sitak); chumakelena17@gmail.com (O. O. Chumak); krasnoshchok2017@gmail.com (A. V. Krasnoshchok); bogdanovang@ukr.net (N. G. Bohdanova); semerikov@gmail.com (S. O. Semerikov) ~ http://irbis-nbuv.gov.ua/ASUA/0005870 (K. V. Vlasenko); https://kdpu.edu.ua/personal/ilovianova.html (I. V. Lovianova); http://formathematics.com/tutors/sergii-volkov/ (S. V. Volkov); http://formathematics.com/tutors/iryna-sitak/ (I. V. Sitak); http://formathematics.com/tutors/olena-chumak/ (O. O. Chumak); https://scholar.google.com.ua/citations?user=yYUXmc4AAAAJ (A. V. Krasnoshchok); http://nnppi. in.ua/index.php/kafedri-nnppi/kafedra-okhoroni-pratsi/2-uncategorised/343-bohdanova-nataliya-hryhorivna (N. G. Bohdanova); https://kdpu.edu.ua/semerikov (S. O. Semerikov) � 0000-0002-8920-5680 (K. V. Vlasenko); 0000-0003-3186-2837 (I. V. Lovianova); 0000-0001-7938-3080 (S. V. Volkov); 0000-0003-2593-1293 (I. V. Sitak); 0000-0002-3722-6826 (O. O. Chumak); 0000-0002-4437-7593 (A. V. Krasnoshchok); 0000-0002-7956-5818 (N. G. Bohdanova); 0000-0003-0789-0272 (S. O. Semerikov) CTE Workshop Proceedings © 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. 185 mailto:vlasenkokv@ukr.net mailto:lirihka22@gmail.com mailto:sergei.volkov@ukr.net mailto:sitakirina@gmail.com mailto:chumakelena17@gmail.com mailto:krasnoshchok2017@gmail.com mailto:bogdanovang@ukr.net mailto:semerikov@gmail.com http://irbis-nbuv.gov.ua/ASUA/0005870 https://kdpu.edu.ua/personal/ilovianova.html http://formathematics.com/tutors/sergii-volkov/ http://formathematics.com/tutors/iryna-sitak/ http://formathematics.com/tutors/olena-chumak/ https://scholar.google.com.ua/citations?user=yYUXmc4AAAAJ http://nnppi.in.ua/index.php/kafedri-nnppi/kafedra-okhoroni-pratsi/2-uncategorised/343-bohdanova-nataliya-hryhorivna http://nnppi.in.ua/index.php/kafedri-nnppi/kafedra-okhoroni-pratsi/2-uncategorised/343-bohdanova-nataliya-hryhorivna https://kdpu.edu.ua/semerikov https://orcid.org/0000-0002-8920-5680 https://orcid.org/0000-0003-3186-2837 https://orcid.org/0000-0001-7938-3080 https://orcid.org/0000-0003-2593-1293 https://orcid.org/0000-0002-3722-6826 https://orcid.org/0000-0002-4437-7593 https://orcid.org/0000-0002-7956-5818 https://orcid.org/0000-0003-0789-0272 https://acnsci.org/cte https://creativecommons.org/licenses/by/4.0 https://acnsci.org CTE Workshop Proceedings, 2022, Vol. 9: CTE-2021, pp. 184-199 designing educational on-line platforms. Within the framework of the overall objective, the following research objectives were set: 1. To analyse the definition of usability of user interface (UI). 2. To describe user experience (UX) in designing on-line platforms. 3. To analyse features of UI/UX design when developing educational systems, as well as to develop an educational on-line course model. 2. Method Theoretical analysis of research papers and resources, that introduce guidelines on UI/UX design when developing an educational system; analysis of the research into UI usability and user experience (UX) in designing on-line platforms contributed to developing an educational on-line course model. 2.1. Usability of user interface (UI) An important task for developers who foster interaction between a computer and a human in educational sphere is creating useful software for supporting students and their distance learning, as well as ensuring adaptation of a student to the system. Usability and usefulness are closely connected but not identical notions. According to Nielsen [31], who differentiates between usability and usefulness, the former includes not only usefulness, but also effectiveness, efficiency and satisfaction. A number of experts in this sphere [33, 51] believe that usability is often the most ignored aspect of web-sites, but in many respects it is one of the most critical. If the designed environment for on-line education is difficult to use and to understand, it starts loosing users. Moreover, users are not going to spend much time on trying to understand how the interface functions, so as a rule educational software is developed for assisting convenient education. Also, usability provides users with an opportunity to effectively manipulate interactive software that are selected for performing the definite educational task. The above mentioned is proved by Squires and Preece [43], who emphasise that system developers do not pay enough attention to the consequences of usability features of educational software system for achieving educational outcomes. One more important question, raised by the developers of educational systems is evaluation of their effectiveness, which is defined by a user’s interaction with the interface of this system. Research into the evaluation of SEL usability was done by a number of experts [3, 4, 19, 20, 28, 32, 39, 44, 45, 51, 53]. The analysis of these research papers shows that the evaluation of SEL usability is a complex task. The increasing number and variety of learners (sometimes a user interaction with the educational environment is one-time event), technical progress and complexity of educational tasks create both – serious problems and perspectives for using SEL. Additional difficulty is created by the fact that the main goal of a user is learning, which can be implicit or abstract by nature [53]. Hence, Notess [35] believes that evaluation of electronic education can push the usability practitioners beyond their comfort zone. The authors of this paper take into consideration the idea by Squires [42], who highlighted the necessity to integrate usability and learning, as well as pointed out waiver of communication by 186 CTE Workshop Proceedings, 2022, Vol. 9: CTE-2021, pp. 184-199 staff working in sphere of a human-computer interaction and educational environments. In fact, usability of electronic learning design is directly connected to their educational value. Systems of electronic learning can be convenient, but not educational, and vice versa [43]. Usability evaluation can be used with the help of baseline and final evaluation tool [19]. Evaluation can be done when designing systems for detecting potential usability problems. Final evaluation can be done after introducing the system in order to define actual usability problems. There are two different evaluation methods for supporting the above mentioned types. Methods of analytical evaluation are as a rule used during evaluation, but empirical ones – during the final evaluation. Methods of analytical evaluation are usually used by design experts in order to define usability problems when designing a system [19]. These methods include heuristic evaluation, cognitive evaluation and evaluation of the analysis on the level of pressing the keys [17, 41]. Heuristic evaluation covers using a list of design heuristics or principles for design evaluation and detecting any possible system usability problems. There are several such lists of project heuristics, but the most frequently used is a list of ten principles of design (table 1), suggested by Nielsen [32]. These are general principles of design, but some authors (e.g., Giannakos [20], Jordan [24], Rubin and Chisnell [39], Zaharias [53]) adapted them to usage in different contexts, for instance, in e-commerce [24]. The result of heuristic evaluation consists of a list of design problems, seriousness of these problems and suggestions on improving design. Cognitive evaluation is an analytical method, used to evaluate simplicity of learning and using the system. A detailed analysis of the key tasks, which are supported by the system, is done. For each task there are four questions, asked to forecast the system usability. The questions are: Is the goal clear in this stage? Is the corresponding action obvious? Is it clear, that certain actions lead to the goal? What problems appear when taking the action? [19] Analysis of the level of pressing the keys can be used to define the effectiveness of interaction with the user and compare various designer solutions. Quantitative measures of the time can be related to every user’s action, for instance, clicking a mouse or entering the text, and are used to determine the time for performing each task. They can be used to choose the menu structure, the mode of interaction and usage of concrete objects of interaction. Empirical methods of evaluation are used to identify factual indicators of effectiveness, efficiency and satisfaction [19]. These methods are field tests, observations, interviews, ques- tionnaires and system usability testing. Empirical methods mean work with real users and collecting data which must be analysed. Empirical methods can consume much more time and funds, than analytical methods, but they can give quantitative data on the factual viability of the system. Formal usability testing includes development of controlled experiment, which is usually done in a special usability laboratory [28, 39]. Formal usability testing requires certain important components: the experiment must be carefully designed; the hypothesis of the research must be identified; representative users must be selected; a list of relevant tasks must be prepared; evaluation must be done; data must be collected; the analysis findings be done. To identify the user profiles and the level of user satisfaction with the interaction, special questionnaires can be used before and after testing. Official usability testing can give factual indicators of effectiveness from the point of view of the level of the task performance and effectiveness from the point of view of the tasks performed. 187 CTE Workshop Proceedings, 2022, Vol. 9: CTE-2021, pp. 184-199 Table 1 Ten principles of design by Nielsen [32]. Title Description 1. Visibility of system sta- tus The design should always keep users informed form users on what is happening through a proper feedback within reasonable amount of time. 2. Match between the sys- tem and the real world The design should speak the users’ language. Use only words, phrases and concepts, familiar to the users rather than internal jargon. Follow real world conventions, making information appear in a natural and logical order. 3. User control and free- dom Users often perform actions by mistake. They need a clearly marked “emergency exit” to quit the unwanted action without necessity to go through an extended process. 4. Consistency and stan- dards Users should not have to wonder whether different words, situations or actions mean the same. It is necessary to follow the platform and industry conventions. 5. Error prevention Good error messages are important, but the best designs carefully prevent any problems from occurring. It is necessary either to eliminate error- prone conditions or to check them and give users a confirmation option before they commit to action. 6. Recognition rather than recall Minimise the user’s memory load, making elements, actions and options visible. The user should not have to remember the information from one part of the interface to another one. Information, required to use the design (for instance, field labels or menu items ), should be visible or easily retrievable, when needed. 7. Flexibility and effi- ciency of use Short-cuts hidden from novice users can speed up interaction for an experienced user, so that the design can satisfy both user groups. Allow users to tailor frequent actions. 8. Aesthetic and minimal- ist design Interfaces should not contain information which is irrelevant or rarely needed. Each extra unit of information in the interface competes with the relevant units of information and diminishes their relative visibility. 9. Help users recognise, di- agnose and recover from errors Error messages should be expressed in plain language(no error codes), accurately indicate the problem and constructively suggest a solution. 10. Help and documenta- tion In the perfect scenario the system does not need any additional explana- tions. However, it can be necessary to provide documentation, to help users understand how to complete their tasks. 2.2. User experience (UX) in designing the on-line platform The notion “user experience” (UX), according to the standard [23] means human perception and responses which result from usage or expected usage of a product, a system or a service. Users’ perceptions include emotions, preferences, comfort, behaviour and achievements, that happen before, during and after the usage. Interaction with the user is a result of a brand image, presentation, functionality, productivity of a system, interactive behaviour and additional capacity of a system, a product or a service. It is also the result of internal and physical condition of the user, which springs from the previous experience, attitude, skills of a person, from the 188 CTE Workshop Proceedings, 2022, Vol. 9: CTE-2021, pp. 184-199 context of usage. This notion can have a wider meaning, which is researched in the special literature [2, 25, 27]. Despite the increasing interest to the experience in using systems, it is difficult to achieve joint agreement on the nature and sphere of usage of UX [25]. Most respondents in the research [25] agree, that UX is dynamic, dependent on the context and subjective, including such factors as time, place and goal. As regards more disputable questions, the authors suggest defining UX as something individual (rather than social), which appears as the result of interaction with a product, a system, a service or an object. But the terms used require additional explanations to list all the possible objects that impact the user experience. UX selects emotional factors and is aimed at positive experience and strengthening the trust in the object [24]. UX is a result of a user’s internal condition (preferences, expectations, needs, motivation, mood, etc.), features of the designed system (for instance, complexity, purpose, usability, functionality, etc.) and context (or environment), in which interaction takes place (for instance, organisational/ social environment, content of the activity, free will to use, etc.) [15]. The first requirement of a perfect user experience (UX) is meeting precise needs of the user, without fuss and problems. Then follow simplicity and elegance, creating products, which are pleasant to possess and to use. Real user experience goes beyond the reach of what users want, what they aspire for or just presenting functions from the check-list. To ensure high quality of UX in the company’s offers, it is necessary to have seamless consolidation of services in different spheres, design, marketing, graphic and industrial design, interface design included [34]. It is critical to differentiate general interaction with user interface (UI) and UX, though UI, obviously, is an essential part of design. Let’s take Ukrainian educational platform Prometheus as an example [38]. The catalogue of on-line courses has an attractive interface design (figure 1), but a user who wants to get information about a specific on-line course will face a difficulty when searching it, as the catalogue has only general topics and does not have such an option as search using key words. UX is a central component, especially in successful web-sites and digital products. Moreover, overall effectiveness of a system increases owing to UX. In course of researching into UX, such tool as framework of conception and optimisation gained momentum. Dixon, Freeman and Toman [18] raise the issue of negative perception of complicated and confusing user service implementation. As researchers believe, in order to improve the quality of a service, it is necessary to minimise the number of days, which spend by users to achieve the desired outcome. When developing a service which is aimed at triggering pleasant emotions in a user or override competitors in terms of complexity of presenting information, it leads to users outflow. Users can be overwhelmed by the number of self-service channels – interactive voice service, web-sites, e-mail, chats, communities for on-line support, social networks, etc. They often have no opportunity to take move in order to solve the problem. Obviously, the simplicity of the service contributes to solving the users’ problems. This ap- proach is applied not only to the commercial services, but also to educational services. Designing an easy-to-understand and simple interface for on-line learning can increase effectiveness of its usage for both – learners and university teaching staff. Optimally developed program user interface from the point of view of UX, is an inseparable 189 CTE Workshop Proceedings, 2022, Vol. 9: CTE-2021, pp. 184-199 Figure 1: Catalogue of on-line courses on educational platform Prometheus. part of success or failure of any educational product. When developing an on-line course, the teachers must have competencies which help them impact the quality of UX and as a result – the platform itself. 2.3. UI/UX design in designing educational systems User interface (UI) usability and effectiveness of user experience (UX) depend on the quality of the system design, which consolidates both these tasks into one single process of creating an educational system. As a rule, people associate the notion “design” with various things, depending on the sphere of human activity, but Dervojeda et al. [16] defines design as an engine for innovations. Design is a creative method of developing and creating a new or a significantly improved product, service or system, which means a comprehensive approach to creating various objects, considering various factors and conditions of economic, ecological, technological, cultural environment, opportunities, social priorities and preferences. Modern educational on-line systems are developed using the Internet and web-technologies, so when considering these systems, a separate type of design is referred to – web-design. Web-design is a part of web-development and includes the process of designing a user web- interface for web-sites or web-applications. As Borodayev [11] states, web-design is a kind of 190 CTE Workshop Proceedings, 2022, Vol. 9: CTE-2021, pp. 184-199 graphic design, aimed at developing and arranging objects of informational environment on the Internet, which adds high consumer attributes and aesthetic qualities. Such interpretation separates web-design from web-programming, emphasises the specifics of the subject matter of a web-designer, positions web-design as a kind of graphic design. Web-design, as defined by Indeed Editorial Team [22], is the process of creating web-sites and web-pages for fostering effective and pleasant usage. Web-design determines the goals of a web-site or a web-page and contributes to its accessibility by all the prospective users. This process involves arranging content and visuals on a series of pages, program integration and other interactive elements, choice of attractive style and colours. Specialists, who do this job are called web-designers, their main tasks are: • the choice of readable fonts; • the choice of attractive colour schemes that allow to easily read the fonts; • introduction of a brand identity into colours, fonts and a mock-up; • designing the web-site structure map for ensuring intuitive navigation; • placement of icons, logos, texts, videos, programs and other elements; • using such coding languages as HTML and CSS for creating layouts and presentation of pages; • creating optimised versions of web-sites and pages for viewing them on both PCs and mobile devices. There is a list of standard components for creating an optimal design of a web-site (table 2). Among the latest trends in web-design, which attracts experts’ attention, is its minimalism, which is applied when designing the structure and content of on-line courses. Moreover, studying the strategies that impact user interface, studios Acodez [37], Nielsen Norman Group [30], WebsiteBuildErexpert [14], TheNextWeb [13] claim that minimalism is something users prefer in particular. Experts warn that using too much technology decreases the chance to attract clients by the web-product. The findings of the research by Baharin et al. [5] prove that the design of the on-line courses interface is no less important than their content or the choice of the learning method. Analysing the directions in UI design, scientists grounded, that its quality impacts not only the success of a separate course, but of the educational platform as a whole. Scientists also discuss the above mentioned trend in their research papers. Wolverton and Guidry Hollier [52] describe the survey of the teaching staff in universities concerning the usage of minimalistic approach when designing courses. The authors of the article believe that it is necessary to use less technology, to simplify learning, an on-line learning course should not be sophisticated. Sani and Shokooh [40] point out that minimalism without unnecessary aspects and arrangement of visual elements decreases confusion in the audience and increases effective interaction with the web-site. In order to identify and prove the factors that influence satisfaction of teaching staff with learning on the Internet, Bolliger and Wasilik [10] drafted a web-questionnaire, which was used to measure teachers’ satisfaction in the context of on-line educational environment. Describing the respondents’ answers, scientists noticed that using the principles of minimalism allowed to make an on-line course graphically simple. In turn, teaching staff in universities, working with the course, claimed that purely efficient design allows 191 CTE Workshop Proceedings, 2022, Vol. 9: CTE-2021, pp. 184-199 Table 2 A list of standard components of web-design Component Description Layout Determines a way to show material on the page. The choice of a layout is a principal task for a designer. It must be simple, intuitively understandable and accessible. Web- designers can use blank spaces, called gaps, to arrange the web-site elements with the help of mesh design to keep them in order. Images Illustrations, graphic images, photos, icons and others are used to add information to the text. To create the desired effect, designers can choose images that complement each other, and the brand, which the web-site represents. Visual hier- archy The order in which a user will get the information on the web-site is identified. A designer creates it, using a visual pattern to the web-site. A visual pattern is a method in which a designer directs the look and the behaviour of a user. For instance, F-Patterns or Z-Patterns emphasise the upper horizontal part of the web-site, where mostly navigation menu and a logo, sometimes a search-box are placed. Those are elements, that inspire for interaction with users. Colour scheme Defines the combination of colours, that must be in harmony with the brand and the industry, which it presents. To achieve this goal, a dominant colour is chosen along with several others to create a proper palette. Colour palette can be solid (different shades of one colour), similar (colours, close to each other) or complementary. Designers also take into account what colours attract users more. Typesetting Defines the style and font of the text. Web-designers choose one or a combination of them, which is attractive and easy to read. To make the best choice, it is necessary to choose the font which meets the expectations of the target audience. Some web-sites can have notched fonts, while others can use non-serif fonts, depending on the sphere, goal and a regular user. Readability Representation of the content, which is easy to see and to read on the web-page. The text on the web-page must be readable, as users usually spend little time on that and have to find the information quickly. Designers can achieve it, choosing the relevant size and font for the text. Contrast between the text and colours of the web-site background also enhances legibility. Navigation Navigation elements are tools that allow users to choose, where they want to get on the web-site. They can be present in the upper or lower header of the web-site, depending on its layout and structure. These elements are important as they direct visitors to the necessary information as fast as possible. Designers can choose various navigation designs and layouts, for instance with the help of a button that folds and unfolds the navigation menu. Elements of navigation can contain arrows that direct users back to the upper part of the page, to a certain part of the page or to another page. Content Content is all the information, present on the web-site. It is a key element, as visitors want to get information quickly. When a web-site is clearly structured and attracts users’ attention, they are more likely to turn into clients. Adaptability Adaptability is a function of the web-site that allows to show it on a mobile device and to adapt its layout and proportions so that it is readable. Web-design ensures convenience in surfing the web-sites and their navigation on mobile devices. If a web-site is well- developed and adapted to mobile devices, users can easily achieve the goal. 192 CTE Workshop Proceedings, 2022, Vol. 9: CTE-2021, pp. 184-199 them not to get distracted by the course presentation when doing the course itself. Studying minimalistic documentation strategies and their successful application for creating short videos, Pflugfelder [36] offered instructions, taking into consideration minimalism in Web-applications. Lazonder [26] also emphasises the importance of developing such instructions and claims that in order to create a truly minimalistic interface, a web-designer has to arrange the elements showing only the ones which are of the highest importance and do not distract users from the necessary elements. Evaluating positive and negative impact of interface on the process of learning, del Campo, Negro and Núñez [12] did the research into User eXperience (UX) with the help of a quality analysis of the students’ survey, studying their level of satisfaction by the use of web-pages. Bender, Wood and Vredevoogd [6], Betts [7], Boettcher [8], Bolliger [9], Bolliger and Wasilik [10] also did research into the factors of students’ satisfaction with on-line products. Among the factors that explain students’ satisfaction with on-line courses, scientists outline the following: intuitively understandable navigation system and blank space on the page of on-line courses, speed of a web-page downloading on the platform, simplicity of orientation and easy access to the necessary content, usage of as few interactive elements of web-design as possible. In a research paper by Vlasenko et al. [46] the analysis of web-design minimalism was conducted, using as examples a few elements of presenting content. Dynamic web-elements, such as accordion, slider and tabs were singled out. The findings of the research show that the optimal variant, from the point of view of minimalism is tabs. In course of the research, a list of criteria was offered. These criteria foster perception of the course materials, do not overload users with extra information, make navigation on the course pages easy and accessible. Thus, the analysis of certain prerequisites of existence and functioning educational on-line systems allowed us to make a decision on the model developing on-line course (figure 2). When constructing the model, we took into account that the user interface, which does not contain enough components, or they are used inappropriately or poorly, affects the components of usability of the online course. This can affect each convenience component individually or all at once. For example, the non-availability or an insufficient number of navigation elements reduces the effectiveness of the principles of “Recognition, not remembrance” and “Flexibility and efficiency of use”. And inadequate use of color scheme or printing will reduce the effectiveness of all the principles of usability. Therefore, the UI / UX design online course model should reflect the relationship between the UI components and the overall usability of the online course. 3. Discussion Now that modes of learning are blended and remote, usage of systems of e-learning is becoming more topical and popular. Interest in developing cognitive on-line environments is on increase; it fosters comprehensive preparation of a learner in combination of conventional and on-line learning. The authors of this paper, together with Alomari et al. [3], Ardito et al. [4], who deal with the problem of using cutting-edge e-technologies with educational goals, share the opinion that the main prerequisite for the success of on-line learning is usability of SEL for users and the level of their satisfaction with the interface. An opinion by Squires [42] on usability of systems of electronic learning is of importance. Hence, the research by the scientists proved the assumption of the authors of this paper on topicality of the research into features of the user 193 CTE Workshop Proceedings, 2022, Vol. 9: CTE-2021, pp. 184-199 Figure 2: The model developing on-line course. interface (UI) and user experience (UX) in designing educational on-line platforms. We also agree with the opinion by Squires [42] about the direct connection between the usability of the e-learning design and its educational value. The course interface on the educa- tional platform was singled out by Hasan [21] as one of the factors that impacts the on-line learning. Applying analytical and empirical methods of assessment of the usability problems and indicators of effectiveness efficiency and satisfaction by the educational platform was proved by the research, where it is stated that principles of instructional design, principles of usability 194 CTE Workshop Proceedings, 2022, Vol. 9: CTE-2021, pp. 184-199 implementation [1, 47–50] and suggestions concerning design and development of an on-line course [29] must be considered. Based on the conducted research, the authors of this article developed a model of on-line courses. The first structural element of the model was defined as user interface components, among which are: a layout, an image, visual hierarchy, colour scheme, typesetting, readability, adaptability, navigation, content. The authors assumed that functionality of the model is ensured by the impact of interface design on usability of the on-line course. This, in turn, allowed to decide on such structural element of the on-line course model as principles of usability. The research presents the developed model of usability principles, such as following: visibility of the system status; match between the system and the reality; control and freedom of users; consistency and standards; preventing errors; recognition, rather than recall; flexibility and effectiveness of usage; aesthetic and minimalistic design; assisting users; information and documentation. 4. Conclusions The authors of this paper based their research on the analysis of the resources and scientific papers on introducing guidelines on UI/UX design when developing educational systems; usability of user interface (UI); evaluation of user experience (UX) in designing on-line platforms. The notion of usability of user interface (UI) was analysed and it was determined, that for different types of evaluation different evaluation methods are available. This research paper presents the methods of analytical assessment, among which are heuristic evaluation, cognitive evaluation and analysis evaluation on the level of pressing the keys. It is also defined, that methods of analytical evaluation, as a rule, are used by experts on design for detecting usability problems when designing a system. As far as empirical methods are concerned, such methods of evaluation are used for determining factual indicators of effectiveness, efficiency and user satisfaction by the on-line courses. Research into user experience (UX) in designing on-line platforms allowed to make the following conclusions: UX is a core component of successful web-sites and digital products; optimally developed program user interface from the point of view of UX is an inseparable part of any educational product; in order to enhance the quality of service, it is necessary to minimise the number of actions, which are taken by users for achieving the desired outcome. The analysis of features of UI/UX design when developing educational systems allowed the authors of this paper to identify, that along with a list of standard components of an optimal web-site design, cutting-edge trends in web-design are also taken into consideration. Among such trends are minimalism of web-design, which is used both – during the design of the structure and content of on-line courses, and during the influence on the user interface. The conducted analysis also allowed to develop an educational on-line course model. The authors outlined two constituents in the structure of the model, namely user interface components and usability principles. The model functions owing to the impact of the interface design on usability of the on-line course. There is space for further research into the effectiveness of the impact of the developed model on achieving the outcomes of educational activity of Master students, majoring in “014 Secondary Education. Mathematics”. 195 CTE Workshop Proceedings, 2022, Vol. 9: CTE-2021, pp. 184-199 References [1] Achkan, V.V., Vlasenko, K.V., Lovianova, I.V., Rovenska, O.H., Sitak, I.V., Chumak, O.O. and Semerikov, S.O., 2022. Web-based support of a higher school teacher. In: S. Semerikov, V. Osadchyi and O. Kuzminska, eds. Proceedings of the symposium on advances in educational technology, aet 2020. University of Educational Management, Kyiv: SciTePress. [2] Alharbi, M.S., 2016. User experience dimensions, aspects and measures: systematic literature review. Master thesis. Prince Sultan University. [3] Alomari, H.W., Ramasamy, V., Kiper, J.D. and Potvin, G., 2020. A User Interface (UI) and User eXperience (UX) evaluation framework for cyberlearning environments in computer science and software engineering education. Heliyon, 6(5), p.e03917. Available from: https://doi.org/10.1016/j.heliyon.2020.e03917. [4] Ardito, C., Costabile, M.F., De Marsico, M., Lanzilotti, R., Levialdi, S., Roselli, T. and Rossano, V., 2006. An approach to usability evaluation of e-learning applications. Universal access in the information society, 4(3), pp.270–283. Available from: http://www.di.uniba.it/~ivu/ papers/2006/UAIS2006_Arditoetal.pdf. [5] Baharin, A.T., Lateh, H., Nawawi, H. mohd and Nathan, S.S., 2015. Evaluation of satisfaction using online learning with interactivity. Procedia - social and behavioral sciences, 171, pp.905–911. Available from: https://doi.org/https://doi.org/10.1016/j.sbspro.2015.01.208. [6] Bender, D.M., Wood, B.J. and Vredevoogd, J.D., 2004. Teaching time: Distance education versus classroom instruction. American journal of distance education, 18(2), pp.103–114. Available from: https://doi.org/10.1207/s15389286ajde1802_4. [7] Betts, K.S., 1998. Factors influencing faculty participation in distance education in postsec- ondary education in the united states: An institutional study. Ph.D. thesis. The George Washington University. Available from: https://www.learntechlib.org/p/129168. [8] Boettcher, J.V., 2004. Online course development: What does it cost? Available from: https://campustechnology.com/Articles/2004/06/ Online-Course-Development-What-Does-It-Cost.aspx. [9] Bolliger, D.U., 2004. Key factors for determining student satisfaction in online courses. International journal on e-learning, 3(1), pp.61–67. Available from: https://www.learntechlib. org/p/2226. [10] Bolliger, D.U. and Wasilik, O., 2009. Factors influencing faculty satisfaction with online teaching and learning in higher education. Distance education, 30(1), pp.103–116. Available from: https://doi.org/10.1080/01587910902845949. [11] Borodayev, D.V., 2006. Web-site as an object of graphic design. Kharkiv: Septima. [12] Campo, J.M. del, Negro, V. and Núñez, M., 2013. Use and abuse of audiovisual media in the college classroom. Slides show and web pages. Procedia - social and behavioral sciences, 93, pp.190–194. Available from: https://doi.org/10.1016/j.sbspro.2013.09.176. [13] Cao, J., 2015. 7 pillars of minimalist web design. Available from: https://thenextweb.com/ dd/2015/06/09/7-pillars-of-minimalist-web-design/. [14] Carney, L., 2022. Web design trends and statistics 2022 – putting users first. Available from: https://www.websitebuilderexpert.com/designing-websites/web-design-trends-2020/. [15] Castillo-Vergara, M., Alvarez-Marin, A. and Placencio-Hidalgo, D., 2018. A bibliometric analysis of creativity in the field of business economics. Journal of business research, 85, 196 https://doi.org/10.1016/j.heliyon.2020.e03917 http://www.di.uniba.it/~ivu/papers/2006/UAIS2006_Arditoetal.pdf http://www.di.uniba.it/~ivu/papers/2006/UAIS2006_Arditoetal.pdf https://doi.org/https://doi.org/10.1016/j.sbspro.2015.01.208 https://doi.org/10.1207/s15389286ajde1802_4 https://www.learntechlib.org/p/129168 https://campustechnology.com/Articles/2004/06/Online-Course-Development-What-Does-It-Cost.aspx https://campustechnology.com/Articles/2004/06/Online-Course-Development-What-Does-It-Cost.aspx https://www.learntechlib.org/p/2226 https://www.learntechlib.org/p/2226 https://doi.org/10.1080/01587910902845949 https://doi.org/10.1016/j.sbspro.2013.09.176 https://thenextweb.com/dd/2015/06/09/7-pillars-of-minimalist-web-design/ https://thenextweb.com/dd/2015/06/09/7-pillars-of-minimalist-web-design/ https://www.websitebuilderexpert.com/designing-websites/web-design-trends-2020/ CTE Workshop Proceedings, 2022, Vol. 9: CTE-2021, pp. 184-199 pp.1–9. Available from: https://doi.org/10.1016/j.jbusres.2017.12.011. [16] Dervojeda, K., Verzijl, D., Nagtegaal, F., Lengton, M. and Rouwmaat, E., 2014. Design for in- novation: Service design as a means to advance business models. Available from: https://ec. europa.eu/docsroom/documents/13406/attachments/2/translations/en/renditions/native. [17] Dix, A., Finlay, J., Abowd, G.B. and Beale, R., 2004. Human-computer interaction. 3rd ed. Pearson. Available from: https://hcibook.com/e3/. [18] Dixon, M., Freeman, K. and Toman, N., 2010. Stop trying to delight your customers. Harvard business review, 88(7(8)), pp.116–122. Available from: https://hbr.org/2010/07/ stop-trying-to-delight-your-customers. [19] Faulkner, X., 2000. Usability engineering. Basingstoke, Hants: Macmillan Press Ltd. [20] Giannakos, M.N., 2010. The evaluation of an e-learning web-based platform. Proceedings of the 2nd international conference on computer supported education - volume 1: Csedu. INSTICC, SciTePress, pp.433–438. Available from: https://doi.org/10.5220/0002799504330438. [21] Hasan, L., 2014. Evaluating the usability of educational websites based on students’ prefer- ences of design characteristics. International arab journal of e-technology, 3(3), pp.179–193. Available from: https://www.researchgate.net/publication/281904323_Evaluating_the_ Usability_of_Educational_Websites_Based_on_Students%27_Preferences_of_Design_ Characteristics. [22] Indeed Editorial Team, 2021. What is web designing? definition, elements and uses. Avail- able from: https://www.indeed.com/career-advice/finding-a-job/what-is-web-designing/. [23] International Organization for Standardization, 2019. ISO 9241-210:2019 Ergonomics of human-system interaction — Part 210: Human-centred design for interactive systems. Available from: https://www.iso.org/standard/77520.html. [24] Jordan, P.W., 2000. Designing pleasurable products: An introduction to the new human factors. London: CRC Press. Available from: https://doi.org/10.1201/9780203305683. [25] Law, E.L.C., Roto, V., Hassenzahl, M., Vermeeren, A.P. and Kort, J., 2009. Understanding, scoping and defining user experience: A survey approach. Proceedings of the sigchi conference on human factors in computing systems. New York, NY, USA: Association for Computing Machinery, CHI ’09, p.719–728. Available from: https://doi.org/10.1145/1518701. 1518813. [26] Lazonder, A.W., 2001. Minimalist instruction for learning to search the World Wide Web. Education and information technologies, 6(3), pp.161–176. Available from: https: //doi.org/10.1023/A:1012756223618. [27] Luther, L., Tiberius, V. and Brem, A., 2020. User experience (ux) in business, management, and psychology: A bibliometric mapping of the current state of research. Multimodal technologies and interaction, 4(2), p.18. Available from: https://doi.org/10.3390/mti4020018. [28] Mayhew, D., 1999. The usability engineering lifecycle: A practitioner’s handbook for user interface design. San Francisco, CA: Morgan Kaufmann Publishers Inc. [29] Moore, M., Sheffield, A., Robinson, H. and Phillips, A., 2014. Designing a course for teachers: Introduction to teaching online. In: M. Searson and M.N. Ochoa, eds. Proceedings of society for information technology & teacher education international conference 2014. Jacksonville, Florida, United States: Association for the Advancement of Computing in Education (AACE), pp.583–588. Available from: https://www.learntechlib.org/p/130815. [30] Moran, K., 2015. The characteristics of minimalism in web design. Available from: 197 https://doi.org/10.1016/j.jbusres.2017.12.011 https://ec.europa.eu/docsroom/documents/13406/attachments/2/translations/en/renditions/native https://ec.europa.eu/docsroom/documents/13406/attachments/2/translations/en/renditions/native https://hcibook.com/e3/ https://hbr.org/2010/07/stop-trying-to-delight-your-customers https://hbr.org/2010/07/stop-trying-to-delight-your-customers https://doi.org/10.5220/0002799504330438 https://www.researchgate.net/publication/281904323_Evaluating_the_Usability_of_Educational_Websites_Based_on_Students%27_Preferences_of_Design_Characteristics https://www.researchgate.net/publication/281904323_Evaluating_the_Usability_of_Educational_Websites_Based_on_Students%27_Preferences_of_Design_Characteristics https://www.researchgate.net/publication/281904323_Evaluating_the_Usability_of_Educational_Websites_Based_on_Students%27_Preferences_of_Design_Characteristics https://www.indeed.com/career-advice/finding-a-job/what-is-web-designing/ https://www.iso.org/standard/77520.html https://doi.org/10.1201/9780203305683 https://doi.org/10.1145/1518701.1518813 https://doi.org/10.1145/1518701.1518813 https://doi.org/10.1023/A:1012756223618 https://doi.org/10.1023/A:1012756223618 https://doi.org/10.3390/mti4020018 https://www.learntechlib.org/p/130815 CTE Workshop Proceedings, 2022, Vol. 9: CTE-2021, pp. 184-199 https://www.nngroup.com/articles/characteristics-minimalism/. [31] Nielsen, J., 2012. Usability 101: Introduction to Usability. Available from: https://www. nngroup.com/articles/usability-101-introduction-to-usability/. [32] Nielsen, J., 2020. Ten usability heuristics for user interface design. Available from: https: //www.nngroup.com/articles/ten-usability-heuristics/. [33] Nielsen, J. and Molich, R., 1990. Heuristic evaluation of user interfaces. Proceedings of the sigchi conference on human factors in computing systems. New York, NY, USA: Association for Computing Machinery, CHI ’90, p.249–256. Available from: https://doi.org/10.1145/ 97243.97281. [34] Norman, D. and Nielsen, J., 2018. The Definition of User Experience (UX). Available from: https://www.nngroup.com/articles/definition-user-experience/. [35] Notess, M., 2001. Usability, user experience, and learner experience. Available from: https://elearnmag.acm.org/archive.cfm?aid=566938. [36] Pflugfelder, E.H., 2013. The minimalist approach to online instructional videos. Technical communication, 60(2), pp.131–146. Available from: https://www.ingentaconnect.com/ contentone/stc/tc/2013/00000060/00000002/art00004. [37] PK, R., 2016. 10 top tips to achieve minimalism in your web design. Available from: https://acodez.in/minimalism-in-web-design/. [38] Prometheus, 2022. Available from: https://prometheus.org.ua. [39] Rubin, J. and Chisnell, D., 2008. Handbook of usability testing: how to plan, design, and conduct effective tests. 2nd ed. Indianapolis, IN: Wiley Publishing Inc. [40] Sani, S.M. and Shokooh, Y.K., 2016. Minimalism in designing user interface of commer- cial websites based on gestalt visual perception laws (case study of three top brands in technology scope). 2016 second international conference on web research (icwr). pp.115–124. Available from: https://doi.org/10.1109/ICWR.2016.7498455. [41] Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., Elmqvist, N. and Diakopoulos, N., 2016. Designing the user interface: Strategies for effective human-computer interaction. 6th ed. New York: Pearson. [42] Squires, D., 1999. Usability and educational software design: Special issue of interacting with computers. Interacting with computers, 11(5), pp.463–466. Available from: https: //doi.org/10.1016/S0953-5438(98)00062-9. [43] Squires, D. and Preece, J., 1996. Usability and learning: Evaluating the potential of educational software. Computers & education, 27(1), pp.15–22. Available from: https: //doi.org/10.1016/0360-1315(96)00010-3. [44] Ssemugabi, S. and Villiers, R. de, 2007. A comparative study of two usability evaluation methods using a web-based e-learning application. Proceedings of the 2007 annual research conference of the south african institute of computer scientists and information technologists on it research in developing countries. New York, NY, USA: Association for Computing Machinery, SAICSIT ’07, p.132–142. Available from: https://doi.org/10.1145/1292491. 1292507. [45] Van Greunen, D. and Wesson, J., 2002. Formal usability testing of interactive educational software: A case study. In: J. Hammond, T. Gross and J. Wesson, eds. Usability: Gaining a competitive edge. Boston, MA: Springer US, pp.161–176. Available from: https://doi.org/10. 1007/978-0-387-35610-5_11. 198 https://www.nngroup.com/articles/characteristics-minimalism/ https://www.nngroup.com/articles/usability-101-introduction-to-usability/ https://www.nngroup.com/articles/usability-101-introduction-to-usability/ https://www.nngroup.com/articles/ten-usability-heuristics/ https://www.nngroup.com/articles/ten-usability-heuristics/ https://doi.org/10.1145/97243.97281 https://doi.org/10.1145/97243.97281 https://www.nngroup.com/articles/definition-user-experience/ https://elearnmag.acm.org/archive.cfm?aid=566938 https://www.ingentaconnect.com/contentone/stc/tc/2013/00000060/00000002/art00004 https://www.ingentaconnect.com/contentone/stc/tc/2013/00000060/00000002/art00004 https://acodez.in/minimalism-in-web-design/ https://prometheus.org.ua https://doi.org/10.1109/ICWR.2016.7498455 https://doi.org/10.1016/S0953-5438(98)00062-9 https://doi.org/10.1016/S0953-5438(98)00062-9 https://doi.org/10.1016/0360-1315(96)00010-3 https://doi.org/10.1016/0360-1315(96)00010-3 https://doi.org/10.1145/1292491.1292507 https://doi.org/10.1145/1292491.1292507 https://doi.org/10.1007/978-0-387-35610-5_11 https://doi.org/10.1007/978-0-387-35610-5_11 CTE Workshop Proceedings, 2022, Vol. 9: CTE-2021, pp. 184-199 [46] Vlasenko, K., Kovalenko, D., Chumak, O., Lovianova, I. and Volkov, S., 2020. Minimalism in designing user interface of the online platform “Higher school mathematics teacher”. Ceur workshop proceedings, 2732, pp.1028–1043. Available from: http://ceur-ws.org/Vol-2732/ 20201044.pdf. [47] Vlasenko, K., Volkov, S., Sitak, I., Lovianova, I. and Bobyliev, D., 2020. Usability analysis of on-line educational courses on the platform “Higher school mathematics teacher”. E3s web of conferences, 166, p.10012. Available from: https://doi.org/10.1051/e3sconf/202016610012. [48] Vlasenko, K.V., Sitak, I.V., Kovalenko, D.A., Volkov, S.V., Lovianova, I.V., Semerikov, S.O. and Zahrebelnyi, S.L., 2022. Methodical recommendations for the development of online course structure and content. In: S. Semerikov, V. Osadchyi and O. Kuzminska, eds. Proceedings of the symposium on advances in educational technology, aet 2020. University of Educational Management, Kyiv: SciTePress. [49] Vlasenko, K.V., Volkov, S.V., Lovianova, I.V., Chumak, O.O., Sitak, I.V. and Bobyliev, D.Y., 2020. Management of online platform development and support process. Ceur workshop proceedings, 2879, pp.333–345. [50] Vlasenko, K.V., Volkov, S.V., Lovianova, I.V., Sitak, I.V., Chumak, O.O., Semerikov, S.O. and Bohdanova, N.H., 2022. The criteria of usability design for educational online courses. In: S. Semerikov, V. Osadchyi and O. Kuzminska, eds. Proceedings of the symposium on advances in educational technology, aet 2020. University of Educational Management, Kyiv: SciTePress. [51] Wesson, J., 2002. Usability evaluation of web-based learning. In: D. Passey and M. Kendall, eds. Tele-learning: The challenge for the third millennium. Boston, MA: Springer US, pp.357–363. Available from: https://doi.org/10.1007/978-0-387-35615-0_50. [52] Wolverton, C.C. and Guidry Hollier, B.N., 2019. A minimalist design for distance learning. International journal of educational management, 33(7), pp.1457–1465. Available from: https://doi.org/10.1108/IJEM-09-2017-0237. [53] Zaharias, P., 2006. A usability evaluation method for e-learning: Focus on motivation to learn. Chi ’06 extended abstracts on human factors in computing systems. New York, NY, USA: Association for Computing Machinery, CHI EA ’06, p.1571–1576. Available from: https://doi.org/10.1145/1125451.1125738. 199 http://ceur-ws.org/Vol-2732/20201044.pdf http://ceur-ws.org/Vol-2732/20201044.pdf https://doi.org/10.1051/e3sconf/202016610012 https://doi.org/10.1007/978-0-387-35615-0_50 https://doi.org/10.1108/IJEM-09-2017-0237 https://doi.org/10.1145/1125451.1125738 1 Introduction 2 Method 2.1 Usability of user interface (UI) 2.2 User experience (UX) in designing the on-line platform 2.3 UI/UX design in designing educational systems 3 Discussion 4 Conclusions