PROJECTS
Wearable apps
OTHER PLATFORMS
RESOURCESIf you are eager to try your wearable designs on platforms
other than watchOS, here are a couple of resources to help
get you going.Wear OS Design Guidelines
https://designguidelines.withgoogle.com/wearos/
These are the design guidelines put forward by Google for Wear
OS, which was formerly called Android Wear. It is a lightweight
platform that connects to the wearer’s body and provides the
correct information at the correct time. It has various resources
such as components, notification and navigation patterns, colour
and style patterns.Adobe XD UI Design Kit for Apple Watch OS
https://www.adobe.com/products/xd/ui-design-kits.html
This is one of the resources from Adobe XD, which is basically
a template for a smartwatch app offering users a choice of 60
screens, more than 20 components, 30 icons and 6 prototype
flows that are all fully customisable and Apple compliant. These
can be used to easily design new apps from the skeletons provided
in the template.screen and design your app in a way so the content
goes from one edge to the other. Do not worry about
the padding because the wearables provide natural
padding around the content of the app. You must also
make sure to reduce the spacing between internal
elements. For example, on the Order Again page on
the app, you may want to use cards representing the
items that are ordered previously: make sure the
cards have been designed in such a way that they
span across the interface of the watch so absolutely
no space is wasted.
Menus must be used to replace buttons whenever
possible. They are more effective in providing a
dedicated place for the actions. Make sure you don’t
have more than four actions in a menu. This will also
free up space in the interface by getting rid of buttons.
Always align your elements to the left of the
wearable interface. According to usability principles,
left-aligned text is much easier for reading. Also,
when there are lots of vertical stacks of buttons with
text labels, left aligning makes it easier to scan the
information quickly.NAVIGATION GUIDELINES
Just like any interface, wearable apps have more than
one screen. There are two navigation patterns you can
use when designing one: page-based and hierarchical.
You can mix both, depending on the need.
The hierarchical navigation is well suited for
interfaces or a section of the app where you need
to present a list of options that can be scrolled
and clicked. One such example is Settings, which
is present in almost any application. When the
user clicks on any item in the list, a new screen
is presented that contains more details about
the particular item. Also, this kind of navigation
makes it easier to navigate swiftly using the swipe
interaction or the Digital Crown.
Page-based navigation can be used when there is
a smaller list of pages to be presented. This makes it
simple for the user to swipe through these pages and
view the content. The dots at the bottom of the page
indicate its place in the set of pages.
One important thing to remember when designing
Top hierarchical and page-based respectivelyExamples of both of the common navigational patterns seen: a wearable app is that it should always complement“Phone apps tend to
include a number of
pages but wearable
apps must be designed
for quick interactions”