APPLE Watch uncovered four different experiences of interactive design

Today is still a case of watch application design. I like case study very much, so I don't mind doing the same topic for three consecutive weeks. Enter the translation below.

Wallaby is a personal finance app that allows you to choose the most appropriate credit card for your purchases at different venues to maximize your benefits or points. However, according to our understanding, in practice, many users often forget or bother to take out their mobile phone to use the function provided by Wallaby in the checkout.

We hope that the Apple Watch version of Wallaby will solve this problem to some extent. In fact, we've already built Pebbel, Android Wear, Samsung Galaxy gear and even Google Glass, so it's clear which features are more suitable for wearable devices.

In essence, the key to design for wearable equipment is situational and human-machine interaction efficiency. And some of the key features of Apple Watch, including the tiny size of the screen, the wrist, the variety of interactions, and so on, have helped us learn a lot of new things in the design process, including new design paradigms and how to address new UX design challenges.

　　Navigation

Currently, Apple Watch offers only two navigation modes: hierarchical and Page-style.

Hierarchical navigation is suitable for products with more complex functions and data. If you need to access certain features or content in a progressive way, this navigation pattern is obviously more appropriate. Page-style navigation is more suitable for products with relatively simple information model and no direct Data association between different modules.

We used page navigation for Wallaby. From the perspective of information structure, there is no strong correlation between each functional module, there is not much hierarchy of content, do not need to organize through hierarchical navigation; from an interactive point of view, under the frame of page navigation, you can switch between the different function modules through the right and left light sweep, in the "nearby" By sweeping or scrolling the crown in the module, you can view the credit cards that apply to nearby shopping places, and the efficiency of human-computer interaction is high, eliminating the need to force users to click on a tiny button precisely to access the content further, as with hierarchical navigation. Especially in the typical use scenario of Wallaby-the difference between the interactive costs of the two navigation modes is obvious when the user is standing and walking.

　　Notice

If designed properly so that apps can send users the right notification messages at the right time and place, your product will likely go from mediocrity to success-especially for watch applications.

Watch is always worn by the user on the wrist, the distance between the human machine is a step closer than the previous equipment, so you have to limit the notification mechanism to ensure that only the most important and situational information is sent and presented in as short a form as possible-otherwise there will be persistent and serious disruption to the user, So they have to completely block out the notification information from your home product.

Wallaby currently restricts notifications to important events, such as informing users that a card offers discounts today, as well as billing and yearly fee information. In the future, as watch's own hardware capabilities continue to rise, we will likely be able to get the user's location without consuming too much watch and iphone power, and then we can give immediate notice when a user enters a store or shop. Let them know which credit cards are suitable for consumption there, so that users can get the information that best fits the current situation and action goals without having to initiate a query on their own.

　　Complex tasks

Complex tasks involving too many inputs and settings are inherently not suitable for watch such a small screen size, difficult to operate equipment.

For this type of functionality, it makes more sense to operate on the iphone. To ensure seamless experience between multiple devices, we took advantage of the handoff capabilities provided by iOS.

When we need users to do more complex tasks, such as creating accounts, obtaining authorization, connecting to bank data, and so on, we will display a message telling the user that the next operation needs to be done on the iphone. When they open the iphone, the interface automatically switches to the associated process and continues the steps that were interrupted before the watch.

　　Dynamic effect

Exquisite, ideographic and appropriate dynamic effect can enhance the interactive experience, enhance the pleasure of the product. We usually use Framer to make interactive prototypes and debug various properties of the dynamic effect.

It should be noted that for watch applications, you can't rely on developers to use code to complete the dynamic of--watch in the form of a picture sequence, but you can't just throw a GIF animation into a developer's interface. As a designer, you must provide a static picture for each frame of the animation.

The most effective way is to import the animated file into after Effects or Photoshop, and then export the picture sequence. Here's a general description of how we do this in Photoshop:

1. Open GIF or import mov file in Photoshop.

2. Adjust the frame rate of the animation if necessary.

3. Choose "File–export–render Video"

4. Make the naming and other settings to ensure that the image sequence from the ordinal "1" start. When you click the Render button, Photoshop decomposes the animation by frame and saves it as a picture in the specified format.

5. You can use Tinypng or Imageoptim tools to optimize these images to ensure that the files are not very large.

Finally, help developers a favor, add @2x suffix for these files; if there are too many files, it is recommended to use a Automator type of tool to complete:

Open Automator and select Service.

Drag the file you want to rename in.

Select files & Folders and double-click Rename Finder Items, and a dialog box will appear asking if you want to add a copy of each picture to protect the original file name. You can choose not to add a copy and click "Don ' t add".

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

Finally, click on the "Run" button in the upper-right corner to finish.

　　Summary

The process of designing for Apple Watch is interesting. We do have a lot of constraints on design at the moment, but from another perspective, it also allows us to focus on the core experience, create the most basic and simplified interface and interactive processes, and design the most situational notification mechanism based on the characteristics of our products. If more complex functions are involved, consider using handoff with the iphone. Also, don't forget to improve the product's interactive experience in the right place through reasonable action.