Usability Report: Asthma MD

Sup Suh, Ann Junker, Carli Pappas, Nancy Quach

Evaluating Asthma MD

What is Asthma MD?

AsthmaMD is a mobile application that helps people manage asthma. The app’s core functionality revolves around asthma symptom and attack tracking, which includes parameters such as date, time, peakflow, user symptom self-evaluation, triggers, and FEV-1.Asthma MD also contains an asthma medication andmanagement plan allowing users to enter medication intake,compliance tracking, reminders, and action plan assistance.Users also have ability to upload and share their input datawith a physician.

(Visit www.asthmamd.org to learn more)

User Types

AsthmaMD’s primary users are asthma patients who needassistance managing different aspects of their asthma care.We focused on two types of patients who understand their symptoms, triggers, and treatment needs.

During our evaluation of AsthmaMD we did not specificallyconsider newly diagnosed asthma patients nor caregivers of asthma patients.

We conducted expert evaluations by four team members. We each conducted individual heuristic reports and cognitive walkthroughs. After the evaluations, we collected data and organized them according to the core functions of the app. We synthesized the data and grouped the problems by labeling similar issues together.

We evaluated the app with both Android and iOS devices, but due to the large number of issues, we will not cover the differences. We also present only critical and a few selected problems that embody the issues of overall app.

Evaluation Methods

• Maintenance Patients: Users take routine medications to control symptoms and take rescue medications when the symptoms get worse.

• Occasional Patients: Users that only take rescue medications when needed.

Heuristics Report

Follow Action Plan Key Function: Walks user through one of three asthma action plans that contain different medication protocols.

Lack of feedback and visual clues does not show user where they are in stepped progress. • Visual design is inconsistent with stepped progress

design. Visual design is unclear to users that they need to select checkboxes in order down the screen. As the action protocol is a step by step approach, the list of checkboxes is not a good representation of the real world. User may become frustrated and confused when they try to check boxes and find they are unable to.

• When user selects a checkbox, users cannot undo or go back a step as there is no feedback to confirm the action or to prevent errors. Users can accidentally select checkboxes but do not have freedom to change the action, leading users to frustration.

• Severity: 4• Heuristics Violations: Match system with the real world, visibility

of system status, control & freedom

Recommendations

Critical Usability Problems

Examples of Actions Green Plan Progress> Activate Yellow Plan > Yellow Plan Progress > Enter Data

Start text is difficult to touch • The link in the small area can slow the user down from

missed touches and confuse users when expected interaction does not occur. Consider making the whole component touchable (not just text) as a button.

• Severity: 1• Heuristics Violations: Control & Freedom, Consistency &

Standards

Minor problems

12

3

4

Difficult to figure out where users are in the app • Users are taken into a new data entry page with no

indication of where they are in the app. Users can get confused and feel frustrated without proper feedback and way-finding indicators.

• Severity: 2• Heuristics Violations: Visibility of System Status, Control &

Freedom

(1) Implement interactions such as back and exit to give user freedom.

(2) Use title pages to let users know where they are in the app.

(3) & (4) Step by step approach to let users know where they are in the app.

(5) Implement a button to go to a next step to prevent errors. Use proper labeling and tone of voice to guide users to next step.

13

2

4

12

3 4

5

Enter Data Key Function: User enters data (symptoms, triggers, peak flow, medication) to save record.

RecommendationsActionsSelect Symptoms > Save Record

12

3

Iconography does not communicate meaning to users. • All symptoms (well, worse, critical) use the same icon.

Consider creating icon for each symptoms, but we can address this quickly by simply changing the colors of the icons.

• Severity: 1• Heuristics Violations: Control & Freedom, Consistency &

Standards

Minor visual problems leading to poor user experience

Delete text is not aligned to the center • The text button is not aligned to the center. It is a minor

problem but simple mistakes like this can reduce the credibility of the app.

• Severity: 1• Heuristics Violations: Aesthetics, Consistency &

Standards

2

Placement of buttons can encourage unintended interaction • Fitt’s Law suggests that target area we want users to

