Methodology for designing a mobile application for people with an active lifestyle

Y.M. Hrabovskyi,

P.H. Kots

Simon Kuznets Kharkiv National University of Economics,

Methodology for designing a mobile application for people with an active lifestyle

The theoretical principles of mobile application design development are analyzed. A methodologyfor creating a design of a mobile applicationfor people with an active lifestyle is proposed. The attention is focused on the need to develop a detailed prototype of the final product as the most visible and high-quality visualization of the application. For a correct representation of the target audience ofusers of the developedfitness application, a survey was launched based on research about the needs and goals of potential users of the service. Brainstorming was used to turn the idea of the mobile application interface into reality. The user interaction scenario with the product is created based on the User Flow Diagram. Regarding the choice of the style of the interface, attention is focused on the need to analyze current trends, scale the interface, determine the time required for the development and implementation of the design. The specifics of the implementation of the proposed method were considered using the example of the created prototype of the mobile application. The target audience of the designed application is women and men aged 15 to 55 years. In the process of developing the design of the application, the main blocks that summarize the person's activity for the day were selected, using pale shades of the main colors and one additional one. The design of screens with recipes was developed, according to which the classification takes place by days of rest and training, and at a lower hierarchy - by the choice between simple snacks and more complex full meals. Using the basic design principles of the Kano model, a template ofpotential user expectations from the designed application was created. Wireframe was chosen as a form of implementation of design ideas. Activity tracking is a separate section of the designed mobile add-on. All tracking parameters are configured, the view of the activity recording process itself and the results screen are shown.

Keywords: mobile application, active lifestyle, methodology.

МЕТОДИКА РОЗРОБКИ ДИЗАЙНУ МОБІЛЬНОГО ДОДАТКА ДЛЯ ЛЮДЕЙ З АКТИВНИМ СПОСОБОМ ЖИТТЯ

Є.М. Грабовський, П.Г. Коц

Харківський національний економічний університет імені Семена Кузнеця, пр. Науки, 9а, Харків, 61001, Україна

Проаналізовано теоретичні засади розробки дизайну мобільних додатків. Запропоновано методику створення дизайну мобільного додатка для людей, які ведуть активний спосіб життя. Акцентовано увагу на необхідності розробки детального прототипу кінцевого продукту як найбільш наочної та якісної форми візуалізації додатка. Для коректного представлення цільової аудиторії користувачів розробленого фітнес-додатка було запущено опитування на основі досліджень про потреби та цілі потенційних користувачів сервісу. Щоб втілити ідею інтерфейсу мобільного додатка в реальність, був використаний мозковий штурм. Сценарій взаємодії користувача з продуктом створюється на основі блок-схеми користувача. Щодо вибору стилю інтерфейсу акцентується увага на необхідності аналізу сучасних тенденцій, масштабування інтерфейсу, визначення часу, необхідного для розробки та реалізації дизайну. На прикладі створеного прототипу мобільного додатка розглянуто специфіку реалізації запропонованого методу. Цільова аудиторія розробленого додатка - жінки та чоловіки віком від 15 до 55років. У процесі розробки дизайну додатка були виділені основні блоки, які підсумовують активність людини за день, з використанням блідих відтінків основних кольорів та одного додаткового. Розроблено дизайн екранів з рецептами, згідно з яким класифікація відбувається за днями відпочинку та тренувань, а на нижчій ієрархії - за вибором між простими закусками та більш складними повноцінними прийомами їжі. Використовуючи базові принципи проєктування моделі Kaнo, було створено шаблон потенційних очікувань користувачів від розробленої програми. Формою реалізації дизайнерських ідей був обраний каркас. Відстеження активності є окремим розділом розробленого мобільного додатка. mobile application design

Ключові слова: мобільний додаток, активний спосіб життя, методологія.

Formulation of the problem. A person's health is the most important part of his life, because it forms the harmonious existence of an individual in modern times and directly forms his opportunities to fully fulfill his work duties. Without a healthy state, a person does not have the opportunity to live fully, to realize his goals and plans. First of all, we always ourselves create the conditions for the quality of our physical condition and directly influence its formation. It has long been known that people who regularly perform physical exercises or spend most of their time in an active state have a good appearance, lightness of the body, a feeling of youth and full of a healthy spirit.

Today, more and more people are joining the active life and passing this unifying movement to each other, involving their friends, relatives and acquaintances. Given that smartphones have recently become an integral part of society's life, the most optimal way to inform people about the features of an active life should be through a mobile application - interesting, simple, useful [1].

