A heated discussion today at work has helped me to understand how to think about TV set usability. But before we get to the details, let’s first talk about the cars and computers.

The UX model of cars can be best described by “There is a button (lever, pedal, wheel) for that”. Whichever interaction you want to perform with the car, you would need to remember or find the corresponding button, lever, knob or pedal, and activate it. One button – one function. There are a number of other consumer devices that follow this model: water-, rice- and egg-boilers, coffee makers, oven, microwaves, dish and clothes washes, vacuum cleaners, bikes, bicycles, lifts, clocks,… This UX model works fine, as long as the number of functions supported by the device is relatively small.

Computers have a completely different UX model. You typically have some kind of avatar representing you in some kind of a virtual world. This avatar can be a mouse or Kinect pointer, selected (focused) menu item, text cursor, command line prompt, or just a virtual mirror of your fingertip. To operate the computer, it is neither necessary nor possible to find a button or lever correponding to each function. Instead, you have to observe the screen, understand how the displayed elements build a virtual world (and what kind of the world), and find out, how can you change this virtual world using your avatar(s) to achieve your goal. It might well be the case that this UX model is harder to learn and harder to use than the car UX model. But the computer UX model has a damn good reason for its existance: you see, computers can perform unlimited number of functions.  If we operated computers like cars, we’d need an unlimited number of buttons.

The TV sets are inbetween.

On the one hand, you have the buttons Power, V+, V-, P+, P-, Play, Rewind, etc, which directly correspond to exactly one specific function. On the other hand, you have a D-Pad that can be used to move the selected item in the virtual world of the on-screen display. And on the third hand, you have the color buttons, which are kind of some pre-historic extinct animals, an evolution stage between creatures living in water and creatures living on the earth. At any given time, each of them corresponds to a direct function, but their functional bindings change with the time, forcing users to think in modes.

Forcing users to think in modes is, for some reason, an extremely popular sport among many CE manufacturers, and two branches share the infamous first place: TV sets and electronic clocks. When your TV has booted, you are in the LIVE_TV_MODE, and your buttons do one thing. But if you press one of them, you are in LIVE_TV_WITH_PROGRAM_TITLE_SHOWN_MODE, and some of your buttons will do another thing. And if the channel you’re watching has a corresponding Hbb-TV offering, you will eventually be switched into LIVE_TV_WITH_RED_BUTTON_SHOWN_MODE, which is almost the same but the functionality of your red button is different. From that mode, you can optionally go to the HBB_TV_WITH_LIVE_TV_MODE, where some of your buttons will retain the functions of LIVE_TV_MODE, while the functions of the others will be entirely determined by the loaded web app… You’ve got the big picture. In reality, I could easily name at least 20 different modes of a modern TV set (and I suspect there are in reality many, many more hidden modes).

Now, imagine a remote control with a combined set of buttons, that is, the up arrow in the D-Pad is combined with P+ button, and the down arrow is combined with the P- button. In the LIVE_TV_MODE, their function is P+ or P- allowing you to switch to the next or to the previous channel. In some other modes like web apps or settings, they work as a normal D-Pad allowing you to move your selection up or down the screen.

Now. You want to display a vertical list of channels in an overlay above the live TV picture and allow the user to select and switch the channel. You have a channel number 1 and a channel number 2. Are you going to place #2 below #1 or above #1?

If you place #2 below #1, you remain in-sync with the common sense and the universal principle of writing from top to bottom in the most world cultures, as well as seeing “what comes next” imaginary below of “what was before”. In Chinese, they don’t even say next task or previous task, they say the task below and the task above. By doing this, you can also retain a sane scrolling direction, that is, when you select the last (the most bottom) channel from the list and then press the button to select the next one, your channel list will scroll upwards, and the next channel will appear from below.

There is the problem with this approach though. Remember, the down arrow on your remote control is combined with P-. So, now, if channel #2 is below channel #1, and you are staying on #1, to select the next channel you will have to press the down arrow / P- button! But, in the LIVE_TV_WITH_NO_CHANNEL_LIST_SHOWN_MODE, the P- button would switch you to the previous channel, not to the next one!

So, let’s break the rules and place the channel #2 over the channel #1 in our channel list. We stay on #1, now, to switch to #2 we must press up arrow, which is coincidentally the P+ button, exactly the same button we use in the LIVE_TV_MODE. Profit? If only life was so easy. Now, the scrolling direction is completely awkward – to see more channels, you have to start at the bottom and go up the list. What makes the things even worse is that the channel list is not the only list in the TV set UX. For example, you have a list of movies shared by your DLNA server and ready to be played. In that list, there is no reason to pay attention to P+/P- problem, so that you would develop it in a sane way – first items on the top, last items on the bottom. Now, how are you going to explain the user that there are two different kinds of the vertical list, and in the channel list he has to work his way up, while in the movie list he has to work his way down?

That’s crazy, it is like having right-side and left-side driving rules on the same road, like on this bridge connecting Hong-Kong (left-side rules) with China’s mainland (right-side rules):

Oh, and what was the reason of today’s heated discussion? Suppose you want to be user-friendly and want to provide a way to scroll a whole page in your lists, instead of slowly selecting one item after another. The right and left arrows of D-Pad should implement this page-wise scrolling.

Now, quick, answer: which horizonal arrow you have to press to display the next page in the channel list?