Four completely different experiences in Apple Watch interaction design revealed

Today is still a case of Watch app design. I love case studies so I don't mind doing the same topic three weeks in a row. Enter the translation below.

Wallaby is a personal finance app that can help you choose the most suitable credit card for payment according to different places when you shop to maximize discounts or points. However, according to our understanding, in reality, many users often forget or are too lazy to take out their mobile phones to use the functions provided by Wallaby when checking out.

We hope that the Apple Watch version of Wallaby can solve this problem to some extent. In fact, before this, we have already created versions for Pebbel, Android Wear, Samsung Galaxy Gear and even Google Glass, so we have a clear idea of ​​which functions are more suitable for wearable devices.

Essentially, designing for wearables is all about context and the efficiency of human-machine interaction. Some important features of Apple Watch, including its ultra-small screen size, always being on the wrist, and various interaction methods, have enabled us to learn a lot of new things in the design process, including new design paradigms and how to solve new UX design challenges.

navigation

Currently, Apple Watch only provides two navigation modes: hierarchical and page-based.

Hierarchical navigation is suitable for products with more complex functions and data. If you need to access certain functions or content in a progressive manner, this navigation mode is obviously the most suitable. Page-based navigation is more suitable for products with relatively simple information models and no direct data association between different modules.

We used page-based navigation for Wallaby. From the perspective of information structure, each functional module is not strongly related to each other, nor is there too much hierarchical content, so it does not need to be organized through hierarchical navigation. From the perspective of interaction, within the framework of page navigation, you can switch between different functional modules by swiping left and right. In the "Nearby" module, you can swipe up and down or scroll the crown to view credit cards applicable to nearby shopping places. The human-computer interaction efficiency is very high, and there is no need to force users to accurately click a tiny button to further access content as in hierarchical navigation. Especially in the typical usage scenarios of Wallaby – when the user is standing and walking – the difference in interaction cost between the two navigation modes is still very obvious.

notify

If designed properly, your app can deliver the right notifications to users at the right time and place, and your product has the potential to go from mediocre to successful — especially for Watch apps.

The Watch is always worn on the user's wrist, and the distance between people and machines is closer than previous devices, so you must limit the notification mechanism to ensure that only the most important and contextual information is sent, and it must be presented in the shortest possible form - otherwise it will cause continuous and serious interference to users, forcing them to completely block notification information from your products.

Wallaby currently limits notifications to important events, such as informing users that a certain card is offering a discount today, as well as bill and annual fee information. In the future, as the hardware capabilities of the Watch continue to improve, we will be able to accurately obtain the user's location without consuming too much power on the Watch and iPhone. At that time, we can send instant notifications when the user enters a store or mall, letting them know which credit cards are suitable for consumption there, so that users can obtain the most suitable information for the current situation and action goals without having to initiate queries on their own.

Complex tasks

Complex tasks that involve too many inputs and settings are inherently not suitable for a device like the Watch, which has an extremely small screen and is difficult to operate.

For this type of function, it makes more sense to operate on the iPhone. To ensure a seamless experience across multiple devices, we leveraged the Handoff feature provided by iOS.

When we need users to complete more complex tasks, such as creating an account, obtaining authorization, connecting to bank data, etc., we will display a message telling users that the next operation needs to be performed on the iPhone. When they turn on their iPhone, the interface automatically switches to the relevant process and continues the steps that were interrupted on the Watch.

Animation

Exquisite and expressive motion effects can enhance the interactive experience and increase the pleasure of the product. We usually use Framer to create interactive prototypes and debug various properties of animations.

It’s important to note that when creating animations for Watch apps, you can’t rely on developers to complete them through code as before - the animations in Watch are built through image sequences, but you also can’t throw GIF animations to developers to put into the interface. As a designer, you must provide a static image for each frame of the animation.

The most efficient way is to import the animation file into After Effects or Photoshop and then export the image sequence. Here is a brief description of how we do it in Photoshop:

1. Open the GIF or import the MOV file in Photoshop.

2. If necessary, adjust the frame rate of the animation.

3. Select “File – Export – Render Video”

4. Make settings such as naming to ensure that the image sequence starts with the ordinal number "1". After clicking the Render button, Photoshop will decompose the animation frame by frame and save it as an image in the specified format.

5. You can use tools such as TinyPNG or ImageOptim to optimize these images to ensure that the file size is not too large.

Finally, do the developers a favor and add @2x suffix to these files; if there are too many files, it is recommended to use a tool such as Automator to complete it:

Open Automator and select “Service”.

Drag in the files you want to rename.

Select "Files & Folders", double-click "Rename Finder Items", and a dialog box will appear asking you whether to add a copy of each picture to protect the original file naming method. You can choose not to add a copy by clicking "Don't Add".

Select "Add Text" in the drop-down list, fill in "@2x", and select "after name" as the insertion position.

Finally, click the “Run” button in the upper right corner and you’re done.

summary

Designing for the Apple Watch is a lot of fun. At present, we are indeed subject to many constraints in design, but from another perspective, this also requires us to focus on the core experience, create the most basic and simplified interface and interaction process, and design the most contextual notification mechanism based on the characteristics of our own products. If it involves more complex functions, you should consider using Handoff with iPhone to complete it. In addition, don’t forget to use reasonable motion effects in appropriate places to enhance the product’s interactive experience.