The era of new technologies, which has surrounded us since the end of the last century, has already taken a big step forward, endowing mobile phones with compact and optimal functions for their daily use. One can discuss a lot on the example of the usefulness of the information that a person draws from the sources of a mobile device, but one thing remains unchanged - if there is no way to get rid of it, it is necessary to draw from it as much useful information as possible and apply it in life. In our case, it is to competently plan your physical activity during the week, organizing its clear structure, which will bring not only benefit, but also inner satisfaction for the user of the application.

It is the mobile application that can influence a person's self-organization by organizing all the necessary conditions for an active life. Every day, our user will be able to track his progress, draw certain conclusions and strive for better results.

Analysis of recent research and publications. Scientific research on the topic of the article is devoted to the analysis of information visualization mechanisms [1-3], the creation of web-based information processing tools in Internet applications [2-5], the development of mathematical models for creating interfaces of multimedia publications [6-9], support for the work of prepress engineer with regard to the mechanisms of graphic image processing [10-14]. However, in the specialized literature there are no scientifically based recommendations regarding the automation of control and image processing in Internet applications.

The purpose of the article. The main goal of the research is focused on the development of automated means of control and image processing in Internet applications.

Presentation of the main research material. To create a convenient and pleasant design of the application, it is necessary to go through the main stages of designing the interface with high-quality processing of each of its details. It is necessary to pay attention to the sequence and depth of development. The main design stages include:

1) creating a concept. The very first stage is when the idea already exists, and the developer has all the necessary tools for its implementation. The work begins with the study of the niche, target audience and product cases. This helps to understand the future customers of the service and create a user interface that is optimal for each of them. At this stage, such aspects as the size and location of buttons and forms, fonts and many other aspects of the interface structure may be affected;

2) creation of brainstorming and sketches. As soon as the concept of the project is clear, we move to the next stage - brainstorming. It is needed to turn the interface idea into reality. We create sketches of interface design ideas with a pencil on paper or in software that is convenient for the developer;

3) development of a transition diagram. Creating a sketch gives us the structure of the interface. But it is also necessary to develop a possible scenario of user interaction with the product. The User Flow Diagram will help here. It will illustrate the logic of the product, showing all kinds of ways of interacting with the interface, the roadmap of these interactions and the state of the interface at each stage;

4) approval of the structure and transition diagram. Once we are done with the interface sketches and the transition diagram, it is necessary that the client approves them. The structure and transitions are the basis of all further work with the interface, so we do not move forward without receiving confirmation. At this stage, it is much easier to make some changes to the future interface, which means to save the customer's time and money. As an example, one can take an online store or a sales management system. Changing the structure of such a project after the implementation of the design, one can get into a situation where the color scheme of the site breaks, because the interface elements and some other parts of it have been changed. In this case, one will most likely have to abandon the changes. Or the whole work will have to be redone from scratch [40];

5) selection of interface style. When the client confirms everything, one can move on. The next stage is the choice of interface style. There are many options for its design: from minimalism and Metro to material design and skeuomorphism. For a high- quality result, it is necessary to find a certain number of design references, conduct a comprehensive analysis of them and choose the most appropriate solutions. It is necessary to pay attention to current trends, scaling of the interface, to determine the time required for the development and implementation of the design [41];

6) confirmation of style. At this stage, it is necessary to tell the client about how the developer sees everything himself, as well as explain why this or that decision was made. He may not agree with some points at the very beginning, because he has not yet received full information about the interface - he has not formed an idea and does not yet have an understanding of possible problems. The goal is to complete the discussion by accepting an option that satisfies the client and the developer;

7) prototyping, design and their demonstration As soon as all these stages are completed, it is time to develop and show the customer the full version of the design. The demo may look different. Wireframe is the fastest way to implement design ideas. This is a low-level demonstration of the design. However, this method allows one to show the structure and description of user interaction with the technical characteristics of the product. It is made in the form of a block interface in shades of gray. A mock-up demonstration allows one to demonstrate a design project that is close to reality. Here, all the elements and content are static, but this form is perceived more clearly than the previous one. And one can create a presentation model quite quickly. The most neat and high- quality visualization of the application's work is a detailed prototype of the final product. It emulates user interaction with the interface. For example, it allows one to click on controls, use forms and check other points, including animation. However, creating such a prototype is a process that requires a lot of time [40-41];

8) design approval. At this stage, the client sees the result and discusses important points with us, and the designer's task is to make the necessary adjustments if necessary.

Let one consider the specifics of the implementation of the proposed method using the example of the created prototype of the mobile application.

