Meet watchOS 10

♪ ♪ Taylor: Hello, my name is Taylor, and I'm a designer on the Apple Design Team. We are so excited to introduce watchOS 10, the most significant change to Apple Watch since its introduction over eight years ago. In this session, you'll learn about what's new in watchOS 10, how the Apple Design Team approaches the design of our own apps and the system, and how you can apply these design patterns to make great Apple Watch apps of your own. Let's get started. In 2014, we introduced Apple Watch, the most personal product we've ever created together. It's always with you and is worn on your body. In acknowledgement of this, we designed Apple Watch to offer a wide range of stylistic personalization in case materials, bands, and watch faces.

And with the introduction of Apple Watch Ultra, Apple Watch can be your companion in some of the most extreme conditions on Earth. The unique constraints of a device worn on the wrist, a comparatively small display, limited input capabilities, and generally short interaction times, required us create new methods of interacting, like the Digital Crown, and to focus the design of apps to be glanceable, actionable, and responsive.

Since then, Apple Watch has evolved a lot. Its displays are larger, brighter, and seamlessly integrated into the curvature of the casing. Apple Watch is also more capable than ever with cellular connectivity, new Health sensors, a display that's always on, and apps that are increasingly full-featured. With watchOS 10, we are introducing an entirely new user interface for Apple Watch that takes full advantage of these modern, bright displays and more capable, connected hardware. watchOS 10 intelligently surfaces timely, relevant widgets right on your watch face that you can access by turning the Digital Crown. The Home Screen is easier to navigate. Rotate the Digital Crown to move vertically through a consistent organization of apps. And you can click the Side Button once to open Control Center from anywhere you are, or twice to open Wallet.

And we've redesigned every app with a focus on glanceability, clarity, and consistent placement of controls and navigation. We designed watchOS 10 by following a rigorous and methodical design process centered around clear design principles that you can apply to the design of your apps.

Apple Watch apps should be focused and highly-specialized in the utility they provide users. The design of each screen should optimize for glanceability and short interaction time. And controls and navigation should be clear and consistent. Compared to the original Apple Watch, Apple Watch Series 8 and Apple Watch Ultra have much larger, more rounded displays. To bring more navigational consistency to our app designs and increase their glanceability, we established a new approach to layout that informed the design of individual apps. This new system is based on the shape of the display and defines the size and placement of controls, labels, and content, making apps more consistent in layout and controls more clear and ergonomic. To accommodate different types of content, we designed three foundational layouts: Dial, Infographic, and List. All of these layouts are designed to adapt automatically to the different Apple Watch sizes supported by watchOS 10 . Apps in watchOS 10 also make considerate use of background content to convey additional information, like the time of day in World Clock, the current conditions in Weather, or whether a company's stock price is trending up or down. For instance, in Activity, each Infographic view for the Move, Exercise, and Stand Activity Rings has a background that matches the color of the ring you're focused on. Use background colors to help users navigate or to aid in recognition of what app they're using. Background content in watchOS 10 should play a supporting role that provides additional utility, not merely be a visual flourish. Background content can be as simple as a color, gradient, or as sophisticated as an animation that communicates additional information. Consider using color to help people who use your app understand their sense of place.

In addition to background content, watchOS 10 introduces new applications of materials across the system. Distinct, functional layers utilize translucency to establish hierarchy and help users understand where they are in the system or inside an app. These new materials maximize the amount of space for content, while allowing system elements like the Status Bar to remain legible when content is scrolled underneath them. Additionally, elements using semantic system colors automatically adapt their contrast when placed on top of vibrant background materials. watchOS 10 also introduces new navigation patterns: Vertical pagination, source list, and refined hierarchical navigation designed to help make apps easier and more consistent to navigate. The Digital Crown is a unique input mechanism we designed to address the needs of a product this small, having a way navigate without occluding the display with your finger. In watchOS 10, the Digital Crown is used to navigate to apps, and also navigate within apps. In List-based views, like Mail, you can rotate the Digital Crown to scroll vertically through the list of inboxes or mail messages. For apps with multiple tabs, watchOS 10 introduces a new navigation pattern, vertical pagination. In Activity, we use the Digital Crown to navigate between the Activity Rings overview and the individual infographic views for the Move, Exercise, and Stand rings.

Vertical pagination is a great way to separate multiple views of information inside your app into distinct, purposeful screens. The page indicator is aligned to the Digital Crown and is designed to adapt and remain visible on any background. Sometimes, an element in your design exists in multiple pages of your app, like the Activity Rings in Activity or Dials in Stopwatch.

Smoothly animate elements between pages by manipulating their scale, position, and information density, instead of introducing additional instances of that element on each page. This object permanence helps provide a visual anchor for users as they navigate through full-screen pages of content. Generally, we advise limiting the content of an individual page to a single screen height. Embracing this constraint encourages each page to serve a clear and distinct purpose and results in a more glanceable design. However, we know there a certain cases where it's necessary for content to extend beyond the height of the display. One example of this is Messages, which contains two pages, one for your pinned conversations and another containing conversations with other people or groups. This first page is a fixed height and can contain up to nine pinned conversations. The second page is a scroll view that scrolls vertically after it becomes the active page.

In Contacts, the first page of a contact card provides a detailed photo and frequently used actions. The second page is a scroll view and contains less frequently used contact details. We recommend using scroll views inside pages judiciously and, if possible, placing them only after fixed height pages in your app design. Use Vertical Pagination in place of horizontal pagination, which is more difficult to navigate on Apple Watch. In contexts where the Digital Crown does not need to navigate lists or between pages, it is a fantastic tool to inspect data in your app. In World Clock, rotating the Digital Crown advances the time of day at a selected location, allowing users to compare various times of day to their current time. World Clock also makes use of Split Views in watchOS 10 to introduce a new navigation pattern, Source Lists. In source list based apps, users navigate between detail views for multiple entities containing the same type of information. These apps open to the detail view, and users can tap the Source List Button in the upper left to switch between entities, such as multiple locations in World Clock. Traditional hierarchical navigation is still supported, but it should be used considerately, and only when your app cannot more succinctly represent its content in a two-level, Source List based design or as distinct vertical pages. Settings and Mail are good examples of where deeper hierarchical navigation is appropriate. watchOS 10 introduces a new animation for hierarchical navigation that makes it clear which view users are navigating into as they traverse the hierarchy of your app. Great watchOS 10 apps are focused, they convey information succinctly, and are optimized for glanceability and brief interactions.

To design a great watchOS 10 app: Focus what your app does and make it highly specialized, Keep navigation shallow and use standard navigation patterns. Convey information in the most succinct number of screens possible. And use standard layouts, controls, label sizes, semantic colors, and materials. If you'd like to go deeper and learn more about how to design for watchOS 10, check out "Design and Build Your App for watchOS 10" and "Update your app for watchOS 10." We also have great sessions dedicated to widgets and the new Smart Stack. watchOS 10 was a massive effort, requiring collaboration from many different people and disciplines across the Design Team and Engineering, but this is just the beginning. We cannot wait to see what innovations you bring to Apple Watch with your own apps. ♪ ♪