perform should be closer to the user. Having main action buttons more visible to the user can also help user find the button faster. Having a large and colorful delete button in the middle might encourage users to delete the record accidentally, causing user frustration by allow errors to occur. Consider switching the placement of save button and delete button.

• Severity: 1• Heuristics Violations: Aesthetics, Match the Real World

1

3

1

2

3

(1) & (2) Consider switching the placement of Delete and Save buttons.

(3) Change color of the icon for symptoms to communicate asthma status and match action plans.

(4) Consider placing the button fixed on a viewport so that the button is visible on top of other layers at all times. Button should be green (from the style guide) with white text and be the width of the viewport at portrait orientation with 10px of margin on each side.

4

During heuristic evaluations and cognitive walkthroughs, we found visual usability issues throughout various pages. The usability issues on this page embodies the visual design issues occuring on other pages.

Enter Data Key Function: User enters data (symptoms, triggers, peak flow, medication) and needs to change medication for action plan.

RecommendationsActionsEnter Medication > Edit Action Plan > Add Custom Rescue Medication

2

1

3

(1) & (4) There are no exit paths, users unnecessarily go through each step. • The core use case of this section of the app is

for users to check and record medications they have taken on that day. Users can accidentally enter this path (as Edit Action Plan button is duplicated and placed at a significant locations). Once entered, users are required to go through each of the six steps to exit out of this interaction, while not all six steps apply to the goal the user wants to achieve. For example, if the user wants to edit the dosage for one medication, they need to go through all six steps. This will slow users down, and they will become confused and frustrated as they try to complete their task.

• Severity: 4• Heuristics Violations: Error Prevention,

Consistency & Standards, Flexibility & Efficiency of Use, Control & Freedom

(2) & (3) There is no exit path on this pop up “Add custom rescue meds” and users are forced to create fake data which they cannot edit/delete once created on the list. • Users will be frustrated because they are not able to

delete or edit data and these items are permanently saved as part of their treatment action plan, causing errors and possible health issues due to faulty treatment plans. User may find this app does not fit their needs, as they can not customize their treatment plan to their needs.

• Severity: 4• Heuristics Violations: Error Prevention, Consistency

& Standards, Flexibility & Efficiency of Use, Control & Freedom

4

Critical Usability Problems

(1) Consider allowing users to edit the action plan in a six step process, a specific action plan, or by specific medication, giving users freedom to edit action plan as fits their needs. See referenced wireframes. Future phase to consider and design is an on-boarding process to help users setup their action plans when they first use the app.

(2) Allow users the ability to edit, cancel, and delete a specific medication from a medication screen, this will allow the user to see which action plans specific medications are assigned to and update the medication for all action plans in one screen.

(3) Prevent errors by creating Save button.Click Edit Action

PlanSelect Rescue med

and click NextSelect Control med

and click NextInput medication dosage plan for green zone and

click Next

Input medication dosage plan for yellow zone and

click Next

Input medication dosage plan for red zone and click Next

1

1

2

3

2

View Diary Chart Key Function: User can view past records and share report.

RecommendationsActionsAdd user (to send report) > Select user and send report

1

2

App allows users to input contacts without name, which causes errors and duplicate user records.

(1) Consider implementing Back, Cancel button to guide users with navigation.

(2) Implement contact list displaying more information such as email address and the name of contact group.

(3) Consider implementing Edit button on contact so that users can change or delete contacts.

(4) Consider making Add Contacts button smaller to avoid competing with Send Report button.

(5) Consider implementing search bar for users who have multiple contacts.

2

3

Critical Usability Problems

• App allows users to input contacts without requiring a name. When user leaves name input blank, it displays blank in the contact list without an email address. User will be frustrated not knowing who the report should be sent to and accidentally send reports to the wrong person.

• The app prompts users to select contact categories but does not display any indication on contact list. This may become frustrate users when their contact list grows. It would also be hard for them to search contacts, especially when they cannot edit/delete contacts on list.(related to the item below)

• Add user window page does not have cancel button for users to exit screen, but instead a inappropriately labeled back button. User can become frustrated and task slowed down with unclear labeling when trying to exit screen.

