Posted by on Nov 26, 2014 in iOS, Mobile | No Comments

apple-watch-6_1

I’ve been really interested in Apple’s Watch since day one, eager to find an opportunity to design a product for this tiny screen. I came across Apples specific HCI documentation for its upcoming and read it a couple of times. I thought that it would be a good idea to list every element and keyword we’d be using whenever designing for this device. This will also help designer acquire the knowledge of what it is you can do with the watch. Here are the most important ones.

Glances

Glances are a way of taking a quick view of information from an app. They should be contextual information, based in the time, situation and moment in which it’s viewed. They can be part of a collection with other apps’ glances and are template based. The content is will not be scrollable and its read-only, no interaction with the content is allowed other than accessing the app directly. However, the app will know that the tap on the screen occurred on a specific app’s content so that that app is opened and can display a contextualized screen. Glances should not be a quick-access to your app, it should provide useful data.

image: ../Art/glances_2x.png

Force Touch

The action of tapping with greater force on the surface of the Watch.

Notification Short-Look

The device’s accelerometers identify the act of lifting your wrist and looking at your watch. The Short-Look is the action of lifting your arm and viewing the watch screen for a short period of time. This might be triggered by a notification. In that case, simple information regarding the notification will be displayed on screen.

image: ../Art/notification_short_look_shot_2x.png

Notification Long-Look

The device’s accelerometers identify the act of lifting your wrist and looking at your watch. The Long-Look is the action of lifting your arm and viewing the watch screen for a long period of time. As you view your screen, the device shows the Short-Look version of a notification. When the stance is maintained, the device identifies your curiosity and turns into Long-Look mode. This allows the app to show a more detailed view with which the user can actually interact. The Long-Look mode can have up to four actions plus a system-provided Dismiss button.

image: ../Art/notification_long_look_shot_2x.png

Notification Sash

Long-look notification header which contains the name of the app that launched the notification. When the content is scrollable, it will always underlap the sash.

image: ../Art/notification_long_content.png

 

Modal Sheets

These are screens that appear on top of the running app and force the user to interact with it in order to continue. They can be single-pane or multi-page. Examples may include confirmation pages that show an image (single-pane) or viewing an image carrousel (multi-page)

image: ../Art/modal_interfaces_2x.png

 

San Francisco Text

San Francisco Text if the recommended font for text that is 19 points or smaller. (Also part of the OSX Yosemite UI)

SF Text

San Francisco Display

San Francisco Display if the recommended font for text that is 20 points or larger. (Also part of the OSX Yosemite UI)

SF Display

Labels

These are static text elements. There is a series of system, built-in styles for labels you can use.

Captura de pantalla 2014-11-26 a las 17.19.23

Groups

Groups are probably one of the biggest and more complex element in the interface design. They are constructs that contain other elements but have design properties of their own even though they have no default appearance such as background color or image, margins and spacing or even corner radii for its content and background.

Groups are primarily tools for implementing designs in Xcode. However, the fact that a group can have its own background color or image means that you can use groups as visual elements too.

Tables

A table presents rows of data in a single column. They should be used to present content that can change dynamically.

image: ../Art/table_examples_2x.png

Buttons

A button performs an app-specific action. When grouped together, buttons should all have same height. By default, they have rounded edges to differentiate them from other elements

image: ../Art/buttons_shot_2x.png

 Switches

A switch presents two mutually exclusive choices or states. They always have a label accompanying them.

image: ../Art/switches_shot_2x.png

Sliders

A slider lets users make adjustments to a value throughout a range or scale.Values are changed by tapping the images at either end of the slider bar. Each slider consists of a horizontal track with images at either end for manipulating the slider value and can display  value as a set of steps or as a continuous bar.

image: ../Art/sliders_shot_2x.png

Maps

Maps are maps. It is very important to always take into account the size of the screen when presenting information. You can use system provided pointers: green pins for start locations, red pins for destinations and purple pins for points of interest. However, you can customize pins and change them for your own images.

Captura de pantalla 2014-11-26 a las 17.32.15

Date and Timers

Date will obviously display dates and timers can be used to display time information in different ways.

image: ../Art/timer_labels_2x.png

Menus

Menus are displayed after a Force Touch is detected and will always apply to the context of the current screen. They are full-screen and can display between 1 and 4 actions, each of which must be composed of an icon and a label.

image: ../Art/context_menu_2x.png

 

Let me know your thoughts on these constructs and give me a shout if you have a Watch project you need designed!

Leave a Reply