The methodological of developing a mobile application design creating a genealogical tree

Based on the results obtained in Table 1, one can conclude that the most effective and convenient tool is the program Figma. So it is advisable to use it to develop a mobile application for creating a family tree.

Creating a mobile application design for the development of a family tree should be carried out in the following stages:

- development of the concept of creating a mobile application design;;

- development of structure and diagram of transitions;

- creating thumbnails of the mobile application interface;

- development of the style of the mobile application interface;

- creation of a prototype of a mobile application;

- creating an interactive prototype of a mobile application.

Let one move on to the development of the concept of creating a mobile application design. The idea is to design a mobile application to create a family tree.

The goal is to design a simple and intuitive interface for collecting and storing important information about the application's relatives, which simplifies the process of creating a family tree and collecting family information. Also the goal is to attract the attention of the developed design to the younger generation, starting from 20 years.

The design of a mobile application in order to be needed by people, first of all, must be relevant. Therefore, firstly it is necessary to conduct analytics to find potential users.

Analyzing the Android platform for which the application design is developing, it turned out that this platform is used mainly by teenagers and the audience of adult users from 35 to 55 years. Most teenagers use game applications, and adult users use applications for social direction and personalization. Looking at the income of the population, it can be seen that users of the Android platform have low and medium incomes. Users work mainly in technical specialties. Thus, it can be concluded that the target audience of the mobile application for creating a family tree starts from 35 to 55 years.

Also conducting their own survey, the authors found that young people between the ages of 20 and 25 also want to create a family tree and preserve their history and do so systematically.

The main audience of the mobile application is young people of all genders aged 20 to 25 and adult people aged 35 to 55.

The user's goal is to preserve the genus and create a family tree that can be safely preserved without losing important information.

First of all, it is necessary to find out what features you need in the application. As soon as everything becomes clear, we create a user-flow - a block diagram of the mobile application.

Usually user-flow consists of three types of figures:

- rectangles - used to represent screens;

- diamonds - used for conditions (for example, pressing the login button, scrolling left, zooming);

- arrows - connect screens and conditions together.

User-flow is very useful because it gives a logical idea how the program should work and solve problems.

Here is the user-flow diagram that was created at the beginning of the work on the design of the mobile application (Fig. 1) and the general structure of the application (Fig. 2).

Figure 1 Diagram of transitions in the mobile application

Figure 2 The general structure of the mobile application

Next, one turns to the stage of creating a layout in the software environment Figma, namely, one begins to create wireframes (Fig. 3).

Figure 3 Frame scheme of the mobile application

The framework is typically used to place content and features on a page that takes into account user needs and user scenarios. Frame models are used in the early stages of the development process to establish the basic structure of the page before adding visual design and content.

The purpose of the framework scheme is to provide a visual understanding of the page at an early stage of the project to obtain the approval of stakeholders and the project team before the start of the creative phase. The framework can also be used to create global and secondary navigation to ensure that the terminology and structure used for the site match the expectations of users.

The framework is much easier to adapt than the conceptual design, so it is better to start designing with it. The next step was to choose a range of colors, where white was chosen for the background color, green for the accent color, and semi-shades of green were chosen for the additional colors. The Coolors service helped me find the right color [26].

Blocks are constructed in such a way that each text frame is in a figure or in a card. So, the style will be similar to a card design.

Two fonts were selected in the app, namely the font pair, where the Gilroy font was used for the headings, and the Roboto font was used for the main text.

The next step was the design of the prototype, based on the steps listed earlier.

In order to correctly design the interface for the Android platform, so that the developer does not have any further problems, it's necessary to follow the basic style of Material design.

The first step in creating a design is to prepare the styles of basic colors and fonts. This makes the process systematic and fast (Fig. 4).

Figure 4 Styles of colors and fonts

Next we start to create the first screen, the application download screen. The main elements of this screen are the tree logo and name (Fig. 5).

Figure 5 Download screen

The next screens created are the Login and Registration screens, which were already created with the fields filled in, so that it would be better to understand how the application works (Fig. 6).

Figure 6 Login and registration screens

The next step was to create the main screen of the application, where there is an application menu with three icons, one of which leads to the creation of a tree, and the other to view the family map. Three blocks with graphic elements were also created so that the person who downloaded the application for the first time would immediately understand what is in this application and where to go.

