Guidelines for using Apple Watch Human Interface

Original author: Apple Inc.
  • Transfer
  • Tutorial
The official guide from Apple to develop an interface for the Apple Watch - now in Russian! Alconost technical translators did a great job. However, while this material was being compiled, Apple rolled out a new version of the guideline, so stay tuned for updates on our blog.



User Interface Design Basics



Design for Apple Watch



IMPORTANT!
This is a preliminary document describing the API or technology under development. Apple provides this information so that you can plan for the technology and software interfaces described here for Apple products. The information contained here is subject to change, so the software created using this document must be tested using the final versions of the operating system and use the final versions of the documentation for this. For future beta versions of the API or technology, new versions of this document may be created.

The following concepts are embodied in the Apple Watch.
 

PersonalitySince the Apple Watch product is designed to be worn, therefore, the user interface of the device adapts to the user's actions. For example, if you raise your wrist, the time and new notifications will be displayed on the device screen. Thanks to the Digital Touch system (in particular, its Heartbeat and Sketch features), you can use new types of personal communication. Using the accelerometer and heart rate sensor, you can get information about the daily activity of the device owner. None of the Apple devices has been so closely related to its owner. When developing applications for the Apple Watch, keep this in mind.
 

Integrity.The Apple Watch erases the boundaries between the physical object and the software. Digital Crown is a finely tuned hardware control that allows you to navigate in the application taking into account a variety of nuances. The Taptic Engine provides a soft, physical response to notifications and interactions with on-screen interface elements. Force Touch is a hardware feature for recognizing and interpreting physical gestures. It opens up completely new possibilities for contextual program controls. Even the physical border of the Retina display is taken into account, so the design of the user interface is designed in such a way that this border becomes invisible. You should consider the design of the application in such a way as to increase the feeling of unity of hardware and software.
 
Ease.Applications for Apple Watch are developed with the expectation of quick and uncomplicated interactions, during which the watch display is most effectively used, and the position of the watch on the wrist is also taken into account. The user can quickly and easily access information or remove it from the screen. This ensures confidentiality and convenience. For example, Short-Look alerts are short alerts. They display additional information only if the owner of the watch is interested in it. Glance controls display information provided by applications in an easy-to-use interface that can control finger movements. When developing applications for the Apple Watch, it’s important to keep in mind that the device owner will use them frequently
 
WatchKit apps complement core iOS apps, not replace them. If the interaction time with the application for iOS is measured in minutes, then the user is likely to interact with the WatchKit application in a matter of seconds. Therefore, it is necessary that sessions of interaction with applications be short-lived and interfaces simple.
 

Application anatomy


In order for your app to launch, the Apple Watch must be paired with your iPhone.
 

Interface Navigation Methods


WatchKit applications support the two navigation methods described below.
 
  • Hierarchical . This method is similar to the navigation method used in iOS, and is best suited for applications with a hierarchical organization of information. In an application with a hierarchical structure, the user sequentially selects one element on each screen until the desired result is achieved. To perform another action, the user needs to go back a few steps or even to the very beginning, and only then go through another branch of the hierarchy.

 
If it is necessary to organize a complex system of user interaction with the application, then usually for these purposes a hierarchical rather than a simple page navigation model is better suited.
 

  • Page . The page interface allows the user to navigate from page to page by swiping a finger horizontally across the screen. Such an interface is best suited for applications with simple data models in which the data on each page does not directly relate to the data on other pages.

 
The dot indicator located at the bottom of each page displays the position of the page in the set. To make navigation easier, you need to use as few pages as possible.



It is not possible to combine hierarchical and page interface styles. At the design stage, you need to choose the style that best suits the content of your application, and its design.
 
Applications that use these interface styles can display content modally. Modal interfaces allow the user to complete a task or receive information without being distracted by interaction with the rest of the application. See the Modal Windows section.
 

