Fundamentals of UI/UX design as a component of the pre-service specialist’s curriculum

Nowadays digitalization is considered to be a key driver of socio-economic development. Digital technologies are becoming the basis for creating new products and services as well as for the transition to new business models. Ukrainian course for the development of the digital economy requires the readiness of the education system to provide training of the specialists who are able to provide such transformations, which should be reflected both in the emergence of new areas of training and in focusing the content of educational training on the formation of new digital competencies of pre-service professionals. One of the competencies which is crucial and in demand today for a wide range of specialists, is the mastering the fundamentals of UX/UI-design. The purpose of the paper is to cover the approaches to the creation of the content of pre-service specialists’ training on the fundamentals of UX/UI-design. The significance of the said fundamentals learning in the process of various specialists’ training is discussed. It is proposed the practically-driven approach to the curriculum building. It is distinguished invariant and variable parts in the curriculum of such a training. The content of three core modules which make invariant part of the curriculum is presented. Some relevant forms of work with students are offered within each module. The prospects of the work make the preparation and doing empirical research directed on the verification of the offered approach to the curriculum building in the process of different specialists’ training.


Introduction
Digitalization nowadays is considered to be a key driver of socio-economic development. Digital technologies are becoming the basis for creating new products and services as well as for the transition to new business models. Ukrainian course for the development of the digital economy requires the readiness of the education system to provide training of the specialists who are able to provide such transformations, which should be reflected both in the emergence of new areas of training and in focusing its content on the formation of new digital competencies of pre-service professionals. One of the competencies which is crucial today for a wide range of specialists is the mastering the fundamentals of user interface and user experience design (UX/UI-design).
According to special studies and evidence, UX/UI design is a high-demand field that requires the set of knowledge and skills which are applicable not only to pure IT jobs, but to a wide variety of careers, from marketing to web design to human-computer interaction. It is also pointed out that UX/UI design is a domain which is the intersection of such fields as pure design, engineering, marketing and psychology.
It is relevant to point out that there are a number of courses (specializations) available nowadays on the market of education service both in Ukraine and abroad. They provide a trainee with the set of essential practical skills, necessary to start the career interface designer from the entry-level or extend it basing on the existing skill sets.
However, contemporary higher education in Ukraine, which provides systematized learning of UX/UI design in the process of different specialists' vocational training, needs revision of existing disciplines, their educational content and its renewing on the new level understanding of the design role in the training of potential employees whose expertise expects digital products design of various purpose. The aim of the paper is to cover the approaches to the creation of the content of pre-service specialists' training on the fundamentals of UX/UI-design.

Theoretical framework
Theoretical background of the work is made by the analysis of the (1) importance of the user interface design in the process of developing of any digital mean, and (2) role of the fundamentals of UX/UI design in the vocational training of different specialists.
The user interface design of any application plays exclusive role in the digital product promoting. It shapes the user's experience, determines the product success, and ul- timately increases customer's satisfaction, which is really essential from the business point of view.
In the field of digital design experts distinguish user experience (UX) and user interface (UI) design which testifies that the process of interface development is complicated one and expects specific inter-discipline knowledge of a designer.
According to studies, UX design provides the development of the application features focused on improving the overall user's experience at their interacting with the digital product. UX design is aimed to achieve the application purpose and to supply the maximum user satisfaction. This kind of design creates the basis of any digital product bearing customer's demands in mind. It mainly focuses on building of the application wireframe and structuring all the components due to their functionality [1]. Hence, proper UX design must base on deep understanding of the product work, interaction between different activities initiated by the user, evolution of the scenario of the user behavior etc [2].
The UI design differs from UX design because it rather focuses on the process of application presentation and provides improving of its interactivity. This type of design concentrates on the product appearance and provides directly interaction functions [3]. There are some essential principles of UI design formulated basing on various fields of knowledge. In particular, the information must be presented aesthetically and attractively, but the applied visual means should not contradict the functional framework of the application and distract the user from its main purpose [4].
At the design developing, it is recommended [5] to follow the principle of visual hierarchy which is determined by the graphical elements ranking in accordance with their priority of using and subordination. In addition, it is pointed out the importance of visual accents and their right location; contrast using for attracting attention to the proper graphical elements; balance keeping in the elements presentation applying the concept of the visual weight and others.
On the whole, it is emphasized the importance of UI and UX design in the digital product promotion, as the both types of design shape the first user impression, and depending on their quality, the brand recognition can be created or broken.
Thus, the significance and complication of both types of design need for estimation of the role of the fundamentals of UX/UI design in the vocational training of different specialists. The analysis of the curriculum of university training of potential specialists testifies necessity of reasonable content building of UX/UI design learning [6].
In particular, it is detected that in the curriculum of IT specialists' training there are mandatory and special courses on interface design which provide students with its fundamentals. They are aimed to the software developers, demand quite narrow-specialized prerequisites, and can be inappropriate for the students of other vocations.
However, fundamentals of UX/UI design become the component of the training of really wide circle of specialists who produce different types of digital product. The analysis of the curriculum of their training shows that the design fundamentals are included mostly as optional courses (or even some disciplines modules). Their learning does not provide potential digital designers with systematized professional knowledge and high-level skills in the field of UX/UI design. Thus, it is important to pay attention to the proper training content building.

