HCI Assignment 2:

Improving the alarm clock

December 2011 - January 2012

Tom Hume, T.Hume@sussex.ac.uk

Contents

Abstract

Introduction

Literature review

User requirements

Introduction

Survey

Method

Results

Google Adwords campaign

Method

Results

Requirements

Functional requirements

Non-functional requirements

Project scope

Prototyping

10

Overview

10

Sketching

10

Design

10

HCI Assignment 2: Improving the alarm clock

Testing

12

Results

13

Lo-fi paper prototype

14

Design

14

Testing

14

Results

15

Mid-fi iPhone prototype

16

Design

16

Testing

17

Results

17

Discussion

18

Conclusions

18

References

19

HCI Assignment 2: Improving the alarm clock

Abstract

Alarm clocks are a popular yet infrequently innovated, feature of a modern smartphone. This
design project investigated an improved alarm clock UI for touch-screen mobile phones,
extending the responsibility of the application from waking up its owner on time to helping
them manage their sleep patterns better. Some success was seen from testing a directmanipulation UI based around analogue clocks, but the project highlighted the need for
better tools for rapid prototyping of multi-touch UIs.

Introduction

An alarm clock application is a standard feature of modern smartphones; more people use
such an alarm clock daily than send text messages or browse the mobile Internet (GSM
Arena, 2011), and yet the alarm clock has been seemingly unaffected by recent advances in
technology, Internet access or our own behaviour.
I aimed to better understand user needs for an alarm clock through research, and to design a
practical alarm clock application which would exploit opportunities presented by the mass
adoption of touch-screen devices and our increasingly intimate relationship with our
smartphones.

HCI Assignment 2: Improving the alarm clock

Literature review

I searched Google Scholar and ACM for alarm clock and mobile and selected the most
promising 12 articles from the first 3 result pages.
The earliest was Moyer and Marples (2000) discussing an alarm clock as Internet appliance
and how to positively influence choice of waking time. A group of researchers at Delft
University of Technology looked into designing rich emotional interactions (Wensveen et al,
2000), recognising mood through expressive physical interactions (Wensveen et al, 2002) and
proposing a perceptual-motor-centred view on tangible interaction (Djajadiningrat et al,
2004). This work feels applicable to the touch-screen of a modern smart phone.
Landry et al, (2004) facilitated the choice of alarm time by highlighting unusual events the
following day, Klauser and Walker (2007) emphasise a (fairly subjective) set of aesthetics to
improve the clocks emotional appeal, and Hemmert, Hamann and Wettach (2009) woke
owners after a specific amount of sleep.
The idea of a social alarm clock appears twice, with Kim et al (2008) sharing wake-times and
sleeping state within a group and Scherini et al. (2010) attempting to virtually unite
geographically separated partners. Zimmerman considered the use of products to bring
about changes in the self with his Reverse Alarm clock (2011), in the process echoing the
metaphor Wensveen et al (2000) first observed of alarm clock as tyrant.
Finally, Choe et al produced an excellent review of sleep-related insights (2011), and the
playful clock proposed by Wang, which calls random friends when snoozed (2009), amuses.

HCI Assignment 2: Improving the alarm clock

User requirements

Introduction
Requirements were additionally gathered from three further sources:
1. A survey concerning mobile and alarm clock usage and sleep habits;
2. A fake advertising campaign to establish likely consumer demand for features;
3. A hierarchical task analysis of alarm clock usage.
Basic details of these appear below; this being a design project of limited length, detail has
been omitted.

Survey
Method
The full form can be seen online at https://bitly.com/twh_hci_survey
I posted it onto my weblog and advertised it on Twitter, Facebook and Google+.
Results
The survey was live for 24 hours and received 186 responses. Key findings were:
76% use their mobile as an alarm clock, 85% have it visible from their bed;
Only 5% said oversleeping didnt matter; 72% rated it a medium level of problem or worse;
The average respondent said they need 7.78h sleep/night and that they get 6.69h/night;
52% catch up on missed sleep regularly; 72% are a medium level of tiredness or worse;
81% use alarms on week-days, 29% every day of the week, none at weekends only;
The average time an alarm is set for is 07:04, with a standard devation of 0:50h;
54% sometimes forget to set their alarm;
HCI Assignment 2: Improving the alarm clock

 44% sometimes set their alarm wrongly;