At the design stage, it is important to follow a system of requirements to avoid confusion and to have elements with equal proportions and without errors. So in the software environment Figma has such a function as components, where repetitive elements create a single parent element, and then copy and create child elements (Fig. 7).

Figure 7 Main page screen

This way, copying items creates instances faster than copies. Therefore, it is possible to change the text and photo later, but the shape of the figure itself cannot be changed.

Thus, many elements are created on the basis of components, such as buttons, cards, menus, various icons, and they need to be kept in one city to avoid confusion, so we created the Design System Kit.

It is also worth creating a book of relatives, where it is possible to write about their ancestors, traditions and language in a separate folder (Fig. 8)

Figure 8 Family book

Thus, screens were created with a simple design, in the style of cards and with standard fonts that are system-based for the Android platform. Also, with the help of a system approach, the functions of the application have been created and carefully thought out so that the user is comfortable using the application.

The interactive prototype is an animated application without a programming stage, which is created for design clarity. This is also an important step, because at this time the functionality is laid, the convenience of user scripts when using the application is clearly assessed.

To begin with, you need to create a connection between the navigation elements of the interface (Fig. 9).

Figure 9 Transitions of navigation elements

Navigation element transitions were created in Prototype mode, in the Interactive section, Click-through navigation was selected and the path to other pages was specified. Using the Navigation function, when interacting with the element, the user goes to another screen (Fig. 10).

Figure 10 Transition settings

The overlay displays a new element on top of all other elements of the prototype interface. For example, one can change the photo or create a new connection with another card of a relative (Fig. 11).

Figure 11 Transition overlay settings

There were also settings for horizontal and vertical scrolling in the “Interactive” section, for example for a tree to see its fullness, or for a map (Fig. 12).

Figure 12 Scroll settings

Thus, navigation systems were created in the prototype with different types of transitions.

Conclusions

So, in the framework of this article, the concept of the family genealogical tree mobile application has been developed, where the idea and purpose of the prototype are created, the target audience is analyzed and decided with the choice of potential users who will be interested in the future application. A unified application style is developed, its color styles and font styles are considered, home and subsequent home screens are designed, a family genealogical tree is designed, and created an interactive prototype of a mobile application, which implements systems for transitions between pages and animation of transitions. The settings for the created pages of the application are also described, and the navigation in the application with various types of transitions of such types as interactive click navigation, superimposition of a new element on the page and horizontal and vertical scrolling is implemented.

The practical result of the study is a list of recommendations to the designer and developer regarding the design of a mobile application for creating a family tree.

The scientific result of the work is a method of developing a mobile application for creating a family tree.

References

1. Hrabovskyi, Y., Brynza, N., & Vilkhivska, О. (2020). Development of information visualization methods for use in multimedia applications. EUREKA: Physics and Engineering, 1, 3-17 (in English).

2. Khamula, O. H., Soroka, N. V., & Vasiuta, S. P. (2016). Factors of influence of interface use based on mobile applications: Naukovi zapysky [Ukrainskoi akademii drukarstva], 2, 28-36 (in English).

3. Hryshchuk, R. (2017). Synergetic control of social networking services actors' interactions. Recent Advances in Systems, Control and Information Technology, 543, 34-42. DOI: https:// doi.org/10.1007/978-3-319-48923-0_5 (in English).

4. Martins, P. (2017). A Web-based Tool for Business Process Improvement. International Journal of Web Portals, 9, 68 - 84. DOI: https://doi.org/10.4018/HWP.2017070104 (in English).

5. Brambilla, М. (2014). Large-scale Model-Driven Engineering of web user interaction: The WebML and WebRatio experience. Science of Computer Programming, 89, 71-87. DOI: https://doi.org/10.1016/j.scico.2013.03.010 (in English).

6. Canessa, E., & Zennaro, M. (2012). A Mobile Science Index for Development. International Journal of Interactive Mobile Technologies, 6 (1), 4-6 (in English).

7. Norris, D. (2017). Content Machine: Use Content Marketing to Build a 7-Figure Business With Zero Advertising. Kindle Edition, 164 (in English).

8. Khamula, O. H., Soroka, N. V., & Vasiuta, S. P. (2016). Optimization of mathematical model of the impact factors hierarchy of the interface use based on mobile. Polihrafiia i vydavnycha sprava. 2 (72), 28-35 (in English).

