Yalantis: iOS, Android And Web App Development Company

How We Created Animated My Day Watch App Inspired by Apple’s Activity App

Have you already jumped on the Apple Watch bandwagon? We just did and are only too excited to share our impressions from working with the new WatchOS 2 and creating designs for Apple Watch. We built an animated Watch App to improve the user experience of our own product, the My Day app. Here is the story.

Why did we create the My Day app for Apple Watch?

There once was a My Day countdown app for events for both iOS and Android platforms. It had everything its users needed to keep track of big days and jump for joy every time they looked at the screen to see how many days remained until Christmas, or their friend’s wedding, or birthday, or holiday. The only thing My Day didn’t have was a Watch App.

The My Day app offered a widget for Android that could be easily installed on the home screen of mobile devices. But on iOS, the only way for users to access the countdown timer was through opening the app. The Watch App, on the other hand, could keep iPhone owners in a good mood all day long letting them check out how many days remained until their big day right from their wrist.

What exactly does the My Day Watch App do?

Our app for Apple Watch has only two screens. The first is the main screen that displays a single significant event. The second screen contains a full list of events, from which the user can select the most important that is to be displayed on the main screen.

Since Apple Watch is intended for quick interaction between a user and the device, its main task is to provide users with essential information in a digestible format. For that purpose, Apple Watch has a unique feature called glances.

A glance is a screen that a user accesses by swiping up on the watch face. It’s meant to display frequently viewed information. In our case, this information is the time that remains until the big day.

In the My Day Watch App, the glance screen duplicates the main screen that we mentioned. We tried to make it as beautiful and user-friendly as possible, so people would love using it! Now let’s explore how we designed this screen.

Designing the glance (and main) screen

by Anna Gerasymenko

Before I tell you how I designed the glance interface for the My Day Watch App, let me explain the guidelines suggested by Apple.

The structure of the layout of the glance element includes the following components:

  • upper and lower portions which provide standard baselines for content
  • the upper-right corner which is reserved for system status indicators

grid_template_glance.png The Apple Watch guidelines offer 12 templates for the upper portion and 24 for the lower portion of the glance screens. Apple recommends that we use these templates to achieve smoother user experience.

screen390x390.jpegHowever, there are glances out there that go beyond the templates. Take, for example, Lifesum’s Apple Watch app which doesn’t strictly follow the screen structure offered by Apple.

Even though you can ignore some guidelines for UI design, you can’t really pretend that upper and lower portions don’t exist. Apple Watch developers can customize the watch however they like, but they still have to work with two zones that divide the glance screen into upper and lower portions, meaning that the components of the interface must be located in both zones.

I decided to follow Apple’s rules in the My Day Watch App design because I know how much users love visual consistency, and also because I didn’t want my design to seem out of place among other glances.

Now let’s talk a little bit about screen sizes, something pixel perfectionists would appreciate. For the Watch App’s interface design I considered the following Apple Watch sizes: 38mm (272×340 pixels) and 42mm (312×390 pixels). Apple recommends that we use specific parameters for UI elements, fonts, and spacing for each of these sizes.

Table_sizes.png

[Two-line table row layout for 42mm (left) 38mm (right)]

But what about graphic assets? As we know, both models of Apple Watch have retina displays, so graphical elements should all be in the 2x size. I could use one of the following options to work with assets for the two different screen sizes of Apple Watch:

  • create a separate set of graphics for each screen size
  • change spacing instead of changing image sizes

The way I structured the screen allowed me to choose the easier option: I adjusted the spacing for both screen sizes without losing the neatness of the UI elements in the composition.

[The difference between spacing for 42mm 38mm screens]

A great thing about designing Apple Watch UI is that you don’t need to consider padding between UI elements and screen edges. The Apple Watch bezel already has a natural visual padding which creates a sense of space around the content located on the screen. Given the small size, Apple recommends that we make full use of the screen, except, of course, the area in the upper right corner which is reserved for system status indicators. No UI elements are allowed to be placed there.

The ultimate result of the glance I created was slightly inspired by Apple’s Activity app. A chart is indeed a great way to visualize a countdown timer. It puts time on a physical surface allowing a user to get a feeling of how many days or hours are left until the most important event approaches.

To make the information on the watch more readable, I created two different states for the countdown: one displays dots and the other displays an animated radial chart.

My Day Watch app for Apple Watch

[Glance screen for the My Day Apple Watch App]
 

The dots are visible the whole time until the event, and disappear when it finally arrives. But when there is only one day left, a user will see an animated radial chart that will be getting smaller by the hour until the event is finally there! Isn’t it amazing? 

Check out the animation on Dribbble.