28.78% of men and 42.22% of women dont get up when they planned to;
42% snooze their alarm more than once;
53.7% of respondents own iPhone and 32% Android devices;
67% charge their phone overnight (71.94% of men, 55.56% of women);
94% have their phone switched on;
75% have it connected to their home Wi-Fi (88% of iPhone owners, 75% Android);
40% use an automated repeating alarm feature;
Households with children are only slightly more likely to get up late (33.33% vs 28.3%);

HCI Assignment 2: Improving the alarm clock

Google Adwords campaign

Method
The literature review suggested two possible design directions: optimising sleep time, and
social sharing of sleep behaviour. To compare consumer enthusiasm for each, I ran a Google
Adwords campaign for 1 week with these two advertisements:

Both were displayed with identical keyword and cost settings: only copy differed. Google
displayed the two adverts 6,953 and 57,848 times respectively.
Results
The adverts gathered 4 and 122 clicks respectively: a click-through rate of 0.06% vs 0.21%,
indicating greater enthusiasm for Sleep Better Alarm Clock.

HCI Assignment 2: Improving the alarm clock

Requirements
Functional requirements

1. Design an alarm clock app for the iPhone;

2. Inform users of recent sleep behaviour, to help them improve sleeping habits;
3. Let users set multiple alarms;
4. Let users set an alarm which repeats daily or on weekdays only;
5. Assist users in remembering to set an alarm at all, or setting it correctly;
6. Let them see the time during the night;
7. Ensure they are woken in the morning;
8. Let them snooze the alarm in the morning;
9. Let them turn off the alarm in the morning.
Non-functional requirements

Research and thinking through the product led to these non-functional requirements:
1. Stroking, not poking: in Hume, 2011, I theorised that long, languid gestures like strokes
are more emotionally satisfying than the stabbing, poking motions we often use when,
say, clicking buttons on touch-screens, and wished to examine this thesis;
2. Avoid the clich of alarm clock as tyrant (Wensveen, 2000 and Zimmerman, 2009);
3. Account for users being half-awake or groggy when using the product.

HCI Assignment 2: Improving the alarm clock

Project scope

A hierarchical task analysis (Preece, Rogers and Sharp 2011, p.384) expresses the functional
requirements. Constraints of time and report length forced a limit on project scope, and
anticipated difficulty testing the wake-up process steered me towards looking at the setting
of alarms and sleep management. I focused on the shaded areas below:
Using an alarm
clock

Remembering to
set it

Setting an alarm

Getting enough
sleep

Seeing what the

time is at night

Getting up
on time

Setting repeating
alarms

Setting it correctly

Waking

Snoozing

HCI Assignment 2: Improving the alarm clock

Turning off

Prototyping
Overview
I prototyped the product in 3 stages:
1. Hand-drawn sketches to explore basic possibilities;
2. A lo-fi paper prototype to user-test ideas arising from these sketches;
3. A mid-fi prototype on an iPhone to test a further iteration of designs.
Sketching
Design
Choosing to target the iPhone set the parameters for screen shape, size and input
mechanism. Given that clocks are familiar physical products, the direct-manipulation touchscreen nature of iPhone UI and my stroking not poking theory, an analogue clock-face felt
appropriate.
Other clock apps allow multiple alarms to be set, but
direct-manipulation of a clock face implies the face be
as large as possible on-screen. How to represent
multiple alarms? I sketched many ideas for showing
clocks on-screen (see sketch, right), before realising
that only one need be visible at any one time.

HCI Assignment 2: Improving the alarm clock

10

Few mobiles use analogue clocks; fearing this was for reasons of legibility, I experimented
with viewing a digital and analogue clock across a darkened room. This confirmed analogue
as at least as legible as digital:

Analogue clock-face, from other end of bed

Digital clock-face, from other end of bed

A single analogue clock visible on-screen, combined with a need for multiple alarms led me
to many alarm clocks arranged horizontally off-screen, through which a user swipes:

