If you can't read please download the document
Upload
david-carver
View
2.049
Download
1
Embed Size (px)
Citation preview
Serenity for Android
Design Tips for making your App work well on Android TV devices
Big Android BBQ 2013David Carver
Gplus: David Carver or Serenity for AndroidTwitter: @kingargylehttps://github.com/NineWorlds/serenity-android
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
Android TV what does it include?
Google TV devicesSony NS7/8, Vizio Co-Star, Asus Cube
Android TV sticks and HDMI devices
Tablets connected to the TV
Gaming consoles like the OUYA
Anything that supports the android.tv system feature!
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
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!!
Android TV apps suck because Developers let them suck!
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.
Plex on Google TV before Redesign
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.
Guidelines?We don't need no stinking guidelines!
Google TV 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)
Visually Appealing
Design with Visual AppealApps 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.
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.
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 to the bottom zone.
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.
Google Recommends Vertical Zones
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.
Remember to Focus
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.
Avoid the Card Design with Embeddable Clickable Items.
Avoid the Embedded Clickable Item
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
Horizontal Zone PatternWith Sliding Menu
Horizontal 3 Zone with Sliding Menu
Veritcal Zone PatternThe 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 10ft away so need to make text and fonts legible from that distance.
Set up your Google TV development device from that distance.
Tips for Developing and Testing
You must unlearn....what you have learned.
AndroidManifest.xml
Allows for the Play Store to allow the app to be installed on a Android TV device.
For Honeycomb Google TV devices.
General UI Consideration
TV's are always at least layout-large and layout-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)
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)
Emulator
Use a Nexus 7 screen resolution. Also use the Google TV Add On.
Use Intel Images (Much faster)
Enable D-Pad with Google TV Add On.
Dog Food your App
Get an Android Smart TV 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, VoiceNot all Remotes are created equal
Avoid Proprietary Extensions
Avoid using undocumented APIs. You'll back yourself into a corner.
You can survive in Honeycomb.NDK support comign with Jelly Bean update for Android TVs
Compatibility library works well when needed
Plenty of Open source widgets and libraries that can be used. Adds negligible size.
KeyCode Events
Android supports a wide variety of Media Key CodesPlay, 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.
Context Menus
Use Context Menus to provide context sensitive information.Don't use the Action Bar especially with Grid or Scrollable content
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.
Performance
Use Animations sparinglyTV 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
Open Source Widgets that Work well for the TV
TwoWayGridView
Provides a horizontal scrolling grid.
Child views don't get focus. Minor bug.
https://github.com/jess-anders/two-way-gridview
Menu-Drawer
Sliding Menu with easy configuration
Respects focus. Not all do.
https://github.com/SimonVT/android-menudrawer
Thanks To
Spiderfly Studios for Logo and some graphic design workhttp://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