Trailer Player (Movies)

Size: px

Start display at page:

Download "Trailer Player (Movies)"

Marylou Casey
5 years ago
Views:

1 Connected TV Application for TiVo Trailer Player (Movies) UI Design Outline 10 Oct 2012

2 UI Design Connected TV application for TiVo Trailer Player 2 LAUNCH (APPS & GAMES) Entry 1 2 PIN check screen Loading screen Home 3 [optional advert in Featured carousel] Accordian Screen Main Menu Exit Featured [Bonus] Coming Soon In Cinemas On Demand View Content Video Player (Featured) Video Player (Bonus) Video Player (Coming Soon) Video Player (In Cinemas) Video Player (On Demand) Text Screen (Advert) Back (Transport buttons) green button link Back (Transport buttons) Back (Transport buttons) Back (Transport buttons) Back (Transport buttons) Back Rent Now Content Info 7 Info Menu Back Rent Now [Rent in HD] [Rent in SD] [Rent in 3D] [Rent Boxset] Watch Trailer View Content (Single Video) 8 Video Player (Single Trailer) Back (Transport buttons) TIVO BUY SCREEN Overview This TV app gives viewers easy access to video trailers, and helps them make purchase decisions based on those trailers. After a loading screen, the viewer is presented with a featured carousel, which has a mixture of on-demand and in cinema titles. The viewer may also choose between specific titles on other carousels displaying the latest trailers from what s soon to be released (Coming soon), from what s playing now in the cinema (In Cinemas), and the latest trailers in the VOD area (On Demand) from services like FilmFlex. On an OK press of a movie poster the trailer plays, which is part of a playlist of trailers. The viewer may interrupt the trailer at any time and get more information by pressing the green button, which leads to a content info screen. The featured playlist will employ a tooltip which lets the viewer know which movies are available to rent. The On Demand playlist will display the content info screen at the end of each trailer. [Need to review this to determine if the behaviour should stay the same as version 1, or if behaviour should be consistant in all playlists. Hopefully data from version 1 can be a guide]. If the trailer is a VOD title the viewer can press Rent Movie on a Content Info screen, and be taken to the TiVo Buy Screen to purchase the movie (and hence quit the app). If the movie is available in HD, the buttons Rent in HD and Rent in SD will be shown. Other options Rent in 3D and Rent Boxset may also be included. A viewer may naviagate to back to the playlist from the content info screen using the lower third carousel. The Featured carousel can display special advert banners, which trigger text screens or single videos, and extra carousels can also be added the Home Screen for larger special events (usually added just below the Featured carousel).

UI Design Connected TV application for TiVo Trailer Player 3 Launch

would not be appropriate for younger viewers, the app has parental

2 Loading Screen The loading screen displays random trivia flash

3 UI Design Connected TV application for TiVo Trailer Player 3 Launch point in Apps & Games 1 PIN Check As some content within the app would not be appropriate for younger viewers, the app has parental control through the entry of a PIN. 2 Loading Screen The loading screen displays random trivia flash cards. If the loading time is longer than 6 seconds, new trivia cards will be shown every 6 seconds thereafter.

Screen first loads on the first banner on

4 UI Design Connected TV application for TiVo Trailer Player 4 3 Home Screen The Home Screen first loads on the first banner on the Featured carousel. The carousel is a Brightcove playlist. 2 lines of informational text that pertain to what s in focus appear at top right. Optional advert banners can be added to the Featured carousel (not from Brightcove).

5 UI Design Connected TV application for TiVo Trailer Player 5 Above: navigating from carousel to carousel. Note the focus information at top right. Help instructions appear for buttons and carousel banners, and item numbers appear for carousel banners.

6 UI Design Connected TV application for TiVo Trailer Player 6 Optional carousels can be added, placed after the Featured carousel.