Types of user interaction


  • Actions based events . Touching the screen means selecting an item or interacting with it. A single touch is the main way that a user will interact with your application. Rows of tables, buttons, switches, and other items are controlled by touch. Information about them is transferred to the program code of your WatchKit extension.
  • Gestures . The system processes all gestures and uses them to perform the following standard actions.
  • If you swipe vertically across the display, the contents of the current screen will scroll.
  • If you swipe your finger horizontally, the previous or next page of the page interface is displayed.
  • If you slide your finger near the left border of the screen, you will be taken to the parent interface.

 
Apple Watch does not support multi-finger gestures, such as compression gestures.
 
  • Force Touch function. The Retina display not only detects touch, but also determines the force with which the user's finger presses on the screen. When information about the touch and its strength is detected, the system displays a context menu for the current screen (if one is provided). Using this menu, applications can display possible actions for the current content. See the menu section.
  • Digital Crown Control The Digital Crown hardware control lets you use the adaptively configured fast-scrolling feature without blocking the screen of your Apple Watch. With it, the user can easily scroll through long pages. In third-party applications, the Digital Crown control is only available for scrolling the contents of the screen.

 

Preview


Previews are screens grouped by time and context with information from user applications. Each screen contains relevant data for its program. At the bottom of the preview, there is space for the scroll indicator.

 
Previews have the following features:
  • Patterned . There is a set of ready-made templates for the upper and lower half of the screen. You can choose the right one using Xcode.
  • Non-scrolling . All information of such previews fits on one screen.
  • Performing only one action . Clicking on any part of the preview opens a specific application screen.
  • Optional . Not all applications need to constantly show something, so the user can hide and display the preview.

 
Form a preview based on the context of the user . Unnecessary information reduces the benefits of previews. Use your current time and location to offer only useful data here and now.
 
Use Handoff to communicate with the WatchKit app. Previews provide the application with information about user actions with previews using Handoff. WatchKit uses this information to tailor the application interface to the situation.
 
Show only useful information. For example, do not use the preview as a shortcut to launch the main application.
 

Alerts


The notification system in the Apple Watch makes it easier to work with local and external notifications. Interaction with alerts takes place in two stages, for which there are short and full-sized interface options. A short one is called when a notification is received - at that moment a very limited set of information is displayed. If the user drops his wrist, the preview disappears. The full interface is used during active work with the clock or is called by clicking on the short version. In this case, more information and features are available, and the window is closed only at the request of the user.
 
More accurate with the frequency of sending alerts. The user may find annoying notifications of your program too frequent and simply disable them. Always ensure that alerts reflect your current needs.
 

Brief alerts


Abbreviated previews are not displayed for long, and in order to understand where the notification came from. They rely on the template and contain the name of the application, its icon and notification title. The name is shown in the main color of the program.

 
Use concise and informative headlines. The heading was limited, so it should be concise and appropriate. Headings do not convey details, they only suggest.
 

Customizable full-size alerts


Full-size previews convey more notification information. The watch has a standard look for them, but you can change it to your needs and add the necessary graphics. The structure of the full interface is identical for all applications. At the top there is a system title with an icon and a name for the program, and at the bottom there is a Dismiss button. The space between them is for information and additional buttons for your alerts.


 
Create static interfaces and, in addition to them, dynamic ones. Dynamic previews are more flexible in setting, but show the same information in alerts. Static interfaces are used when dynamic ones are not available.
 
Add up to four additional buttons.Apple Watch shows interaction buttons based on interactive notifications from iOS apps. These buttons are automatically inserted according to the notification category, and complement the Dismiss system button.
 
Combine the title color with the gamut of the application. The color and transparency of the system header in the modified interface can be changed.
 
For more information on static and dynamic interfaces, as well as setting up action buttons, see the Apple Watch Programming Guide .
 

Modal windows


 
Modal windows are intended for the user to perform a specific task, obtain information without “background noise”, or continue the action started in Menu control. To do this, modal windows temporarily restrict user interaction with the main application interface.
 
It is best to minimize the use of modality in the program. Such interfaces are usually justified in the following cases:
 
  • Be sure to attract the attention of the user.
  • An independent task should be completed or explicitly rejected when it is necessary to ensure data integrity.

