TEMPLATES FOR DESIGNING SCALABLE USER INTERFACES FOR MOBILE APPLICATIONS

ABSTRACT

Consistency in mobile app user interface design is critical to creating a predictable and seamless user experience. When interfaces follow a consistent design language, users can easily navigate and interact with the application. Therefore, the aim of the paper is to analyse various patterns that are used to design scalable user interfaces for mobile applications. Research methods: synthesis and analysis, comparison, systematisation, grouping, classification, generalisation. In the process of research the essence and purpose of design patterns of scalable user interfaces are described. The types of existing design patterns are highlighted separately. In addition, the advantages and problems of using templates in the process of designing scalable user interfaces of mobile applications are outlined. The results obtained allow us to conclude that the use of templates provides an opportunity to save resources when scaling an application, however, in order to maximise the effect, it is necessary to take into account the opportunities and disadvantages of templates.

АННОТАЦИЯ

Последовательность в дизайне интерфейса мобильного приложения при его масштабировании имеет решающее значение для создания предсказуемого и бесшовного пользовательского опыта. Когда интерфейс следует единому языку представления и оформления, пользователи могут легко перемещаться и взаимодействовать с приложением. В связи с этим цель статьи заключается в проведении анализа различных шаблонов, которые могут использоваться для проектирования масштабируемых пользовательских интерфейсов мобильных приложений. Методы исследования: синтез и анализ, сравнение, систематизация, группировка, классификация, обобщение. В процессе исследования описана сущность и назначение шаблонов проектирования масштабируемых пользовательских интерфейсов. Отдельно выделены типы существующих шаблонов проектирования. Кроме того, обозначены преимущества и проблемы использования шаблонов в процессе проектирования масштабируемых пользовательских интерфейсов мобильных приложений. Результаты исследования позволяют заключить, что использование шаблонов дает возможность обеспечить экономию ресурсов при масштабировании приложения, однако, для получения максимального эффекта следует учитывать возможности и недостатки шаблонов.

Keywords: template, interface, application, design, user.

Ключевые слова: шаблон, интерфейс, приложение, дизайн, пользователь.

Introduction

Nowadays, the number of people using smartphones is growing every day. These devices are increasingly finding their way to various types of mobile applications, including entertainment, commerce (m-commerce), or education (m-learning) [1]. In order to reach a wide range of potential users, companies have to support several existing mobile platforms for each of their mobile applications. With this in mind, in today’s rapidly changing technology landscape, developing a web application that not only works but also scales effectively as user demand grows is of utmost importance. For example, the Google and Apple App Stores combined have about 6.63 million applications [2]. And according to Statista Digital Market estimates, revenue in most mobile app segments will grow at a steady pace over the next few years and reach about $613 billion in 2025 (Fig. 1). The mobile app development industry is evolving at a tremendous speed. To survive and thrive in this digital era, companies must monitor and predict the changing trends in the industry. In this context, it is clear that understanding and implementing best practices for scalable web application user interfaces can be critical to achieving long-term success.

Figure 1. Worldwide Mobile App Revenue by Segment, $ million

Designing a user interface for a mobile app is an important process that requires careful planning to ensure a smooth user experience. A well-designed user interface can speed up procedures, improve the efficiency of using the app, and provide cost savings over time. Conversely, a poorly designed user interface can lead to confusion and costly errors [3].

At the same time, it should be noted that in the complex world of multi-channel service and agile product development, traditional design approaches are no longer sufficient. Scalability of the user interface, and therefore the corresponding design systems, are becoming increasingly important. The characteristics of a scalable user interface are that it is easy to maintain and flexible enough to expand as needed.

Thus, a more detailed study of issues related to approaches and methods for designing a mobile application interface that can be easily duplicated, adapted to different screen sizes, devices, orientations, resolutions and user preferences without compromising functionality, aesthetics or performance is an important scientific and practical task, which predetermined the choice of the topic of this article.

Materials and methods of the research

The practices of using design patterns, which are reusable solutions for common programming problems, including those related to the development of user interfaces, are described in their publications by D. A. Varanitsky, V. Yu. Belash, T. A. Kovalenko, L. I. Yakovlev, D. A. Efimov, L. Blair, J. Vergales, L. Peregoy and others.

