Views

CareKit UI provides customizable views organized into three categories — tasks, charts, and contacts — and defines several default view styles in each. To design a CareKit app, you simply choose the view styles you need and supply CareKit Store data to display in them.

Each view category is designed to support specific types of content and interaction. To ensure a consistent experience, use each view type for its intended purpose.

Category Purpose
Tasks Present tasks, like taking medication or doing physical therapy.
Enable logging of patient symptoms and other data.
Charts Display graphical data that can help people understand how their treatment is progressing.
Contacts Display contact information.
Support communication through phone, message, and email, and link to a map of the contact's location.
Screenshot of a care app screen that shows completed and uncompleted days, a medication task, a chart that compares the patient's nausea with their medication intake, and a logging task the patient can use to log each occurrence of nausea.

Tasks and charts

Screenshot of a care app screen that shows contact information for two doctors, including buttons for phone, message, email, and map directions.

Contacts

A CareKit UI view consists of a header and may include a stack of content subviews. Located at the top of the view, the header can display text, a symbol, and a disclosure indicator, and can include a separator at its bottom edge. The content stack appears below the header and displays your content subviews in a vertical arrangement.

Diagram of a CareKit task view. Callouts indicate the header area at the top of the view, which contains the title on the left and an optional disclosure indicator on the right. Callouts also point to the subview area below the header and the horizontal separator between the areas.

CareKit UI takes care of all the layout constraints within a view, so you don't have to worry about breaking existing constraints when you add new subviews to the stack.

Tasks

A care plan generally presents a set of prescribed actions for people to perform, such as taking medication, eating specific foods, exercising, or reporting symptoms. CareKit UI defines several styles of task views you can use to display prescribed actions. Typically, you customize a task view by providing the information to display, often by specifying data stored in an on-device CareKit Store database. In some cases, you might also supply custom UI elements.

A task can contain the following types of information.

Information Required Description Example value
Title Yes A word or short phrase that introduces the task. Ibuprofen
Schedule Yes The schedule on which a task must be completed. Four times a day
Instructions No Detailed instructions, recommendations, and warnings. Take 1 tablet every 4-6 hours (not to exceed 4 tablets daily).
Group ID No An identifier you can use to group similar tasks in ways that make sense in your app. A category identifier like medication or exercise.

In CareKit 2.0, CareKit UI defines five styles of task views: simple, instructions, log, checklist, and grid. Each style is designed to support a particular use case.

Use the simple style for a one-step task. The default simple-style view consists of a header area that contains a title, subtitle, and button. You provide the title and subtitle, and you can provide a custom image to display in the button when the task is complete. If you don't supply an image, CareKit shows that a task is complete by filling in the button and displaying a checkmark. Because the default simple-style view doesn't include a content stack, consider using a different task style if you need to display additional content.

Partial screenshot showing a task that consists of taking a single dose of medicine at a specific time of day. The filled in circle and checkmark indicate that the task has been completed.

Use the instructions style when you need to add informative text to a simple task. For example, if a single-step medication task should include additional information — such as "Take on an empty stomach" or "Take at bedtime" — you can use an instructions style task to display it.

Partial screenshot showing a task that consists of taking a single dose of medicine at a specific time of day and includes instructions on how to take the dose. Below the instructions, the task shows the word completed and a checkmark to indicate that the task has been completed.

Use the log style to help people log events. For example, you could use this task style to display a button people can tap whenever they feel nauseated. The log-style task can automatically display a timestamp every time the patient logs an event.

Partial screenshot showing a task that consists of a button that creates a log entry every time a patient taps it. Below the button, the task lists the times at which the button was tapped.

Use the checklist style to display a list of actions or steps in a multistep task. For example, if people should take a medication three times per day, you could display the three scheduled times in a checklist. Each checklist item can include a text description and a button that people can tap to mark the item as done. By default, a checklist task can also display instructional text below the list.

Partial screenshot showing a task that directs the patient to take a medicine at breakfast, lunch, and dinner. A filled in circle with a checkmark next to breakfast and lunch show that the patient has already taken the first two doses.

