Building user interfaces in e-learning resources

Y V Kurzibova

Irkutsk State University, Karl Marx St.1, Irkutsk, Russia, 664003

[email protected]

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 <form> elements. HTML5 (Hyper Text Markup Language, version 5)
implements the <video>, <audio>, <canvas> elements of scalable vector graphics language,
mathematical formulas, and so on. In addition to basic widgets, it is possible to expand the
functionality of training modules and use a variety of Web services that solve educational
problems: Learningapps.org [14], StudyStack [15], Phet.colorado.edu [16], Cacoo.com [17]
etc.

5. Stages of building an e-learning course

The construction of a GUI (graphical user interface) is based on arranging educational cases in the form
of frames where the set of slots can be modified and can include various widgets (marked up texts, tasks
for correspondence, interactive maps, tasks for establishing sequences, testing, interactive games and
tasks, and etc.).
We analyze and extend instructional design model [1] to implement interfaces as a frame structure
for presenting learning information.
1. Make pedagogical analysis, determine the behavioral and learning goals.
2. Creation of control and measuring materials.
3. Development of educational materials and screen forms.
a. Building a course tree.
b. Assignment important characteristics of educational elements.
c. Description of the significant characteristics of educational elements.
d. Defining the style and visual design of educational elements.
e. Create your own form with frames for current user.
f. Development of training strategies.
g. Loading the course in LMS.
4. Evaluation of control tasks.
5. Analysis of learners and context.
6. Possible adjustment of learning objectives, strategies, materials.
7. Creating solutions for content modification.

6. Conclusions
The article presents a new approach to arranging user interface in e-learning resources, which
contributes to the individualization of e-learning by employing a graphical and instructional design
model which enables implementation an individual action map. This approach implies arranging the
interface using widgets accessible by means of HTML and from third-party web services, which are
based on didactic tasks. In comparison to similar approaches, the proposed approach ensures greater
involvement of students in the educational process, because the frame model for presenting educational
information takes into account the specifics of the student's cognitive activity.
In order to ensure the transferability of EER with frame interfaces, it is proposed to represent the
implementation in the form of a SCORM package, which is capable of being embedded in any modern
LMS (distance learning system).

References
[1] Merrill M D, Drake L, Lacy M J, Pratt J, & ID2_Research_Group. (1996). Reclaiming
instructional design. Educational Technology, 36(5), 5-7 at:
https://mdavidmerrill.files.wordpress.com/2019/04/reclaiming.pdf
(accessed: 14.02.2021)
[2] Tkachenko V E, Steinberg V E, Manko N N Didactic design - instrumental approach.(2006).
Education and Science, 1(37) 58-67
[3] Spasennikov V V, Grishin K A 2017 Pedagogical design in ergonomic research and e-learning:
formation and development. Electronic journal "Concept", V7 37-48 at: http://e-
koncept.ru/2017/170157.htm (accessed: 14.02.2021)
[4] Аvadaeva I V, Anisimova-Tkalich S K, Vezetiu E V, Vovk E V, Goldenova V S 2018
Methodological foundations for the formation of a modern digital educational environment:
monograph. at: http://scipro.ru/conf/monographeeducation-1.pdf (accessed: 14.02.2021)
[5] Spasennikov V V, Grishin K A 2017 Pedagogical design in ergonomic research and e-learning:
formation and development Scientific-methodical electronic journal "Concept" V7 37-48 at:
http://e-koncept.ru/2017/170157.htm (accessed: 14.02.2021)
[6] Zholdasov P 2019 Pedagogical design as a means of increasing the efficiency of the organization
of the educational process Bulletin Of Don State Agrarian University
S2-3 (32) 32-36
[7] lemish D 2021 Design and development of a graphic user interface of the educational
organization website Modern programming materials of the III International scientific-
practical conference. Nizhnevartovsk p 76-80
[8] Farhan W, Razmak J, Demers S, La Flamme S 2019 E-learning systems versus instructional
communication tools: Developing and testing a new e-learning user interface from the
perspectives of teachers and students Technology in Society
[9] Renee S 2020 Supporting learners’ self-regulated learning in Massive Open Online Courses
Computers & Education at:
https://www.sciencedirect.com/science/article/pii/S0360131519303240
(accessed: 14.02.2021)
[10] Shareable Content Object Reference Model. Version 1.2. (2001). at:
https://www.adlnet.gov/ (accessed: 14.02.2021)
[11] Lavrentev G.V. Innovative teaching technologies in professional training of specialists
Part 2. p 232.
[12] Gorodetskii V.I. Self-organization and multiagent systems: I. Models of multiagent
self-organization. Izvestiya RAN. Theory and control systems. 2 pp 92-120.
[13] Minsky M. A Framework for Representing. MIT-AI Laboratory Memo 306, Cambridge.[14]
LearningApps.org: multimediale, interaktive Lernbausteine erstellen einfach gemacht. at:
https://learningapps.org/ (accessed: 14.02.2021)
[15] StudyStack. at: https://www.studystack.com/ (accessed: 14.02.2021)
[16] PhET Interactive Simulations. at: https://phet.colorado.edu (accessed: 14.02.2021)
[17] Cacoo for drawing diagrams. at: https://cacoo.com/ (accessed: 14.02.2021)