01 – Usability and User Experience of MyFitnessPal App

by | Dec 2, 2018

The first part of the project requires us to critically appraise a digital product of our choice in terms of its usability and the user experience it provides based on contemporary usability heuristics. We will also examine how general design principles have been applied. On the end, we will describe and illustrate two task models, which will be a starting point of the second part of the project – the research. The digital product of our choice is MyFitnessPal –

“A smartphone app and website that tracks diet and exercise to determine optimal caloric intake and nutrients for the users’ goals and uses gamification elements to motivate users”

— Wikipedia, 2018.

The evaluation will be based on 10 Heuristic evaluation rules by Jakob Nielsen (Nielsen, 1995) usability goals and the principles of design CRAP rules.

Heuristic evaluation of MyFitnessPal

“If I had an hour to solve a problem and my life depended on the solution, I would spend the first 55 minutes determining the proper question to ask, for once I know the proper question, I could solve the problem in less than five minutes.”

— Albert Einstein, Theoretical Physicist

Determining the right question is the ultimate success factor when solving the problem. Our life barley depends on the mobile applications, but the minutes we are struggling with using them are wasted the same as our energy. Bad design pulls us away from the products.

Visibility of System Status

“Communicating the current state allows users to feel in control of the system, take appropriate actions to reach their goal, and ultimately trust the brand.”

—  Aurora Harley 2018

The general rules of the system status are kept on the app. The user gets indications whether the action was successful or not.

The spinning wheel indicates the progress if bit more waiting time is necessary (Figure 1 Point 1)

The bottom menu gives a clear indication about the section explored by the user (Figure 1 Point 2)

The contrast between the active and inactive icon is high. (Figure 1 Point 3)

Figure 1 – Visibility of System Status

Match Between System and the Real World

“One of the best ways to make almost anything easier to grasp in a hurry is to follow the existing conventions—the widely used or standardized design patterns.”

― Steve Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability

The information in the app follows the natural and logical order and is based on a general understanding of how people process and interpret information regarding fitness and diet topics.

The excel and paper sheets used before have been digitised, the nutrition vocabulary was transferred straight to the app and users are familiar with it. (Figure 2 Point 1)

The structure of the app matches the paper/excel diary, however one single functions can be misleading. The ‘pen’ icon recognised in the UI as an ‘edit’ option is connected to delete and multi-delete option in this app (Figure 2 Point 2).

Figure 2 – Match Between System and the Real World

User control and freedom

In MyFitnessPal user can add this same item multiple times and no warning is displayed, which gives the user a lot of freedom. From the other side – the beginners could feel themselves out of control, as there is no clear indication of how to delete unnecessary entries. (Figure 3 Point 1)  The advanced users are aware they need to press and hold the chosen food and wait for the option to delete or move the food.

User freedom is also limited in setting the goals. The goals are pre-defined, in the example, only 0.5 kg per week can be gained. There is no wider choice neither adjustment allowed.

After saving the daily diary the system automatically creates a post in ‘my posts’ feed. The user is not aware of this and cannot delete or modify it afterwards. (Figure 3 Point 2)

Figure 3 – User Control and Freedom – MyFitnessPal
Figure 3 – User Control and Freedom – MyFitnessPal

Consistency and standards

There are few examples of inconsistency in the app. The top navigation bar varies from one screen to the other. (Figure 4 Point 1)

Floating ‘+’ is available on two screens and plays a different role in each of them (Figure 4 Point 2)

The goal section uses a scrolling wheel, keyboard and radio buttons to insert the desired numerical values.  (Figure 4 Point 3)

Multi-add is an option, multi-delete is pre-defined when in ‘edit’ mode. (Figure 4 Point 4)

The side menu is overloaded. (Figure 4 Point 5)

Figure 4 – Consistency and Standards – MyFitnessPal
Figure 4 – Consistency and Standards – MyFitnessPal

Error prevention

The Slip Errors are avoided by providing the needed level of precision and encouraging users to check. The library of food is created and the suggested food is displayed during typing and messages are displayed while changing the goals.

  • We found one case of lack of constraints in ‘Servings per container’ where the maximum number is not defined. (Figure 5 Point 1)