The principles and methods that help in developing an interface that scales effectively are considered by M. V. Urbanovich, K. A. Kovaleva, M. U. Erkenova, A. A. Balov and other authors.

The rationale for the most optimal and effective strategies for creating a user interface, taking into account scalability, and the development of approaches to testing the usability of an application before deployment are studied by F. A. Mastyaev, A. V. Batishchev, A. I. Zaitsev, S. A. Aleksakhina, A. Acikgoz, M. Cakirli, and others.

However, despite the existing works and developments, a number of issues in this subject area remain open. In particular, the problem that arises when switching from one platform to another, as well as the scaling problem during migration from devices with a smaller smart device screen (phones) to devices with a larger screen (tablets), remain unsolved. Special attention should be paid to the criteria for choosing an appropriate user interface structure that can guarantee that the visual elements of the application will be consistent and coherent, and the process of maintenance and updating as the application develops is simple.

Thus, the purpose of the article is to analyze various patterns that are used to design scalable user interfaces of mobile applications.

Research objectives: 1) to reveal the essence and purpose of design patterns of scalable user interfaces; 2) to describe the types of existing design patterns; 3) to provide the advantages and problems of using patterns in the process of designing scalable user interfaces of mobile applications. The methodological basis of the study is formed by the methods of scientific synthesis and analysis, comparison, systematization, grouping, classification, generalization.

Results and discussion. First of all, it should be noted that design patterns were first described in the 1960s by Ch. Alexander, an architect who noticed that many things in life happen according to patterns. He adapted the observations to his work and published many conclusions on this topic. Since then, design patterns have found their place in many areas of everyday life, they can be found in the design and development of user interfaces. From a narrow point of view, design patterns are effective, consistent solutions to recurring problems [4]. In turn, user interface design patterns are solutions to common problems of creating, scaling and managing an interface.

UI components are the building blocks of a design system. They include buttons, forms, icons and other interactive elements that can be reused in different parts of the application. Standardizing these components provides a holistic look and feel to the entire user interface. By using predefined UI components, designers can maintain consistency and simplify the development process.

A good UI pattern is more than just a pretty picture; it is practical, predictable, and can be combined with other patterns flexibly. Its primary purpose is to solve a problem that users face repeatedly, whether it is finding a way to filter a list of products or understanding error messages. The most successful design systems, such as Material Design, Carbon, and Polaris, use patterns to bring order to chaos and structure multiple tasks and functions. For example, Google’s Material Design system standardizes button behavior so that every “Send” button looks the same whether the platform is Gmail or Google Drive. It is this consistency that helps users feel comfortable using the app.

Today’s scalable mobile UI design patterns provide context-specific solutions for transitioning design elements or interaction concepts from one platform to another, while ensuring compliance with the design guidelines and interaction patterns of the target platform. Moreover, they also solve the problems of scaling user interface elements when moving from one size of mobile devices to another [5].

It can be noted that there are various classifications and approaches to grouping scalable user interface design patterns. Let's consider some of them in more detail.

Thus, transition patterns and scaling patterns are widely used in the software environment.

Transition patterns are divided into three large groups: interaction patterns, style patterns, and structural patterns.

Interaction patterns. The task of these patterns is to help solve problems and issues related to organizing actual interaction with the user (for example, the application layout, interactive gestures, application settings, navigation rules, etc.), which usually arise as a result of the transition of the application interface from one platform to another. Thanks to the patterns of this group, a consistent connection between users and the target application can be achieved in accordance with the main concept provided by the base platform.

Style patterns. These patterns are designed to solve problems related to the visual design (for example, themes, displays, colors, textures, etc.) of the application's user interface. When the process of porting a mobile application interface created for a specific platform to other platforms is implemented, the interface of each version must have the style factors of the base platform. This is necessary in order to provide the same user experience on any device.

Structural patterns. These patterns are necessary for organizing and uniformly presenting common user interface elements, such as lists, tabs, buttons, scrolls, text fields, switches, panels, dialogs, etc. The use of these patterns, like the previous group, is aimed at creating a positive user experience of interaction with the platform when a specific user interface element is transferred from another platform.