9. Hrabovskyi, Y., & Fedorchenko, V. (2019). Development of the optimization model of the interface of multimedia edition. EUREKA: Physics and Engineering, 3, 3-12. DOI: 10.21303/2461-4262.2019.00902 (in English).

10. Mulisch, M. (2014). Tissue-Printing. Springer, 40. DOI: 10.1007/978-3-658-03867-0 (in English).

11. Safonov, I. (2018). Adaptive Image Processing Algorithms for Printing. Springer, 304. DOI: 10.1007/978-981-10-6931-4 (in English).

12. Hrabovskyi, Y., & Yevsyeyev, О. (2018) Development of methodological principles of supportpreservation engineering work. Technology audit and production reserves, 2 (2), 4349. DOI: https://doi.org/10.15587/2312-8372.2018.127776 (in English).

13. Aralova, N. I., & Kyiashko, O. Y. (2017). The Method of Technology Evaluation Based on Improved Cost Approach. Science and Innovation, 13 (3), 65-76. DOI: 10.15407/ scine13.03.065 (in English).

14. Kapela, R., Guinness, K., & O'Connor, N. (2017). Real-time field sports scene classification using colour and frequency space decompositions. Journal of Real-Time Image Processing, 13, 4, 725-737. DOI: https://doi.org/10.1007/s11554-014-0437-7 (in English).

Список використаних джерел

1. Hrabovskyi Y., Brynza N., Vilkhivska О. Development of information visualization methods for use in multimedia applications. EUREKA: Physics and Engineering. 2020. № 1. Pp. 3-17.

2. Khamula O. H., Soroka N. V., Vasrnta S. P. Factors of influence of interface use based on mobile applications. Наукові записки [Української академії друкарства]. 2016. № 2. С. 28-36.

3. Hryshchuk R. Synergetic control of social networking services actors' interactions. Recent Advances in Systems, Control and Information Technology. 2017. № 543. Pp. 34-42. DOI: https://doi.org/10.1007/978-3-319-48923-0_5.

4. Martins P. A Web-based Tool for Business Process Improvement. International Journal of Web Portals. 2017. № 9. Pp. 68-84. DOI: https://doi.org/rn.4018/HWP.2017070m4.

5. Brambilla М. Large-scale Model-Driven Engineering of web user interaction: The WebML and WebRatio experience. Science of Computer Programming. 2014. № 89. Pp. 71-87. DOI: https://doi.org/10.1016/j.scico.2013.03.010.

6. Canessa E., Zennaro M. A Mobile Science Index for Development. International Journal of Interactive Mobile Technologies. 2012. № 6 (1). Pp. 4-6.

7. Norris D. Content Machine: Use Content Marketing to Build a 7-Figure Business With Zero Advertising. Kindle Edition. 2017. 164 р.

8. Khamula O. H., Soroka N. V., Vasiuta S. P. Optimization of mathematical model of the impact factors hierarchy of the interface use based on mobile. Поліграфія і видавнича справа. 2016. № 2 (72). С. 28-35.

9. Hrabovskyi Y., Fedorchenko V. Development of the optimization model of the interface of multimedia edition. EUREKA: Physics and Engineering. 2019. № 3. Pp. 3-12. DOI: 10.21303/2461-4262.2019.00902.

10. Mulisch M. Tissue-Printing. Springer. 2014. 40 р. DOI: 10.1007/978-3-658-03867-0.

11. Safonov I. Adaptive Image Processing Algorithms for Printing. Springer. 2018. 304 p. DOI: 10.1007/978-981-10-6931-4.

12. Hrabovskyi Y., Yevsyeyev О. Development of methodological principles of supportpreservation engineering work. Technology audit and production reserves. 2018. № 2 (2). Рр. 43-49. DOI: https://doi.org/10.15587/2312-8372.2018.127776.

13. Aralova N. I., Kyiashko O. Y. The Method of Technology Evaluation Based on Improved Cost Approach. Science and Innovation. 2017. № 13 (3). Pp. 65-76. DOI: 10.15407/scine13.03.065.

14. Kapela R., Guinness K., O'Connor N. Real-time field sports scene classification using colour and frequency space decompositions. Journal of Real-Time Image Processing. 2017. Volume 13. Issue 4. Рр. 725-737. DOI: https://doi.org/10.1007/s11554-014-0437-7.

Размещено на Allbest.ru