The modal interface consists of one or more screens, which are organized into scrolling pages. The only difference here is the presence or absence at the bottom of the scroll indicator. The upper left corner always contains the Close button. When you click on it (or when swipe from the left edge), the system closes the modal window without further action.


 
Do not add a separate close button to the window . System Close is required, but you can always rename it to better suit the context. Typical naming options are Close or Cancel, and the color is always white.
 
Add an Accept button for tasks requiring consent. Use the standard button for consent - after pressing it, the necessary actions are performed with the subsequent closing of the modal window.
 
Try to make modal tasks easier . Avoid calling additional modal windows from the main one.
 

Layout


Applications display the same interface regardless of the size of the Apple Watch. The relative location allows the elements of the interface to correctly fill the screen.
 

Basic recommendations


Limit the number of closely spaced controls. Use icons instead of captions when placing buttons closely. Never place more than three elements too close - with more, they become too small to use.
 
 
Make full use of the entire width of the screen. Since the Apple Watch frame visually moves content from the edges, you do not need to add separate indents (note that such a frame is not in iOS Simulator).
 
 
Use left alignment. Interface elements are arranged from top to bottom and from left to right. Left justification leaves more room for expanding elements and placing content.
 
 
Create text buttons to fit the entire width of the screen.Buttons with captions are better not to limit the width, which will fit the inscription completely.
 
 
Use the context menu for secondary actions. Instead of placing additional buttons, use the context menu. You can hide options that are called less often in it. See Menu .
 
 
 

Screen sizes


The content should be identical for screens of different sizes. When placing elements, use relative dimensions and indents. This will allow the interface to change depending on the available screen space.

 
Whenever possible, use one set of images for both displays. If the same graphics look good enough on displays of different sizes, then it’s better to leave it that way. Otherwise, you may need a separate set of images for each display.
 

Color and typography


Readability is the guiding principle for using color and typography in an application.
 

Colour


Color helps to achieve visual integrity and compliance with the corporate identity of the application.
 


Use black as the application background. The black background merges with the frame of the device, which creates the illusion of a screen without edges. Avoid light backgrounds in the interface.
 
Use the main color of the application to emphasize the corporate identity or reflect the state of the application. For each application, there is a primary color. The system uses it in the upper left corner for the title, in alerts to highlight the program name and other important information. Use this color to emphasize the corporate identity of the application.
 
Use contrasting colors for text. With contrasting colors, the text is easier to read.
 
Avoid using color to emphasize the interactivity of an element.Use color for styling, but do not try to note the interactivity of buttons and other controls in this way. Remember about different color perception. Most people with limited color perception have difficulty distinguishing red from green. Test applications to be sure that there are no places where red and green are used to distinguish between program states (some graphic editors offer special tools for finding problematic combinations).
 
Explore color perception by users of different countries and cultures. Everyone sees colors in their own way, and many cultures differ in their views on a particular color. If possible, check that the selected color will express exactly what you intended.
 

Typography


First of all, the text should be readable. If the user cannot read what is written, then the beauty of the styles becomes meaningless.


 
The system font is created and optimized specifically for the Apple Watch. With a large font size, the letters are compressed to take up less space in width. But when the size decreases, they are placed more freely, and the character design is optimized for better readability. Punctuation marks increase proportionally with decreasing size. When you resize text, the Apple Watch dynamically redraws the font to maintain its clarity and readability.
 
Always use dynamic types. They give the application the following features:
 
  • automatic adjustment of letter spacing and line height for any size;
  • the ability to specify different text styles for semantically different blocks, such as body text, footnotes, or heading;
  • the text will correctly change in accordance with the settings selected by the user (including large and high-contrast options).

 
ATTENTION
When using your own fonts, you still have the opportunity to change their proportions in accordance with the system settings. Your application is responsible for the correct reaction to user settings.
 
When using the built-in styles, you automatically get dynamic scaling. If you embed third-party fonts, you will need to additionally take care of the correct operation of this function. For more information about using text styles and the correct reaction of the application to the system font settings, look at Text Styles .
 
Use built-in styles whenever possible. Preset text styles are designed specifically for the Apple Watch and automatically support dynamic scaling.


 
Use one font for your application. The use of many styles spoils the visual unity of the application and creates a feeling of carelessness.
 
