Clock App - Digital Style

This wiki page describes the new clock Digital style designs and related work items. The clock app currently displays the clock, alarm, timer and stopwatch in analogue style. However there are users who prefer the digital mode. This is a huge task since there are lot of UX and UI work that needs to be planned before implementation can be begin. Hence this wiki page will try to summarise all the work done to implement this new mode.

The first and foremost work item is design. The clock app requires designs for the digital mode. Community designers can use this opportunity to showcase their work and take part in shaping the clock app.

Common Design

Every tab in the clock app should follow the same digital style such as the font, label size, positioning etc. Maintaining uniformity will allow for a nice transition from one tab to the other. This behaviour is followed by the analogue style and hence is a must for the digital style as well.

Here is one design of the Android 4.4 Clock App digital style. This design is clear, bold and intuitive. This could be a nice starting point for the Ubuntu Touch Clock app as well. If we do not receive community designs, then this is the one we will be going forth with.

Another thing I would like to add here is that in the desktop mode, while hovering over the label should change its color to indicate that it can be clicked.

Clock Tab

In the analogue mode, the clock provides a basic UX action where the user is able to press the center of the clock to display the sunrise/sunset times. Pressing the center again results in the sunrise/sunset times being hidden. In the digital mode, this interaction can behave identical to its analogue counterpart.

The bug report tracking this work item can be found here.

Stopwatch Tab

The stopwatch digital mode UX can also follow a similar pattern to its analogue style. By keeping the basic interactions similar, we ensure that the user is able to switch between styles without having to relearn his usage. Similar to the analogue style, pressing on the stopwatch label will either start/stop the stopwatch depending on its current action. So if a stopwatch is already running, pressing the label will stop it and vice versa.

The bug report tracking this work item can be found here.

Timer Tab

The timer digital mode will work quite similarly to the stopwatch tab described above. Pressing the timer label will either start/stop it depending its current action.

Alarm Tab

The alarm digital style is rather simple. It displays the timer in 12/24 hour format as chosen by the user in the digital style. As mentioned above, the font should be similar to the one used in the other tabs to maintain consistency.

Digital Input

This is where things can get a little tricky. Up until now, planning the digital mode was in essence just showing the clock as a label instead of an analogue clock. In the analogue mode, user input could be gathered via the analogue clock (in the add alarm page and the timer page). However in the digital mode, how can this be done?

I started evaluating current clock apps on other platforms to see how they took user input in digital mode. Here are some design examples below. From the left, Android 4.4, Apple ios 7, Android 4.3.

As can be seen, apple (center image) uses a time picker to allow for choosing the alarm time. However one of the biggest disadvantage of this method is that the user needs to scroll a lot to choose the precise minute. This should be avoided if possible.

Android 4.4 (left most image), this uses a analogue style to input the alarm time. This is currently used in the analogue style for setting alarms. Hence this is not something that suits the digital mode.

The last design is of the Android 4.3 clock app (right most image), where it displays a virtual keypad where the user can quickly just type in the time. This suits the digital style and allow quick setting of the alarm or timer. In the desktop, the virtual keyboard can be programmed to receive input from the keyboard. Is this the design that the ubuntu clock app should adopt?