Supporting this model, I decided to add a new alarm clock by pulling it down from an initial

off-screen half-visible position (not dissimilar to the way the Metro UI of Windows Phone 7
shows a hint of available content off-screen (Microsoft, 2011):
HCI Assignment 2: Improving the alarm clock

11

Original sketches covering the above, and more, follow:

Stroking not poking: languid UI where Visualising recent sleeping habits and

Use of context: the phone detects lights

actions are carried out using pans and

promoting good habits gently, without

going out and flashed its screen briefly,

sweeps.

nagging.

as a low-key reminder to set an alarm.

Strategies to cope with groggy users, at Ways of reassuring the user how much
night and in the morning: clear labeling

sleep they will get, or when they should

and use of colour. One button only!

go to bed to have enough.

Testing
Design is frequently considered a collaborative endeavour (Hunter, 2011), and in a process of
daily design critiques at Pixar, daily animation work is shown in an incomplete state to the
whole crew. This process helps people get over any embarrassment about sharing unfinished
workso they become even more creative. (Catmull, 2008)

HCI Assignment 2: Improving the alarm clock

12

After discussion with my course tutor, I replicated this critique process by publishing my
sketches and background thinking at http://tomhume.org/ and soliciting feedback from
designers.
Results
11 individuals sent in feedback; in total, too lengthy to list here, but points of note included:
Take care when using circular motions on glass, they can feel icky on some screens (NR);
How will you disambiguate potentially ambiguous times whilst a user is groggy, e.g. 10 to
10? (NR, DW);
Consider that visual and interactive widths of on-screen elements may differ (NR);
Direct manipulation of the clock hand, and altering its rate of movement based on fingerdistance from the clock centre, may not work given recommended sizes for touch targets
on an iPhone screen (KR);
What happens once a clock is dismissed by flicking upwards? (KR);
Telling users they must sleep now is a classic anxiety-inducing cause of insomnia, and
therefore counterproductive (KR).

HCI Assignment 2: Improving the alarm clock

13

Lo-fi paper prototype

Design
To test designs with users I build a cardboard iPhone mockup onto which UI elements could
be placed and moved, allowing me to experiment with a sketched-out touch interface
outside a lab environment. Being low fidelity, this vertical prototype (Preece, Rogers and
Sharp 2011 p.398), was unsuitable for testing emotional response to the UI:

Clock component, with movable

alarm-hand. Clock is dragged down
from top of screen
Indicator showing current
clock/screen, standard
as per iPhone human
interface guidelines

"Carousel" selector for

alarm repetition, dragged
horizontally
Individual screens,
scrolled horizontally

Testing
I tested this prototype with three subjects. Each was asked to use the prototype to carry out
three tasks, each of which would test an aspect of the design (see table below). The tests
used a think-aloud protocol (Preece, Rogers and Sharp 2011, p.256), and they were videorecorded using a tripod-mounted iPhone (see photos below).

User test in living-room setting, video-recorded whilst test Individual screens laid out left-to-right, and pushed/pulled
subject talks out loud.

HCI Assignment 2: Improving the alarm clock

into view by administrator.

14

Task

Test

# users passing

Set an
alarm

Do they understand pulling down a clock face to add an alarm?

Did they directly manipulate the clock face to set time?
Did they use the calendar to inform their wake-up time?
Did they understand the ambient display of recent sleep?
Did they set an alarm correctly?

3/3
3/3
0/3
2/3
1/3

Set a
second
alarm

Did they built a mental model of horizontal sets of clocks?

Did they recall the pulling down of clocks to add an alarm?

1/3
3/3

Delete
an alarm

Did they push an alarm off-screen to delete it?

2/3

Results
In addition to the results of the tests (see table above):
Two of three verbalised confusion around the semitransparent overlay on the alarm clock
used to indicate ideal bedtime;
One user only worked out push clock off-screen to delete after a little experimentation;
Two out of three users failed to use the on-screen carousel to turn the alarm from OFF to
TOMORROW, though this likely was a weakness of the sketching fidelity; they had mistaken
a draggable element for a button.

HCI Assignment 2: Improving the alarm clock

15

Mid-fi iPhone prototype

Design
I wished to test next on an actual device, to improve realism and to look for issues around
poor feel of circular motions on glass highlighted in the sketch critiques. I was disappointed
to discover a dearth of tools to allow easy prototyping of multi-touch UIs. After considered
implementing a UI in code, I rejected this approach as over-complicated, given available time.
In the end I settled upon a combination of:
1. Laying out the UI in OmniGraffle, using iPhone stencils
to draw an interface closely resembling that of a real
device (see right, top);
2. Exporting this UI to HTML and including links between
screens as clickable elements;
3. Viewing this HTML on an iPhone, using the free
LiveView product (Zambetti, 2008) to send HTML from
Mac to iPhone full-screen (see right, below).
This supports single clicks, but not the touch interactions
I had designed the product to use (pans, sweeps and
drags). Whilst my mid-fi prototype could be tested on a
real device, it therefore lacked the ability to test the
stroking not poking hypothesis.
I made the following changes as well as improving fidelity:
1. Used a standard iPhone UI component to indicate
more content off-screen, and a hint of a clock off-screen to the left
(see screenshot, right);
2. Improved labelling of sleep history by changing copy and using
colour to indicate good or bad behaviour (see next page, right);
3. Added colour to the next calendar event display, now showing
only when the clock is touched, to draw attention to it (see right);

HCI Assignment 2: Improving the alarm clock

16

4. Graphically designed a carousel widget with shading such that its

sideways motion is more obvious (see right);
5. Added a mid-clock AM/PM display when the face was touched, to
disambiguate morning from afternoon (see previous page, right);
6. Made the touchable areas for many UI components larger than
their graphical representation, to allow for easier interaction without
over-using visual screen estate (see highlight area of image, right);
Testing
I tested this prototype with 2 users. Each subject carried out the same three tasks as in the
first round of tests; the think-aloud protocol and video recording were also repeated.

Subject removing second alarm

Subject setting first alarm

Results
The fidelity of this prototype was deceptive; both subjects wanted to drag elements onscreen but couldnt, and inadvertent clicks led to confusion.
Both users understood the dragging-down of the clock; both tried to directly manipulatte the
clock face; and one was confused by the carousel to set on/off/repeat. Neither user noticed
the calendar appointment appearing under the clock, or the AM/PM indicator appearing in
the middle of the clock face.
Both users understood to swipe to the left to move to a new clock.
Both users understood the method for dismissing a clock off-screen.

HCI Assignment 2: Improving the alarm clock

17

Discussion
The use of multiple analogue clock faces, directly manipulated to set multiple alarms, works
well. Users understand them instinctively and they are legible in low light at a distance.
Some important UI aspects (e.g. panning between screens) became more obvious purely as
a result of increased graphic fidelity.
Further work is needed on the display of sleep habits and upcoming calendar entries; users
tended not to notice these, and when they were noticed they didnt elicit a positive reaction.
Tools to prototype the details of multi-touch UIs are primitive at best - surprising given the
popularity of touch-screens. There may be promising future work in developing improved
tools for this. Alternatively we might accept that the nuances of such interfaces require
coding in order to reach a testable fidelity.

Conclusions
Low-fidelity prototyping worked well as a tool to embody sketches designs quickly and put
them through semi-realistic testing with users, outside a laboratory setting. I struggled to see
much value, for this project, with mid-fi prototypes and would in future conduct broader lo-fi
testing (to maximise early learning) and proceed to high fidelity (to work on settling detail of
the UI).

HCI Assignment 2: Improving the alarm clock

18

References
CATMULL, E. (2008) How Pixar Fosters Collective Creativity. Available from:
http://hbr.org/2008/09/how-pixar-fosters-collective-creativity/ar/1 (Accessed: December
30, 2011)
CHOE, E., CONSOLVO, S., WATSON, N., and KIENTZ, J. (2011) Opportunities for
Computing Technologies to Support Healthy Sleep Behaviours. In: CHI 2011 Proceedings
of the 2011 annual conference on Human factors in computing systems. Vancouver, BC,
Canada. New York: ACM New York
DJAJADININGRAT, T., WENSVEEN, S., FRENS, J., and OVERBEEKE, K. (2004) Tangible
products: redressing the balance between appearance and action. Personal and
Ubiquitous Computing. Volume 8 Issue 5, September 2004
GSM ARENA (2011) Mobile phone usage report 2011: The things you do. Available from:
http://www.gsmarena.com/mobile_phone_usage_survey-review-592p3.php (Accessed 14
January 2012)
HEMMERT, F., HAMANN, S., and WETTACH, R. (2009) The Digital Hourglass. In: TEI '09
Proceedings of the 3rd International Conference on Tangible and Embedded Interaction.
Cambridge, UK. February 16-18 2009. New York: ACM New York
HUME, T. W. (2011) Alarm clock first sketches. Available from:
http://www.tomhume.org/2011/12/alarm-clock-first-sketches.html (Accessed 14 January
2012)
HUNTER, M. (2011) What design is and why it matters. Available from:
http://www.designcouncil.org.uk/about-design/What-design-is-and-why-it-matters/
(Accessed: 14 January 2012)

