O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
K1 Alarm Clock
UI Design Spec
Overview
The alarm clock is a platform for running applications and will demonstrate various capabilities
of Kinoma Play R...
Each button on the device has specific ties to the interaction model.
> Left and Right arrows scroll between apps
> Curtai...
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Alive with activity
Alive with activity
Carregando em…3
×

Confira estes a seguir

1 de 23 Anúncio

Mais Conteúdo rRelacionado

Semelhante a spec (20)

Anúncio

spec

  1. 1. K1 Alarm Clock UI Design Spec
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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”

×