Ten Essential Tips For Making a Great Google TV Site

Google TV is nearly upon us and with it comes the “promise” of enhanced, interactive television.

The convergence of TV and the world wide web will create rich, new media experiences for a variety of users. It also demands a new design aesthetic for making the web work in concert with the television. Having spent more than 10 years building over a dozen different types of Internet/TV convergence products, I’ve probably seen more failed attempts at convergence than the sum total of all industry successes. In order to help prevent as much future fail, and to help Google TV developers deliver engaging content in beautiful ways, here are the Top Ten Tips For Making a Great Google TV “Site” (which shouldn’t be the way it works to begin with, but we’ll talk more about that some other time).

10 Avoid Input Fields

Asking users to input text or other information in designated fields makes sense for traditional or mobile websites. Inputting information through a QWERTY device does not translate well to a living room environment (despite Google insisting on a keyboard). Although Google TV will include the ability to enter text via a keyboard, the average user doesn’t want to sit in her living room and feel like she is using a computer with a giant TV for a monitor. Accordingly, only display fields when utterly necessary for input, use buttons and controls whenever possible.

9 Incorporate Animated/Moving Backgrounds

We don’t think much about static backgrounds on the web, but they will look cold and alien when displayed on your television. When was the last time your TV stopped moving (hint: never)? Bingo – consumers’ eyes are inherently expecting motion on their TV – all the time. Google TV developers should incorporate motion as much as possible in their designs. The animated backgrounds of TiVo and the XBOX 360 should serve as examples of what to do correctly here.

8 No Tiny Fonts

Trying to read 10 point Garamond from fourteen feet away seems like a recipe for disaster. Keep the text large, clear and legible. Tip: Google’s specs are pretty good here, pls follow.

7 Use The Entire Screen

Websites and smart phones give us grids and galleries of granular information. Televisions use the entire viewing area. Photos, videos and other GTV content should be big and bold. Information and content needs to fill the entire screen as much as possible.

6 Site Navigation Should Be Via Remote

I’ve seen a few Google TV (and other TV Apps) that have on-screen “Next” or other buttons which imply the user clicks on them to proceed – instead the user should simply click the “right arrow” on their remote (as an example). For a more detailed example, if you are making a photo-viewing app, the click of a right arrow on the remote should scroll through photos on Google TV. Developers should not make users click on tiny on screen buttons or NEXT icons with a mouse or pointer. If the site navigation is difficult or unintuitive, users will abandon the site, no matter how rich the content. Users will be seeking out the apps that “feel” most natural in their TV environment.

5 Google TV CANNOT Be Your Website Only Way Bigger

Just because it’s a 50″ screen doesn’t mean people are sitting a foot away from it. Furthermore, websites are meant for a specific type of “lean forward” interaction, and even a keyboard + Google TV in the living room doesn’t change that.

4 Performance is Critical

TV is instant. It is on demand. It is media made to order right now. Users will have little patience for loading screens or lagging content. Keeping content delivery fast will keep couch potatoes happy.

3 Colors

The use of color is critical when designing for television. Google makes some smart recommendations for Google TV Developers below:

TV screens have higher contrast and saturation levels than computer monitors. Follow these guidelines when working with solid colors:

• Use pure white (#FFFFFF) sparingly. Pure whites cause vibrancy or image ghosting in TV displays. Instead use #F1F1F1 or 240/240/240 (RGB).
• Bright whites, reds, and oranges cause particularly bad distortion.
• Be conscious of various display modes that TVs may have. These include Standard, Vivid, Cinema/Theater, Game, etc. Be sure to test your webpages in all these modes.
• Be conscious of using large spanning gradients, it may result in banding if not properly tested.
• Test your website on lower quality displays which may have poor gamma and color settings.

2 Assume the User Has a Computer

And a laptop and an iPhone and a netbook and an android and an iPad. With them. At all times. Users will incorporate Google TV into their media consumption habits and make the service coexist with other devices and habits they have developed. GTV is not meant to replace computers and smart phones, it is meant to compliment them. The best apps will incorporate off-screen interactions via other environments. Think about how to embrace and extend, not replace, as you’ll likely just make a worse experience that was unnecessary to begin with.

1 KISS: Keep it Social, Stupid

In North America, watching television is typically a communal activity with many different people watching the same screen. Whether it is the big game or family movie night, the living room attracts different ages and genders to the same space. Google TV usage models should be geared for groups gathered around the interactive screen. Apps that don’t consider a multi-user experience will be surpassed by those who figure this out.

As many of our readers know, I’m very bearish on Google TV 1.0 (but they will probably do well enough by 3.0, right Microsoft?). But the thing that’ll truly sink the ship is a series of terrible, PC-like experiences blown up onto plasmas in the living rooms. Techies might enjoy, but the masses will reject, and go to simpler solutions. Google TV users want to engage interactive content in new ways but have the experience still feel like the television they know and love. The challenge for Google TV developers is to present a new media experience to the masses and have it feel as familiar as the barcalounger.

UX Fundamentals: Don’t Turn Ten Steps Into Two

OOBE Fail

As product design consultants, we love simplicity. While many in tech think typical users are stupid, we disagree.  The problem is complex procedures often lead to difficulties with information retention and an increased likelihood for user error. This is particularly true during a user’s first experience with a product (aka “out of box experience” or “OOBE”).  User error during the OOBE  is more likely to give the user a negative view of the product and potentially cause them to not want to come back for a second try (or worse, abandon ship immediately and forever).  What happens to many products is the desire to simplify, which is good, but often to simplify merely by reducing the perceived quantity of steps, which is not so good.  To the right is our mocked-up screen shot (thanks again Balsamiq – we heart you!) of a not-to-far-from-real lousy OOBE.

To demonstrate, we’ll cook ourselves some chicken.  Yes, chicken (don’t worry, it’s pasture raised). Imagine you’re getting ready to cook your first chicken parmesan. You buy the ingredients, prep the kitchen, grab the cookbook and open it up to find this “easy” recipe with “only” 2 steps:

Step 1: Preheat oven to 375 degrees F and pour beaten eggs into a shallow dish or bowl while, in another shallow dish or bowl, mix together the grated Parmesan cheese and bread crumbs, then dip chicken breasts into beaten egg, then into bread crumb mixture to coat then, in a large skillet, heat oil over medium high heat then add coated chicken and saute for about 8 to 10 minutes each side and pour tomato sauce into a lightly greased 9×13 inch baking dish. Add chicken, then place a slice of Monterey Jack cheese over each breast, and bake in the preheated oven for 20 minutes or until cheese is completely melted.

Step 2: Serve

Anyone finish the chicken?  Nope.  Anyone think that was either (a) only two steps or (b) easy? Nope.

Now for industry-relevant context (we have no recipe book clients at this time, but hopefully are well on our way). Imagine that Step 1 was all contained on one pop-up window on your computer screen with a big “NEXT” button and, once you click that button there’s no way to go back. Such is the case with far too many OOBE’s in the consumer tech space.

In a way, cookbooks are actually a great template for building a good first time user experience. A good recipe informs the user up front what they will need to get through the process, and how long it will take.  It then walks the would-be chef through each step from prep to service.  While we won’t bother outlining the above recipe (we’re kinda over the chicken thing by now), I think anyone preparing dinner would’ve been a lot more comfortable with the “real” 7-10 steps it takes than the “faked simplicity” the 2-step version proposed.

Steps are steps – whether you have a web service or a physical product, you need to strive for simplicity, but make sure you are only combining logical steps. For a tech example, let’s say your product requires the following steps (yes, ours goes to 11):

1. Connect device to power and confirm
2. Connect device to your internet router and confirm
3. Confirm internet connection
4. Register device
5. Give your device a name
6. Sign up for an account
7. Confirm account information
8. Disconnect from router
9. Set up Wi-Fi connection
10. Confirm Wi-Fi connection
11. Execute first “core” action in product (share, create, store, etc)

There is no reasonable way to take these 11 steps down to 2, so don’t even try. Instead, assess the logical fits in the user’s setup process (read: not what our super-smart engineers think a user’s setup process is – remember the whole inmates and asylum thingie?). So the above 11 steps are shrinkable, but our version brings it to 5:

Step 1: Connect your device to power and your router – these are both physical connections, easily explained in a graphic
Step 2: Register your device and give it a name you’ll remember – we’d envision a screen with a single “name” field and a big button with the word “Register Now” on it
Step 3: Sign up for an account – choosing a user name and password are effectively commonplace
Step 4: Disconnect from your router, choose a Wi-Fi network and enter your password to connect. Once connected, you will see a confirmation window appear. – again, something that might sound wordy, but really simple to convey with simple imagery either in a quick start guide or on-screen
Step 5: Welcome to your home screen! Let’s get started…

The key here is to present a logical flow of actions and not overwhelm the user with 10 things to do on a single screen. By reducing the number of steps we have created a more immediately satisfying user experience. By not overloading the user with steps, we’ve reduced the opportunity for user error.

To sum up, here are our 7 high-level rules on steps:

1. Never combine steps just for the sake of reducing steps
2. Never combine 2 elements if one of them has an effect on the other (e.g. “Name Your Recording” should not be in the same step as “Create Your Recording”)
3. Find logical combinations and put them together, where logical combinations are from the user’s eyes, not from the developer/system side
4. Always inform the user of the total number of steps they will have to complete and what they will need to complete them  (for all of you hardware developers out there)
5. Less is not by definition better, in fact more is often better
6. Eliminate any step that is not essential to the process at hand. You want to get the user through your steps and into your product quickly. If the user doesn’t need to do some deep setup element before they can use the product, pull it from your setup flow and ask them to do it later.
7. Listen to Wolfie - the “right” number of steps are “just as many steps as are required. No more, no less.”

Take a hard look at the steps you’ve created for your first time user, apply our rules, and you should have happy users in no time (or, if you’ve read the wrong steps, you will have cooked a chicken parm). Either way – enjoy!

The 1st Rule of User Experience: Make ‘em Happy. Fast.

This is the first in a series of posts outlining the Stage Two philosophies and methods surrounding user interface and user experience design. Some of the rules laid out will cover gadgets, some will be more specific to web services, some will just be random observations or critiques of UI’s we run across. Hopefully these rules help you with the product/user experience work you are doing, and if you want to learn more about how we do what we do, get in touch.

Rule # 1: Make the User Feel Happy. FAST.

This first rule applies across the board to virtually any user experience, whether you’ve built the next big revolution in internet connected TVs or you’ve got an awesome Facebook app called “BP-ville” that lets you run a virtual oil company bent on world destruction – Rule #1 is “Make the user feel happy. FAST.”

Human beings, in general, have little tolerance for either uncertainty or delayed gratification. No matter how dumb we are (even the “smartest” of us can still be very dumb at times, particularly when it comes to our first encounters with new tech, or possibly when four cars hit an intersection simultaneously – in which case we advise to wait it out) we hold our inability to easily use a product against the product, not ourselves. We’ve all encountered gadgets, services, and apps that boast incredible utility but, once you get started, the enjoyment gets sucked out of the experience faster than an alien out of an airlock. We’re excited to get started, we jump in and…we don’t know what to do. Worse yet, we may have to go through 12 steps before we get to do anything cool.

Let’s take a look at Tumblr for an example of a good (although not perfect) “Rule #1” execution:

This is the 2nd step I hit when trying Tumblr for the first time. Look at it, it’s beautiful. I know exactly what I need to do, I am given a clear suggestion of what to upload (something simple that everyone has on their computer), and I’m directed to the exact button I should push to upload that first post. If I mouse over the other icons in that row, the suggested “first post” item changes. Check it out:

No muss, no fuss, I’m ready to go. They have even gone so far as to darken every part of their UI except for the actionable element.  This is great, I’m “rewarded” for using the product “correctly”, and am likely to feel “happy” as a result.  This happiness will help get me through the rest of the engagement with the product.

Unfortunately, the ease of use breaks down a little bit in the next step:

You might think that anyone could figure out what to do here – upload a photo, write a caption, then hit the “create post” button – but we’ve lost the nice walk-through element established earlier.  We don’t have the stats to prove it, but we’d wager a significant amount of user “fail” here, which will either result in lower conversion, subscription, stickiness, and overall use.

Here’s what we would have done: how about more “Tips” bubbles to lead the user all the way through the first time process? (eg. “Start by uploading a photo from your computer – just hit ‘Choose File’!” once that’s done, “Give your picture a funny or insightful caption!” and, finally, “Great! Click here to create your very first Tumblr post!”).

Assuming we successfully uploaded a photo and clicked “Create post”, what comes next?

OK, we understand why this is here, but (in accordance with Rule #1) the user should be taken to their personal Tumblr blog, shown their first post, and on that screen given the “Now customize your blog!” box (and have it appear in such a way that their first post is still visible). To make the experience even better, tell the user “Great first post! Now let’s customize the look and feel of your blog!”. It feels like coddling, but it really isn’t. People like to be reinforced, they like to know that they are doing things right, and they like immediate, visible rewards.

We could continue digging into Tumblr’s user experience (and, even though there is room for improvement, they must be doing something right – after all, Wordpress, the blogging standard, has even started incorporating some Tumblr elements), but we gotta save something for future posts. Just remember the key points below:

Rule #1: Make the user happy. FAST.

• Give the user immediate exposure to one of your core functions and make it dead-simple for them to execute that function within their first 3 steps.
• Don’t pile on useless steps, email validations, connecting social media accounts (unless that’s your product’s focus), etc right at the very beginning.
• Don’t forget positive reinforcement. We all grew up with gold stars, letter grades, compliments, and pats on the head. We’re hard-wired for the warm fuzzies we get from the words “Good Job!”. Embrace the warm fuzzies.

And for a final statement on the matter, happy users = returning users (might even = paying customers, if that’s your thing).