In the previous article we explored some of the difference in developing for Google TV compared to the Android phones and tablets that we’ve become accustomed to. In this concluding article in this series, we’ll have a look at some UI & UX considerations that we need to take in to account when designing apps for Google TV.
So what are the main differences between designing a UI for touch and D-pad? From a development perspective the only real concern is that control states are slightly different. For D-pad (and trackball) we need to think about ‘focus’. Consider a simple button: in touch mode we need to think of giving the user some visual feedback that the button has been pressed. We can achieve this using the ‘clicked’ state in a state list drawable (for more on state list drawables see this article). For D-pad we need to also show which control currently has focus. The focus can be moved around using the direction keys, and a ‘click’, is performed with the fire / enter key. One again, state list drawables allow us to provide a separate drawable for fo the focused state. If you are using the stock controls in Android then you need do nothing as they already support focused states, but if you are applying your own style through a state list drawable then you’ll need add a focused state.
Although the programming ramifications are relativity minor and easily addressed using state list drawables, a little thought needs to be given to designing your layouts. For a touch UI we generally make our controls relatively large to give the user a large target to hit with their finger, and with generous spacing between controls to minimise the chance of the user hitting the control next to the one they’re aiming for. In other words: we need to design our layouts according to Fitts’ Law. On the face of it, Fitts’ Law seems irrelevant when it comes to D-pad, yet we must still think of our user. Not everyone will be using your app on a 50″ TV so making your controls too small will make them difficult to see on a smaller TV. In the Google documentation reference is made to the 10 foot UI, meaning that generally the user will be positioned 10 feet away from the screen. My general rule is to try to match the sizes of the standard controls. Some extremely talented UI/UX designers have worked on Android and Google TV and they will have done a lot of analysis of the 10 foot UI, so why not take advantage of what they’ve already done?
Many Android developers will be fortunate enough to have not developed software for older devices and feature phones which do not have touchscreens. (Those that have will understand why I used the word “fortunate” in the last sentence!) As a consequence, they may not be immediately aware of the need to keep a D-pad based UI as simple as possible. With touchscreens we have become used to some quite elaborate UIs some of which will simply frustrate the D-pad user because there are too many controls on the screen. The problem arises because navigating between controls requires the user to use the direction keys and the more controls there are on the screen then the more clicks may be required to get to the control the user wants. The more clicks, the higher the possibility that the user will get frustrated and give up. At the very least you should group the most common controls together and ensure that only one or two clicks are required to get to that group.
Getting a D-pad UI right can be something of a black art for anything but relatively simple UIs. However, this is a perfect place to take advantage of in-app analytics which can help you to understand the usage pattens. Monitoring which features of your app are used most often can help you better understand how to organise your UI to keep the popular features easily accessible. Also it can help you to monitor your UI changes. If you move a specific feature within your UI and usage of that feature changes following a change to your UI then you should be able to spot it.
That concludes our overview of developing for Google TV. Hopefully it has provides some insight in to this platform and how it differs from traditional Android development for phones and tablets. For further reading the official Google TV Developer site has lots of information.
© 2012, Mark Allison. All rights reserved.
Copyright © 2012 Styling Android. All Rights Reserved.
Information about how to reuse or republish this work may be available at http://blog.stylingandroid.com/license-information.
1 Comment