• User may need to edit a person's (email or name) information. User will be frustrated with a list that includes inaccurate information and does not have freedom to edit the list. User is slowed down needing to think about which people in list have accurate information. Related to this, the user will be frustrated by not being able to delete people from list.

• Severity: 3• Heuristics Violations: Error prevention, Consistency &

Standards, Flexibility & Efficiency of Use

1

1

3

2

22

1

3

4

5

Summary of Heuristics Recommendations

• Provide seamless navigation by placing cancel and back buttons in consistent locations, and creating page titles to indicate where users are within the app to help users with navigation and way-finding.

(1) What is Action Plans?(2) How to Create Action Plans per stages(3) How to Enter Data(4) How to Follow Action Plans (5) How to Share Report

• Utilize visual cues to guide interaction to help users learn what types of interactions and tasks they can perform on screens.

• Provide freedom and control to users by giving them options to edit, delete and cancel to help users customize app to fit their needs.

• In addition, we suggest a new feature to allow user on-boarding. With step by step explanations, we recommend providing users with on-boarding information for the follow:

To improve user satisfaction, we suggest the following high impact improvements:

Cognitive Walk Through

Cognitive Walk Through Summary

Questions per action Evaluation Result

1 Will users try to produce effect the action has?

2 Will users see the control for the action?

3 Will users recognize the control produces the effect?

4 Will users understand the feedback?

Evaluation Method

Each team member took one task and broke down the task into actions. Then, we asked four questions per action to see how the interface helps or impedes user’s goals. We combined the walk throughs on a master google sheet. In this report, we only summarized usability issues.

Tasks

1. Enter Symptoms - 5 actions2. Add a Custom Trigger - 5 actions 3. Set Reminders - 8 actions 4. Progress through Yellow Action Plan - 19 actions 5. Add a new user - 9 actions

14.13% Failure rate. 26 questions were answered with No.

46 Total Number of Actions

196 Total Number of Questions

In the following slides, we have marked the actions with question that was violated.

Cognitive Walk Through: Task 1 & 2

Task 1 : Enter Symptoms

Actions

2. Click on Symptoms

3. Select the symptoms user wants to record

4. Click Enter Data button

5. Click Save button

1.Click on “Enter Data” icon on the global navigation

4

4

4

4. - 45. -

No. The interface does not give users feedback. It might confuse the user if the data was entered or not, as Enter Data behaves like a back button. We recommend giving users feedback that says “Your data was entered”

No. The interface does not give users feedback. It might confuse the user if the data was saved or not. We recommend giving users feedback that says “Your data was saved”

IssuesTask 2 : Add a Custom Trigger

Actions

2. Select “Triggers”

3. Select the plus icon

4. Fill in Trigger

5. Select “Create Trigger”

1. Click on “Enter Data” Icon on the global navigation

2

4

Issues23. -

No. User has to scroll to the very end of the list to see the plus sign and user might not know where to add custom trigger. It could be confusing to the user as the icon for triggers also looks similar to plus symbol. We recommend creating text link that says “Add custom trigger”

2

45. -

No. When user clicks on Create Trigger without inserting any inputs, user is taken back to Add trigger page (Figure 3-2 on the left) without any feedback. User might be confused with the interaction. We recommend creating feedback to prevent errors as well as to notify if custom trigger was added to the list.

Action Number

Question Number

(Action 4, Question 4)

Task 8

Task 8

1 Will users try to produce effect the action has?2 Will users see the control for the action?3 Will users recognize the control produces the effect?4 Will users understand the feedback?

Cognitive Walk Through: Task 3

Task 3 : Set Reminder for a rescue medicine

Actions

2. Locate rescue medication item

3. Click on “As Prescribed” control

4. Click on First Time Reminder button

5. Click on time hour display and move clock hour hand to 7 and move clock minute hand to 00

1. Click on “Reminders” button

3

Issues

6. Click on AM time control

7. Click on "Done" button

2

1 4

2

4

22. -

No. User may not remember which are rescue medications to find the medication they want to edit. We recommend the interface provide appropriate labeling or use icons to provide context for reminder times.

