Building user interfaces in e-learning resources Y V Kurzibova Irkutsk State University, Karl Marx St.1, Irkutsk, Russia, 664003 yana@id.isu.ru Abstract. The article discusses a pressing problem of improving the quality of e-learning and considers a special approach to e-learning resources graphic interfaces layout based on the Successive Approximation Model of instructional design. This approach allows the learner to influence the attainability of learning goals, which implements the principle of humanization and individualization of e-learning. 1. Introduction In the current conditions of the 2020 - 2021 pandemic, a forced transition from classical and mixed educational technologies to distance learning occurred. This transition led to a number of problems in the implementation of the educational process in a distance format. The dependence on the technical component has a great influence on e-learning - the availability of the necessary software and hardware, the proficiency of teachers and students with the necessary skills to work with technical and software tools, the existing threat of unauthorized access to educational resources and possible damage or loss of these resources. The rapid transition to e-learning was accompanied by economic problems (inability to acquire all necessary equipment in limited timeframe), ethical, and etc. There are also a number of organizational problems: insufficiently formed skills of self-organization, self-development, and self- control on the part of students. Effective perception of educational information depends on the correct structuring, dosage, and presentation of information to the student. This article is devoted to e-learning, implemented using specialized information systems - Learning management system (LMS), based on the web technologies functioning principles and on the hypertext concept. The issue of the quality of the EER (e-learning educational resources) accompanying distance learning has grown especially important. Lack of adaptability of educational material for the student’s needs and personal abilities, absence of rapid teacher-student feedback, overestimated or underestimated level of requirements, uneven distribution of the teaching load and much more. Overcoming existing problems is a multifactorial, labor-intensive, and time-consuming task. The article proposes a method for building user interfaces of e-learning educational resources, which is based on the analysis of the quality of EER, based on the principles of the SAM (Successive Approximation Model) [1] model of instructional design and the limit of perception of educational material by the learner (its motivational component). _____________ Copyright © 2021 for this paper by its authors. Use permitted under Creative Commons License Attribution 4.0 International (CC BY 4.0). 2. Related work The issues of e-learelening are interdisciplinary in nature; it is studied by researchers from various scientific fields - teachers, psychologists, methodologists, system analysts, programmers, and IT specialists. In the middle of the 20th century, the term instructional design was formed, which defines a whole branch of practical pedagogy. Merrill, Drake, and others, consider it as a scientific discipline that develops the most effective, rational and comfortable ways, methods and systems of teaching that can be used in the field of professional instructional practice [1]. In recent years, there has been a qualitative change in professional training technologies. There was a fusion and mutual influence of information technology and engineering psychology. Course developers began to use often infographics, mental maps, touch screens and interfaces, and adaptable content in their practice [2] Verbal educational information in sciences was modeled using semantic networks, graphs, and frame data models. The frame model is proposed to be used in this article as the main model for presenting data on e-course web pages. Among the new key concepts in the e-learning system is the concept of an e-learning resource. An e-learning educational resource is a comprehensive teaching tool developed on the basis of state educational standards, which allows for an individual-activity approach to the process of purposeful formation of general professional competencies in the subject area of training future professionals [3]. Instructional design in developing EER is an artistic and technical design and presentation of educational material which takes into account a number of factors: the psychological foundations of educational material comprehension, its didactic features, aesthetics of visual forms, and etc. The main goal of multimedia instructional design is to facilitate more effective and high-quality comprehension of educational material when presented on-screen by means of multimedia. In the context of education digitalization, instructional design can also be considered as a tool for the ergonomic and effective creation of digital educational content [4]. There are few stages of ergonomic provision for instructional design framework distinguished: ergonomics of instructional design, analysis of educational goals and specific traits of subject comprehension, developing criteria for ergonomics of a design project, transforming a design project into educational materials, comprehension of educational materials by students, assessing the ergonomics and effectiveness of educational materials, adjusting and improving educational materials [5]. Designing the interface of EER is a software, psychological-instructional, and design task of effectively delivering messages to students using multimedia. In this sense, multimedia instructional design connects the content of an educational resource and its presentation with multimedia data [6]. Today, the most popular software-instrumentl tools for creating prototypes of graphical user interfaces are “Balsamiq Mockups”, “Wireframe Sketcher Studio”, “Flair Builder” [7]. When designing interfaces, the requirements for the appearance of forms of interaction with the user are implemented, as well as the requirements for access to the internal functionality of the system. Prototypes of web pages are often developed: audio-video player, home screen, login into the system [8], video instructions, which can improve the effectiveness of self-regulated learning in open online courses [9]. 3. Information model of e-learning resource An EER is a type of resource presented in a digital form and requiring computer technology to use it [10]. In general, an educational resource includes a structure, subject content, and metadata about them. The structure and content of the EER are defined by the course authors and content managers, who rely on the training standards and didactic objectives of the courses. The structure and content of metadata is determined by the e-learning standards SCORM (Sharable Content Object Reference Model) [10]. The SCORM content model is developed by Advanced Distributed Learning (ADL) with the goal of sharing and openly reusing EER to implement flexible and cost-effective ways to intorduce e-learning. The SCORM model describes components employed in building learning content using learning objects (SCO). The content model also defines how these learning objects are linked together to create courses. The SCORM content model consists of the following components: Assets, Shared Content Objects (SCO), and Content aggregations. The unit of learning information that can be associated with the SCORM Asset is the learning element. A learning element (LE) is a logically complete piece of information to be comprehended. In structure analysis the educational element is an indivisible part of the information in this particular case [11]. The purpose of this article is to describe a method for designing and building prototypes for web pages integrated into LMS in the form of SCO and Asset elements (Figure 1). A class model featuring Curse, CourseTree, SCO, and Asset reveals in more details the essence and fundamental characteristics of EER in the context of e-learning and LMS (Figure 2). LEs can differ either genetically or based on the presentation format, depending on the specific content of educational information: definition of a concept, process, regularity, phenomenon, principle, mode of action, object characteristic, fact, conclusion or consequence [11]. Let us list the main characteristics of LE, which are fundamental for modeling EER (Figure 2). 1. By levels of concepts comprehension: acquaintance, reproduction, application, transformation. 2. By the order of concepts introduction: basic and new. 3. Depending on the information type: definition of a concept, fact, phenomenon, process, regularity, principle, mode of action, characteristic of an object, conclusion or consequence. 4. Conceptual modeling of the interfaces building process To overcome the problems associated with increasing the efficiency of e-learning (the quality of EER is interpreted as the degree of perception by the student), this work proposes an improved approach to building user interfaces in EER, taking into account didactic goals, the specifics of educational tasks and specifics of the perception of certain graphic images. EER is designed by the course developer or designed dynamically by the distance learning system based on the following principles of self- organization and self-regulation [12]: autonomy; global order; adaptability; nonlinear dynamics; array of stable states of the system; simplicity of rules; hierarchical structure. Also, the EER layout is based on the instructional design model SAM (Successive Approximation Model) [10], the essence of which is in the cyclical nature of design and development with the possibility of implementing an action map, which allows the student to influence the attainability of learning goals, the mutual influence of the student, the learning environment, and teacher. There is a need to design and present LE in the enlarged form of the EER to build a model of the student's activity and scenarios for the course progression. Most often, LEs are presented in the form of leaves of a course tree, reflecting the logic of the narration from the curriculum that implements the educational standard. Drawback of such approach is the following: the connection between learning elements reflects only the order of presentation of the material, but does not take into account other types of connections, such as interaction, generation, transformation, structure, management, and functional relationships. The course tree assumes a linear presentation of educational information. The linear structure does not imply "reinforcement learning", "Programmed learning", and also a non-linear structure of information presentation. There are other forms of presenting educational information (knowledge), which are more flexible and can be adjusted to address individualization and adaptation requirements: logical models, production models, semantic networks, frame models [13]. Among the above-mentioned models, we will choose the frame model, because this model demonstrates the versatility of accentuated relationships for structuring knowledge. A frame in learning technology is a unit of knowledge presentation that has been filled in in the past, the details of which, if necessary, can be changed according to the situation. Usually, a frame consists of several cells (slots) and each of them has its own purpose. We propose to build slots of the frame model of knowledge representation, relying on the patterns of cognitive activity, and on the characteristics of LE (Figure 2). • Slot for previously covered LEs. • Slot for basic LEs. • Slot for elements to be covered in the future. • Slot for test questions. • Slot for pop-up messages from the system and the teacher. 0..1 * User takes Role 0..1 Student Teacher СourseDesigner 0..1 0..1 * study Course create CourseTree * tries 1 1 Attempt SCO(СontentОbject ) Test * LearningSession Asset(LearningEelement ) Activity Objective Attempt Figure 1. UML class diagram of e-learning environment. ModeOfAction ObjectCharacteristic Conclusion Process Regularity Principle Definition Fact Phenomenon NewLE LearningEelement +content +meta_info SupportingLE АcquaintanceLE ReproductionLE АpplicationLE TransformationLE Figure 2. UML class diagram of Learning Elements. In the e-lerning environment, hypertext technologies are most often used. We encourage designers and course authors to compose tutorial screens (user interfaces for students) based on widgets implemented by
elements. HTML5 (Hyper Text Markup Language, version 5) implements the