Scaling patterns solve the problems of expansion and expansion that arise when switching from one mobile device size to another. As a rule, these patterns are used when changing the sizes of common user interface elements or, if the structure of the entire layout is transformed, its individual elements. The main focus of these patterns is to describe under what circumstances and by how much a UI element should be scaled based on its value, as well as to address the problem of rebuilding the overall layout when switching from one device size to another [6].

Examples of layouts in this group are horizontal or vertical layouts, which act as both a controller and a layout element. They first retrieve layout information provided by the group's children, then determine what size the group should be (minimum and maximum) to accommodate all of the children, and then provide information about the minimum and preferred size.

This group highlights accommodation layouts for adjusting the size of the content. To do this, the template retrieves the positioning information provided by any layout element. Depending on the settings, the transform size is controlled based on this information.

Vertical (horizontal) layouts, together with accommodation layouts, allow the child elements to be positioned and resized according to the available space after the transform size is set.

Another type in this group are layout templates. These patterns address the modifications that occur in the overall layout structure or in a specific group of UI elements as a result of changes in the device screen size and resolution. Given that tablets have more space available than phones (since the typical orientation on tablets is horizontal compared to vertical on phones), there is often a need to change the layout structure to provide a better user experience according to the device environment. For example, when migrating an app UI from phones to tablets, decisions need to be made about the default orientation (portrait or landscape) and the corresponding layout. In such cases, the corresponding patterns provide solutions that are best suited for a specific context for rearranging specific UI elements or the overall structural layout [7].

Using patterns to design scalable mobile app user interfaces has many benefits, including increased efficiency, improved collaboration, and a better user experience. Design systems reduce redundancy by providing reusable components, which speeds up the design and development process. They also improve collaboration between designers and developers by ensuring consistency in the design vision. Overall, design systems contribute to a more streamlined and efficient workflow. As with technical debt, the longer developers wait to use patterns to design scalable user interfaces, the more expensive it will be in the future. Failure to prioritize component reuse can impact development speed and also lead to an increase in the number of bugs or defects found. Figure 2 shows two vectors for designing scalable user interfaces.

Figure 2. Design options for scalable user interfaces in mobile applications

At the same time, it should be noted that the use of patterns for designing scalable user interfaces of mobile applications is associated with a number of challenges. One of the main obstacles is achieving consensus among stakeholders on design standards. In addition, maintaining and updating the design system to keep it relevant and functional requires ongoing efforts.

Conclusion

Summarizing the results of the conducted research, it can be noted that choosing and using the right design pattern for scaling the user interface of a mobile application is an important decision that can affect the performance, compatibility, and maintainability of the application over time. However, their capabilities and disadvantages, as well as their functional purpose, should be taken into account in order to achieve the highest result.

References:

1. Kryazheva E.V., Korolev A.E. Designing a web application for a user interface catalog // Science Diary. 2024. No. 8 (92). P. 23-29.
2. Tyulenev G.V., Ivanova K.I. Fundamentals of designing a user interface for information systems // Education and Science Without Borders: Social Sciences and Humanities. 2024. No. 23. P. 121-126.
3. Zhuang Q., Xu W. Multimedia Analysis of Digital Museum User Interface Based on Goal-Oriented Theory and Information Fusion and Intelligent Sensing // Journal of Sensors. 2022. Volume 18, Issue 19. P. 87-94.
4. Zhu L. Optimization of Digital Media Product Interface Design Based on Multidimensional Heterogeneous Emotion Analysis of Users // Mathematical Problems in Engineering. 2022. Volume 4, Issue 19. P. 12-19.
5. Kantaryuk E.A. Criteria for Designing High-Quality User Interface Design Taking into Account the Psychological Impact of Color // Man. Society. Science. 2024. Vol. 5. No. 1. P. 26-38.
6. Guo J. Application of Style Transfer Algorithm in Interactive Art Design of Mobile Phone Interface // Mobile Information Systems. 2022. No. 14. P. 76-83.
7. Kovalenko T.A. Comparative Analysis of Approaches to Designing User Interfaces of Applications for Android and Aurora Mobile Operating Systems // Alley of Science. 2024. T. 1. No. 4. P. 1009-1015.