01 – Usability and User Experience of Existing MyFitnessPal App

Critical appraisal of MyFitnessPal in terms of its usability and the user experience it provides based on contemporary usability heuristics and user experience principles.

In his book, ‘Don’t Make Me Think’, Steve Krug says;

“usability is about people and how they understand and use things”.

Following the 10 Usability Heuristics for User Interface Design by Jakob Nielsen I examined MyFitnessPal to see if  I could identify any major usability issues with it and here is what I found.

1.Visibility of System Status

The ease of which it is to see and interact with the key features of the app.

Although a long-time and regular user of MyFitnessPal, it was only when I closely examined its usability that I found several flaws ranging from minor to major.

Throughout the app, the fonts are far too small. This creates an imbalance as they are all the same or very similar in font size and weight. According to Jakob Nilsen, “users have time to read at most 28% of the words during an average visit; 20% is more likely”. So it is pointless reducing font sizes in order to cram a lot of content onto your site. MyFitnessPal has an awful lot of content and “…if your small text is getting in the way of them trying to pick out the pages key points, then they won’t bother sticking around.”  So to step in line with design principles and standards, the fonts should be bigger but also hierarchical.

“Larger fonts with more easily recognizable header and paragraph styles allow users to better identify how to subconsciously classify the vast array of sections they may be reading.” – Christine Austin

The main three section headings, although within adequate thumb range, are small icons and light in both colour and weight, there is not enough visual contrast to make them stand out (fig1). The use of the Under Armour’s brand shade of blue, though visually consistent,  could be used more effectively to highlight important features.

fig1

As a keen user, one of my main goals is to know how many calories I have left for the day, after entering food and this is not very visible (fig1) in green, light type, the same size and weight as a few other numbers nearby, numbers which are secondary information.

It is hard to find how to delete meals within the diary. You can delete meals intuitively, one ingredient at a time by holding down on the ingredient name (fig2)

fig2

However if you wish to delete the entire meal, rather than hold down on the word ‘Meal 1’, you must select the pencil icon at the top of the page, which makes little sense, is not close in proximity to the action and is also not consistent with user expectations or with other features on the app. (fig 3)

fig3This breaks rule number one of the widely esteemed 7 Fundamentals of Design: Discoverability. It is not possible to figure out how to use the feature of deleting an entire meal, by interacting directly with it.

In addition, it is hard to find how to adjust your personal goal. It is buried within a very long list of other options and then takes four steps to complete once you locate it. It is neither visible, nor discoverable (fig 4).

fig4a

fig4b

2.Match Between System and the Real World

When something online exists as a real object in life, such as the trash can icon; it looks like one you would see on the street.

MyFitnessPal is first and foremost a food journal and there is a match with the real world. The flow of inputting into this app could be seen as similar to inputting into a paper journal; you open the diary, select the page or section ad enter in the data. One could argue that the white space is the white paper of a diary and that the lightness of fonts and colours imply physical lightness and health however, these features should not exist at the expense of usability.

The app has some issues with signifiers. Visually, the buttons are a little flat and do not appear like a button in real life. Often, it’s kind of hard to know what is a button and what is just type (fig 5).

“A button that looks like a physical object you can push, for example, is an affordance designed so that someone unfamiliar with the button will still understand how to interact with it.”  – Retrieved from http://www.uxbooth.com

fig5

Another issue with signifiers, is the home button on the home page. If I scroll down through the blog, not only does the top banner disappear, but the home button I would expect to bring me back to the top does nothing and I must scroll all the way back up again (fig 6).

fig6

The main nav at the bottom uses conventional, identifiable icons for home, diary and me which is good, although they could be a bit more discoverable by being bolder.

In regards to the design principle of contrast, the app has a few issues, mostly visual and to do with the hierarchy of type and small, unclear buttons, too much white space and not enough visual contrast in the colour palette.

“Hierarchy defines how to read through content. It tells us how to distinguish header from subheading and body text. We can achieve this by using different contrast, text sizes, paddings, margins and so on. It’s an important technique that need to be mastered in order to achieve good readability.” – Wojciech Zielińsk

3.User Control and Freedom

When the user can use the site/ app easily intuitively and doesn’t become frustrated when things ‘don’t work’.

The home button is always available at the bottom in case of an error, however as I mentioned, when you scroll down through the blog on the homepage, the home button doesn’t bring you back to the top. The emphasis is heavily on the blog and maintaining Under Armour brand identity at the cost of good user experience, rendering the information architecture complicated. The features of most interest to users, such as food diary and tracking self progress are given secondary importance in place of promoting the brand, thus interrupting user flow as they skip to the sections they prefer to use.

The burger menu is hard to reach on larger screens, not in close proximity to the users’ thumb and things are buried in a very long list within the menu. There is quite an overload of information when searching for something there and it should be easier and more accessible to do so, perhaps through grouping elements (fig 7).