Use the grid style to display a grid of buttons in a multistep task. Like the checklist style, the grid style also supports a multistep task, but it displays the steps in a more compact arrangement. You can supply a succinct title for each button (if you need to provide additional description for each button, you might want to use the checklist style instead). By default, a grid-style task can also display instructional text below the grid of buttons. Unlike other task styles, the grid style gives you access to its underlying collection view, which means that you can display custom UI elements in the grid layout.

Partial screenshot showing a task that consists of three circles that represent three doses of a medicine. The first two circles are filled in and contain checkmarks, indicating that the patient has already taken two doses.

Consider using color to reinforce the meaning of task items. Color can be a good way to help people understand information at a glance. For example, you could use one color for medications and a different color for physical activities. Always avoid using color as the only way to convey information. For guidance, see Color.

Combine accuracy with simplicity when describing a task and its steps. For example, use a medication's marketing name instead of its chemical description. Also, when the context of a task helps to clarify meaning, minimize the number of words you use. For example, a daily medication task generally tells people when to take specific medications, so it may be unnecessary to repeat words like "take."

Consider supplementing multistep or complex tasks with videos or images. Visually demonstrating how to perform a task can help people avoid mistakes.

Charts

Chart views let you present data and trends in graphical ways that can help people visualize their progress in a care plan. CareKit chart views can display both current and historical data, and update automatically with new data.

In CareKit 2.0, CareKit UI provides three chart styles: bar, scatter, and line. For each style, you provide a descriptive title and subtitle, supply axis markers — like days of the week — and specify the data set.

Partial screenshot of a bar chart with day of the week on the X axis and number of doses on the Y axis. The bar on one day reaches to two on the Y axis, indicating that the medicine was taken twice on one day in the week.

Bar chart

Partial screenshot of a scatter chart with day of the week on the X axis and number of doses on the Y axis. The dot on one day reaches to two on the Y axis, indicating that the medicine was taken twice on one day in the week.

Scatter chart

Partial screenshot of a line chart with day of the week on the X axis and number of doses on the Y axis. The line is at zero on the Y axis for all days but one, where it reaches two, indicating that the medicine was taken twice on one day in the week.

Line chart

Consider highlighting narratives and trends to illustrate progress. For example, your app could display a bar chart that shows a correlation between the number of times people took medication and their level of pain. Displaying such data can encourage better adherence to a care plan.

Label chart elements clearly and succinctly. Long, detailed labels can make a chart difficult to read and understand. Keep labels short and avoid repeating the same information. For example, a heart rate chart might use the term BPM in an axis label instead of using it in the label of every data point.

Use distinct colors. In general, avoid using different shades of the same color to mean different things. Also ensure that you use colors with sufficient contrast. For related guidance, see Color and Contrast.

Consider providing a legend to add clarity. If the colors you use to represent different types of data aren't immediately clear, include a legend that clearly and succinctly describes them.

Clearly denote units of time. People should immediately know whether time-based data is represented in seconds, minutes, hours, days, weeks, months, or years. If you don’t want to include this information in individual data value labels, include it in an axis label or elsewhere on the chart.

Consolidate large data sets for greater readability. A large amount of data can make a chart unreadable by reducing the size of individual data points and presenting too much visible information. Look for ways to group and organize data for clarity and simplicity.

If necessary, offset data to keep charts proportional. It’s easy for very small data points to get lost or become unreadable in a chart that also contains very large data points. If the difference between data points is significant, find ways to offset or restructure the data so all data points are readable.

For developer guidance, see CareKit > Chart Interfaces. To learn about ResearchKit charts, see the ResearchKit GitHub project.

Contacts

A care plan typically includes a care team and other trusted individuals who can help patients follow the plan. CareKit UI defines a contact view you can use to help patients communicate with the people in their care plan.

In CareKit 2.0, CareKit UI provides two styles of the contact view: simple and detailed.

Screenshot of a

Simple

Screenshot of a

Detailed

Consider using color to categorize care team members. Color can help people identify care team members at a glance. For guidance, see Color.