Stay organized with collections
Save and categorize content based on your preferences.
An app is one of the primary surfaces on Wear OS. Apps are different from
complications or tiles, which are glanceable representations of app content.
Apps display more information and support richer interactivity. The user often
enters an app from another surface, such as a notification, complication, Tile,
or voice action.
Principles
Keep the following principles in mind when designing apps:
Focused: Focus on critical tasks to help people get things done within
seconds.
Shallow and linear: Avoid creating hierarchies deeper than two levels.
Aim to display content and navigation inline when possible.
Scrolling: Apps can scroll. This is a natural gesture for users to see
more content on the watch.
Guidelines
Follow these guidelines when designing apps.
Optimize for vertical layouts
Simplify your app's design by using vertical layouts, which allow users to
scroll in a single direction to move through content.
check_circle
Do
This app's goal is to take the user from point A to point B.
cancel
Don't
Don't use both vertical and horizontal scrolling, as this can
make your app experience confusing. The exception is some specific use
cases, including media playback, which can support both vertical and
horizontal scrolling.
Show the time
Users tend to spend more time in apps, so it's important to provide
quick access to the time.
check_circle
Do
Display the time at the top of the app, as this provides a consistent place for the user to view the time.
cancel
Don't
Display the time in a dialog, confirmation screen, or picker, as users are likely to spend only a few seconds on those screens.
For more information about design and usage, see
Time text.
Accessible inline entry points
Ensure all actions are displayed inline, using clear iconography and labels for
accessibility. This includes entry points to settings and preferences.
check_circle
Do
Use both icons and labels when possible.
cancel
Don't
Rely solely on icons to prompt the user to take action.
Elevate primary actions
Help users take action in your app by pulling primary actions to the top of the
app. Elevate non-ambiguous primary actions to the top of the app.
Use labels to orient users
For longer apps, help orient the user with labels as they scroll through the
content.
check_circle
Do
Use section breaks, labels, and other cues to organize content and help orient users as they scroll through longer views with mixed content.
cancel
Don't
Add a label for apps that contain a single content type.
Show the scrollbar
Show the scrollbar if the entire view scrolls, as shown in the following image.
For more information, see Position indicator.
Content containers
See the following examples of content containers.
Figure 1. Container of fixed height.
Figure 2. Container of variable height.
Figure 3. Container of height and width greater than the viewport.
Figure 4. A paginated container.
Figure 5a. Content pages that take the full dimension of the screen and are
paginated vertically.
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2025-05-20 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-05-20 UTC."],[],[],null,["# App design principles\n\nAn app is one of the primary surfaces on Wear OS. Apps are different from\ncomplications or tiles, which are glanceable representations of app content.\nApps display more information and support richer interactivity. The user often\nenters an app from another surface, such as a notification, complication, Tile,\nor voice action.\n\nPrinciples\n----------\n\nKeep the following principles in mind when designing apps:\n\n- **Focused:** Focus on critical tasks to help people get things done within\n seconds.\n\n- **Shallow and linear:** Avoid creating hierarchies deeper than two levels.\n Aim to display content and navigation inline when possible.\n\n- **Scrolling:** Apps can scroll. This is a natural gesture for users to see\n more content on the watch.\n\nGuidelines\n----------\n\nFollow these guidelines when designing apps.\n\n### Optimize for vertical layouts\n\nSimplify your app's design by using vertical layouts, which allow users to\nscroll in a single direction to move through content. \ncheck_circle\n\n### Do\n\nThis app's goal is to take the user from point A to point B. \ncancel\n\n### Don't\n\nDon't use both vertical and horizontal scrolling, as this can make your app experience confusing. The exception is some specific use cases, including media playback, which can support both vertical and horizontal scrolling.\n\n### Show the time\n\nUsers tend to spend more time in apps, so it's important to provide\nquick access to the time. \ncheck_circle\n\n### Do\n\nDisplay the time at the top of the app, as this provides a consistent place for the user to view the time. \ncancel\n\n### Don't\n\nDisplay the time in a dialog, confirmation screen, or picker, as users are likely to spend only a few seconds on those screens.\n\nFor more information about design and usage, see\n[Time text](/training/wearables/compose/time-text).\n\n### Accessible inline entry points\n\nEnsure all actions are displayed inline, using clear iconography and labels for\naccessibility. This includes entry points to settings and preferences. \ncheck_circle\n\n### Do\n\nUse both icons and labels when possible. \ncancel\n\n### Don't\n\nRely solely on icons to prompt the user to take action.\n\n### Elevate primary actions\n\nHelp users take action in your app by pulling primary actions to the top of the\napp. Elevate non-ambiguous primary actions to the top of the app.\n\n### Use labels to orient users\n\nFor longer apps, help orient the user with labels as they scroll through the\ncontent. \ncheck_circle\n\n### Do\n\nUse section breaks, labels, and other cues to organize content and help orient users as they scroll through longer views with mixed content. \ncancel\n\n### Don't\n\nAdd a label for apps that contain a single content type.\n\n### Show the scrollbar\n\nShow the scrollbar if the entire view scrolls, as shown in the following image.\nFor more information, see [Position indicator](/training/wearables/compose/position-indicators).\n\nContent containers\n------------------\n\nSee the following examples of content containers.\n\n\n**Figure 1.** Container of fixed height. \n\n**Figure 2.** Container of variable height.\n\n\u003cbr /\u003e\n\n\n**Figure 3.** Container of height and width greater than the viewport. \n\n**Figure 4.** A paginated container.\n\n\u003cbr /\u003e\n\n\n**Figure 5a.** Content pages that take the full dimension of the screen and are\npaginated vertically. \n\n\u003cbr /\u003e\n\n| **Note:** Users find vertical layouts much easier to navigate than paginated UI's. Paginated UI's are best for situations when the user needs to navigate content using gross gestures, such as when working out or on the go. Because of this, they are generally used in workout and media app UIs."]]
