App patterns applied: clock key journeys

Canonical

on 22 March 2013

Moving forward with the design of the core apps, we’ve been working on the interaction details of the clock for a while now, building on these concepts introduced a few weeks ago.

As with the calendar and calculator, we have outlined typical tasks a user wants to accomplish. We call them key journeys.

We have grouped the key journeys of the Clock app around its four tabs; Clock, Alarm, Timer and Stopwatch.

Clock : what time is it in New York?

 

  • Tap on “London” or swipe/scroll up to reveal a list of cities underneath
  • Tap on “New York” on the list
  • View scrolls back up, and shows the time in New York

Clock : adding a new city

 

  • Swipe up from the bottom edge to reveal toolbar
  • Tap on “Edit”
  • Tap on “Add city”
  • Select a city from the alphabetical list, or tap on the search field
  • Type in the name of the city, and select one from the results
  • New city is added to the list, you can rearrange the list by dragging list items around
  • When ready, tap on “Done” to return to the main view

Clock Easter egg: sunrise and sunset times

Here’s a little trick we’d like to add to the clock face: By tapping on it, you get the sunrise and sunset times for that location. To revert back to normal clock face, just tap on it again. Easy!

Alarm : set an alarm

 

  • To change the alarm time tap on the clock face
  • Clock face pops out larger, dial become interactive and a “Done” button appears in the middle
  • Turn the hour and minute dials to set the time. Counter above shows the set time. The label underneath dynamically shows the time to this alarm.
  • To make the alarm repeat, tap on “Repeat“ and a multiple selection list appears. To close, tap on “Repeat” again.
  • Similarly, you can tap on “Tone” to set the alarm tone
  • When you’re happy with your alarm, tap on “Done” in the middle of the clockface
  • Clockface pops back into its default size and alarm is toggled on

Alarm : toggle alarms on and off

 

  • Tap on ”Time to next alarm” or swipe up to see the list of alarms
  • As the panel containing the list slides in, the view with the clockface compresses to show just the digital clock and the “Time to next” button
  • In the list you can toggle alarms on and off
  • Return to the main view by swiping down, or tapping on the top part of the screen
  • Main view displays the next alarm, if no other alarm is selected

Alarm : create a new alarm

 

  • Swipe up from the bottom edge to reveal toolbar
  • Tap on “add alarm”
  • Clockface pops out to an edit mode.
  • Turn the dials to set the alarm time
  • Use options below to set Repeat, Tone and Vibrate
  • Once happy, tap on “Done” in the middle of the clock face.

Timer : set timer manually

 

  • Turn the dial clockwise to the time you want (alternatively, tap on plus and minus  to add or subtract a minute)
  • Tap “Start” and wait
  • When the timer hits zero the alarm sounds off
  • Acknowledge by tapping on “Done”

Timer : set timer from a preset

 

  • Tap on “Presets” or swipe/scroll up to reveal a list of presets
  • Tap on a preset, for example “Soft boiled egg”
  • Timer changes to the time set by the preset
  • Press “Start” to begin countdown

Stopwatch : simple stopwatch start, stop and reset

 

  • Tap on “Start” to make stopwatch go off
  • Tap on “Stop” to stop it. Tap on “Start” again, to continue or “Reset” to clear the stopwatch

Stopwatch : recording laps

 

  • Tap on “Lap” to create a lap
  • Lap counter in the middle rotates to the next number up
  • Lap also creates a blip on the rim of the clock face. It expands and fades out in a few seconds
  • To see the list of laps, tap on the lap counter or swipe/scroll up

Stopwatch Easter egg: time zoom


Finally, let’s have a look at a little playful detail that’s baked into the stopwatch. The stopwatch clock face has two modes: the first one shows seconds on the outer ring and hours on the inner ring. It’s all good and normal, but if you want to see time in finer detail and the dials rotate faster, just tap on the clock face – the view zooms in to display 1/100 seconds on the outside and seconds on the inside. This does not affect the timekeeping in anyway. To switch back, just tap on the clock face again.

That’s it! We’ll be chatting about this app and others in the usual places; the Ubuntu Phone mailing list and the IRC channel.

Talk to us today

Interested in running Ubuntu Desktop in your organisation?

Newsletter signup

Select topics you’re
interested in

In submitting this form, I confirm that I have read and agree to Canonical’s Privacy Notice and Privacy Policy.

Related posts

Design and Web team summary – 17 January 2020

The second iteration of this year is the last one before our mid-cycle sprint next week. Here’s a short summary of the work the squads in the Web & Design...

Design and Web team summary – 20 December 2019

This is the final iteration of the year. The team has worked exceptionally hard to produce a number of new projects and initiatives. Here is a shortlist of...

Design and Web team summary – 22 November 2019

This was a fairly busy two weeks for the Web & design team at Canonical.  Here are some of the highlights of our completed work. Web squad Web is the squad...