{"id":819,"date":"2014-12-09T10:00:00","date_gmt":"2014-12-09T18:00:00","guid":{"rendered":"http:\/\/blog.thinkapps.com\/?p=819"},"modified":"2015-03-31T10:08:32","modified_gmt":"2015-03-31T18:08:32","slug":"apple-watch-apps-important-design-principles","status":"publish","type":"post","link":"https:\/\/thinkapps.com\/blog\/design\/apple-watch-apps-important-design-principles\/","title":{"rendered":"5 Important Design Principles for Apple Watch Apps"},"content":{"rendered":"

As the world anticipates the launch of the Apple Watch<\/a> line of wearables in 2015, developers have begun\u00a0familiarizing themselves with the WatchKit SDK<\/a> and XCode WatchKit Simulator<\/a>.<\/p>\n

While the engineers are keeping busy on the programming aspects of WatchKit, designers should start focusing on the important UX facets of designing Watch apps. For designers, Apple has provided\u00a0the\u00a0Apple Watch Human User Interface Guide<\/a>, which should serve as the foundation for conceptualizing and prototyping.<\/p>\n

(For more great tips on Apple Watch design and development<\/a>, check out our previous articles in which\u00a0top designers imagined what your favorite smartphone apps will look like on Apple Watch<\/a>\u00a0and we share six potential Apple Watch apps that will make your life easier<\/a>.)<\/p>\n

If you’re looking for someone to design and develop your Apple Watch app, find out more here<\/a>.<\/p>\n

\"Apple<\/a><\/p>\n

Quick Primer on the Apple Watch<\/h3>\n

As you might already know, Apple\u2019s prized wearable will come in two screen sizes, 38 mm and 42 mm. The screen is touch-sensitive, and while gestures are not supported, pressure-sensitive touch is included to distinguish between tap and hold. There is also a digital crown on the side of the watch, which can act as a way of scrolling (without obstructing the screen with one\u2019s finger), zoom (such as with maps) and pressing a button (which acts like the home button on the iPhone<\/a>).<\/p>\n

In this article we will go through five important design principles for Apple Watch, touching on both UX and UI, to help guide designers in producing optimally-designed wearable apps.<\/p>\n

1. Design for the Apple Watch Real-Estate<\/h2>\n

Apple has provided a set of Photoshop (PSD) resources<\/a> to help designers prototype user interfaces, which should serve as a good starting point for conceptualizing and arranging UI elements. (Please note that you will need an Apple Developer account<\/a> in order to access this resource.)<\/p>\n

When you begin to design your screens, the first principle that’s important to remember is that you don\u2019t have the affordance of the screen size you would have on the iPhone, which forces you to focus your purpose of the screens more carefully, emphasizing only the core functionality and message you wish to deliver. The good news is that you can\u00a0use the entire space of the screen, edge-to-edge, without any need for margins, as the wearable\u2019s bezel<\/a> adds the necessary visual padding.<\/p>\n

UI Controls<\/h3>\n

When using controls, such as buttons or switches, look to limit the number of elements stacked horizontally (side-by-side) to three at the most, in order to avoid hampering the tap-target of each element.<\/p>\n

Apple also advocates using icons wherever possible, instead of text, to once again maximize screen real-estate. Less-frequently used buttons should be placed in the contextual menu, instead of cluttering the active screen interface.<\/p>\n

Circular Buttons and Icons<\/h3>\n

A recent article by HowToDesign<\/a> discussed the merits of the use of radial or circular icons, as opposed to square ones. As the author\u00a0explained, circular icons\u00a0have the advantage of having the \u201cability to have more points adjacent to your finger at the same distance when touching the screen. With squares, the path to the next item would be variable and there would be a smaller limit to the number of items you could fit around a touch point.\u201d<\/p>\n

Additionally, the author suggested that circular elements are more\u00a0scalable and can be variably sized to demonstrate prominence relative to other adjacent circular buttons or icons, which is especially important on smaller-screen devices.<\/p>\n

Different Image Sizes<\/h3>\n

With the past few versions of the iPhone, iOS developers have become\u00a0accustomed to catering to different screen sizes and resolutions when it comes to images, and it\u2019s no different with the Apple Watch. If an image does not scale well, ensure that you provide separate images for each of the two screen sizes. Fortunately, since both screens will be\u00a0retina, you will only need to provide your images as @2x<\/a> when bundling.<\/p>\n

\"Apple<\/a><\/p>\n

2. Design Your Icons to Represent Your Brand<\/h2>\n

Whereas iPhone app icons are rounded rectangles, Apple Watch home-screen icons will be\u00a0circular and will vary by size depending on where they are positioned relative to the center of the screen, as shown\u00a0above.<\/p>\n

Icon Size and Shape<\/h3>\n

When designing your icons, you will design them as square images and then the system itself masks the icons to create the circular shape automatically. The chart below, taken from the Apple Watch Human User Interface Guide<\/a>, is a good reference regarding the sizes of the various types of icons\u00a0for\u00a0both versions of the Watch.<\/p>\n

\"Apple<\/a><\/p>\n

Visually Recognizable<\/h3>\n

You should also construct your icons to be visually recognizable and reflective of your brand, which in almost all cases will\u00a0be an exact visual replica of your iPhone app icon. Maintaining as close a design as possible to your iOS version helps draw mental association with the app on both platforms.<\/p>\n

As\u00a0head of Apple design Jonathan Ive\u00a0once said<\/a>, \u201cSimplicity is not the absence of clutter, that\u2019s a consequence of simplicity.” This is the notion you should take when contemplating cramming in lots of images and icons, when a more elegant, well-conceptualized, and abstract metaphor could deliver clarity to your users.<\/p>\n

3. Design with Good Typography and Color<\/h2>\n

iOS 7<\/a> heralded the start of the Helvetica Neue<\/a> era for Apple, marked by the transition to the flat design and discarding of the aging\u00a0skeuomorphic<\/a>\u00a0designs. Now Apple is transitioning once again to focus on creating simple, crisp interfaces built on the foundation of typography that is thin and purposeful. For Apple\u2019s wearable, they have opted for the aptly-named San Francisco font<\/a>, which is a\u00a0new sans serif font.<\/p>\n

Dynamic Font Type<\/h3>\n

The selection of the system font used in Apple Watch is purposefully designed for the best legibility, based on appropriately-condensed letter spaces to take up the least amount of horizontal space. Glyphs<\/a> in the font have larger apertures<\/a>, making it easy to recognize the characters, even while glancing.<\/p>\n

More notably, as the font size increases, the font type changes dynamically to maintain its legibility, which is called Dynamic Typing. This is a great gift that developers get for free when they opt for the system font over custom font, as it senses and adjusts the fonts, line spacing and letter spacing accordingly. You simply specify whether the text is body, footnote, or headline, and the system knows how to select the appropriate text-size settings.<\/p>\n

Being a good developer, supporting dynamic fonts means supporting accessibility settings. If you opt for custom font, you will be responsible for managing the font sizes according to accessibility changes, whereas using the system font allows you to get Dynamic Type Font support out of the box.<\/p>\n

Finally, always aim to use only one font throughout your app for consistency. Mixing fonts will break the UX best practices Apple is championing. You should instead take advantage of using various shades of white to emphasize various text elements, and use your primary text color to further distinguish a prominent label (more on this below).<\/p>\n

\"Apple<\/a><\/p>\n

Contrasting Colors<\/h3>\n

The Apple Watch Human User Interface Guide promotes a strong distinction in contrast between text and background, while avoiding bright colors. You should make use of one primary (key) color that symbolizes your app\u2019s branding, which would feature prominently in distinct labeling, such as for titles or to discern important\u00a0information.<\/p>\n

Apple highly suggests you conform to having a black background for the app, which will not only allow for seamless visual blending between the background and edge-bezel of the device, but will also maximize the legibility of text.<\/p>\n

4. Design with Contextuality and Unobtrusiveness<\/h2>\n

Appropriate Levels of Hierarchy<\/h3>\n

The hierarchical\/paging paradigm on the Apple Watch is akin to its iOS sibling, the UINavigationController<\/a>, a master detail design model, where you essentially present a view, subsequently drilling down the hierarchy as your get finer detail.<\/p>\n

\"image_6\"<\/a><\/p>\n

A key difference between the mobile and wearable platforms, when it comes to master detail, is that on the latter you can very easily get lost when you have four or five screens to drill down into. So you should not enforce the same level of detail you have on your iOS version on the Apple Watch.<\/p>\n

Focus is key \u2014 essential information that necessitates quick glances on the wrist is all that’s\u00a0needed. Any additional information should be transferred through Handoff<\/a> to the larger-screen iPhone.<\/p>\n

Predictive Intelligence<\/h3>\n

Continuing from being focused on essential and contextual content, what you should really aim for is predictive intelligence, based on knowledge. The nature of wearables, with their smaller screen sizes of 38 mm or 44 mm, is that you don\u2019t have the luxury to represent the same information you would have on your iPhone.<\/p>\n

The aim is to filter your presentation to only the information the user anticipates, while either providing a set of action buttons to get a quick and concise response, or transferring more complicated sequences via Handoff from the watch back to the iPhone.<\/p>\n

You do this based on various scenarios:<\/p>\n

1. Proximity-awareness: Presenting notifications or glances based on the user\u2019s current proximity to a point of interest. Foursquare<\/a>, for instance, would remember locations you have been to previously or significant landmarks, and notify you with an unobtrusive reminder.<\/p>\n

\"Foursquare<\/a><\/p>\n

2. Behavioral-awareness: Based on the specific interaction, you should provide the ability to rapidly respond using quick-action responses, such as like, reply, mute, or remind me later.<\/p>\n

Apple demonstrated contextual responses in its iMessage app<\/a> by providing anticipative responses based on specific message keywords. For example, if someone messages “Do you want iced or regular?,” it would prompt the user with two buttons, one for iced and another for regular.<\/p>\n

\"Apple<\/a><\/p>\n

Thinking in a more contextually-adjustable mindset is the goal of predictive intelligence. If your device could operate based on your routine, such as when you head to work and how long it takes based on traffic conditions daily, building and mining data on your habits, it would be able to prompt you when to leave with more accuracy and contextuality.<\/p>\n

Granted, this is quite a complicated feat to accomplish, but thinking in this way, even with smaller predicables, makes for a better UX. This should be the goal, and Apple hinted at that when they introduced iBeacon<\/a>. This is the future: behavioral mining is predictive analysis.<\/p>\n

5. Design for Glances and Notifications<\/h2>\n

Glances Can Deep-Link<\/h3>\n

Glances<\/a> aren\u2019t mandatory for every Apple Watch app, you can rely on just passing notifications to the Watch. But if you do decide to use glances, make sure you use them correctly.<\/p>\n

A glance occurs when the user activates the watch by tilting his wrist. When he taps on the glance icon, it should be contextually aware and present relevant and informative information, unambiguously, allowing the user to decide whether to tap and continue the interaction on the iPhone, or ignore.<\/p>\n

\"Apple<\/a><\/p>\n

Speaking of Handoff, utilizing Continuity<\/a> allows your app to be informed as to what was displayed on the wearable and subsequently present on the iPhone, when tapped, as a corresponding and related screen.<\/p>\n

This is called deep-linking<\/a>, and when you receive notifications on your iPhone, such as a message from someone, you should expect the app to open up and present you with that specific conversation.<\/p>\n

Notification Content and Frequency<\/h3>\n

Notifications on Apple\u2019s wearable<\/a> facilitates providing lightweight and unobtrusive messages through two types of notifications: short-look and long-look.<\/p>\n

\"Apple<\/a><\/p>\n

Short-look notifications provide discreet, minimal content to the user through local or remote notifications without disclosing private information (i.e a text message would show the person a new message icon, but not the actual message) and are visible when the user elevates his or her wrist.<\/p>\n

Long-look notifications occur\u00a0when the user either taps the short-look notification or the wrist remains elevated, and a more informative notification appears along with more functionality, such as the ability to respond with buttons.<\/p>\n

When implementing notifications, you need to be mindful of the frequency, which may turn what should have been subtle and discreet into something\u00a0obtrusive and irritating. Notifications embody convenient glances with minimal information, enough to hint to the user whether to further interact with the app or defer based on its importance in the moment.<\/p>\n

Notifications should allow you to distinguish infrequent messages that are important from those that aren\u2019t, while ensuring you don\u2019t “bug the user.” If you are unable to filter notifications, such as if a user is receiving a message through a conversation, you should provide the ability to mute the conversation for a specific period of time, similar to how Facebook Messenger<\/a> does on iOS.<\/p>\n

\"Facebook<\/a><\/p>\n

Long-Look Notification Design<\/h3>\n

When designing your custom long-look notifications, you can have up to four action buttons, which appear automatically in most cases. The dismiss button also appears, which means you don’t need to specifically create your own.<\/p>\n

For all rectangular buttons (as opposed to circular), you should aim to have them span the entire width of the screen and give buttons the same UX treatment you would generally provide on other platforms, including providing the same font style, consistent button heights, and the system-standard 6-point rounded corners.<\/p>\n

Notification Layout<\/h3>\n

When configuring the notification screen interface, being conscious of the layout, and what you can and can\u2019t do, is important. Firstly, you need to ensure any title strings you have fit gracefully in the label and on the screen symmetrically. So brevity is pivotal.<\/p>\n

The notification interface allows you to set an image background, some labels, the app icon, and sash<\/a>. You have the option, according to the Apple Watch Human User Interface Guide, to have your content above or below the sash, but the contemporary design solution is to always try and have it overlap underneath, similar to how iOS 8<\/a> has content overlapping underneath their navigation bars.<\/p>\n

\"Apple<\/a><\/p>\n

Modal Design<\/h3>\n

A modal sheet is a vehicle for delivering information to the user modally, while preventing or interrupting the user from her previous other interactions, thus bringing immediate attention. That is, it interrupts the normal flow and prompts the user for an interaction.<\/p>\n

\"Apple<\/a><\/p>\n

You should minimize the frequency of modals as they can certainly be disruptive. But it’s important to recognize that\u00a0they are useful in certain scenarios, such as confirming or prompting a user about something that\u2019s imminent and important\u00a0and requires\u00a0his or her attention.<\/p>\n

What constitutes important is at your discretion, of course, but the consensus is, if something needs to explicitly be confirmed or abandoned, and in its absence the app would be in an ambiguous state, then the use of a modal is probably the right call.<\/p>\n

Force-Touch Menu Design<\/h3>\n

Contextual menus appear when you force touch the screen, presenting a menu that is relevant to the part of the screen and content you are viewing. It is meant to be space-sensitive, making the most use of the rectangle and permitting you to display anywhere from one to four menu items. Not all screens should have menus, so they should be used sparingly and purposefully.<\/p>\n

Menus also have a standard text label below the icon, which cannot be styled differently. So you need to adhere to the standard system font size and type for menu labels and should encourage font-type continuity.<\/p>\n

Conclusion<\/h2>\n

While the Apple Watch Human User Interface Guide will be the foundation of your designing toolbox, this article provided you with five important design principles for Apple Watch. From working with notifications (including\u00a0design and\u00a0frequency calibration), to focusing on contextuality and even predictive analysis, you have five important areas to consider when prototyping your interfaces over the next few months.
\n<\/p>\n

\n
\n