When choosing a system font, start from the recommended values. Use San Francisco Text for labels of 19 sizes or less. For text over 20 pins, the San Francisco Display is best.
 
 
 

Animations


Beautiful, elegant animation well complements the user experience from Apple Watch and makes the use of the device more dynamic and fun. Correct animation:
 
  • gives feedback and reports the status;
  • allows people to visualize the result of their actions.

Create pre-made animations from still images. Store your finished animations in WatchKit so you can show them to the user without unnecessary delays. Such animations at the same time will achieve high FPS and overall smoothness. Dynamically creating animations through the WatchKit extension and then loading them into the watch adds a delay before playback.
 
If you need to control playback, use the Image and Group objects. Most interface objects play the animation endlessly. Only Image and Group offer the option of soft stop and start.
 

Branding


There are many options to add a corporate identity to the application: icons, colors, unique buttons and fonts, texts. When working on graphic design, remember that each element in itself should look and work perfectly. But, besides this, all built-in or third-party elements should be well combined with each other and look like one.
 
When working with a corporate identity, try not to impose it. People use applications to perform a specific task or just for fun; they don’t like being forced to watch ads. For a better User experience, carefully remind the user of the brand with fonts, company colors and pictures.
 
Resist the temptation to use the logo in the app or preview.The space on the watch screen is too small for the logo to eat up a useful place for the content. Moreover, the logos in the application and on the website perform different functions: users usually come to the site without a clear understanding of who owns it, but they usually see the program icon before launching it.
 

User interface elements


Labels


Tags are used to display static text.
 


Tag Features:
  • static text of any size can be displayed;
  • Do not imply direct interaction with the user;
  • software update of the item is available;
  • may take several lines.

 
Use tags to show the user short messages. Tags are one of the most used elements of the application. Although they can output any amount of text, they are better suited for small volumes.
 
Tags should be well read. Use contrasting text colors and dynamic fonts to fit their size correctly. System fonts are very visual and therefore recommended for use in Apple Watch. If you choose non-standard fonts, try not to sacrifice readability for the sake of exquisite design and unusual colors.
 
Make the most of system fonts. Ready-made system styles automatically support dynamic scaling and are designed with emphasis on convenience and clarity.
 
For more detailed recommendations on working with text and dynamic scaling, see the Color and Typography section .
 

Images


 
An “image” object can display a single image or animation.

 
Object Features:
 
  • just shows a picture, does not contain information and design in itself;
  • does not involve user interaction;
  • supports programmatic start and stop animation.

 
Choose the right image size for each Apple Watch. Use the shared resource file where possible, but never stretch or compress the picture - it looks awful. Instead, make a set of images with different resolutions for the required number of watch models.
 
Create all pictures in @ 2x (High Resolution) format. Image options without Retina support are not needed.
 

Groups


 
Groups are useful when placing content in an interface and are containers for other objects. The group itself does not look at all, but you can choose a background color and a picture for it. Each group also has attributes of positions, sizes, borders, and other properties useful for marking.
 
Features of the group:
 
  • Places objects horizontally or vertically
  • содержит не менее одного UI объекта;
  • есть атрибуты для настройки границ и расстояний между элементами группы;
  • может отображать сплошной цвет или картинку в качестве фона;
  • возможна настройка радиуса скругления углов для фона и содержимого.

 
Groups are the main markup tool. But they can also be used as a visual element thanks to the support of background colors and images.
 
When creating complex markups, use nested groups. You can use the nesting of groups to place some elements vertically and others horizontally. The ability to use the fields or intervals of an external group may also be useful.
 
Choose the right background image size for different Apple Watch displays. Use the shared resource file where possible, but never stretch or compress the picture - it looks awful. Instead, make a set of images with different resolutions for the required watch models.
 

Tables


 
The table displays rows of data in one column. Use this type to display dynamically changing information.


 
Features:
 
  • supports different types of strings;
  • scrolls through;
  • allows the choice of background color or picture;
  • the user can interact with strings.

Choose your own type of content at the design stage. All string types must be preformed. When the application is running, you can choose which one to show right now.
 