HCI Assignment 2: Improving the alarm clock

19

LANDRY, B., PIERCE, J., and ISBELL, C. (2004) Supporting routine decision-making with
a next-generation alarm clock. Personal and Ubiquitous Computing. Volume 8 Issue 3-4,
July 2004
KIM, S., KIENTZ, J., PATEL, A., and ABOWD, G. (2008) Are You Sleeping? Sharing
Portrayed Sleeping Status within a Social Network. In: CSCW 08. San Diego, California,
USA. November 8-12 2008. New York: ACM New York
KLAUSER, K., and WALKER, V. (2007) Its About Time: An Affective and Desirable Alarm
Clock. In: DPPI '07 Proceedings of the 2007 conference on Designing pleasurable
products and interfaces. Helsinki, Finland. August 22-25 2007. New York: ACM New York
MICROSOFT (2011) User Experience Design Guidelines for Windows Phone. Available
from: http://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx (Accessed 14
January 2012)
MOYER, S., and MARPLES, D. (2000) The Internet Alarm Clock - A Networked Appliance
Case Study. Telcordia Technologies. Available at:
http://www.argreenhouse.com/iapp/ac-whitepaper.pdf [Accessed 13 December 2011]
PREECE, J., ROGERS, Y., and SHARP, H. (2011) Interaction Design. 3rd edn. Chichester:
John Wiley & Sons.
SCHERINI, T. et al. (2010) Enhancing the Sleeping Quality of Partners Living Apart. In: DIS
'10 Proceedings of the 8th ACM Conference on Designing Interactive Systems. Aarhus,
Denmark. August 18-20 2010. New York: ACM New York
WANG, A. (2009) Asimovs First Law / Alarm Clocks. In: TEI '09 Proceedings of the 3rd
International Conference on Tangible and Embedded Interaction. Cambridge, UK.
February 16-18 2009. New York: ACM New York
WENSVEEN, S., OVERBEEKE, K., and DJAJADININGRAT, T. (2000) Touch Me, Hit Me and
I Know How You Feel: A Design Approach to Emotionally Rich Interaction. In: DIS '00
Proceedings of the 3rd conference on Designing interactive systems: processes,
HCI Assignment 2: Improving the alarm clock

20

practices, methods, and techniques. Brooklyn, NY, USA. August 17-19 2000. New York:
ACM New York
WENSVEEN, S., OVERBEEKE, K., and DJAJADININGRAT, T. (2002) Push Me, Shove Me
and I Show You How You Feel. DIS '02 Proceedings of the 4th conference on Designing
interactive systems: processes, practices, methods, and techniques. London, England.
June 25-28 2002. New York: ACM New York
ZAMBETTI, N. (2008) LiveView for iPhone & iPad. Available from:
http://www.zambetti.com/projects/liveview/ (Accessed 28 December 2011)
ZIMMERMAN, J., (2009) Designing for the Self: Making Products that Help People
Become the Person they Desire to Be. In: CHI 09 Proceedings of the 27th international
conference on Human factors in computing systems.

HCI Assignment 2: Improving the alarm clock

21