In order to take advantage of the small number of apps initially offered on the Amazon Fire TV, I added a 10-foot user interface (usable from 10 feet away) and remote control / game pad controls. Here are some screenshots. There’s more technical detail below the photo gallery.

Requirements to adapt to Fire TV:

  • Modify user interface code to work with controllers (no touch controls)
  • Create a light on dark color scheme that’s easy to read on a television
  • Resize the user interface to increase text and icon size, minimize blocks of text
  • Develop an interaction scheme (especially for settings) that’s close enough to the Amazon TV’s.
  • Keep a single codebase for future enhancements and bug fixes.

What I did:

  • Adapted the main multiple touch screen so that answers are in a diamond patten that corresponds to D-Pad button position to make answering intuitive
  • Created a multi-pane user interface for settings screens with text titles down the left, highlighted the current one for context.
  • Used Android XML theming to control colors, sizes and styles on the various settings screens for user interface consistency and a single codebase for touch and TV versions
  • Used Android fragments to minimize code changes between single- and multi-pane user interfaces.
  • Used color consistently to highlight “focused” items
  • Subtly changed the background color gradient to provide context in different parts of the user interface.
  • The bonus minigames offered to kids after completing a problem set without errors required a different solution. They were mostly about tapping objects (balloons, flying saucers, fireworks, smiley faces). Rather than create entirely new games, I provided a large circular “cursor” that’s d-pad or joystick controllable. The games are really easy with the large circle to offer some instant success, but the cursor gets smaller over time to increase the challengs.
  • Because my “Help” and “About” screens are HTML-based, I created two different stylesheets to control text and backgroud colors and also to include or omit text that’s only relevant to one platform.