Successfully reported this slideshow.
Serenity for Android
Design tips for making your App work well on
Android TV devices
COJUG 2014
David Carver
Gplus: David ...
What is Serenity
● Plex Media Server Client for Androd TV
Devices, Game consoles, and tablets.
● Optimized for Remote and ...
Serenity for Android
Serenity for Android
What constitutes Android TV
Internet Enabled Devices running Android 3.2 or
Higher.
2nd
Screen/Remote Control/Game Pad sup...
Android TV – Google TV Boxes
Televisions
Other Android Based Devices
Why Design for TV???
I had an Itch that Needed Scratched
● Plex App was constantly crashing
● The UI was frustrating to use with a Remote
● Wan...
Plex on Google TV before Redesign
Android TV apps suck because
Developers let them suck!
Myth: A Tablet App will work fine on
a TV!
The truth...Maybe
An app designed for Landscape mode on a tablet
may work, but ...
Failure Points
● The app may run, but will probably provide a
frustrating user experience.
● These apps are designed for T...
Why not just Chromecast
Everything?
● You need a Phone/Tablet/PC that supports it.
● Not everybody likes having to use a
P...
Guidelines?
We don't need no stinking
guidelines!
Google TV/Amazon Fire TV/OUYA
Design Guidelines
● Design for D-PAD not for Touch interface
● Avoid the use of the Mouse or...
Visually Appealing
● Design with Visual Appeal
– Apps are going to be in people's living rooms.
– TVs are ment to be visua...
Visually Appealing
● Prefer darker themes.
– Lighter themes tend to be to bright and harder to
read
– TV Brightness varies...
Patterns and Anti Patterns
Zones
Design with Zones in mind.
Anti Pattern
D-Pad Navigation can't skip zones. The long scrolling list in the
center has to be navigated through to get t...
You can make this Work
Limit the center content to Detail information or focusable items that
don't scroll. This allows na...
Google Recommends Vertical
Zones
Create Quick Navigation Keys
● Provide ways to Navigate quickly through long
lists.
● Provide ways to get back to the top ...
Remember to Focus
Focus
Focus will be the most important and time
consuming aspect of your app. Getting
Focus and the navigation around on s...
Avoid the Card Design with
Embeddable Clickable Items.
Avoid the Embedded Clickable Item
If you do this, make sure
a person can navigate to
it! There is no touch
screen, and if ...
Avoid Horizontal Scroll with Side
Menu (There is an exception)
Avoid Search at top of Page, Place
it in Left Nav Bar or Sliding Menu
Horizontal Zone Pattern
Horizontal 2 Zone Pattern
Horizontal Two Zone, Horizontal
Grid Scroll View
Horizontal 3 Zone Pattern
Horizontal 3 Zone. Zone 2 and 3 are
Side Scrolling
Avoid Content that Scrolls Vertically
in Zone 2!
In general avoid vertical scrolling with
horizontal layouts.
Horizontal Zone Pattern
With Sliding Menu
Horizontal 3 Zone with Sliding Menu
Vertical Zone Pattern
The Good and the Ugly
Good Use of 3 Zone Vertical Layout
Use Vertical Scroll Grid View with
Side Menu / Left Nav Bar
Fewer clicks to get to the Side Content
Avoid Vertical and Horizontal Scrolling
When in Content Zone don't scroll both
directions.
Top Items Hard to get too. Due to
Vertical scrolling center content.
Left Nav Bar hard to get to due to
Horizontal Scrolling content
New Plex has same issue.
Horizontal and Vertical Scroll
content
Text and Icons
● Provide large readable fonts.
● Screen space is at a premium. Even at
1920x1080p.
– User is sitting about...
Tips for Developing and Testing
AndroidManifest.xml
● <uses-feature
android:name="android.hardware.touchscreen
" android:required="false" />
● Allows for ...
General UI Consideration
● TVs are always at least layout-large and layout-
landscape-notouch resources.
● Drawables are H...
Emulator
Use a Nexus 7 screen resolution. Also use
the Google TV Add On.
You may want to use a Nexus 10 emulator
to test f...
Remember to Focus
android:focusable="true"
android:focusableInTouchMode="true"
android:descendantFocusability="afterDescen...
Dog Food your App
● Get an Android Smart TV, Amazon Fire TV, or
OUYA device and test your app there.
– Screen resolutions ...
Avoid Proprietary Extensions
● Avoid using undocumented APIs. You'll
back yourself into a corner.
● Consider supporting ol...
KeyCode Events
● Android supports a wide variety of Media Key
Codes
– Play, Skip Forward, Pause, Stop, Skip Back
● Channel...
Context Menus
● Use Context Menus to provide context sensitive
information.
– Don't use the Action Bar especially with Gri...
Performance
● Use Animations sparingly
– TV Devices are typically slower than Phones/Tablets
– Can appear to slow down the...
Open Source Widgets that
Work well for the TV
Android-Universal-Image-Loader
Helps with Cache Images and Loading
Images in the Background
Highly configurable.
https://g...
TwoWayGridView
Provides a horizontal scrolling grid.
Child views don't get focus. Minor bug.
https://github.com/jess-ander...
Android-MenuDrawer
https://github.com/SimonVT/android-
menudrawer
● Position along all four edges.
● Supports attaching an...
Serenity Logo Designed By
Thanks To
● Spiderfly Studios – for Logo and some graphic
design work
– http://www.spiderflystudios.com
● Google TV Friend...
Serenity for Android: Design Tips for Android TV
Serenity for Android: Design Tips for Android TV
Upcoming SlideShare
Loading in …5
×

