2. Overview
The alarm clock is a platform for running applications and will demonstrate various capabilities
of Kinoma Play Runtime (KPR) as a development framework. By design, this product will have
apps for an alarm clock, a Youtube music charts player, a weather app and an internet radio
app.
The device will have a display with a resolution of 320x240 and buttons for interaction. There
is no touch screen on the device. The alarm clock is wifi enabled. The device needs to be
connected to the internet in order to provide the complete user experience. Almost every app
depends on connectivity with the web in some way. A typical use case for the product is by the
bedside or in the bathroom. Discovering creative ways to use this device is highly encouraged!
Each application is different in its design style but follows the same model for interaction. If
more applications are added to the product in the future, I would urge designers and developers
to work within the confines of the interaction model as it is central to the design of product.
3. Each button on the device has specific ties to the interaction model.
> Left and Right arrows scroll between apps
> Curtain toggle button lifts and drops the curtain for the app currently in view
> App Control buttons provide interaction with indicated features of the app currently in view
Interaction
Left Arrow
Curtain Toggle
App Control Buttons
Right Arrow
Buttons
4. You can imagine applications to be laid out next to each other with their edges stuck together.
When a left or right arrow is pressed, the prev/next app in line slides into view as shown in the
figure above.
The app that is currently in view maintains its state while the scrolling occurs. There might be
technical difficulties in being able to do something like this depending on what is being show on
the screen, in that case the designer or developer may choose to deviate slightly from this and
freeze the content in the app before the next app slides into view. The point of doing this is to
provide the user with a very “fluid” feeling to the interface. As long as there are no major visual
changes in the interface, the developer or designers may agree to freeze the content in the app
when the scrolling begins.
If the curtain is raised (or is being raised) in the app currently being viewed when an arrow is
pressed, the curtain stays raised (or continues to rise) while the scrolling occurs (shown below)
Scrolling between apps
5. Apps for this product are built with a curtain metaphor. Any app has two levels of content - on
the curtain and beneath it. In the images above, you can see that the weather curtain has the
forecast for today and tomorrow on the curtain and an hourly forcast beneath it.
You can think of the layer beneath the curtain to be a more detailed view or something that
provides more details about the content on the curtain. There is a lot of freedom in the selection
of content itself. Each app can express its individuality through this freedom within the confines
of this metaphor.
The button on top may be used to lift or drop the curtain. Apps may also provide exclusive
control through the array of buttons below the display to do so. For instance, the weather
app uses the button on the top to toggle the state of the curtain where as the alarm clock
generates the content beneath based on the action selected using the array of buttons, before
lifting the curtain.
To make the motion of the curtain seem more natural, you may choose to add a certain
acceleration in its motion as it drops or rises.
Each app may be able to specify the amount by which the curtain rises. Some apps may raise
it all the way to the top, where as some might choose to raise it only by a small amount. Apps
may choose to do a mixture of both approaches based on the content beneath it. For instance,
the weather app raises the curtain completely where as the alarm clock app raises it by 30%
when ‘snooze’ is selected and by 95% when the ‘wake up’ is selected.
Curtain Metaphor
6. The designer of an app has a lot of flexibility in terms of visual design and each app distinguishes
itself through individual and unique visual forms. There are however certain guidelines that
should be adhered to in order to unify parts of the user experience. Again, these are guidelines
and not rules set in stone.
Visual Design
Common Design patterns
1
2
3
4
7. 1. Curtain
Points to note about the curtain. The layouts and visual design of the actual content on top
of the curtain is determined by the aesthetic of the app but every curtain must provide a drop
shadow along its bottom edge. Drop shadows may be defined using a texture.
2. Info card
The detailed info may be presented using a card design pattern. The card must be aligned in
the center of the screen vertically and must extend over the entire span of the array of four
buttons below the display.
3. Background texture
The background on the layer beneath the curtain must be a texture. This texture must be
uniform across applications in order to provide a feeling of continuity from one app to the next
when the curtain’s are raised.
4. Buttons
The buttons in the layer beneath the curtain must be flushed against the bottom edge of the
display, preferably even have a negative margin against the bottom edge. This is important as it
establishes a stronger connection between the visual button and the physical button.
Color Palette for background
#088cfc #525459 #ffffff
It is advised to use the color palette for the content beneath the curtain. The unified visual
appearance of the layers beneath the curtain and the distinct variation in the appearance of the
content on the curtain is central to the design of this product.
It is this distinction and this unification that allows the product to feel like it runs many apps all of
which are connected by a common visual mechanism
8. Design spec for content beneath the curtain
Some content goes in here
Title
font : Arial, Helvetica
size : 18pt (KPR might render differently)
color : #ffffff
Texture
Its an image. It is similar to the
texture used by apple in the
“spaces” view
Button
font : Arial, Helvetica
size : 11pt (KPR might render differently)
color : #ffffff
bgcolor: #088cfc
stroke : #494a4d 1px (adjust alpha if needed)
width : 50 px
height : 25px
bottom margin: -1px
**the virtual buttons must be directly aligned with the physical ones
28px
43px
28px
20px
20px
20px
20px
20px
20px
Shadow
dist: 8px
opacity: 0.8
angle: 90
size: 10
Shadow
dist: 3px
opacity: 1.0
angle: 90
size: 4
9. Alarm Clock app
Interaction flow
This is the default state of the app. It
shows the time, day and date and allows
you to either setup the alarm ringer or set
an actual alarm time.
The curtain toggle button (on the top)
is inactive in this case. You need to
select from one of the two options at the
bottom of the screen to interact with it at
this point.
Selecting ringtones screen shows a
scrollable list of ringtones / apps available.
Ringtones simply cause the ringer to play
the selected sound where as an app, say
an internet radio app actually causes the
screen to scroll to the selected app once
the “Wake up” option is chosen.
Pressing curtain toggle button cancels the
operation.
The first three buttons can be used
to set the time.
The check mark turns green
when selected, the alarm is set for the
specified time and the curtain drops.
Pressing curtain toggle button cancels the
operation.
10. When the alarm goes off, the ringer
turns on. You can hear the sound.
The background needs to start a color
transition from black to dark and back to
black.
Any action (button press) should mute
the ringer. Notice that the icons for ringer
and alarm setting are not visible. The only
actions that the user can choose from
are the red and green circles.
Pressing either of those raises the curtain
and shows the appropriate content.
When the red icon is chosen, the
“snooze” view is loaded beneath the
curtain and the curtain is raised.
The user can then select a snooze time
that is appropriate for him/her. Once the
snooze time is selected, the curtain falls
and the red/green dots disappear and the
original state of the app is restored.
Pressing the “curtain toggle” button
cancels the selection, drops the curtain,
but doesn’t restore the app to original
state. So the background color keeps
oscillating and the green and red dots still
remain visible.
When the green icon is chosen, the
curtain is raised and a card holding the
first calendar appointment, the first
task list item and the number of email
messages is displayed.
This information is pulled from the
respective Google APIs using the
credentials provided by the user during
setup.
Pressing “Ok” or the “curtain toggle”
button pushes the clock back into its
original state.
11. Visual Design
70px
60px
20px
60px
60px
40px
96px
20px
20px
20px
23px
60px
Time
size: 68pt
opacity: 1.0
color: #ffffff
font: Arial
All icons will light up
when button is pressed
down and gray out
when released
Scrolling list
font: Arial
size: 12pt
row height: 30px
active: # bc6600
color: #1a1a1a
AM/PM
size: 12pt
opacity: 1.0
active: #ffffff
font: Arial
inactive:
#2b2b2b
Dots
green: #00d219
red: #ef002d
12. 60px
20px
24px G-Icon
h: 18px
w: 18px
padding:3px
Time box
color: #c4c4c4
font: Arial 18pt, bold
Card icons
h: 23px
w: 23px
color: #a8a8a8
effect: inner
shadow
Text
font: Arial
size: 14pt
color: # 5a5d60
**For more details on the layout, refer to “common design patterns” section earlier on
13. Weather app
Interaction flow
This is the default state of the app.
It shows the two panels displaying
the forecast for today and tomorrow
respectively.
Each panel shows an image, the
temperature, the condition and min and
max temperatures for that day against
the icons for the same (red and blue
arrows).
To raise the curtain, the user must press
the “curtain toggle” button.
Pressing “Hourly” switches the card to show
the hourly forecast, changes the button text
to “Weekly” and vice versa
14. Day
font: Arial
size: 10pt
color: #a4a4a4
Panel
color: black
opacity: 0.7
Temp
font: Arial
size: 30pt bold
color: #ffffff
font: Arial, bold 16pt font: Arial, 16pt
color: #6c6c6c
Picture
chosen from a limited
set based on condi-
tion code (e.g.“partly
cloudy”)
Condition
font: Arial
size: 14pt
color: #ffffff
Max/Min
font: Arial
size: 14pt
color: #ffffff
20px
20px
10px
20px
20px
Visual Design
15. Weekly forecast for the next five days. The
forecast icons can be changed based on copyright
requirements.
Drop Curtain
Hourly forecast for the next five hours. The
up and down arrows indicate rise or fall of
temperature from the previous hour.
16. Music Charts app
Interaction flow
The app loads the thumbnails of the videos in
a vertical fashion based on their position in the
chart.
One can scroll through this charts using the up
and down arrows. Scrolling follows the “magic
move” transitions where a single key press
causes the next video to be displayed in the
center of the screen.
The scrolling list also tracks which video is at the
center of the screen as the play and full screen
buttons control only the playback of that video.
17. The layer beneath the curtain changes its content based on the video selected on the curtain.
So when the user scrolls to the next video, related content is fetched for that artist and pushed
into the layer beneath the curtain.
In the layer beneath the curtain, the name of the song, the bio of the artist (scraped from
wikipedia.org), the view count and rating of the video are displayed.
18. Visual Design
150px
285px
18px
18px
18px 18px
Texture
white leather
or steel
Info
font: Arial
size: 12pt, 10pt
color: white
Count
font: Arial
size: 10pt
color: #282828
Name
font: Arial
size: 14pt
color: black
Bio
font: Arial
size: 10pt
color: black
Stars
active: #ffde00
dead: #131313
Overlay
color: black
opacity: 0.8
Ribbon
gradient:
beg - #a90000
mid - #c50000
end - #ff5e5e
font: Arial, 10pt
Shadow
dist: 8px
opacity: 0.8
angle: 90
size: 10
19. Internet Radio app
Interaction flow
The internet radio app, uses your location
info to search for local radio stations
using a service similar to tuneIn.
Radio stations are displayed in a scrollable
list which can be navigated using the up
and down arrows.
A radio station can be marked as a
favorite. This causes that to be displayed
in the beginning of the list the next time
the app loads. Radio stations have their
icons, frequency, name and the current
program being aired displayed.
When a station is selected, the radio
broadcast is streamed and starts playing.
The station being streamed is indicated in
the top right corner and an icon appears
against it in the list.
Pressing the “curtain toggle” causes the
curtain to rise revealing some meta data
about the radio station.
Pressing “OK” or the “curtain toggle”
drops the curtain
20. Visual Design
Heading
font: Arial
sizes: 18pt,
14pt & 10 pt
colors: #0096ff,
#000000 and
#a7a7a7
List item
bgcolor:
#e7e7e7
Station
color:
#477fcb
font: Arial
size: 18pt
wt: bold
Descr.
color: black
font: Arial
size: 14pt
Now Playing
colors: # ee8356, #8b8b8b
font: Arial, 14pt
Selected
bgcolor:
#c5c5c5
Description
font: Arial,10 pt
33px
15px
60px
21. KPR has a really flexible containment and layout scheme. This can be used to create an
enviornment or a shell for each of the apps. You can imagine each app to be designed
independently in its own container.
Each of those containers (for the apps) is inserted into a shell or a layout with sliding panels.
A panel is a container that holds the contents of an app. A panel is part of the shell or the
environment and can slide in and out of view. A panel knows when its currently being viewed.
In the sketch below, the containers (red, green and blue) are panels.
The shell controls the transitions for the panels to slide when the left and right arrows are
pressed. The shell also keeps track of which panel is currently in view. The shell distributes
events from other button presses. Each panel (red, blue or green in the sketch above) receives
these events and acts upon them only if it is currently being viewed.
Another important point to note in the design of the individual containers is that there might
be parts of the UI that would constantly use up the CPU even when they aren’t in view (for
instance, the blinking of the “:” between hours and minutes in the clock etc.). If individual apps
or panels have such elements which might be driven by a timer or constantly need a section of
the UI to be redrawn, such elements must only be drawn when the container is being viewed
and not otherwise.
It is possible that the device may run on battery cells and every effort must be made by the app
developer to reduce wastage of resources that could lead to a quick discharge.
Additional Notes
Creating the Environment
Panel PanelPanel
Each app uses the curtain metaphor.This can be turned into a module that is reusable.
The module can implement the transition (curtain rising / falling), changing of containment
heirarchy of the layer beneath the curtain based on changes in the curtain and other associated
behaviors. This module can be used to build the app which will act as the content for a panel.
Creating the content for a “panel”