13. -

No. User wants to set reminder to take medication but may be confused as to why there is a "once a day" option vs. "as prescribed." User may not know what their specific "as prescribed" is in this interface or if one is set up. Recommend to provide user feedback on what they have set up for "as prescribed" if one exists.

No. User may be confused when switching control between "as prescribed" and "once a day" as this changes number of time reminder options which might deviate from prescription. Feedback only shows switching between: off, once a day, as prescribed, but not the impact of switching. Consider warning pop-up that user must click out of when user changes between options.

43. -

No. Feedback of highlight on AM or PM is not a high contrast, although visually appealing. Failure to select appropriate AM vs PM should be considered critical for asthma medication schedule reminder. Recommend a more obvious indication of selection in comparison to other functions that use typical time control.

26. -

47. -

No. The wording of the button is not indicative of the action that will be taken. Consider changing wording to 'Save' instead of 'Done.'

(Action 2, Question 2)

1 Will users try to produce effect the action has?2 Will users see the control for the action?3 Will users recognize the control produces the effect?4 Will users understand the feedback?

Task 2, 3

Task 4, 6, 7

Cognitive Walk Through: Task 4

Task 4 : Progress through the Yellow Action Plan

Actions Issues

1. User touches on Action Plan icon

2. User touches on Yellow to go to the Yellow action plan.

3. User touches on Start button to start the Yellow Action Plan.

4. User touches on medication checkbox (the step with the grey background) to progress to next step - (repeat until progressed to Wait for 30 min step 4).

5. User touches on Wait 30 min checkbox.

6. 30 minutes pass, application opens the How do you feel screen and User selects Peak Flow.

8. User saves entry.

7. User enters value.

9. User touches on Save button save information. and go back to How do you feel screen

10. Application goes back to Yellow action plan. User touches on Wait 60 min to progress to next step.

11-14. User repeats action for How are you?

15. User steps through medicine intakes.

16. User touches on Continue your yellow zone instructions.

17. Application shows instructions dialog and user touches on OK.

18. User scrolls to top of page to stop yellow action plan.

19. User touches on Stop to finish action plan.

2 3

4

1 2 3 4

28. -

No. The user will look for a save button. The display shows a back arrow with the wording peak flow.

No. The control for the action is not easy to recognize, so the user may not recognize what the action of the control is.

38. -

When the user reads dialog they may misunderstand message and not know what to do next, leaving them confused and feeling a lack of control.

User will be frustrated in trying to find what to touch to save their data. They may feel that they can not save the data. Suggest adding a save button to help user understand what action is available.

No. User is not aware what to do at this step. Scrolling is not an intuitive action to progress to the next step.

118. -

Task 17, 18

218. -

418. -

After user clicks to close dialog box, they still need to stop their action plan. This is not clear and there is not a piece of the interface that explains to the user. They may leave this section of the app not knowing the action plan has not stopped. This can be confusing.

Consider recommendations from action 17, which will remove the need for the user to scroll to the top of the page to stop action plan. When action plan is stopped, the screen should remove the action plan steps and change the start/stop button to "Start action plan."

No. User may not be aware to scroll to the top of the screen, user is not aware they need to stop action plan.

No. No Information is provided to help user understand what they should do next.

No. When user touches on OK, the dialog closes and the screen stays at bottom of the progress. User is unaware another action may be needed. Message in dialog is unclear.

317. -

Task 8

(Action 8, Question 2)

1 Will users try to produce effect the action has?2 Will users see the control for the action?3 Will users recognize the control produces the effect?4 Will users understand the feedback?

318. - No. User is unaware of the correct action to achieve effect.

Consider changing OK to Stop Action Plan. Stop the action plan for the user and display the top of the screen. Change message to "Continue with your action plans as prescribed".

Cognitive Walk Through: Task 5

Task 5 : Add a new user

Actions Issues

2. Click "add user" button

1. Click "change user" button

1 2 3

11. -

No. It is not clear from the Settings screen there is the option for user to complete an add user action.