7 UI Design Connected TV application for TiVo Trailer Player 7 Home Screen Wireframes Component area Image Focus graphic Logo EXIT Button 1 title of poster in focus on carousel 1/10 availability information Background image Carousel Poster Poster Poster Poster Poster Poster Poster Vertical text menu Button 2 Button 3 Button 4 Button 5 Logo button description Background image EXIT Button 1 Button 2 Button 3 Button 4 Button 5 Vertical text menu

[Is tooltip going to be used throughout?

8 UI Design Connected TV application for TiVo Trailer Player 8 4 Video Player Green button tooltip appears and hides 2 seconds after lower third vanishes. [Is tooltip going to be used throughout?] Green button prompt persists during video.

9 UI Design Connected TV application for TiVo Trailer Player 9 Tooltip reappears when viewer interacts. Green button link can also be accessed with the right arrow and OK button. Above: navigating back to the Home Screen.

10 UI Design Connected TV application for TiVo Trailer Player 10 Video Player Wireframes Component area Image Focus graphic Logo section title now playing info current time / total time Upper Third graphic Full screen video Carousel Video progress bar Poster (80x120) Thumbnail info text Lower Third g button hint Logo section title now playing info current time / total time Upper Third graphic Full screen video button hint Button tooltip button hint nav and transport Video progress bar BACK LINK BUTTON Lower Third graphic Full screen video button hint

11 UI Design Connected TV application for TiVo Trailer Player 11 6 Text Screen Adverts in the Featured carousel lead to a simple Text Screen. Background is a graphic, overlaid with an interactive lower third. Rent Now would lead to a TiVo buy screen (quiting the app). [Are box sets accessible through the TiVo buy screen?]

12 UI Design Connected TV application for TiVo Trailer Player 12 Text Screen Wireframe Component area Image Focus graphic text block Background image Horizontal text menu Back Button 1 Lower Third graphic

13 UI Design Connected TV application for TiVo Trailer Player 13 7 Content Info Screen Every movie has at least 2 buttons: Back and Watch Trailer. If the film is available on demand there will be at least one Rent button. If it is available in only one format the rent button will read Rent Now. If available in other formats it will read, for example, Rent in HD, Rent in SD, Rent in 3D, Rent Boxset (in that order). Above: navigating the On Demand carousel

14 UI Design Connected TV application for TiVo Trailer Player 14 Note the currently playing video continues to play in the upper right corner. Said videos can be paused and skipped using the trick play buttons on the remote control.

15 UI Design Connected TV application for TiVo Trailer Player 15 Content Info Screen Wireframe Component area Image Focus graphic Logo section title Video (Pic in Graphic) Background image Poster (80% size) TITLE TITLE TITLE TITLE (Date)1 hr 38 min (15) Director name Release date Movie description movie description Movie description movie description Movie description movie description Movie description movie description Movie description movie description Movie description movie description Movie description movie description Movie description movie description Movie description movie description Movie description movie description Movie description Genre Actor s Name, Actor s Name, Actor s Name BACK Button 1 Button 2 Button 3 Button 4 Horizontal text menu Carousel Poster (80x120) Movie title of poster in focus on carousel

of a movie trailer triggered from the Content Info

As it s a single video there is no carousel on the

16 UI Design Connected TV application for TiVo Trailer Player 16 8 Video Player (single video) Above: example of a movie trailer triggered from the Content Info screen. As it s a single video there is no carousel on the video player. Also there is no green button link. The back button returns the viewer to the Content Info screen.

17 UI Design Connected TV application for TiVo Trailer Player 17 Video Player Wireframes (single video) Logo section title now playing info total time Upper Third graphic Full screen video button hint current time indicator total time indicator nav and transport Video progress bar BACK 0:00 / 0:00 Lower Third graphic Full screen video button hint

Remote Control Functions... i 1. Basic TV Controls Optional Menu Features My Services Options Set Preferences..

Contents Remote Control Functions... i 1. Basic TV Controls... 1 Change the channel... 1 View Current Channel Information... 1 Set Favorites... 2 View the Channel Guide... 3 Autotune... 4 Search for programs...