First, it is necessary to form a concept and analyze the target audience of the program.

For a correct representation of the target audience of users of the developed fitness application, a survey was launched based on research about the needs and goals of potential users ofthe service. 12 questions were asked directly related to the topic of leading an active lifestyle through the use of fitness applications.

The target audience of our application is women and men aged 15 to 55. The survey was conducted among people of various types of employment who are interested in a healthy lifestyle and aim to maintain a regimen of physical exercises. According to the results of the survey, it was found that 64% of respondents prefer walking as a constant physical activity. Following the decline in popularity in the following order: fitness training (52.3%), cycling (64.5%), running (40.2%), stretching (40.2%). Also, many people are engaged in other types of activity, such as dancing, volleyball, badminton, table tennis, etc. (Fig. 1).

Fig. 1. Diagram of the results of the question about sports

As a result of an analytical review of the diagram on the use of a fitness application, it can be concluded that most of the respondents do not use fitness applications when performing physical exercises or to track their activity. At the same time, most people use sports services several times a week, a little less - a month, and the rest - every day. (Fig. 2).

Based on the data presented above, one of the main goals of designing a fitness application can be formed - motivation to support regular physical activity with the help of our service.

An important element of the component of a convenient application is the development of a section with recommendations for nutrition according to the correct diet to maintain good training results. Surveyed users confirmed this fact in almost 50%; 16.8% of people would like to see a food diary in the functionality of the application without recommendations from the application (Fig. 3).

Fig. 2. Chart of results regarding the use of fitness applications

Fig. 3. Diagram of the results of answers to questions about nutrition according to the application

The next question regarding the relevance of our development is the expediency of providing users with a set of home workouts. Due to the introduction of quarantine restrictions from 2020, the relevance of home training received an updated status. This is confirmed by the data obtained as a result of the survey: 44.9% mainly do physical exercises at home, and 32.7% train depending on their free time - at home or in a sports center. (Fig. 4)

Fig. 4. Diagram of the percentage ratio of answers about home training

An important factor for developing the design of a fitness application is statistical data on the possibility of users spending time on one workout - this will allow understanding the specifics of the design solution for this section of the overall structure. The following answers were received to the question: 53.3% spend on training from 30 minutes to time, 24.3% - up to 2 hours, 18.7% - up to 30 minutes (several respondents indicated their personal preferences) (Fig. 5). Thanks to this, it becomes clear which emphasis should be placed on the duration of training.

Fig. 5. Statistics of training duration data

From the answers to the previous question presented above, it will be consistent to clarify the expediency of having the functionality of setting an individual time for training in the case of home exercises. The results showed that the majority of respondents (78.8%) consider it important. (Fig. 6).

Fig. 6. Results of the question about the functionality of the class timer

Most of the health and physical activity monitoring applications have in their functionality the ability to track the number of spent and consumed calories. The goal of our research is to find out how important this feature is to users in order to understand the level of detail in its implementation. According to the results of the question, 58% of people do not count calories, while 27.6% do it whenever possible, and the other 14.3% clearly track them (Fig. 7).

Fig. 7. Chart of the results of the calorie tracking question

Since our app is designed for people who occasionally exercise at home, the purpose of the study is also to indicate the feasibility of allowing users to manually time their workouts. According to the results, 83% of people support this feature and want to see it in their app. (Fig. 8).

Fig. 8. Results of the question about the timing function

For a designer, it is always important to understand the user's motives when choosing an application, in order to pay as much attention as possible to individual details and make the service more convenient and pleasant. When answering the question, respondents preferred the application that has the ability to choose the purpose of the activity (59.8%), support for tracking several types of activity (32.4%). A small percentage of people preferred the availability of food recommendations and indicated their criteria (Fig. 9).

Fig. 9. Percentage diagram of answers to questions about application selection criteria

Some users find it convenient to integrate the application with other services. It can be Apple Music, Sound Cloud, etc. (music services), integration with the weather forecast service.

At this stage, it is advisable to make a choice for the design of the active buttons of the application: the most optimal shape will be a rounded shape, since it has a soft, pleasant design and will be very well combined with the general design of the application (Fig. 10).

Fig. 10. UI-elements of the application

It is advisable to choose colors for the project that would evoke motivating emotions in a person, improve feelings and be pleasing to the eye. From the point of view of psychology, this color is blue and green.

Designing the Kano model. Kano's model is a way of studying the emotional response to product characteristics. It helps to evaluate the importance of attributes over time. The methodology is used to improve products/services and increase user satisfaction..