Use the strings as intended. A separate line option may be required for content, title, and footnotes. In this case, do not show the title in the content line, and vice versa. Each type should display the data for which it was designed.
 
Do not mix strings with completely different contents. When displaying content, be consistent in choosing the type of string. Individual types can be used as section separators or to group strings. Working with a single string type in a table ensures that the content will scale correctly and be easy to read.
 
Limit the maximum number of lines displayed at a time. Tables from more than 20 rows are already hard to read and uncomfortable to leaf through. Show as much information as you need right now; create a separate option to load the rest.
 
Do not limit the table to groups. Tables are resized dynamically according to the number of rows. As a result, any group height restrictions are ignored.
 

Buttons


 
Buttons perform certain program actions.

 
Features:
 
  • Contain a custom background
  • The corners of the buttons are rounded to make it easier to distinguish them from other elements;
  • can be completed with a label or group object.

The button background is usually called platter. The color or image displayed in the platter can be changed while the application is running.
 
Create buttons across the entire width of the screen. It is highly advisable to use elements that occupy the entire width of the screen. If one button is not enough, then do not fit more than two pieces in a row.
 
Use buttons of the same height whenever possible. If several buttons are placed on one screen at once, set the same height for each.
 
Keep the standard angular radius. The default corner radius is 6 points.
 

Switches


 
The switch offers a choice of two mutually exclusive actions or conditions.
 
Switch Features:
 
  • acts as a binary status indicator;
  • always contains a label with an explanation.

Use the switch when the user is required to make a choice between two states - such as Yes / No or On / Off.
 

Slider


 
The slider allows you to select a specific value from a predefined range. The value is changed using tap on the pictures on both sides of the slider.


 
Features:
 
  • consists of a horizontal bar and images on the sides for changing values;
  • can display the indicator both in the form of discrete intervals, and in a continuous form;
  • always increases or decreases the value by a predetermined value;
  • does not show the digital value to the user.

Use such pictures in which the purpose of the slider is obvious. If you do not select any image, the system will simply show plus and minus.
 

Cards


 
Maps are needed to show location. This is just a static snapshot without any interaction. Clicking on a map sends the user to the Maps application.
 
Show the smallest possible area of ​​the map, which retains information content. The WatchKit extension sets boundaries before showing a map; select the minimum size area at which the points necessary for the user are still visible.
 
Do not create cards that do not fit on the screen. Choose a card size at which the user can see the entire area without scrolling, regardless of the model of Apple Watch.
 
Use annotations to highlight a point.An explanation is an icon that appears at the top of the map and is needed to mark a location or call up additional information about it. Do not show more than five explanatory pictures at a time.
 
The cards have built-in support for green, red and purple pins.


 
For clarification, you can use third-party images. WatchKit can adjust the placement of the image in accordance with the coordinates on the map. This allows you to display explanations near the point of interest or above it.


 

Date, Time, and Timers


 
Date and time objects are intended to display only time-related information.
 

Date labels


 
Features:
 
  • display time and date, together and separately;
  • can show time in various formats and zones;
  • do not require loading information through the WatchKit extension.

When you need to show the current time and date, always use Date labels.
 

Timer labels


 


Features:
 
  • Designed for direct and countdown time;
  • support different formats of a time counter;
  • do not require loading information through the WatchKit extension.

Always use the Timer label as a forward or countdown timer.

Menu


 
By tapping the Apple Watch’s Retina display, the context menu of the screen is displayed, if available. Such menus contain additional actions for the current screen and save space in the main interface.



Menu Features:
 
  • contain from one to four actions that are currently applicable;
  • actions are displayed from top to bottom and from left to right, in accordance with the order of adding;
  • nested lists and scrolling are not available in the menu;
  • can be formed both at the design stage and programmatically.

Add context menus only if there are appropriate actions. This is an optional element, and in its absence, the system will respond to a strong click with the appropriate animation.
 
Do not create actions that affect only one element or part of the interface. They should apply to the entire screen.
 
For each contextual action, assign your own icon and signature. Images for the menu should be in the same system style on a standard background. Captions are limited to two short lines of text. Both picture and signature are required.
 
