The paper presents the results of the study on the application of the principles of UX/UI design in ensuring the functionality of the website of interior decorations and household accessories. The layout of the site and the responsive design of an online store and the evaluation of the results using web analysis tools were made. The current principles in the field of UX/UI design and their use for the process of developing and promoting websites have been studied

Cazac, Viorica

Efremova, Nadejda

Electronic Repository Kyiv National University of Technologies and Design

IV Міжнародна науково-практична конференція «АКТУАЛЬНІ ПРОБЛЕМИ СУЧАСНОГО ДИЗАЙНУ» Київ, КНУТД, 27 квітня 2022 р. ____________________________________________________________________ 211   ПЛАТФОРМА 3. СЕКЦІЯ 1.    ІНФОРМАЦІЙНІ ТЕХНОЛОГІЇ ВІЗУАЛІЗАЦІЇ  У ДИЗАЙНІ    УДК  004.055               APPLYING UX/UI DESIGN IN WEB SITE CREATION EFREMOVA Nadejda, CAZAC Viorica  Technical University of Moldova, Chishinau, Republic of Moldova  viorica.cazac@dttp.utm.md  The paper presents the results of the study on the application of the principles of UX/UI design in ensuring the functionality of the website of interior decorations and household accessories. The layout of the site and the responsive design of an online store and the evaluation of the results using web analysis tools were made. The current principles in the field of UX/UI design and their use for the process of developing and promoting websites have been studied.  Key words: UX/UI design, website, principles, performance.  INTRODUCTION Current trends in e-commerce interact directly with the design of UX (User Experience/User Experience)/UI (User Interface) in the process of developing their website. Web design solves a multitude of tasks in a wide variety of areas, helps improve marketing strategies and presents a powerful tool for increasing conversion [1]. So this is particularly important for online commerce. A quality design of a website must work perfectly on all existing devices, be relevant to current trends, be intuitive, differentiate itself from numerous competitors. Particularly important is the use of all UX design features to retain visitors to the site offering products or services that consumers can get without much effort. Without a quality UI design, it is practically not possible to attract the attention of visitors and return them to the site. PURPOSE The aim of the work is to apply the principles of UX/UI design in ensuring the functionality of commercial websites and analyzing their efficiency. RESULTS AND DISCUSSION UX and UI design: concept and distinctive principles. UX/UI (User Experience/User Interface design) design includes the following components such as: visual design, programming, psychology and interaction IV Міжнародна науково-практична конференція «АКТУАЛЬНІ ПРОБЛЕМИ СУЧАСНОГО ДИЗАЙНУ» Київ, КНУТД, 27 квітня 2022 р. ____________________________________________________________________ 212 design [26, 30]. A UX designer is concerned about the entire process of creating a website or web application using the design, branding, and functionality aspects. UX Design expresses itself through the psychology of the user experience, as well as refers to the planning of the Web interface. UX Design presents a creative process that determines what a website will look like. A UX designer focuses on creating the concept for the website user, how all elements of the UI interact with the visitor. It is worth mentioning that the main task of the UX design is to optimize the user experience, as well as to eliminate the shortcomings arising in the result of navigation processes [2]. The design of the user interface focuses on the design of graphic interfaces accessible from different electronic devices: computer, tablets, smartphones and mini-computers. In recent years, certain trends in the application of UX/UI design have been noted, determined by the need to improve the functionality of their websites. Minimalism and simplicity. Currently in Web design there is a tendency towards minimalism and simplicity. The elements of the design are attractive to visitors and only those strictly necessary for the user are placed in the foreground. At the same time, the interface should be easy to understand, intuitive, easy and accessible. The content must remain the center of attention. Fonts must be "scalable" at different sizes. The use of icons simplifies the user's interaction with the Web interface, contributes to increasing the intuitive use of details. Shadows and gradients. The use of shadows and gradients in Web design remains relevant to this day. The creation of a modern and airy design is of great importance. The gradients also became more complex, applying different colors and their combinations. Also known is the Color Blur effect, which expands the interface space.  Combination of 2D and 3D images. It is the latest trend, which gives the product interface depth, realism and a unique aesthetic. It is used in different stages of web design design. Neomorphism. It is one of the main principles of modern Web design. Contrast, blurring of the edge, increasing the intensity of the object's shadow are used to highlight the design elements. The use of soft shadows and a realistic, modern look of the Web interface is at the heart of this web design direction. Abstract graphic compositions help create a more attractive design for site visitors, set the right accents, and create new shapes. Use of video and animations. Video is part of the design, must be consistent with the content of the site and allow highlighting of the main idea. The choice of whether or not to use the animation depends directly on the audience of the website. Through video, a short and concise introduction of the user with the product or service is carried out. Animation is used to highlight functional elements and attract the attention of users.  The overlay typography features a variety of options for imposing fonts on posters, banners, and the rest of the content of your website. The overlapping typography (fonts) complete the composition of the web page through dynamics, allows the transmission of the idea in a more advantageous way from a graphic point of view. IV Міжнародна науково-практична конференція «АКТУАЛЬНІ ПРОБЛЕМИ СУЧАСНОГО ДИЗАЙНУ» Київ, КНУТД, 27 квітня 2022 р. ____________________________________________________________________ 213 Commercial efficiency - identity and benchmarks. The commercial efficiency of the project depends on the conversion, taking into account the measurable indicators that determine it. The measurable indicators of conversion are presented below: The average duration of the visit. An important indicator that shows how much time a visitor spends on the site on average during a visit. A long enough visit indicates that the site is interesting to the visitor - it is convenient in use and contains high-quality information. Too little time to visit indicates poor use and low-quality content.  The depth of view represents the number of pages visited by the user in a single session.  Events. An event can be an action of the user who has not changed the URL of the page - it can be clicking on a button, submitting a form, opening a menu, etc. Targeted actions. It consists of a succession of steps needed to take to achieve a goal. For example, the target action is to buy a product, which consists of visiting the product pages, adding the selected products to the cart, filling out a form with personal data and placing an order. Buying a product is a micro conversion, and the intermediate steps are the same as micro conversions. Tracking micro-conversions allows you to know more accurately the behavior of visitors at each stage and why a potential buyer did not take the targeted action. Current strategies in website design. Research has shown that, there are certain patterns of user behavior. focused on ways of perceiving the information on the screen (the most common patterns of the user's eye movement). Understanding these methods allows the correct placement of page elements, which ensures that the information is perceived correctly.  The F-pattern (fig.1), describes the user's behavior well when they are on a site with a lot of text or content placed on a grid in one direction. It has been revealed that users first start reading horizontally, right at the top of the page, after which they look down to the left side of the screen until they find a point of interest, after which they read again.      Fig. 1. The order of view of the page according to model F Fig. 2. The order of view of the web page according to model Z Fig. 3. The Gutenberg Chart Model in Visual Perception  The Z-pattern. The user's gaze moves directed to certain points on the screen: first horizontally to the right, then diagonally down and left, after which the horizontal movement is repeated (Figure 2.). IV Міжнародна науково-практична конференція «АКТУАЛЬНІ ПРОБЛЕМИ СУЧАСНОГО ДИЗАЙНУ» Київ, КНУТД, 27 квітня 2022 р. ____________________________________________________________________ 214 Gutenberg diagram. Divide the screen into 4 parts when the eye movement matches the Z pattern and the elements on the screen are evenly distributed (Figure 3). The design navigation of a website. Well-planned and designed navigation allows not only easy use of the site, but also quick finding of the product of interest to the visitor. The object of the search can be the product that the visitor needs, the contact information of the company - it should be easily found. AI (Information Architecture: organizational structure, hierarchical structure, matrix structure, marking system, navigation system, metadata, search engine, CTA elements (Click to action)) presents the structural design of web pages - the principle of organizing and dividing content. Informational architecture is an important part of UX design, as it provides convenient sorting of information on the site, without which site visitors could not find the necessary materials. Methodology for evaluating the effectiveness of a website. The evaluation of the effectiveness of a website, the compliance with the relevant criteria and indicators is visually evaluated. The visual assessment should take into account whether the design of the site complies with current trends in use and at the same time is pleasant and easy to perceive. Within the undertaken study, the following parameters were evaluated: navigation, the path to purchase, search, quality of content, the contact details. CONCLUSIONS The study undertaken within the present work allowed the establishment of current and efficient solutions that contributed to the development of the website of an online store applying the principles of UX/UI design. Compositional solutions: abstract graphic compositions, which contribute to the creation of an attractive design and emphasize the corporate identity, arrangement and size of the components, symmetry gives a sense of balance, the grid system compositional and chromatic organization: contrasting chromatic composition determines the image of the site and highlights the important parts of the page, the nuanced colors provide highlighting in the general and typographical ensemble chosen are aimed at obtaining the purpose of obtaining a user experience as favorable as possible for onlin store visitors. The study of commercial efficiency demonstrated the dependence of benchmarks on UX/UI design.  The design of a website is an effective tool for attracting and retaining visitors, which allows a significant increase in key indicators: conversion rate, traffic, visit duration. REFERENCES 1. Veen J. The Art & Science of Web Design. Printed in the United States of America, 2001, 247 p.  2. Мальцев В. Анализ Web-технологий для создания онлайн-площадки. Молодой вестник Дона. Ростов-на-Дону 2020. №. 2(23). С. 126-130. 3. Яхонтова И. UX –дизайн как инструмент реинжиниринга бизнес процессов. UX-UI-дизайн, опыт пользовательского взаимодействия, человеко-компьютерное взаимодействие, бизнес-процессы. Краснодар, 2013. №. 94. С. 1-11. Final visual area 

Applying UX/UI design in website creation

https://er.knutd.edu.ua/bitstream/123456789/21006/1/APSD_2022_V1_P211-214.pdf

Applying UX/UI design in website creation

Abstract

Similar works

Full text

Available Versions

Electronic Repository Kyiv National University of Technologies and Design