1) mandatory. Required by default. Without them, the product makes no sense, like a car without a steering wheel. Improving such attributes does not lead to increased satisfaction;

2) linear. The bigger the better: memory capacity, fuel consumption, loan rate, etc. The better the value of these indicators, the higher the client's satisfaction. The task of developers is to develop these characteristics;

3) attractive. They are not mandatory, but their presence causes a strong emotional reaction - the WOW effect. Such attributes have the strongest effect on satisfaction, but as they get used to them, they become linear, mandatory or even indifferent (urgent delivery, online shopping, fingerprint detector in a smartphone);

4) bad. Functionality that does not affect the level of customer satisfaction. It makes no sense to use such characteristics in advertising. Example (as of the end of 2018): fingerprint detector in a smartphone;

5) undesirable. The counterweight is one-dimensional. In other words, these are the properties of the product that, as their quantity increases, reduce the user's satisfaction with the amount of toxic components in the car's exhaust; cost of disposal of industrial equipment, dimensions of household appliances;

According to the results of the analysis of users' needs, it is possible to make a classification that will have the following form: sections with training and activity tracking are mandatory, one-dimensional (linear) are search, the number of exercises, integration with social networks and a geolocation detector, such functionality will excite such as simple registration and a large selection of useful recipes.

Using the basic design principles of the Kano model, let's create our template of potential user expectations from the designed application (Fig. 11).

Fig. 11. Kano model

Including attractive attributes in a product benefits the product, but does not need to be done at the expense of improving the functionality of one-dimensional or mandatory attributes. Similarly, including attractive features in an application should not be too expensive to develop.

When designing mobile applications, we must have a good understanding of their functions and features. Mobile applications are not only a beautiful cover, but also a reliable filling. This means enough manufacturability to fulfill the user's tasks and enough beauty for users to enjoy using them.

UI design of mobile applications is the best way to create the necessary atmosphere for users. Immediately after launching the program, color solutions, shapes, fonts and buttons will make the user want to continue working with the program or not. Our task is to make the atmosphere fall in love with users from the first clicks.

I chose the main blocks summarizing a person's activity for the day, using pale shades of the main colors and one additional one. The user sees the most important things: daily statistics, a list of planned workouts, as well as useful recommendations for healthy nutrition before and after training. We will also create components of buttons and menu panels that will be repeated throughout the project (Fig. 12).

Fig. 12. Design profile screens and created components in Figma

Training can be selected by search or filter. All exercises are classified by the muscle group for which they are intended. When opening a workout, the user has the opportunity to get acquainted with its features, and on the next screen to see the sequence and time of each exercise. Upon completion, a motivating inscription appears, as well as information about the average heart rate and the number of calories burned (Fig. 13).

Fig. 13. Design of the training section screens

We are developing the design of screens with recipes: the classification takes place according to days of rest and training, and in the lower hierarchy - according to the choice between simple snacks and more complex full meals. Each item on the list can be added to favorites thanks to the button in the upper right corner of the block with a photo. The recipe description screen shows the main features, a list of ingredients and a description of the cooking sequence. All this can be seen in fig. 14.

Fig. 14. Design of screens with recipes

Profile design is categorized by general analytics, saved recipes, and analytics per day. General analytics is designed in the form of a convenient graph (Fig. 15).

Fig. 15. Design of profile screens

One of the most important sections of the application is the section with activity tracking. In it, I thought out the scheme of user interaction with the application as clearly as possible, made settings for all tracking parameters, showed the view of the activity recording process itself and the results screen (Fig. 16).

Fig. 16. Design of tracking screens

The prepared information was used as part of the design implementation of the application for people with an active lifestyle in an instrumental environment, the selection of which was justified.

Conclusions

Modern theoretical approaches and software developments to the image verification process are analyzed. The tools that allow one to check the images have been studied. The choice of data storage technology is justified. A software tool has been developed for the implementation of the process of automating the online verification of images. A Web service for the interaction of the developed prototype with the online network has been created.

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

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, Vasiuta 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/10.4018/IJWP.2017070104.

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 p.

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 p. 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 supportpreser- vation engineering work. Technology audit and production reserves. 2018. № 2 (2). Рр. 4349. 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. Vol. 13. Issue 4. Рр. 725-737. DOI: https://doi.org/10.1007/s11554-014-0437-7.

15. REFERENCES

16. 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).

17. 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).

18. 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).

19. 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/IJWP.2017070104 (in English).

20. 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).

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

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

23. 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).

24. 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).

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

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

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

28. 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).

29. 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).

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