net - UK (2020-03)

(Antfer) #1

Wearable apps


Here are some useful resources and case studies that
designers and developers of wearable apps can use to get a
better understanding of how to make their app more intuitive and
useful to the end user.

Apple Watch affordance decomposition study
https://humanfactors.com/downloads/whitepapers/apple_watch_
case_study.pdf
In this case study by Human Factors International, a technique
called affordance decomposition is used to help predict how the
wearable product or service fits into people’s lives, in addition
to identifying opportunities for innovation and obstacles to its
widespread success.

Design principles for wearables
https://fuzzymath.com/wp-content/uploads/2015/08/Fuzzy-Math-
UX-Design-Principles-for-Wearables.pdf
In this case study, the main focus was on designing the best three
groups of wearables: activity, awareness and sleep patterns. It
includes targeted recommendations and insights into designing
the physical hardware, creating desirable functionality and
ensuring the entire device is pleasantly easy to use.

UNDERSTAND DESIGNING


FOR WEARABLES


designing a sample application on Adobe XD. For the RESOURCES
purpose of this tutorial, we are just going to look at
a few screens of the app instead of all the screens in
the flow. We’re going to create an Apple Watch app
for an Uber-Eats-style service in this example.
Any kind of app design needs to follow an approach
that is well focused. Any wearable interaction is
measured in seconds because users do not spend a
lot of time on the wearables. Here are some of the
themes we can look at when considering the various
design principles.


LAYOUT GUIDELINES
MINIMAL CONTENT
You have to avoid displaying a lot of content on the
screen at once. The users want to access the most
useful information. Since there is not a lot of real
estate on the watch screen, you don’t want to clutter
the interface with details that are secondary or not
needed. This kind of information can always be
presented by scrolling or via an additional click.
For a food delivery app, let’s create a page where we


have the favourite restaurants stored in the form of
cards. Since this is a page with a lot of content we
should try to show just two cards at once to improve
the visibility.


MAINTAIN VISUAL HIERARCHY
Always design in such a way that a visual hierarchy
is maintained. This helps the users find the
information they are looking for easily. For instance,
you can make use of negative space or separator
lines to ensure that the elements related to the
same group are presented intuitively. This aids the
glanceability and readability of your app. To maintain
a visual hierarchy in the contact page of the
restaurants, spacing is maintained between the two
icons on the page and also negative space is used.


SPACE IS VALUABLE
As previously discussed, not a lot of space is available
on wearables. Make use of all the width on the


“Applications can now


take advantage of new APIs


in order to connect your


JavaScript apps to the Apple


Watch seamlessly”


Top left Showing
just two cards at
once improves the
visibility of the app
Top right To
ensure a visual
hierarchy in the
contact page of
the restaurants,
spacing is
maintained
between the two
icons on the page
Bottom left This
shows an example
of a menu where
you have the four
most important
items accessed by
the user
Bottom right This
notifications page
demonstrates how
the left alignment
of content makes it
easy to read
Free download pdf