TVclick

Like TV but on the web

TVclick is a media player that was meant to closely map the use of a regular TV as the website only broadcast its own content.

They wanted something very simple: select a channel and the show start as soon as downloaded.

They also wanted to be able to share the channel with someone and to subscribe a channel and be informed of new shows or episodes in that channel.

As the player can be embedded on other website, each control and option must to be inside the player.

It was mostly a work on the layout as interaction model for media player are quite standard now.

I used an interface that hide itself when the cursor is idle and I came up with the idea of the channel stripe to maximize the screen real estate.

We are still iterating the design on minor behavior and the work in progress is to be seen at : tvclick.ru

1

The movie is playing.

There is no visible interface until two kinds of events :


a mouse mouvement or click.

a key press.

then the interface is displayed.

Then, the movie is still playing, the basic interface is displayed :


At the top, two clickable arrows to change channel.

At the bottom all the movie controls :

sound control, reverse & fast forward, play/pause, a timeline, fullscreen mode.


Two kinds of events can modify this interface:

a mouse click on the channel arrows

equivalent to a key press on up  or down arrows on the keyboard.

No events for a few seconds and the interface fade.

The movie fade and the screen shows a list of available channels.

If the Channel down button have been pressed, the channel list goes up for one item.

A still image of the next show is displayed until it loads.

A short phrase give an idea of the content of the show.


Four kinds of events can occur that modify the screen:

A channel change and the channel strip moves accordingly.

An episode change with a click on the new show button and we change the still image and summary.

A click on the "Share" button and we go to the share screen.

A click on the "sunscribe/unsuscribe" button and the  channel is labelled accordingly.

2

3

4

5

6

Intercation Model

When the beginning of the episode is loaded it starts to play in the preview window, after a certain amount of time with no event or a press on the play button the show goes fullscreen.

Back at the beginning :

The movie is playing.

There is no visible interface until two kinds of events :


a mouse mouvement or click.

a key press.

then the interface is displayed.

Button behavior

To suscribe a show, Click on the suscribe button.

the button become "unsuscribe" and a label "new show" appears if available.

If there is no new episodes, a label "suscribed is displayed.

Suscribe behavior

Also in case of a the episode displayed is new, it is notified by the color of the play button which become pink.

If there is other new shows available, a new button “next show” appears under the preview window.