Practically-driven approach to the building of the curriculum for UX/UI design mastering
In this context, it would be relevant to offer and apply the practically-driven approach to the curriculum building. Due to the evidence in the field of digital product development presented above, it is recommended to distinguish invariant and variable parts in the curriculum of such a training. The invariant part might be covered by the set of academic modules which provide rather universal basis for the design mastering, whereas variable part of the specialists' preparation should includes modules of special training in terms of mastering different specific instruments of UX/UI design. The content of modules which make invariant part of the curriculum is presented below.
The first module "Psychology of visual perception" makes a psychological base for the trainees who have to master the fundamentals of design. The content of the module is focused on the shaping of the trainees' knowledge system which is necessary for deep understanding of the psychological mechanisms and processes underlying visual perception (memory, attention, categorization, decision-making etc.). The special accents in the module are made on the semantics of graphical image due to its psychological significance [7,8]. From the standpoint of psychology, the model of visual image creation involves some information channels. Logical channel forms the bank of reality images. Aesthetic channel composes the images. However, exactly semantic channel controls the work of logical and aesthetic channels. This channel determines the choice of images and the choice of structure of their composition which matches semantic and conveys the sense of formed visual image-text in the most efficient way.
The main forms of work within the module are master classes and workshops. During master classes main focus is given on the students' analysis of specially picked up examples of the interface which represent correct and incorrect practices from the standpoint of psychology of perception. For example, there were used the pairs of interface samples presented in the figures 1, 2 and 3 to be analyzed during the workshops.
The topic of one of the flipped learning workshops within the first module, for example, might be devoted to the psychological features of the reading process and their influence on the design of task-oriented and contentoriented interfaces (figure 3). One group of students is offered to find out and represent material on the peculiarities of these types of interface. It is expected that the students can conclude that task-oriented interface (that mostly uses various control elements with brief text patterns, like navigation panels, menus, buttons etc.) and content-driven interfaces (which usually include massive flowing paragraphs of text) need for applying different fonts which might be caused by our special ability to read the texts.
Covering the special physiological mechanism of perception of printed information is the task for another group of students. In particular, as an example of our practical experience of similar flipped-learning workshops, the students analyzed the resources to find out that the efficiency with which a person read is a function of the amount of text available to us during reading. In fact, there is a linear relationship between reading speed and the quantity of characters that are visible to the eye (if the perceptual limit is up to 15-20 characters) [9]. The students managed to realize basic mechanisms of reading: human eyes do not move smoothly along the lines of the page (screen), instead they make discrete jumps between words, focusing on one word for a short period of time before making a parabolic jump to another one (as it is demonstrated on the figure 4).
The students also found out, that despite their nonlinear nature, these eyes movements improve our reading capabilities. At the word processing within our focus, we use the additional information outside of the focused word to direct our reading. While reading, our time to comprehension is assisted by the sense of adjacent context, at the same time we often process automatically (just skip them) Understanding of these findings of cognitive psychology during common discussion at the flipped learning workshop led students to the conclusions that an isolated word (up to 20 characters) will be read more slowly than a word that forms part of a longer phrase. This conclusion, in turns, encouraged students to infer great affect on typographic decision-making for user interfaces: as taskoriented interface tends to collect more isolated words than content-driven one, we can not rely on the contextualizing effects of neighboring words to help improve comprehension of the labeled control elements of task-driven interface. Thus, students' awareness of this functional distinction and psychological peculiarities, obtained during such a workshop, can help narrow their focus on providing a set of meaningful constraints. Finally, it can help students make more intelligent decisions about fonts choosing, which then is going to be used by the them while mastering the basics of graphic interface design.
The second module "Basics of the design of graphic interface" provides a trainee with both theoretical knowledge and practical skills which are in need for the creation of high-quality graphical interface. In particular, it is deeply learnt the spectrum of essential design concepts and techniques: coloristic, font, typography, composition, bootstraps etc. It is also discussed the ways how to highlight the most important elements, to display logical connections between individual elements, to use visual anchors. Principles of visual design, basic qualities and char-  For example, during mastering basic principles involved in the use of the visible language (such as: organize, economize, communicate) it is beneficial to offer for students' analysis chaotic and ordered screen layout; reasonable and unreasonable samples of linking related items and disassociating unrelated items; poor design as for navigation around the site which contrasts with improved design where right layout and color grouping help focus user's attention to most important title areas, and bulleted items guide the user through the secondary areas.
Besides, the trainees are offered to do the set of practical tasks on interface design development with its further analysis and discussion. In particular, the psycho-logical techniques learnt by students at the first module are worked out at the workshops of the second module. We would like to share our practical experience of using specially developed card game "Mental Notes" focused on the involving the trainees in the analysis of applying various psychological techniques to the interface design of their potential web application. Original card deck Mental Notes, created by S. Anderson [10] consists of over 50 insights from psychology which make easy reference and brainstorming tool. Each card describes one insight into human behavior and suggests ways to apply this to the UI design of software applications. We adapted original cards and transformed them into didactic game.
At the preparation stage of the game all the students are assigned the topic of their potential web application. They are given time to think over its possible application users, purpose, functions etc. Then the game starts. The students in turn take a card which represents and describe this or that psychological technique (insight) used in the modern practice of UI design. Some examples of these cards representing, in particular, such techniques as social proof, curiosity, regularity establishing, reciprocity etc., are given in the figure 5.
The students analyze the technique given in the card, the in turns make and prove their decision as for how they are going to use these exact technique at the UI design of the future web application: which visual language and how they are going to apply; how and which means of color, typography and graphical images are relevant to use and why; why such a technique is going to be beneficial exactly for this application.
After the game students obtain the whole deck of the mental cards with different psychological techniques. They are encouraged to apply at least five of them in the UI design of their prototype. The third module "Instrumental interface design" is oriented on the mastering some universal tool environments for interface development. There are a lot of them nowadays on the market. However, the most universal and prospective one seems to be Figma environment. According to experts [11], Figma is a web-based design instrument allowing to create mockups, interactive animations, and high-fidelity prototypes. In addition, Figma provides version control, collaboration features, presentation mode, code generation, which makes it really attractive and professional environment for design projects. The environ-ment supplies a designer with all essential tools for prototype development along with all the workable graphical elements that enables to imitate the functionality of the future digital product, which is significant for potential de-signers' training. Despite the fact that on the Internet nowadays there are a lot of practical recommendations, instructions and lessons on mastering Figma facilities, it is felt the lack of systematized didactic materials focused on the step-by-step learning in the lines of efficient design of various software interfaces which can be used successfully during university training of different specialists.
Thus, the third module of invariant part of the UX/UI design curriculum is relevant to focus on the main facilities of Figma, and provide the students with skills to create and test efficiently the prototype of the digital product applying all the theoretical concepts which were learnt in the first two modules. Here it would be recommended to offer students the set of practical classes within the environment to master both basic tools and advanced Figma facilities including their extension by programming.
Below we are giving some sets of tasks which can be beneficial for mastering Figma facilities in the context of theoretical universal basis for the design mastering, presented in the two previous modules. In particular, after the students' getting familiar with main options of Figma interface, tools, navigation techniques etc., we encourage them to learn deeply peculiarities of color representation in different color systems and their influence on the power of interface elements. The samples of practical tasks offered to the students are given below.
10. Learn the peculiarities of the perception of the same color in the HSB system depending on the change of Saturation (separately), on the change in Brightness (separately) and on the Saturation and Brightness together. Episodes of students' work upon exercise 9 are given below in the figure 6.
11. Find out information on the Internet about the emotional impact of colors.
12. Create a set of figures that regulate the psychological state (mood). Investigate the dependence of mood and emotions on the "temperature" of colors.
Put the results of your investigations into the table.
How the results of your investigations may be used at interface design in the context of their psychological impact on user's behavior within the interface? Make conclusions.
Other practical tasks can include more complicated exercises in Figma directed on both mastering its facilities and working out some stages of UX/UI design and its basic principles discussed at theoretical classes.
In addition, it would be beneficial to involve students into project-oriented activity in order to apply obtained knowledge and skills in their complex, and try them on the more complicated tasks.
Variable part of the said training (the forth module) is relevant to focus on mastering of the instruments of design which are applicable to solving more specific design problems as well as the tools of less universal and desktop environments (such as InVision, Adobe XD, Sketch , Adobe Photoshop, Adobe Illustrator etc.) [10].
The modules depicted above can make either the entire academic discipline of the different specialists' curriculum or they can be included into the other existing courses for training the specialists whose expertise covers various fields including media, marketing, advertising, publishing industry and others.
In addition to practical tasks, students performed project-oriented practice-oriented tasks. In the process of completing such tasks, students had to: develop a prototype of the future site (the type of site was taken into account: landing page, business card site, full-fledged site, etc.); think over a color palette and choose fonts; to develop a logo for the site; select information content using information coding to reduce the amount of information that the user must perceive at a certain time; implement a project using Figma

Conclusions
In accordance with the aims of the paper, it is covered the approaches to the creation of the content of pre-service specialists' training on the fundamentals of UX/UI-design. The significance of the said fundamentals learning in the process of various specialists' training is discussed. Theoretical background of the work is made by the analysis of the importance of the user interface design in the process of developing of any digital product, and by the revealing the role of the fundamentals of UX/UI design in the vocational training of different specialists.
It is proposed the practically-driven approach to the curriculum building for the said training. It is distinguished invariant and variable parts in the curriculum. The content of three core modules which make invariant part of the curriculum is presented. Some relevant forms of work with students are offered within each module.
The prospects of the work make the preparation and doing empirical research directed on the verification of the offered approach to the curriculum building in the process of different specialists' training.