As promised in my previous post about my Unity Phone Mockups, here’s a look at the TV mockups I’ve been playing with over the last week, along with the reasons behind some of the designs. Links to the source files for these mockups, as well as the mockups by other community contributors, can be found on this wiki page.
These aren’t as innovative as my phone mockups, partly because I didn’t have much of a reference to start from like I did with IOS and Android for phones. I have a DVR from my cable company, but no HTPC or other media center software.
The TV frame and choice of movie (Big Buck Bunny) came from Alan Bell’s template. I added a remote control to that, and added buttons as I found a need for them. In the mockups, I’ve highlighted the buttons you would use to interact with the given screen.
The basic concept was to overlay the Unity components when the user presses the Circle-of-Friends button on the remote, but to otherwise leave whatever they are watching full screen. On this mockup I used applications in the Launcher, and pressing the CoF would put the focus on them the same way Alt-F1 does on the desktop. You could then navigate through them using the arrow buttons on the remote, pressing OK to make your selection.
In this alternate mockup, I replaced the applications with Unity lenses, which I think makes more sense for a TV, since you will more often than not be interested in finding content, not selecting which application to run. Luckily Unity already supports both, so this is just a matter of what the default initial configuration should be, after that the user can put whatever they want in the Launcher.
For opening the dash I envision being able to double-tap the CoF button (or selecting a Lens). In fact, I would like to have this on desktop Unity, since I want quick access to the Launcher more often than I want the Dash. Once the Dash is open, you would use the remote’s arrow buttons to navigate through the items listed, again pressing OK to make your selection.
For accessing the Dash’s filters, I added the “context menu” button to the remote which, when pressed while on the Dash screen, will open the filter sidebar, letting you navigate through the filtering options using the remote’s arrows. Pressing the context menu button again would collapse the filter sidebar and return arrow navigation to the results table.
Likewise I added a Search button to the remote to send focus to the Dash’s search field and activate the on-screen keyboard. Text input from a remote like this will be cumbersome (unless we come up with a monstrosity of a remote like this), so we’ll want to avoid the need for this as much as possible. But since the Dash is highly search-focused, I felt that there needed to be a mockup for this aspect.
This is a screenshot of Shotwell taken from my laptop and scaled to fit a resolution it might be at on a TV screen. I did this to demonstrate how an existing desktop app might look and work without modification on a 10 foot interface. Here again I added a new button to the remote, which is a kind of next/last panel or, more accurately, the tab key on a desktop keyboard. This lets you navigate through widgets and panels on a traditional application like you can using the tab key on a desktop.
I think with some small enhancements to GTK and QT, we can allow application developers to make navigating apps this way easier. Alternately, a new library similar to uTouch could act as an interface between remote control input and applications.
Someone pointed me to YouTube’s LeanBack interface, an HTML5 webapp designed for 10 foot displays. This is a very promising way to deliver applications and contents to internet connected TVs, especially if we ship with a fully functional, HTML5 supporting web browser optimized for control with a remote.
Finally I wanted to show off Media Explorer, a media center application built on the same Gnome technologies as the rest of the Ubuntu desktop.
Feedback
Just like I did in my last post, I’d like to solicit discussion and feedback on these mockups, and also ask what other scenarios/mockups you would like to see. You can either leave comments here, or join the live conversation in #ubuntu-tv on Freenode.