fig7

4.Consistency and Standards

Everything on your site/ app should follow standards both within your site and in conjunction with universal expectations. Buttons should appear where users would expect them to be and titles and buttons should all look both the same as eachother throughout and what they are expected to look like.

The floating add button is only on the home page and the top banner is different on each of the main three sections (fig 8) In addition, the top banner disappears when you scroll down the blog on the home page (fig 6)

In home, the calories remaining button is a button and not a dropdown although it has an arrow you would associate with a dropdown menu. In diary, it’s hard to tell what is a button and what isn’t, the visual contrast and balance is poor and again font size is small. In me, the ‘ADD WEIGHT‘ button is bold, blue and larger, great! It looks like a button! But this is inconsistent with ‘+ Add Food’ in the diary. (fig 8)  The button placements and shapes need to be more standardised and consistent to create a greater sense of unity.

fig8b.png

The visual indicator within the ‘+ Add Food’ button to inform you of your location is a small thin line and quite hard to see (fig 9) All the pages are so alike, its a little overwhelming to a new user to recognise where they are.

fig9

There is a nice visual break when you hit the hovering add button on the home page (fig 10) I feel this could be used a little more throughout the app.

fig10.png

5.Error Prevention

It should be impossible for users to make a mistake or find themselves confused or frustrated.

The choices in the food diary are great, but often it can be overwhelming. For example, dozens of options for peanut butter, many brands which are unavailable in Ireland and so are irrelevant, so new users may be unsure which to choose and add the wrong calories (fig 11.1). When you do choose, there is a recognisable confirmation tick before you select (fig 11.2). There is also the option to delete afterwards, however this delete feature is inconsistent throughout the app (fig 11.3).

fig11

6.Recognition Rather Than Recall

Users should be able to remember how to use your site from a previous visit or should recognise how to use it for the first time because it follows universal standards they are familiar with. Things shouldn’t be so foreign in terms of visibility and usability that users have to guess how to use your site/app.

“your job is to get rid of the question marks” – Steve Krug

When it comes to deleting an entire meal, it is not immediately clear or easy to figure out how to do this. Intuitively, you can delete a meal one ingredient at a time by simply holding your finger down on the ingredient in question. However the same does not apply to the above heading, Meal 1. Deleting one ingredient at a time is not efficient when the goal is to just delete the entire meal. There is a signifier button to do carry out this task, but its discoverablilty could be improved as it is neither obvious, recognisable as a ‘delete’ function, nor is it close in proximity to the action you wish to carry out fig 12).

fig12Also, because of all the whiteness and lack of visual contrast and hierarchy, it is hard to immediately recognise what section you are in (fig 13)

fig13.png

7.Flexibility and Efficiency of Use

For the more experienced user, short cuts can be applied to cut out unnecessary steps or clicks and to improve user experience through speed and efficiency.

The floating add button is a great accelerator, but it doesn’t appear consistently throughout the app. You can multi-add previous ingredients and save meals and it remembers the previous meal you had for breakfast so you can add that again, so that is quick and handy. On the website version there is Quick Tools option that is not available on the app. This could be easily added (fig 14).

fig14

8.Aesthetic and Minimal Design

An app or site should prioritise the most important information by keeping the site clean of distractions and secondary information in terms of hierarchical importance. Less is more visually and secondary information should be hidden in drop downs or placed lower down the page.

Secondary information (social media and linked apps like Garmin watch on the home page) takes up a lot of space. There is a lot of white space throughout and the buttons and fonts are very small. Balance and contrast could be improved by changing the weight and size of fonts or colour of headings, sections or key information like ‘calories remaining’ (fig 15).

fig15

9.Help Users Recognise, Diagnose and Recover from Errors

When an error occurs, a user should be informed in a clear and obvious way, and instructions about what is wrong and how to fix the problem should be visible and understandable.

The main function is to add food, exercise, view your nutrition and set goals. The delete button exists to undo any wrongly added information. Discoverability could be improved (fig 12). The burger provides every option you might need however as it’s very long it creates visual overload and can be frustrating scrolling through it (fig 7)

10.Help and Documentation

This is like the user manual for the site/app. All instructions and help should be listed in an clear, accessible and understandable manner in a place where it would be expected to be.

Easily accessible and recognisable in a burger on the top left. All info appears in a clear, but long, list you can scroll through.

Fig 16 shows the steps to retrieve help after clicking on the burger when you are in the home or diary sections, however it does not appear when you go into the me section, which is inconsistent. Once in, there is a breadcrumb to identify your location (Fig 16.5).

fi16a

fig16b

Task Models

Based on the heuristic evaluation, we decided to focus on a couple of features as task models.

1 – Adding food to the diary – deleting meal 

2 – Viewing the nutrition tracker

3- Changing personal goals

References:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s