You can see more detailed information on creating contextual icons in the Images section of the menu .
 

Icon and Image Design


 

Icon and Image Size


 
Each application needs a beautiful and catchy start screen icon that allows the user to uniquely identify the program. Due to the fact that applications on the watch are recognized solely by the icon, it should be made clearly distinguishable and similar to the version for iOS.
 

Icon Size


 
The start screen icons are round, table 20-1 lists the appropriate diameters in pixels and indicates the possible applications for each icon. Create all graphic resources for the @ 2x format (Xcode shows the size of the icons in points).
 
Table 20-1 Icon sizes for WatchKit app
 
Apple Watch (38mm)Apple Watch (42mm)
Notification center icon48 px55 px
Full alert icon80 px88 pix
Start screen icon80 px80 px
Brief alert icon172 px196 px

 
In addition to the WatchKit icons, the Apple Watch application on the iPhone requires separate icons. Table 20-2 lists the sizes of these icons. When creating them, use the resolution indicated in the table (Xcode shows the size of the icons in points).
 
Table 20-2 Icon Sizes for the Apple Watch App on iPhone
 
@ 2x@ 3x
Application icon58 pixels87 px

 
Create square icons of the given sizes. The system will automatically apply the round mask.
 
For all images and icons, use the PNG format. Avoid interlaced PNG; You can enable color indexing to reduce file size.
 
Choose a standard color depth for images and icons. The standard depth is 24 bits (8 bits each for red, green, and blue). Icons should be without alpha channel.
 

Home screen icon


 
The initial screen of the Apple Watch is unique, but retains familiar features. The icons here resemble the iOS version, but without the usual signatures. Given such a small size, the icons should be uniquely associated with the application. If the capabilities of the WatchKit application are similar to the “big brother” on iOS, the icon should be similar. But if the program on the watch complements iOS or controls the “older” application, then it is better to use a different icon.
 
To improve the result, contact a professional designer. An experienced graphic specialist will help with the development of the visual style of the application and all its components, including icons and pictures.
 
Work with familiar graphics that are easily recognized by users.Do not focus on the secondary and minor aspect of the element. For example, the Mail program icon is made in the form of an envelope, not a postman bag or a silhouette of a post office.
 
Strive for simplicity. In particular, when developing an icon, you should avoid too complex and detailed graphics. Select one element that would reflect the essence of the application, and imagine it as a simple, memorable figure. Add details very carefully. Too complex a picture in a small format will look messy and confusing.
 
Create an abstract symbol of the main idea of ​​the program. It is useful to interpret reality creatively - this allows you to focus the user's attention on important points.
 
Make the icon look like the iOS version of the program.Using a single style helps users associate the WatchKit app with their “older brother” on iOS.
 
For both variants of Apple Watch, create icons of suitable sizes. It’s important to make sure that the icon looks equally good on all Apple Watch models. The specific values ​​for the different screens are shown in Table 20-1.
 

Menu Images


 
The icons in the Force Touch context menu are template images where the alpha channel defines the shape. The color information there is ignored.
 
As can be seen from table 21-1, for pictures in the context menu, the size of the canvas (canvas) is larger than the content. Additional space is needed to provide the necessary distance between the content and the edges of the contextual icons.
 
Table 21-1 Canvas and content size for images in the context menu
 
CanvasContent
Apple Watch (38mm)70 px46 px
Apple Watch (42mm)80 px54 px

 
Use lines of a thickness that blends well with the design and complexity of the glyph. Do not use lines thinner than four pixels, otherwise the glyphs may become illegible. Refer to figure 21-1.
 

Figure 21-1 Glyph size for context menu
 
images Use PNG for all images and icons. Avoid interlaced PNG.


About the translator

Translation of the article was done in Alconost.

Alconost localizes applications, games and sites in 60 languages. Native translators, linguistic testing, cloud platform with API, continuous localization, project managers 24/7, any format of string resources.

We also make promotional and educational videos.- for sites selling, image-building, advertising, training, teasers, expliners, trailers for Google Play and the App Store.

Read more: https://alconost.com


Also popular now: