diff --git a/content/en/apps/features/targets/_index.md b/content/en/apps/features/targets/_index.md index 37757b9b1..a60e410ea 100644 --- a/content/en/apps/features/targets/_index.md +++ b/content/en/apps/features/targets/_index.md @@ -12,7 +12,7 @@ relatedContent: > --- -*Targets* is the user dashboard or analytics tab. The widgets on this tab provide a summary or analysis of the data in submitted reports. These widgets can be configured to track metrics for an individual CHW, for a Supervisor overseeing a group of CHWs, or for an entire health facility. +*Targets* is the user dashboard or analytics tab. The widgets on this tab provide a summary or analysis of the data in submitted reports. These widgets can be configured to track metrics for an individual CHW, for a Supervisor overseeing a group of CHWs, or for an entire health facility. For CHWs, the **Targets** tab provides a quick summary of their progress towards their individual goals. For Supervisors, Nurses, and facility-based users, the **Targets** tab provides important insights into how their community unit is performing. @@ -24,7 +24,7 @@ For CHWs, the **Targets** tab provides a quick summary of their progress towards ## Types of Widgets -There are two basic types of widgets: count and percent. *Count widgets* display a numeric sum while *percent widgets* display progress towards achieving a target. +There are two basic types of widgets: count and percent. *Count widgets* display a numeric sum while *percent widgets* display progress towards achieving a target. The text, icon, goal, and time frame of each widget is easily configured. The time frame is set per widget, and set to show values for "this month" (resets back to zero at the beginning of each month) or "all time" (a cumulative total). @@ -36,9 +36,9 @@ The text, icon, goal, and time frame of each widget is easily configured. The ti {{< figure src="targets-count.png" link="targets-count.png" class="right col-7 col-lg-4" >}} -Count widgets show a tally of a particular report that has been submitted or data within a report that matches a set of criteria. For example, a count can be done for the number of active pregnancies, the number of facility-based deliveries, or the number of households registered that month. +Count widgets show a tally of a particular report that has been submitted or data within a report that matches a set of criteria. For example, a count can be done for the number of new pregnancies, the number of facility-based deliveries, or the number of households registered that month. -A count without a goal displays a simple black number count. A count with a goal displays the value of the goal on the right side and a colored count in the center indicating progress towards achieving the goal. Progress is displayed in green if the count is equal to or above the goal, or in red if the count is below the goal. +A count without a goal displays a simple green number count. A count with a goal displays the value of the goal on the right side and a colored count in the center indicating progress towards achieving the goal. Progress is displayed in green if the count is equal to or above the goal, or in black if the count is below the goal. ### Percent Widgets @@ -46,4 +46,4 @@ A count without a goal displays a simple black number count. A count with a goal Percent widgets display a ratio, which helps to provide insight into the proportion that matches a defined criteria. For example, the proportion of newborns delivered in a facility can be presented as a percent with respect to all registered deliveries. -An optional goal can be set, such as “100% of patients with a fever should be given a malaria Rapid Diagnostic Test (mRDT),” to visualize progress towards achieving a target. Widget styling is configured to show green if the goal has been met and red if the goal has not been met. Next to the percent with a goal, the count of reports used in the calculation are shown (e.g. “16 of 20 with mRDT”). CHWs have found this helpful in interpreting target information. +An optional goal can be set, such as “100% of patients with a fever should be given a malaria Rapid Diagnostic Test (mRDT),” to visualize progress towards achieving a target. Widget styling is configured to show green if the goal has been met and black if the goal has not been met. Next to the percent with a goal, the count of reports used in the calculation are shown (e.g. “16 of 20 with mRDT”). CHWs have found this helpful in interpreting target information. diff --git a/content/en/apps/features/targets/targets-count.png b/content/en/apps/features/targets/targets-count.png index a95dc2370..7a13fef64 100644 Binary files a/content/en/apps/features/targets/targets-count.png and b/content/en/apps/features/targets/targets-count.png differ diff --git a/content/en/apps/features/targets/targets-desktop.png b/content/en/apps/features/targets/targets-desktop.png index e0ebba2d0..bd1fe36a6 100644 Binary files a/content/en/apps/features/targets/targets-desktop.png and b/content/en/apps/features/targets/targets-desktop.png differ diff --git a/content/en/apps/features/targets/targets-mobile.png b/content/en/apps/features/targets/targets-mobile.png index 651d45e55..9b7d7bb3a 100644 Binary files a/content/en/apps/features/targets/targets-mobile.png and b/content/en/apps/features/targets/targets-mobile.png differ diff --git a/content/en/apps/features/targets/targets-percentage.png b/content/en/apps/features/targets/targets-percentage.png index 09c2afe03..f8ce64824 100644 Binary files a/content/en/apps/features/targets/targets-percentage.png and b/content/en/apps/features/targets/targets-percentage.png differ diff --git a/content/en/apps/reference/targets/counts.png b/content/en/apps/reference/targets/counts.png index 0ebc75df9..d14733e6c 100644 Binary files a/content/en/apps/reference/targets/counts.png and b/content/en/apps/reference/targets/counts.png differ diff --git a/content/en/apps/reference/targets/percentages.png b/content/en/apps/reference/targets/percentages.png index f7e851ed6..7188c9f26 100644 Binary files a/content/en/apps/reference/targets/percentages.png and b/content/en/apps/reference/targets/percentages.png differ diff --git a/content/en/design/best-practices/_index.md b/content/en/design/best-practices/_index.md index 715f4ab51..d4aab9041 100644 --- a/content/en/design/best-practices/_index.md +++ b/content/en/design/best-practices/_index.md @@ -3,17 +3,17 @@ title: "Configuration Best Practices" linkTitle: "Best Practices" weight: 2 description: > - This document covers the configuration best practices of forms, tasks, targets, and contact profiles when building your own community health app. + This document covers the configuration best practices of forms, tasks, targets, and contact profiles when building your own community health app. --- ## Forms -We use forms to build the **Tasks**, **Care Guides**, and **Reports** that take health workers through care protocols and provide decision support for their interactions with patients. +We use forms to build the **Tasks**, **Care Guides**, and **Reports** that take health workers through care protocols and provide decision support for their interactions with patients. In this context, a form is any document with questions and blank spaces or selectable options for answers. Forms can be found in many parts of your app including the **Tasks**, **People**, and **Reports** tabs -While both Tasks and Reports are built with forms, there are key differences. Tasks are blank forms that need to be completed, while Reports are forms that have already been submitted. When a Task is completed and submitted, it automatically becomes a Report. +While both Tasks and Reports are built with forms, there are key differences. Tasks are blank forms that need to be completed, while Reports are forms that have already been submitted. When a Task is completed and submitted, it automatically becomes a Report. *Note: The icons and titles that we choose for Tasks remain the same when they become Reports.* @@ -27,7 +27,7 @@ The **Task** tab shows a list of upcoming visits, follow-ups, or other tasks tha ![Anatomy of a Task](img/anatomy-task.png) -
+
Each Task has an icon on the left side which indicates what type of Task it is.
The first bold line of text is the name of the person or family that the Task is about.
@@ -49,16 +49,16 @@ If a Task is overdue, the due date will be red. Tasks are listed in order of due The first line of bold text is the name of the person whom the Report is about.
The second line of text is the title of the Report.
The third line of text is the hierarchy of place to which that person belongs.
-In the upper right corner, a timestamp displays when the Report was submitted. +In the upper right corner, a timestamp displays when the Report was submitted. -Reports are sorted by submission date, with the most recently submitted Reports at the top. If a Report is unread, the timestamp will be bold blue and there will be a horizontal blue line above it. +Reports are sorted by submission date, with the most recently submitted Reports at the top. If a Report is unread, the timestamp will be bold blue and there will be a horizontal blue line above it.
### Titles -The patient’s name should not be included in the form title. +The patient’s name should not be included in the form title. ``` ❌ Don't do this: "Beatrice Bass Delivery Follow-Up" ✅ Do this instead: "Delivery Follow-Up" @@ -67,15 +67,15 @@ The patient’s name should not be included in the form title. Avoid generic words like “Visit” or “Report”. Every form can be a Report and often involves a visit, so including these words in the title doesn’t help differentiate it from other forms. ``` -❌ Don't do this: "Delivery Follow-up Visit" -✅ Do this instead: "Delivery Follow-Up" +❌ Don't do this: "Delivery Follow-up Visit" +✅ Do this instead: "Delivery Follow-Up" ```
-Each word in a title should be capitalized (Title Case). +Each word in a title should be capitalized (Title Case). ``` -❌ Don't do this: "Delivery follow-up" -✅ Do this instead: "Delivery Follow-Up" +❌ Don't do this: "Delivery follow-up" +✅ Do this instead: "Delivery Follow-Up" ```
@@ -83,12 +83,12 @@ Each word in a title should be capitalized (Title Case). Keep form titles short and concise. Long titles will sometimes be truncated (cut off with an ellipsis) and the text at the end of the title might be lost. As a rough estimate, strive to keep titles **no longer than 40 characters** in length. ``` -❌ Don't do this: "This Title Has Way More Than Forty Characters And Is Too Long" -✅ Do this instead: "Title Is Less Than Forty Characters" +❌ Don't do this: "This Title Has Way More Than Forty Characters And Is Too Long" +✅ Do this instead: "Title Is Less Than Forty Characters" ```
-To help estimate how much text can be displayed before truncation, you can use the [low-fi mockups here](https://drive.google.com/open?id=1Lcjqs7OIxs5wKLrxGjg1JwvEf6a3UQ90M-X3Go0iptY). If you type your form name into the mockup you can get a rough idea of how much text will fit before truncation occurs. Please note that the mockups have been made with our smallest screen sizes in mind. Some users’ screens will be larger and will be able to display more text. +To help estimate how much text can be displayed before truncation, you can use the [low-fi mockups here](https://drive.google.com/open?id=1Lcjqs7OIxs5wKLrxGjg1JwvEf6a3UQ90M-X3Go0iptY). If you type your form name into the mockup you can get a rough idea of how much text will fit before truncation occurs. Please note that the mockups have been made with our smallest screen sizes in mind. Some users’ screens will be larger and will be able to display more text. The screenshots here represent some of the smallest phones our users have. As you can see, on both the Tasks and Reports pages, titles less than about forty characters will fit in the space. Titles longer than about forty characters might be cut off with an ellipsis (...). @@ -101,7 +101,7 @@ The screenshots here represent some of the smallest phones our users have. As yo ### Icons -The Community Health Toolkit includes a collection of [60+ free icons]({{< ref "/design/icons" >}}) that represent key elements of different community health workflows and protocols. Please review the recommended usages that follow. +The Community Health Toolkit includes a collection of [60+ free icons]({{< ref "/design/icons" >}}) that represent key elements of different community health workflows and protocols. Please review the recommended usages that follow. |Icon | People and Places Hierarchies | @@ -185,11 +185,11 @@ Ex. Visit Details, Danger Signs Keep questions concise and in an intuitive sequence — they should be asked logically from a user’s perspective. This makes the flow from one set of questions to the next better resemble a conversation. ``` -Ex. Is your patient still pregnant? → Did she attend the ANC visit? → Does she have danger signs? +Ex. Is your patient still pregnant? → Did she attend the ANC visit? → Does she have danger signs? ``` **Reflect Input Length in Field**
-Employ this for fields that have a defined character count like phone numbers, zip codes, etc. +Employ this for fields that have a defined character count like phone numbers, zip codes, etc. ![Input Length](img/input-length.png)
@@ -220,7 +220,7 @@ Where it makes sense, use images to aid in the understanding of a question ### Summary Page -After all of the required questions in a form are answered, a summary page is displayed. Here, health workers can review the information they entered into the form, receive instructions for treatment, care, and referrals, and relay detailed educational information to the patient. +After all of the required questions in a form are answered, a summary page is displayed. Here, health workers can review the information they entered into the form, receive instructions for treatment, care, and referrals, and relay detailed educational information to the patient. *Note: The form is not submitted until the user scrolls to the end of the page and clicks “Submit”.* @@ -338,7 +338,7 @@ Ex.
    ## Condition Cards -A condition card is a configurable card that can be displayed on a profile that shows information that was submitted in or calculated from reports. Their purpose is to reveal important information in an easily viewable location. +A condition card is a configurable card that can be displayed on a profile that shows information that was submitted in or calculated from reports. Their purpose is to reveal important information in an easily viewable location. This information can be organized into cards specific to a condition (e.g. pregnancy, malnutrition) as well as past conditions, and set to display for any length of the time. @@ -351,9 +351,9 @@ This information can be organized into cards specific to a condition (e.g. pregn ### Configurable Elements -- Title +- Title - Label for each data point displayed -- Data point for the field +- Data point for the field - Icon for the field, if desired @@ -367,23 +367,23 @@ This information can be organized into cards specific to a condition (e.g. pregn **Field Label** - Label each data point displayed -- One line +- One line **Field Content** - Can include any information that was collected in a form or multiple forms about the person - + ``` Ex. LMP, EDD, most recent case of malaria, past pregnancies and their delivery dates ``` - Can display Notes - Data can be displayed in the following formats: - - Number + - Number - Count towards a goal - Percentage - - Date - - Text field + - Date + - Text field - Fields in cards are dynamic and will update as new information is submitted ``` @@ -407,22 +407,22 @@ Ex. Show the EDD of the current pregnancy until a delivery Report is received, s ``` - Condition cards can be configured to disappear at the end of the condition or persist for any length of time - -- Can be added to a person or place profile + +- Can be added to a person or place profile ``` Ex. Equity scorecard on household profile; CHW performance scorecard on CHW profile ``` - + ### Design Considerations -- Group information related to the same condition so that the user can easily understand the relevance of the data and find what they are looking for. +- Group information related to the same condition so that the user can easily understand the relevance of the data and find what they are looking for. ``` Ex. Pregnancy Card, Immunization Card ``` -- Consider what a user will do with the information before deciding to display it. More info isn’t necessarily better; what does a CHW need to know and how will they change their actions as a result? +- Consider what a user will do with the information before deciding to display it. More info isn’t necessarily better; what does a CHW need to know and how will they change their actions as a result? - Past condition cards may be best displayed as a summary of multiple past conditions rather than individual conditions @@ -438,15 +438,15 @@ Ex. Summary of past pregnancies rather than card for each past pregnancy ------------ -## Targets +## Targets -The Targets tab shows key performance indicators. Progress numbers are calculated automatically by the app, and goals are set by the organization. We currently support two types of widgets: Counts and Percentage-based bars. +The Targets tab shows key performance indicators. Progress numbers are calculated automatically by the app, and goals are set by the organization. We currently support two types of widgets: Counts and Percentage-based bars. **Counts** - Counts show current totals and will update as reports are created -- If there is a goal, it will be displayed to the right of the count. If the count is green, the goal has been met. If the count is red, the goal has not yet been met +- If there is a goal, it will be displayed to the right of the count. If the count is green, the goal has been met. If the count is black, the goal has not yet been met - Goals can only be met by exceeding them, you cannot set a goal which is met by being under the goal
    @@ -459,8 +459,8 @@ The Targets tab shows key performance indicators. Progress numbers are calculate **Percentages** - Percentage bars show progress towards completing certain reports. The colored part of the bar will update as reports are created. -- If there is a goal, a line will be on the bar to mark the goal. If the bar is green, the goal has been met. If the bar is red, the goal has not yet been met. -- The text below the bar shows how the percentage is calculated, displaying the number of Reports that met the requirement out of the total number of Reports. +- If there is a goal, a line will be on the bar to mark the goal. If the bar is green, the goal has been met. If the bar is black, the goal has not yet been met. +- The text below the bar shows how the percentage is calculated, displaying the number of Reports that met the requirement out of the total number of Reports.
    @@ -472,7 +472,7 @@ The Targets tab shows key performance indicators. Progress numbers are calculate **Configurable elements** - Title text (free text) -- Subtitle text (two options: all-time or this month) +- Subtitle text (two options: all-time or this month) - Icon (selected from our [icon library](https://github.com/medic/icon-library)) - Presence of a goal (or not) - Value of the goal (per widget, not per user) @@ -488,7 +488,7 @@ The Targets tab shows key performance indicators. Progress numbers are calculate - If hyphenation is needed, words should only be broken at syllables ``` -Ex. +Ex. - % Newborn Care Visit Within 72 hours → Newborn visits within 3 days - % of Under-5 Referrals Followed-up within 24 hours → U5 referral follow-ups within 1 day - % of Fever Tested with mRDT → Fever tested with mRDT @@ -504,7 +504,7 @@ Ex. **Bars** - Has to have a numerator and a denominator -- comparing two things, and not more than two at this time (can’t do: % of deliveries at (1) home unskilled vs. (2) home skilled vs. (3) facility. Any two of these would work though, including (1) all home deliveries vs. (2) facility deliveries). -- It is possible to account for things that haven’t happened. For example, if you are measuring PNC visits that happened within 1 week of delivery, you can determine whether a particular woman should have had a PNC visit based on her EDD. +- It is possible to account for things that haven’t happened. For example, if you are measuring PNC visits that happened within 1 week of delivery, you can determine whether a particular woman should have had a PNC visit based on her EDD. - There are several ways to account for things that have and haven’t happened, and happened late, depending on what you are trying to show. ``` @@ -514,7 +514,7 @@ Ex. Configurations for visit attendance: - On-time = true, Late = false - Of all the visits that were supposed to happen, how many were on-time?
    - - On-time = true, Late + didn’t happen = false + - On-time = true, Late + didn’t happen = false - Of all the visits that were supposed to happen, how many actually occurred? (includes on-time and late as having happened) - On-time + Late = true, Didn’t happen = false @@ -522,20 +522,20 @@ Ex. Configurations for visit attendance: - It’s not possible to total up forms from all household members or check to see if any family member had a form submitted this week and count that as the household being visited. If you want to count the households visited this month, you need a form submitted at the household level like a household visit form or a household survey form. - Denominator must be the same for both sides (e.g. kids in our immunization program). Can’t split it into kids <2 yrs on one side and kids <5 years on the other side. -Bars must progress positively (ex. Visits completed, not visits missed) +Bars must progress positively (ex. Visits completed, not visits missed) **Unique Considerations for Personas** CHWs: -- Will be viewing on a mobile device; keep in mind the number of widgets you display +- Will be viewing on a mobile device; keep in mind the number of widgets you display - Information is related to their own individual achievement, not comparisons with peers or aggregates for their facility -- May have a difficult time understanding percentages (however certain partners like LG still focus on % based targets and therefore it still needs to be included). Percentages are good for evaluating performance, but difficult to “act on” because depending on how many actions you have already done / left to do, it may not always be clear or possible to “achieve” a percentage goal. +- May have a difficult time understanding percentages (however certain partners like LG still focus on % based targets and therefore it still needs to be included). Percentages are good for evaluating performance, but difficult to “act on” because depending on how many actions you have already done / left to do, it may not always be clear or possible to “achieve” a percentage goal. - Targets data is always up-to-date even when offline, but important to know when they’ve last synced and sent data to managers Managers: -- Could be viewing on desktop or mobile device; may be seeing widgets side-by-side +- Could be viewing on desktop or mobile device; may be seeing widgets side-by-side - Want to view overall summary of CHW goals, may also have their own personal goals - Can only see widgets for which they have Report access - Understand, and need, percentage information in order to evaluate performance diff --git a/content/en/design/best-practices/img/counts.png b/content/en/design/best-practices/img/counts.png index 0ebc75df9..a7e496dfb 100644 Binary files a/content/en/design/best-practices/img/counts.png and b/content/en/design/best-practices/img/counts.png differ diff --git a/content/en/design/best-practices/img/percentages.png b/content/en/design/best-practices/img/percentages.png index f7e851ed6..c28419b4d 100644 Binary files a/content/en/design/best-practices/img/percentages.png and b/content/en/design/best-practices/img/percentages.png differ