A couple of mistake errors could be prevented by helping the user to build a good mental model of the interface or offering guidelines.

  • The system sends inadequate messages to the user. For example – when the goal is set to gain weight there is no warning if the amount of calories is to low. Quite opposite – the message suggests the user is on a good track to lose the weight. (Figure 5 Point 2)
  • The system shows false connection confirmation to the Google Fit app, instead of guiding the user to establish the connection manually. (Figure 5 Point 3)
Figure 5 – Error Prevention – MyFitnessPal
Figure 5 – Error Prevention – MyFitnessPal

Recognition rather than recall

“The user should not have to remember information from one part of the dialogue to another,” 

— Nielsen, 1995

The recognition works best for the advanced users with a lot of practice, the recency can help when working with one section (ie. diary) but after switching to the other, the options change and the recognition rule does not work. Using the app in the corresponding context lowers the possibility of errors caused by necessary recalls.

The overall efficiency in using MyFitnessPal depends on practice rather the intuitive use. The number of options and lack of visual hierarchy misleads the user during adding meals and goals. (Figure 6)

Figure 6 – Recognition Rather Than Recall – MyFitnessPal
Figure 6 – Recognition Rather Than Recall – MyFitnessPal

Flexibility and efficiency of use

There are 3 accelerators mostly unseen by the novice user, which may speed up the interaction for the expert

  • The ‘+’ option as the main screen shortcut to secondary options (Figure 7 Point 1)
  • The ‘Multi-add’ option available for diary section (Figure 7 Point 2)
  • The multi-delete is available under ‘edit’ meal option (Figure 7 Point 3)

The high level of flexibility allows the user to achieve this same goal in many different ways. In the result the mental map of actions is broad and user needs more time to use the app efficiently.

Figure 7 – Flexibility and Efficiency of Use – MyFitnessPal
Figure 7 – Flexibility and Efficiency of Use – MyFitnessPal

Aesthetic and minimalist design

According to Nielsen,

“every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility”

—Nielsen, 1995.

The aesthetic of the app is rather ascetic in the colour and the amount of information highly exceeds the user needs. The homepage is filled with the blog with random posts (Figure 8 Point 1) with no option to topic search. Diary contains primary and secondary information visible on this same screen (Figure 8 Point 2), overloaded menus and lots of subcategories brings the Great Swiss Army Knife as the best illustration of the situation. (Figure 8 Point 3)

Figure 8 – Aesthetic and Minimalist Design – MyFitnessPal
Figure 8 – Aesthetic and Minimalist Design – MyFitnessPal

Help Users Recognise, Diagnose and Recover from Errors

The user can easily recover from the errors by deleting them through ‘edit’ option or multi-delete. The system recognises the important error and constructively suggest a solution if the number of daily calories is too low. (Figure 9 Point 1)

Figure 9 – Help and Documentation – MyFitnessPal
Figure 9 – Help and Documentation – MyFitnessPal

Help and documentation

The App has documentation available under the settings section. Also, the community of users on Facebook provides help and tips for users. (Figure 9 Point 2)

General Design Principles CRAP.

The overall colours of the app are pale. MyFitnessPal app feed is based on two shades of grey, and the main menu, as well as Call To Action, are navy blue. In ‘Goals’ section and ‘Diary’ section, the sub-categories are not standing out.

The contrasts are low and not helpful to the visual hierarchy. The important information is in light green/orange and thin font type. The sections are not colour coded to help the users.

Repetition is not applied, same looking buttons are connected to different functions, the menu is changing for different sections of the map. Same looking text may or may not work as a button.

Alignment rules are kept.

Proximity works well on the basic understanding level – the goals are separated from the diary.  The secondary options, as well as the menu, are not divided into categories and subcategories, all information seems to be equally important.

The task models

Three tasks models have been developed after the evaluation of the app.

Task 1 – Adding food to the diary.

Task 2 – Changing personal goals.

Task 3 – Viewing the nutrition tracker.

Based on these tasks we conduct our research.


References

By Sebastian Hartleib