Serenity for Android: Design Tips for Android TV

1,240 views

Published on

Updated presentation covering the Patterns and Anti Patterns developers need to be aware of when designing Android applications for use on Televisions.

Published in: Technology, Business
  • Be the first to comment

Serenity for Android: Design Tips for Android TV

  1. 1. Serenity for Android Design tips for making your App work well on Android TV devices COJUG 2014 David Carver Gplus: David Carver or Serenity for Android Twitter: @kingargyle https://github.com/NineWorlds/serenity-android
  2. 2. What is Serenity ● Plex Media Server Client for Androd TV Devices, Game consoles, and tablets. ● Optimized for Remote and D-Pad navigation ● Open Source project available on github https://github.com/NineWorlds/serenity-app ● Available in the Google Play store. ● MIT Licensed
  3. 3. Serenity for Android
  4. 4. Serenity for Android
  5. 5. What constitutes Android TV Internet Enabled Devices running Android 3.2 or Higher. 2nd Screen/Remote Control/Game Pad support Ment to be used primarily with a TV.
  6. 6. Android TV – Google TV Boxes
  7. 7. Televisions
  8. 8. Other Android Based Devices
  9. 9. Why Design for TV???
  10. 10. I had an Itch that Needed Scratched ● Plex App was constantly crashing ● The UI was frustrating to use with a Remote ● Wanted to learn Android Development and seemed like a good thing to do at the time. ● Tired of TV Apps getting second class treatment. ● Wanted a more Media Center layout for Plex. ● Apps designed for TV don't need to SUCK!!
  11. 11. Plex on Google TV before Redesign
  12. 12. Android TV apps suck because Developers let them suck!
  13. 13. Myth: A Tablet App will work fine on a TV! The truth...Maybe An app designed for Landscape mode on a tablet may work, but the user experience will probably suffer.
  14. 14. Failure Points ● The app may run, but will probably provide a frustrating user experience. ● These apps are designed for Touch and typically do not take into account other ways to interact with the app. ● Using a Mouse is frustrating on the TV. If the user has to use the mouse pointer, it is a design failure. ● Need to design with the TV environment or Accessibility in mind.
  15. 15. Why not just Chromecast Everything? ● You need a Phone/Tablet/PC that supports it. ● Not everybody likes having to use a Phone/Tablet as a second screen device. ● Not everybody has a supported Chromecast device. ● Some prefer using a Remote. It's familiar. ● Limited to very basic playback or interaction. Not designed for more complicated applications and interactions.
  16. 16. Guidelines? We don't need no stinking guidelines!
  17. 17. Google TV/Amazon Fire TV/OUYA Design Guidelines ● Design for D-PAD not for Touch interface ● Avoid the use of the Mouse or Touchpad. ● Emphasize obvious items that can be selected or interacted with. ● Back Button should exit or take back to previous screen. ● Give visual indicators when more information is provided off screen (i.e. scrolling required) ● Compensate for Overscan on TVs
  18. 18. Visually Appealing ● Design with Visual Appeal – Apps are going to be in people's living rooms. – TVs are ment to be visual displays – You want the wow factor to help bring people back. – However it needs to be simple and functional. ● Limit the number of clicks that a person has to get to anything on the screen. – The fewer the clicks the better.
  19. 19. Visually Appealing ● Prefer darker themes. – Lighter themes tend to be to bright and harder to read – TV Brightness varies greatly, and depends on room environments. ● Holo themes and color schemes work well.
  20. 20. Patterns and Anti Patterns
  21. 21. Zones Design with Zones in mind.
  22. 22. Anti Pattern D-Pad Navigation can't skip zones. The long scrolling list in the center has to be navigated through to get to the bottom zone.
  23. 23. You can make this Work Limit the center content to Detail information or focusable items that don't scroll. This allows navigation through the zone quickly.
  24. 24. Google Recommends Vertical Zones
  25. 25. Create Quick Navigation Keys ● Provide ways to Navigate quickly through long lists. ● Provide ways to get back to the top of a list quickly. ● To get to the bottom quickly. ● Break Long Lists into separate screens. ● Provide Filtering/Search to narrow scope of items. ● Devices may have Bluethooth enabled keyboards or remotes with keybads connected.
  26. 26. Remember to Focus
  27. 27. Focus Focus will be the most important and time consuming aspect of your app. Getting Focus and the navigation around on screen focusable items is just as important if not more important than the look of the app. That great tablet embeddable card layout may not work as well with a Remote or D-Pad.
  28. 28. Avoid the Card Design with Embeddable Clickable Items.
  29. 29. Avoid the Embedded Clickable Item If you do this, make sure a person can navigate to it! There is no touch screen, and if they have to resort to a mouse pointer you have failed in your design and user experience.
  30. 30. Avoid Horizontal Scroll with Side Menu (There is an exception)
  31. 31. Avoid Search at top of Page, Place it in Left Nav Bar or Sliding Menu
  32. 32. Horizontal Zone Pattern
  33. 33. Horizontal 2 Zone Pattern
  34. 34. Horizontal Two Zone, Horizontal Grid Scroll View
  35. 35. Horizontal 3 Zone Pattern
  36. 36. Horizontal 3 Zone. Zone 2 and 3 are Side Scrolling
  37. 37. Avoid Content that Scrolls Vertically in Zone 2! In general avoid vertical scrolling with horizontal layouts.
  38. 38. Horizontal Zone Pattern With Sliding Menu
  39. 39. Horizontal 3 Zone with Sliding Menu
  40. 40. Vertical Zone Pattern The Good and the Ugly
  41. 41. Good Use of 3 Zone Vertical Layout
  42. 42. Use Vertical Scroll Grid View with Side Menu / Left Nav Bar Fewer clicks to get to the Side Content
  43. 43. Avoid Vertical and Horizontal Scrolling When in Content Zone don't scroll both directions.
  44. 44. Top Items Hard to get too. Due to Vertical scrolling center content.
  45. 45. Left Nav Bar hard to get to due to Horizontal Scrolling content
  46. 46. New Plex has same issue. Horizontal and Vertical Scroll content
  47. 47. Text and Icons ● Provide large readable fonts. ● Screen space is at a premium. Even at 1920x1080p. – User is sitting about 10ft away so need to make text and fonts legible from that distance. – Set up your Google TV development device from that distance.
  48. 48. Tips for Developing and Testing
  49. 49. AndroidManifest.xml ● <uses-feature android:name="android.hardware.touchscreen " android:required="false" /> ● Allows for the Play Store to allow the app to be installed on a Android TV device. ● <uses-sdk android:minSdkVersion="13"/> – For Honeycomb Google TV devices.
  50. 50. General UI Consideration ● TVs are always at least layout-large and layout- landscape-notouch resources. ● Drawables are HDPI resolution or higher. ● TV's are always Landscape. ● Darker themes are easier to view than lighter. ● TV Apps should be Full Screen Apps. The app will be used on the largest most popular device in the house. Give it that special treatment. ● Keep your design consistent. Stick with either Vertical or Horizontal pattern throughout the app. Easier for user to learn. If changing the pattern make it a user choice to do so (i.e. multiple layouts)
  51. 51. Emulator Use a Nexus 7 screen resolution. Also use the Google TV Add On. You may want to use a Nexus 10 emulator to test for XLarge displays. Use Intel Images (Much faster) Enable D-Pad with Google TV Add On.
  52. 52. Remember to Focus android:focusable="true" android:focusableInTouchMode="true" android:descendantFocusability="afterDescendants" android:nextFocusDown="@+id/mainGalleryMenu" android:nextFocusUp="@+id/menu_button" android:nextFocusRight="@+id/mainGalleryMenu" android:nextFocusLeft="@+id/mainGalleryMenu"> ● View.requestFocus() ● View.requestFocusFromTouch() ● View.requestFocus(int direction) ● Remember to specifically set focus when hiding and showing off screen views (i.e Sliding Menu Drawers)
  53. 53. Dog Food your App ● Get an Android Smart TV, Amazon Fire TV, or OUYA device and test your app there. – Screen resolutions will vary due to Overscan ● Use your own App. If you get frustrated, others will. ● Test both for Touch and for various controller inputs. Remote, Game Controller, Voice – Not all Remotes are created equal – Not all Game Controllers are mapped the same.
  54. 54. Avoid Proprietary Extensions ● Avoid using undocumented APIs. You'll back yourself into a corner. ● Consider supporting older Google TV devices. You can survive in Honeycomb. Unless..... – You require NDK support. Then target at least ICS devices. – Compatibility library works well when needed. Most native Android views D-Pad friendly. – Plenty of Open source widgets and libraries that can be used. Adds negligible size. If necessary use ProGuard to remove extraneous classes.
  55. 55. KeyCode Events ● Android supports a wide variety of Media Key Codes – Play, Skip Forward, Pause, Stop, Skip Back ● Channel Up and Channel Down make good Page Up and Page Down alternatives for quick navigation. ● Remember many Android TVs do have keyboards in the remote. Provide keyboard short cuts for your app.
  56. 56. Context Menus ● Use Context Menus to provide context sensitive information. – Don't use the Action Bar especially with Grid or Scrollable contentl. Prefer LeftNav pattern. – Beware of the dreaded onItemLongClick bug with Remotes and Game Controllers. It'll fire both Click and Long Click events. ● Give option to map Menu key to context menu ● Provide alternatives to bring up context menu ● Don't embed your context menus into clickable drop down menus in cards or list items!!! – Users need to reach for mouse or touch pad. Automatic failure at this point.
  57. 57. Performance ● Use Animations sparingly – TV Devices are typically slower than Phones/Tablets – Can appear to slow down the app. ● Becareful of views that always fire an OnSelect event. Design views that can ignore on select during fling operations. ● Network is always on, less concern about wifi usage and consumption. ● Do implement caches, devices still have limited storage
  58. 58. Open Source Widgets that Work well for the TV
  59. 59. Android-Universal-Image-Loader Helps with Cache Images and Loading Images in the Background Highly configurable. https://github.com/nostra13/Android- Universal-Image-Loader
  60. 60. TwoWayGridView Provides a horizontal scrolling grid. Child views don't get focus. Minor bug. https://github.com/jess-anders/two- way-gridview
  61. 61. Android-MenuDrawer https://github.com/SimonVT/android- menudrawer ● Position along all four edges. ● Supports attaching an always visible, non- draggable menu (i.e. Left Nav Bar) ● Can wrap entire window or specific content ● Allows the drawer to be opened by dragging the edge, the entire screen or not at all. ● Can be used in XML layouts. ● Indicator that shows which screen is currently visible.
  62. 62. Serenity Logo Designed By
  63. 63. Thanks To ● Spiderfly Studios – for Logo and some graphic design work – http://www.spiderflystudios.com ● Google TV Friends for initial promotion of the app and helping get the word out. ● Stackoverflow community for the many helpful tips

×