Apple Watch My Day Watch AppNow let’s move to the programming part and learn how Ivan Nesterenko, our iOS developer, implemented the Watch App.

How we built the animation for the My Day Watch App

by Ivan Nesterenko

The biggest challenge in creating the animation for the My Day Watch App was the necessity to animate two rings at the same time, and since I couldn’t place the elements on top of each other I did a small workaround and animated the WKInterfaceGroup’s background images.

I needed to dynamically change the outer and inner rings that display the radial chart and dots respectively while also displaying the text information on the timer.

To do so, I placed one WKInterfaceGroup into another:

To generate a sequence of images I used RadialChartImageGenerator, a simple tool that creates images for animating radial or circular progress charts for Apple Watch and WatchKit. This tool is extremely easy and convenient to use. Also, it has some sweet extra options like customizable background, line style, and more.

You can check out tips for optimizing your images for creating animations here.

After all the images were generated and added to the project for timer animation, I used the following code to implement both the main screen and the glance screen countdowns.

To create the timer:

- (void)setupTimer {

   [NSTimer scheduledTimerWithTimeInterval:1.0

                                    target:self

                                  selector:@selector(updateTimer:)

                                  userInfo:nil

                                   repeats:YES];

}

Then, to create and update breakdownInfo for displaying events:

- (void)updateTimer:(NSTimer *)timer{

   [self getTimeBreakdownInfo];

   [self displayTimer:timer];

}

- (void)getTimeBreakdownInfo {

   NSCalendar *sysCalendar = [NSCalendar currentCalendar];

   NSCalendarUnit unitFlags = NSCalendarUnitYear | NSCalendarUnitMonth | NSCalendarUnitDay | NSCalendarUnitHour | NSCalendarUnitMinute | NSCalendarUnitSecond;

   self.breakdownInfo = [sysCalendar components:unitFlags fromDate:[NSDate date]  toDate:self.eventForCountdown.date  options:0];

}

Finally, I needed to display the right inner and outer arc images under the following conditions: the outer ring shows up when there is less than a day left until the event, and remains on the screen until there is less than an hour left. Then, the animation stops and a user sees a large dot – the remaining part of the radial chart which disappears when there is less than a minute left until the event.

Here is how you can implement this in code:

- (void) displayTimer:(NSTimer *)timer {

   NSCalendarUnit biggestCalendarUnit;

   if ([self.breakdownInfo day]) {

       biggestCalendarUnit = NSCalendarUnitDay;

   } else if  ([self.breakdownInfo hour]) {

       biggestCalendarUnit = NSCalendarUnitHour;

   } else if  ([self.breakdownInfo minute]) {

       biggestCalendarUnit = NSCalendarUnitMinute;

   } else if  ([self.breakdownInfo second]) {

       biggestCalendarUnit = NSCalendarUnitSecond;

   } else {

       [self displayEventHappened];

       [timer invalidate];

       return;

   }

   [self displayArcsWithBiggestCalendarUnit:biggestCalendarUnit];

}



- (void)displayArcsWithBiggestCalendarUnit:(NSCalendarUnit) calendarUnit {

   [self displayTimerLabelWithBiggestCalendarUnit:calendarUnit];

   [self displayTimerOuterArcWithCalendarUnit:calendarUnit];

   [self displayTimerInnerArc];

}



- (void)displayTimerOuterArcWithCalendarUnit:(NSCalendarUnit) calendarUnit {

   switch (calendarUnit) {

       case NSCalendarUnitHour:

           [self.groupWithTimerOuterRingImage setBackgroundImageNamed:[NSString stringWithFormat:@"Outer_%@_img", @([self.breakdownInfo hour])]];

           break;

       case NSCalendarUnitMinute:

           [self.groupWithTimerOuterRingImage setBackgroundImageNamed: @"Outer_1_img"];

           break;

       default:

           [self.groupWithTimerOuterRingImage setBackgroundImage:[UIImage new]];

           break;

   }

}



- (void)displayTimerInnerArc {

   NSString *pictureName = [NSString stringWithFormat:@"Inner_%@_img", @([self.breakdownInfo second])];

   [self.groupWithTimerInnerRingImage setBackgroundImageNamed:pictureName];

}


That’s it :)

In this article we reviewed the basics of the Watch App design and development, but there are still plenty of things to discuss about the Apple Watch extension for the My Day app.

Stay tuned for the next articles to learn more about communication between Apple Watch and iPhone apps, notifications, and layout animations!   

Tech

Customizable Constructor for Designers of Android Wear

Design

UIDynamics, UIKit or OpenGL? 3 Types of iOS Animations for the Star Wars

Design

Our First Look at the Floid Prototyping Tool

See what else we can do

Check out our knowledge and capabilities

Let's talk code