Process
1. Evaluate a
user taskflow using
Nielsen Norman Group’s usability heuristics
2. Assign a
severity rating for user interactions during this taskflow
3. Provide suggestions on how to
improve the usability of user interactions
Approach
We downloaded the MyFitnessPal app for Android (myself) and iOS (Kea).
We determined a task flow and set out to complete it.
Something unexpected occurred - the same task flow differed significantly between Android and iOS.
After this comparison, we chose to focus our evaluation on Android because it presented greater difficulty in completing the task flow.
Task Flow
Returning user adding an egg to their food diary for breakfast, and then removing it.Test out the current task flow in the prototype:
Severity Scale
For each heuristic, a usability score was assigned.
Let's Begin
The first two screens show how the user navigates to the task of adding food to their diary.
Home
Flexibility and efficiency of use
Too many menu options - may overwhelm user
Visibility of system status
No issues - clearly shows the user’s progress for tracking calories and exercise
Aesthetic and minimalist design
A lot happening, including content and menu options
Menu
No issues
Item Search Flow
The next four screens show the task at hand: adding an egg to the food diary for breakfast.
Left to right:
Screen 1: Meal selection
Screen 2: Search bar to search for ‘egg’
Screen 3: Selection of ‘egg’
Screen 4: Check mark to add it to diary
Let’s break it down per screen
Meal selection
Match between system and the real world
No issues
Search
Match between system and the real world
Wording and spelling incorrect
Duplicate items
Inconsistent measurements
Recognition rather than recall
No issues
Search Results
Match between system and the real world
Duplicate results
No sort feature
Measurements unrealistic
Nutritional information
Aesthetic and minimalist design
Nutritional bar not customizable
Nutritional information doesn’t need to be displayed twice
Item added
Visibility of system status
No issues
Item Deletion Flow
The next four screens show the remainder of the task: delete item previously added to diary.
Left to right:
Screen 1: Attempting deletion of item
Screen 2: Select All
Screen 3: Trash can icon appears
Screen 4: Deletion modal appears
Again, let’s break it down per screen
Deletion Attempt
Flexibility and efficiency of use
No visible way to delete an item
Failed attempts when clicking ‘Egg’, the blank space next to ‘Egg’, and the kebab menu
Pencil icon proceeds to deletion screen
Select all to delete
Aesthetic and minimalist design
Lots of steps required to arrive at item deletion
Deletion modal
User control and freedom
No way to undo the ‘Don’t ask me again’ action if the user mistakenly deletes an item
Next Steps
In the redesign, the following issues will be addressed:
1. Revamp to minimalistic design
2. Simplify the item search & selection flow
3. Overhaul item deletion flow
View the Heuristic Evaluation Executive Summary
here.
Redesign Walkthrough
Below are the suggested improvements and design changes, along with the 'Before' and 'After' screenshots of the redesign.
Home
Suggested Improvements
Decrease number of menu options
Less or better organized content
Design Changes
Compressed articles
Navigation bar overhaul
Menu
Suggested Improvements
Consistency with the iOS menu
Design Changes
Positioning
Meal selection
Suggested Improvements
None
Design Changes
None
Search
Suggested Improvements
Correct wording and spelling
Remove duplicate items
Consistent measurements or option for user to set preferred measurements
Design Changes
Wording and spelling corrected
Duplicate items removed
Measurements changed to be consistent with the real world
Search results
Suggested Improvements
Remove duplicate results
Add sort feature for results
Measurements/weights should be realistic
Design Changes
Duplicate results removed
Sort tabs for search results added below search bar
Unit of quantity changed to match the real world
Nutritional information
Suggested Improvements
Nutritional info bar should be customizable
Nutritional information doesn’t need to be displayed twice
Design Changes
Nutritional info bar now customizable
Printed nutritional info is hidden
Item added
Suggested Improvements
None
Design Changes
Changed display of ‘Calories Remaining’ to a pie chart for easier comprehension
Deletion attempt
Suggested Improvements
Minimize number of steps needed to delete item
Add multiple pathways to delete item
Design Changes
Two new deletion pathways
Item deleted
Suggested Improvements
None
Design Changes
Changed display of ‘Calories Remaining’ to a pie chart for easier comprehension