No. There is no navigation available in the Settings screen indicating a control to add user. The icon next to the user's name does not provide each information that it takes the user to the list of user profile page. User may mistakenly try the Profile button under accounts and find they cannot view or add more profiles.

21. - No. It is not letting the users enter email.

No. There is no button in the Settings screen to indicate the user can add users. User may not discover path to add user or get confused with the label.

No. upon clicking the Back button, the data entered (task 8: birthday, task 12: height) are not visible on the main page.

No. Upon clicking Create button, “Skip for now” button with sync icon appears. Users cannot recognize if the profile was made, they can only check it by going back to “change user” page.

3. Enter "first name" in text field

4. Enter "last name" in text field

5. Enter "email" in text field

6. Click on Date of Birth button

7. Use scroll wheel to select birthday

13. Select female for sex

31. -

3

25. -

Upon clicking on name input on previous step 4, the text cursor blinks and indicates user can input text. On this form, nothing happens when user clicks on the form. It will frustrate the user.

Users would be frustrated with this interaction. We recommend fixing this form to be functional.

Yes. The only button available on the interface is Back button, so the user does not have any other choice but to try this button.

18. - The users would be frustrated with data being lost and lose trust for the app. We recommend implementing Save or Enter button as well as Cancel button to help navigation. We also recommend providing feedback to let users know their progress.

(Action 1, Question 1)

1 Will users try to produce effect the action has?2 Will users see the control for the action?3 Will users recognize the control produces the effect?4 Will users understand the feedback?

8. Save birthday Data

9. Click Height button

10. Use scroll wheel to select height

14. Click on Create button

4

2 3 4

2 3 41

12. Save height

2 3 41

No. Users cannot see any changes made to interface after clicking on the input field.

35. -

45. -

No. There is no feedback.

112. -

(Shares the same issue)

28. - 212. -

Yes, the action is visible because it is the only button available, however users would be doubtful if their data were saved or not.

38. - 312. -

No. there is no feedback notifying users that the data have been entered.

38. - 312. -

314. -

No. There is no feedback.

414. -

We recommend providing feedback to users to let them know that the profile has been created.

Task 8

Task 12

Consider adding an "All user profiles" button on Settings screen to take user to list of profiles they can edit, add, and delete.

Task 1

Summary of Cognitive Walk Through Recommendations

Overall, we found several areas needing improvements. These suggestions fall into the following categories:

Provide buttons and links that guide users navigate and find features they want to find.

Provide clear messages to confirm system has completed user interaction, along with what the updates have been. Confirmation will help user know their goal matches what system did. Such as saving data, when input fields are required, or that another interaction needs to take place to complete task.

Provide labels with wording matching the actions users want to achieve, such as going back to previous screen, entering data or saving data.

Provide FeedbackProvide Labels Improve Navigation

Full Report Guide (Appendix)

Full Combined Report is available here (Google Sheet Link)

2

Tabs for Heuristic Evaluations report and Cognitive Walkthrough report.

1

1

2 The evaluations are organized by the key tasks.

3 The report contains details of the problem, problem justification and recommendations.

3

Initial Individual Reports of Heuristics Evaluations and Cognitive Walkthroughs are available here (Google Drive Link)

Although we have submitted ZIP Folder containing all appendix item on D2L, we suggest looking at Google Drive Links as the formatting would be nicer to read on Google Drive. The formatting often goes back to default value when we download files on Google Drive.

Style Guide (Appendix)

We did not include specific instructions design recommendations in the previous report. We recommend following the style to keep the design consistent. 60A800 F8BA00 D20200

Colors

0076FF

Green Plan, Feeling Well, Save button

Yellow Plan, Feeling Worse

Red Plan, Feeling Critical, Delete button

Edit, Cancel, Send buttons

Buttons350px

50pxColors: 0076FF, 60A800Corner radius: 10px each

Typography

Arial Bold, 22pt (Page Sub Titles)

Arial Regular, 15pt (boxy texts)

H2

H1

Body

Helvetica Neue Regular, 34pt (Page Titles)

Arial Bold, 15pt (Sub headings, links)H3

000000

Boxy texts