Connected TV Applications for TiVo. Project Jigsaw. Design Draft. 26 Feb 2013

Size: px

Start display at page:

Download "Connected TV Applications for TiVo. Project Jigsaw. Design Draft. 26 Feb 2013"

Isabel Robbins
5 years ago
Views:

1 Connected TV Applications for TiVo Project Jigsaw Design Draft 26 Feb 2013

2 UI Design Connected TV application for TiVo Project Jigsaw 2 Overview LAUNCH POINT The goal of Project Jigsaw is to create a library of Flash components that will allow VMDS to publish TiVo apps quickly and efficiently, and be able to report the user activity of the app back to the client. Once the components are built, assembly of new apps will start with confirming what media a client wants to publish. Content falls under 3 categories: 1) Text blocks 2) Photos 3) Videos A text block could be part of a product page or a screen listing Terms and Conditions. Each app must have at least one Content Display Screen, which would show either text, photos, or videos. Jigsaw apps have 3 kinds of screens: 1) Support Screens / Pop-Ups 2) Content Selection Screens 3) Content Display Screens A small app (S) might use only one Content Display Screen and a splash screen as a Support Screen to have a space for branding. A medium-sized app (M) would likely have one Content Selection Screen (a Home Screen) linking to a set of Content Display Screens. The first screen is a loading screen with minimal branding, and the Home Screen is fully branded. A large app (L) might be one that has a lot of content organised into categories, and therefore might need extra selection screens. Screens are assembled from a variety of widgets: 1) Content Display Windows 2) ground graphics 3) Text Buttons 4) Buttons 5) Progress Bars 6) Button Hints 7) Text Indicators Entry Entry Content Selection Content Display Entry Content Display Splash Screen LAUNCH POINT Loading Screen Home Screen LAUNCH POINT Loading Screen S M Support screens could be loading or splash screens. A set of linked screens constitutes an app. The structure and size of an app is determined by the amount of content the app needs to display. The more content, the more selection screens are required to keep the content orgainised and accessable. Button groups form these 2 common widgets: 1) Menus: Text Buttons in rows or columns (static and scrolling) 2) Carousels: Buttons arranged in rows (static or wrapping) Widgets assembled in different combinations form the screens needed to accomodate a wide variety of content. Content Selection Content Display List Screen Home Screen List Screen List Screen L

UI Design Connected TV application for TiVo Project Jigsaw 3 Suggested First Phase The proceeding pages outline all the variables that should be included in order to create a robust and flexible

Here s a suggested first phase that will get the most value in the shortest time.

For example, if the app only needs to show 5 videos, only the splash screen and video player need to be used (the videos would auto-play, and the video player would have an exit in place of the usual

It would be efficient if the on the home screen triggering the slideshow would automatically turn off with it. are taller than the screen the text can be displayed using paged navigation.

Entry Content Selection Content Display LAUNCH POINT Splash / Loading Screen Home Screen Video Player Slideshow Player Text Block Display Text blocks may first be rolled out as images pre-formatted

3 UI Design Connected TV application for TiVo Project Jigsaw 3 Suggested First Phase The proceeding pages outline all the variables that should be included in order to create a robust and flexible template that can handle almost any collection of videos, photos, or text layouts on the TV screen. To develop it fully would be a valuable investment, but also admittedly time-consuming. Here s a suggested first phase that will get the most value in the shortest time. The first phase has a loading/spash screen, a home screen, and 3 content display screens (1 for each content category). Screens can be turned off for smaller apps. For example, if the app only needs to show 5 videos, only the splash screen and video player need to be used (the videos would auto-play, and the video player would have an exit in place of the usual back ). Another instance would be: if there is a product page (text block display) and 3 videos, the slideshow player would be turned off. It would be efficient if the on the home screen triggering the slideshow would automatically turn off with it. are taller than the screen the text can be displayed using paged navigation. See page 13). Styling, colours, and UI graphics should be controlled externally from the SWF, so that they can be changed quickly without republishing. Entry Content Selection Content Display LAUNCH POINT Splash / Loading Screen Home Screen Video Player Slideshow Player Text Block Display Text blocks may first be rolled out as images pre-formatted in Photoshop, but it would be more efficient and desirable if text screens could be completely driven dynamically by the content itself. One strategy might be to have Flash intelligently choose a text screen layout based on the content (eg. if each text block in a series is less than the height of the TV screen and there only are a few pages, it can be displayed as using tabbed navigation. Otherwise, if any of the text blocks Example video player Example loading screen Example slideshow player Example home screen Example text screen

4 UI Design Connected TV application for TiVo Project Jigsaw 4 Content Selection Screens Main Menus (Home Screens) Secondary video background static background static image s (static background) wrapping carousel (static background) vertical menu (static background) static menu menu item listing menu item listing menu item listing scrolling menu on bu on bu on bu on bu menu item listing menu item listing menu item listing menu item listing menu item listing menu item listing menu item listing scrolling menu with static submenu on bu on bu on bu on bu Picture Menus Carousel Menus List Screens Content Selection Screens are made of 2 kinds of elements: 1) grounds 2) Buttons Buttons come in these types: 1) Text Buttons 2) Buttons s are arranged in rows. Text Buttons can be both: 1) Horizontal 2) Vertical From these variables we get a variety of arrangements, such as scrolling menus and carousels. grounds and s can be: 1) Static 2) Moving For example, a background can be static image or moving as a video. Button sets are static if they fit on the screen, moving if they don t. If a row of text s, for instance, is not as wide as the screen the menu will be static and the focus will move from to, but if the row of text s is wider than the screen the menu will scroll and the focus will remain in place. s that span the width of the screen will form wrapping carousels where the focus remains in the centre. Menus can also have submenus, in which case the menu moves side to side and the submenu is static. These combinations form a variety of Picture Menus, Carousel Menus (both used for Home Screens/Main Menus) and List Screens.

5 section title now playing info live section title now playing info current time / total time section title now playing info live section title now playing info live section title now playing info current time / total time timestamp section title now playing info current time / total time section title now playing info current time / total time section title now playing info current time / total time Thumbnail info text section title now playing info current time / total time Thumbnail info text section title now playing info current time / total time section title now playing info current time / total time UI Design Connected TV application for TiVo Project Jigsaw 5 Content Display Screens Single Item Multiple Items Menu with link Menu Carousel with link amet urna accumsan eu nisi iaculis et feugiat quam sagittis. Mauris vel erat bibendum dui tempor convallis. Phasellus scelerisque rhoncus urna, vel scelerisque elit auctor vitae. Quisque ut lobortis est. Nam gravida ligula a tellus consequat varius. Fusce quis dolor elit, nec hendrerit turpis. Quisque dictum massa vel tortor semper vel faucibus enim vulputate. Proin dui diam, volutpat vitae egestas nec, tempor vitae urna. Vivamus vel dolor justo, sit amet lacinia metus. Phasellus aliquet ipsum quis nisl adipiscing quis laoreet neque sagittis. Fusce justo massa, bibendum ac molestie vel, rutrum ut leo. Morbi scelerisque, urna non consequat adipiscing, nibh velit viverra tortor, quis sollicitudin lorem lectus et sem. Proin pellentesque sem a eros tristique in lobortis velit facilisis. Morbi gravida fermentum dapibus. Vestibulum adipiscing, dolor ut faucibus accumsan, tellus ligula scelerisque nisl, eu congue magna ipsum quis quam. Proin rhoncus porta neque nec rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eu risus urna. Button 1 Button 2 Button 3 Button 4 Button 5 Text Block Display amet urna accumsan eu nisi iaculis et feugiat quam sagittis. Mauris vel erat bibendum dui tempor convallis. Phasellus scelerisque rhoncus urna, vel scelerisque elit auctor vitae. Quisque ut lobortis est. Nam gravida ligula a tellus consequat varius. Fusce quis dolor elit, nec hendrerit turpis. Quisque dictum massa vel tortor semper vel faucibus enim vulputate. Proin dui diam, volutpat vitae egestas nec, tempor vitae urna. Vivamus vel dolor justo, sit amet lacinia metus. Phasellus aliquet ipsum quis nisl adipiscing quis laoreet neque sagittis. Fusce justo massa, bibendum ac molestie vel, rutrum ut leo. Morbi scelerisque, urna non consequat adipiscing, nibh velit viverra tortor, quis sollicitudin lorem lectus et sem. Proin pellentesque sem a eros tristique in lobortis velit facilisis. Morbi gravida fermentum dapibus. Vestibulum adipiscing, dolor ut faucibus accumsan, tellus ligula scelerisque nisl, eu congue magna ipsum quis quam. Proin rhoncus porta neque nec rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eu risus urna. Single text block with a back amet urna accumsan eu nisi iaculis et feugiat quam sagittis. Mauris vel erat bibendum dui tempor convallis. Phasellus scelerisque rhoncus urna, vel scelerisque elit auctor vitae. Quisque ut lobortis est. Nam gravida ligula a tellus consequat varius. Fusce quis dolor elit, nec hendrerit turpis. Quisque dictum massa vel tortor semper vel faucibus enim vulputate. Proin dui diam, volutpat vitae egestas nec, tempor vitae urna. Vivamus vel dolor justo, sit amet lacinia metus. Phasellus aliquet ipsum quis nisl adipiscing quis laoreet neque sagittis. Fusce justo massa, bibendum ac molestie vel, rutrum ut leo. Morbi scelerisque, urna non consequat adipiscing, nibh velit viverra tortor, quis sollicitudin lorem lectus et sem. Proin pellentesque sem a eros tristique in lobortis velit facilisis. Morbi gravida fermentum dapibus. Vestibulum adipiscing, dolor ut faucibus accumsan, tellus ligula scelerisque nisl, eu congue magna ipsum quis quam. Proin rhoncus porta neque nec rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eu risus urna. More Single text block with a back and link Multiple text pages with tab style navigation Headline Headline Headline Headline Headline 1 / 25 Headline Player amet urna accumsan eu nisi iaculis et feugiat quam sagittis. Mauris vel erat bibendum dui tempor convallis. Phasellus scelerisque rhoncus urna, vel scelerisque elit auctor vitae. Quisque ut lobortis est. Nam gravida ligula a tellus consequat varius. Fusce quis dolor elit, nec hendrerit turpis. Quisque dictum massa vel tortor semper vel faucibus enim vulputate. Proin dui diam, volutpat vitae egestas nec, tempor vitae urna. Vivamus vel dolor justo, sit amet lacinia metus. Phasellus aliquet ipsum quis nisl adipiscing quis laoreet neque sagittis. Fusce justo massa, bibendum ac molestie vel, rutrum ut leo. Morbi scelerisque, urna non consequat adipiscing, nibh velit viverra tortor, quis sollicitudin lorem lectus et sem. Proin pellentesque sem a eros tristique in lobortis velit facilisis. Morbi gravida fermentum dapibus. Multiple text pages with carousel navigation amet urna accumsan eu nisi iaculis et feugiat quam sagittis. Mauris vel erat bibendum dui tempor convallis. Phasellus scelerisque rhoncus urna, vel scelerisque elit auctor vitae. Quisque ut lobortis est. Nam gravida ligula a tellus consequat varius. Fusce quis dolor elit, nec hendrerit turpis. Quisque dictum massa vel tortor semper vel faucibus enim vulputate. Proin dui diam, volutpat vitae egestas nec, tempor vitae urna. Vivamus vel dolor justo, sit amet lacinia metus. Phasellus aliquet ipsum quis nisl adipiscing quis laoreet neque sagittis. Fusce justo massa, bibendum ac molestie vel, rutrum ut leo. Morbi scelerisque, urna non consequat adipiscing, nibh velit viverra tortor, quis sollicitudin lorem lectus et sem. Proin pellentesque sem a eros tristique in lobortis velit facilisis. Morbi gravida fermentum dapibus. Vestibulum adipiscing, dolor ut faucibus accumsan, tellus ligula scelerisque nisl, eu congue magna ipsum quis quam. Proin rhoncus porta neque nec rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eu risus urna. Next 1 / 25 Multi-page text article with link to other text articles. These screens display 3 kinds of content: 1) Text blocks (that may include inline pictures) 2) Photos 3) Videos Photo Display More 1 / 25 2 states of single screen More They can display: Single photo with a back Single photo with a back and link Slideshow Player Slideshow Player, with carousel for slide selection Slideshow Player with link 1) Single Items 2) Multiple Items They employ at least one of these: 1) Menu 2) Carousel 3) Link Video Display 0:00 / 3:00 Single video with a back and transport controls Single video with a back, transport controls, and link More 0:00 / 3:00 Video Player 2 states of single screen Video Player, with carousel for video selection in a playlist More Video Player with link Menus and carousels can be used to navigate a screen or to jump to other screens, and link s tend to jump to a related screen in the app. Live video with a back

6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. bibendum dui tempor convallis. Phasellus scelerisque rhoncus urna, vel scelerisque elit auctor vitae. Quisque ut amet urna accumsan eu nisi iaculis et feugiat quam sagittis. Mauris vel erat bibendum dui tempor convallis. hendrerit turpis. Quisque dictum massa vel tortor semper vel faucibus enim vulputate. Proin dui diam, volutpat vitae egestas nec, tempor vitae urna. Vivamus vel dolor justo, sit amet lacinia metus. Phasellus aliquet ipsum quis nisl adipiscing quis laoreet neque sagittis. Fusce justo massa, bibendum ac molestie vel, rutrum ut leo. Morbi scelerisque, urna non consequat adipiscing, nibh velit viverra tortor, quis sollicitudin lorem lectus et sem. Proin pellentesque sem a eros tristique in lobortis velit facilisis. Morbi gravida fermentum dapibus. Vestibulum adipiscing, dolor ut faucibus accumsan, tellus ligula scelerisque nisl, eu congue magna ipsum quis quam. Proin rhoncus porta neque nec rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eu risus urna. Nam nec eros arcu, a eleifend diam. Etiam scelerisque leo nec odio venenatis et tempor urna pharetra. Proin ut risus felis. Curabitur convallis nibh in nunc volutpat laoreet. Maecenas facilisis orci eu justo iaculis lobortis. Mauris ultricies iaculis erat in viverra. Aliquam sed nibh at est tincidunt imperdiet quis vel lectus. Nulla quis rutrum eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas, turpis eget euismod aliquam, tortor leo aliquam lorem, sed gravida augue arcu quis ante. Vivamus at arcu in erat vulputate dapibus ut id massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas Lorem ipsum dolor sit amet, consectetur adipiscing elit. bibendum dui tempor convallis. Phasellus scelerisque rhoncus urna, vel scelerisque elit auctor vitae. Quisque ut amet urna accumsan eu nisi iaculis et feugiat quam sagittis. Mauris vel erat bibendum dui tempor convallis. hendrerit turpis. Quisque dictum massa vel tortor semper vel faucibus enim vulputate. Proin dui diam, volutpat vitae egestas nec, tempor vitae urna. Vivamus vel dolor justo, sit amet lacinia metus. Phasellus aliquet ipsum quis nisl adipiscing quis laoreet neque sagittis. Fusce justo massa, bibendum ac molestie vel, rutrum ut leo. Morbi scelerisque, urna non consequat adipiscing, nibh velit viverra tortor, quis sollicitudin lorem lectus et sem. Proin pellentesque sem a eros tristique in lobortis velit facilisis. Morbi gravida fermentum dapibus. Vestibulum adipiscing, dolor ut faucibus accumsan, tellus ligula scelerisque nisl, eu congue magna ipsum quis quam. Proin rhoncus porta neque nec rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eu risus urna. Nam nec eros arcu, a eleifend diam. Etiam scelerisque leo nec odio venenatis et tempor urna pharetra. Proin ut risus felis. Curabitur convallis nibh in nunc volutpat laoreet. Maecenas facilisis orci eu justo iaculis lobortis. Mauris ultricies iaculis erat in viverra. Aliquam sed nibh at est tincidunt imperdiet quis vel lectus. Nulla quis rutrum eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas, turpis eget euismod aliquam, tortor leo aliquam lorem, sed gravida augue arcu quis ante. Vivamus at arcu in erat vulputate dapibus ut id massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas Lorem ipsum dolor sit amet, consectetur adipiscing elit. bibendum dui tempor convallis. Phasellus scelerisque rhoncus urna, vel scelerisque elit auctor vitae. Quisque ut amet urna accumsan eu nisi iaculis et feugiat quam sagittis. Mauris vel erat bibendum dui tempor convallis. hendrerit turpis. Quisque dictum massa vel tortor semper vel faucibus enim vulputate. Proin dui diam, volutpat vitae egestas nec, tempor vitae urna. Vivamus vel dolor justo, sit amet lacinia metus. Phasellus aliquet ipsum quis nisl adipiscing quis laoreet neque sagittis. Fusce justo massa, bibendum ac molestie vel, rutrum ut leo. Morbi scelerisque, urna non consequat adipiscing, nibh velit viverra tortor, quis sollicitudin lorem lectus et sem. Proin pellentesque sem a eros tristique in lobortis velit facilisis. Morbi gravida fermentum dapibus. Vestibulum adipiscing, dolor ut faucibus accumsan, tellus ligula scelerisque nisl, eu congue magna ipsum quis quam. Proin rhoncus porta neque nec rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eu risus urna. Nam nec eros arcu, a eleifend diam. Etiam scelerisque leo nec odio venenatis et tempor urna pharetra. Proin ut risus felis. Curabitur convallis nibh in nunc volutpat laoreet. Maecenas facilisis orci eu justo iaculis lobortis. Mauris ultricies iaculis erat in viverra. Aliquam sed nibh at est tincidunt imperdiet quis vel lectus. Nulla quis rutrum eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas, turpis eget euismod aliquam, tortor leo aliquam lorem, sed gravida augue arcu quis ante. Vivamus at arcu in erat vulputate dapibus ut id massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas Lorem ipsum dolor sit amet, consectetur adipiscing elit. bibendum dui tempor convallis. Phasellus scelerisque rhoncus urna, vel scelerisque elit auctor vitae. Quisque ut amet urna accumsan eu nisi iaculis et feugiat quam sagittis. Mauris vel erat bibendum dui tempor convallis. hendrerit turpis. Quisque dictum massa vel tortor semper vel faucibus enim vulputate. Proin dui diam, volutpat vitae egestas nec, tempor vitae urna. Vivamus vel dolor justo, sit amet lacinia metus. Phasellus aliquet ipsum quis nisl adipiscing quis laoreet neque sagittis. Fusce justo massa, bibendum ac molestie vel, rutrum ut leo. Morbi scelerisque, urna non consequat adipiscing, nibh velit viverra tortor, quis sollicitudin lorem lectus et sem. Proin pellentesque sem a eros tristique in lobortis velit facilisis. Morbi gravida fermentum dapibus. Vestibulum adipiscing, dolor ut faucibus accumsan, tellus ligula scelerisque nisl, eu congue magna ipsum quis quam. Proin rhoncus porta neque nec rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eu risus urna. Nam nec eros arcu, a eleifend diam. Etiam scelerisque leo nec odio venenatis et tempor urna pharetra. Proin ut risus felis. Curabitur convallis nibh in nunc volutpat laoreet. Maecenas facilisis orci eu justo iaculis lobortis. Mauris ultricies iaculis erat in viverra. Aliquam sed nibh at est tincidunt imperdiet quis vel lectus. Nulla quis rutrum eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas, turpis eget euismod aliquam, tortor leo aliquam lorem, sed gravida augue arcu quis ante. Vivamus at arcu in erat vulputate dapibus ut id massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas Lorem ipsum dolor sit amet, consectetur adipiscing elit. bibendum dui tempor convallis. Phasellus scelerisque rhoncus urna, vel scelerisque elit auctor vitae. Quisque ut amet urna accumsan eu nisi iaculis et feugiat quam sagittis. Mauris vel erat bibendum dui tempor convallis. hendrerit turpis. Quisque dictum massa vel tortor semper vel faucibus enim vulputate. Proin dui diam, volutpat vitae egestas nec, tempor vitae urna. Vivamus vel dolor justo, sit amet lacinia metus. Phasellus aliquet ipsum quis nisl adipiscing quis laoreet neque sagittis. Fusce justo massa, bibendum ac molestie vel, rutrum ut leo. Morbi scelerisque, urna non consequat adipiscing, nibh velit viverra tortor, quis sollicitudin lorem lectus et sem. Proin pellentesque sem a eros tristique in lobortis velit facilisis. Morbi gravida fermentum dapibus. Vestibulum adipiscing, dolor ut faucibus accumsan, tellus ligula scelerisque nisl, eu congue magna ipsum quis quam. Proin rhoncus porta neque nec rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eu risus urna. Nam nec eros arcu, a eleifend diam. Etiam scelerisque leo nec odio venenatis et tempor urna pharetra. Proin ut risus felis. Curabitur convallis nibh in nunc volutpat laoreet. Maecenas facilisis orci eu justo iaculis lobortis. Mauris ultricies iaculis erat in viverra. Aliquam sed nibh at est tincidunt imperdiet quis vel lectus. Nulla quis rutrum eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas, turpis eget euismod aliquam, tortor leo aliquam lorem, sed gravida augue arcu quis ante. Vivamus at arcu in erat vulputate dapibus ut id massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas Lorem ipsum dolor sit amet, consectetur adipiscing elit. bibendum dui tempor convallis. Phasellus scelerisque rhoncus urna, vel scelerisque elit auctor vitae. Quisque ut amet urna accumsan eu nisi iaculis et feugiat quam sagittis. Mauris vel erat bibendum dui tempor convallis. hendrerit turpis. Quisque dictum massa vel tortor semper vel faucibus enim vulputate. Proin dui diam, volutpat vitae egestas nec, tempor vitae urna. Vivamus vel dolor justo, sit amet lacinia metus. Phasellus aliquet ipsum quis nisl adipiscing quis laoreet neque sagittis. Fusce justo massa, bibendum ac molestie vel, rutrum ut leo. Morbi scelerisque, urna non consequat adipiscing, nibh velit viverra tortor, quis sollicitudin lorem lectus et sem. Proin pellentesque sem a eros tristique in lobortis velit facilisis. Morbi gravida fermentum dapibus. Vestibulum adipiscing, dolor ut faucibus accumsan, tellus ligula scelerisque nisl, eu congue magna ipsum quis quam. Proin rhoncus porta neque nec rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eu risus urna. Nam nec eros arcu, a eleifend diam. Etiam scelerisque leo nec odio venenatis et tempor urna pharetra. Proin ut risus felis. Curabitur convallis nibh in nunc volutpat laoreet. Maecenas facilisis orci eu justo iaculis lobortis. Mauris ultricies iaculis erat in viverra. Aliquam sed nibh at est tincidunt imperdiet quis vel lectus. Nulla quis rutrum eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas, turpis eget euismod aliquam, tortor leo aliquam lorem, sed gravida augue arcu quis ante. Vivamus at arcu in erat vulputate dapibus ut id massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas Lorem ipsum dolor sit amet, consectetur adipiscing elit. bibendum dui tempor convallis. Phasellus scelerisque rhoncus urna, vel scelerisque elit auctor vitae. Quisque ut amet urna accumsan eu nisi iaculis et feugiat quam sagittis. Mauris vel erat bibendum dui tempor convallis. hendrerit turpis. Quisque dictum massa vel tortor semper vel faucibus enim vulputate. Proin dui diam, volutpat vitae egestas nec, tempor vitae urna. Vivamus vel dolor justo, sit amet lacinia metus. Phasellus aliquet ipsum quis nisl adipiscing quis laoreet neque sagittis. Fusce justo massa, bibendum ac molestie vel, rutrum ut leo. Morbi scelerisque, urna non consequat adipiscing, nibh velit viverra tortor, quis sollicitudin lorem lectus et sem. Proin pellentesque sem a eros tristique in lobortis velit facilisis. Morbi gravida fermentum dapibus. Vestibulum adipiscing, dolor ut faucibus accumsan, tellus ligula scelerisque nisl, eu congue magna ipsum quis quam. Proin rhoncus porta neque nec rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eu risus urna. Nam nec eros arcu, a eleifend diam. Etiam scelerisque leo nec odio venenatis et tempor urna pharetra. Proin ut risus felis. Curabitur convallis nibh in nunc volutpat laoreet. Maecenas facilisis orci eu justo iaculis lobortis. Mauris ultricies iaculis erat in viverra. Aliquam sed nibh at est tincidunt imperdiet quis vel lectus. Nulla quis rutrum eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas, turpis eget euismod aliquam, tortor leo aliquam lorem, sed gravida augue arcu quis ante. Vivamus at arcu in erat vulputate dapibus ut id massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas UI Design Connected TV application for TiVo Project Jigsaw 6 Text Blocks Left Aligned Center Aligned Right Aligned Heading amet urna accumsan eu bibendum dui tempor convallis. amet urna accumsan eu bibendum dui tempor convallis. amet urna accumsan eu bibendum dui tempor convallis. Body amet urna accumsan eu nisi iaculis et feugiat quam sagittis. Mauris vel erat bibendum dui tempor convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. bibendum dui tempor convallis. Phasellus scelerisque rhoncus urna, vel scelerisque elit auctor vitae. Quisque ut lobortis est. Nam gravida ligula a tellus consequat varius. Fusce quis dolor elit, nec hendrerit turpis. Quisque dictum massa vel tortor semper vel faucibus. amet urna accumsan eu nisi iaculis et feugiat quam sagittis. Mauris vel erat bibendum dui tempor convallis. amet urna accumsan eu nisi iaculis et feugiat quam sagittis. Mauris vel erat bibendum dui tempor convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. bibendum dui tempor convallis. Phasellus scelerisque rhoncus urna, vel scelerisque elit auctor vitae. Quisque ut lobortis est. Nam gravida ligula a tellus consequat varius. Fusce quis dolor elit, nec hendrerit turpis. Quisque dictum massa vel tortor semper vel faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. bibendum dui tempor convallis. Phasellus scelerisque rhoncus urna, vel scelerisque elit auctor vitae. Quisque ut Lorem ipsum dolor sit amet, consectetur adipiscing elit. bibendum dui tempor convallis. Phasellus scelerisque rhoncus urna, vel scelerisque elit auctor vitae. Quisque ut Text blocks are made of at least one of these elements: 1) Heading 2) Body 3) These elements are set to one of the following alignments: 1) Left 2) Centre 3) Right An image can be any size up to 1280 x 720, and if an image is included the text wraps around it. Blocks can be combined in a column to create nearly any kind of magazine style layout. The combined blocks can then be viewed as pages by stepping them along the Y axis a screen height at a time. Stacked Text Blocks Text Layout Paginated

7 UI Design Connected TV application for TiVo Project Jigsaw 7 Support Screens 600 x 360 Loading Loading Screen This screen is displayed while the app is loading. It s purpose is to reassure the viewer that loading is in progress, to provide a brief distraction during loading, and to prevent the dead air of a black screen during the load from being mistaken for a malfunciton. There is always a black screen for a second or two when TiVo first runs Flash, so dead air can t be avoided entirely, but the Loading Screen displays as quickly as possible after the launch of Flash. To ensure a quick display the graphics should be kept to a minimum file size of 150 Kb and displayed on black. Graphics must be transparent PNGs. Logos should have maximum dimensions of 600 x 360, and animations should generally be avoided.

8 UI Design Connected TV application for TiVo Project Jigsaw 8 Support Screens Darkened app in background Title Title Title Title version 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque nisi sit amet urna accumsan eu porttitor erat ultrices. Curabitur commodo purus ultricies bibendum dui tempor convallis. Phasellus scelerisque rhoncus urna, vel scelerisque elit auctor vitae. Quisque ut lobortis est. Nam gravida ligula a tellus consequat varius. Fusce quis dolor elit, nec hendrerit turpis. Quisque dictum massa vel tortor semper vel faucibus enim vulputate. Proin dui diam, volutpat vitae egestas nec, tempor vitae urna. Vivamus vel dolor justo, sit amet lacinia metus. Phasellus aliquet ipsum quis nisl adipiscing quis laoreet neque sagittis. Nulla eu risus urna. Button 1 A version of this is needed to display info about the app, triggering from the home screen. Darkened app in background Title Title Title Title Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Button 7 Button 8 Button 9 Pop-Ups Pop-up windows are used if part of a task or message does not fit on the current screen, but also does not warrant an entirely new screen. When activated the focus hides from the parent screen and appears on the first pop-up, of which there can be a total of 9. The parent screen is also dimmed using a dark overlay so that a clear separation can be seen between the pop-up and the background.

9 UI Design Connected TV application for TiVo Project Jigsaw 9 Picture Menus Foreground image or video Horizontal text menu EXIT Button 1 Button 2 Button 3 Picture Menu with static text s Logo,, text, etc (any size) Foreground image or video or video Horizontal text menu EXIT Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Horizontal text menu EXIT Button 1 Button 1 Sub 1 Button 1 Sub 2 Button 1 Sub 3 Button 1 Sub 4 Button 2 Button 3 Button 4 Button 5 Button 6 Picture Menu with scrolling text s Picture Menu with scrolling menu and static submenu

10 UI Design Connected TV application for TiVo Project Jigsaw 10 Carousel Menus Logo Tooltip for what s in focus, explaining what will happen when OK is pressed Logo Tooltip for what s in focus, explaining what will happen when OK is pressed Carousel Carousel Horizontal text menu EXIT Button 1 Button 2 Button 3 Button 4 Button 5 Horizontal text menu EXIT Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Carousel Menu with static image s and scrolling text s Carousel Menu with wrapping carousel Logo Tooltip for what s in focus, explaining what will happen when OK is pressed Logo Tooltip for what s in focus, explaining what will happen when OK is pressed Carousel Carousel Horizontal text menu EXIT Button 1 Button 2 Button 3 Button 4 Button 5 Horizontal text menu EXIT Button 1 Button 1 Sub 1 Button 1 Sub 2 Button 1 Sub 3 Button 1 Sub 4 Button 2 Button 3 Button 4 Button 5 Carousel Menu with large image s. The carousel accomodates images of any size, to a maximum of 600 x 340. Carousel Menu with focus on submenu

11 UI Design Connected TV application for TiVo Project Jigsaw 11 List Menus Title Title Title Title Title Title item item item item item item item 1 hint item item item item item item 2 item item item item item item 3 item item item item item item 4 item item item item item item 5 item item item item item item 6 item item item item item item 7 item item item item item item 8 Title Title Title Title Title Title item item item item item item item 1 item item item item item item 2 item item item item item item 3 item item item item item item 4 item item item item item item 5 item item item item item item 6 item item item item item item 7 item item item item item item 8 hint List Menu with static text s Carousel Menu with scrolling text s item item item item item item 1 item item item item item item 2 item item item item item item 3 item item item item item item 4 item item item item item item 5 item item item item item item 6 item item item item item item 7 Label 1 Label 2 Label 3 Label 4 Label 5 Label 6 Label 7 item item item item item item 1 item item item item item item 2 item item item item item item 3 item item item item item item 4 item item item item item item 5 item item item item item item 6 item item item item item item 7 item item item item item item item 8 hint Label 8 item item item item item 8 hint item item item item item item 9 item item item item item item 10 item item item item item item 11 item item item item item item 12 item item item item item item 13 item item item item item item 14 item item item item item item 15 Label 9 Label 10 Label 11 Label 12 Label 13 Label 14 Label 15 item item item item item item 9 item item item item item item 10 item item item item item item 11 item item item item item item 12 item item item item item item 13 item item item item item item 14 item item item item item item 15 Carousel Menu with scrolling text s Carousel Menu with scrolling text s (2 columns)

12 UI Design Connected TV application for TiVo Project Jigsaw 12 List menu with scrolling text s (2 columns) (TV Schedule version) item item item item item item 1 item item item item item item 2 item item item item item item 3 Logo Show name show name 4 Show name show name 5 Today s Date The Day 1 MON Show name show name 6 Show name show name 7 Show name show name 8 Show name show name 9 tune in now Show name show name 10 Show name show name 11 Show name show name 12 item item item item item item 13 item item item item item item 14 item item item item item item 15

13 UI Design Connected TV application for TiVo Project Jigsaw 13 Text Screens Logo Logo screen title, text, etc (any size), text, etc (any size) Horizontal text menu Horizontal text menu Button 1 Button 2 Button 3 Button 4 Button 5 Text Screen, single text block Text Screen, multiple text blocks, tabbed navigation Logo screen title Logo screen title, text, etc (any size), text, etc (any size) current page total pages Navigation Next 0 / 00 Carousel Navigation (120x90) page navigation Text Screen, multiple text blocks, paged navigation Text Screen, multiple text blocks, carousel navigation

14 UI Design Connected TV application for TiVo Project Jigsaw 14 Text Screen player, multiple text blocks, transport navigation (for social feeds like Twitter) Text text text text text text text text text text text text text text text text text text text text text text text text text text text text timestamp current item total items Navigation 0 / 00 transport

15 UI Design Connected TV application for TiVo Project Jigsaw 15 Slide Display Screens Logo section title now showing info Full screen photo Full screen photo nav BACK Single slide Single slide (overlay hidden) Logo section title now showing info Logo section title now showing info Full screen photo Full screen photo current slide hint total slides Carousel (120x90) Thumbnail info text nav and transport BACK 0 / 00 hint Multiple slides (Slideshow, carousel screen state) Multiple slides (Slideshow, menu screen state)

16 UI Design Connected TV application for TiVo Project Jigsaw 16 Video Players Logo section title now playing info live hint navigation BACK Live video stream display Video display (Interactive overlays hidden, hint on) Logo section title now playing info total time current time indicator total time indicator nav and transport Video progress bar BACK 0:00 / 0:00 Video display (overlay hidden) Single video

17 UI Design Connected TV application for TiVo Project Jigsaw 17 Video Players Logo section title now playing info current time / total time Logo section title now playing info current time / total time Carousel Video progress bar (120x90) Thumbnail info text Carousel Video progress bar (80x120) Thumbnail info text hint hint Video player, multiple videos (carousel state) Video player, multiple videos (carousel state, vertical thumbnails) Logo section title now playing info total time Logo section title now playing info current time / total time current time indicator total time indicator Button tooltip hint hint nav and transport Video progress bar BACK 0:00 / 0:00 nav and transport Video progress bar BACK LINK BUTTON Video player, multiple videos (menu state) Video player, multiple videos, with link (menu state)

18 UI Design Connected TV application for TiVo Project Jigsaw 18 Video Players Logo section title now playing info current time / total time hint Button tooltip nav and transport Video progress bar BACK LINK BUTTON Video player, multiple videos, with link (menu state) Logo section title now playing info current time / total time Button tooltip hint LINK BUTTON LINK BUTTON Video display (Interactive overlays hidden, hint on, upper third info bar on) Video display (overlay hidden, link hint remains)

19 UI Design Connected TV application for TiVo Project Jigsaw 19 Appendix A: Styling These styling parameters are driven by external XML and CSS files. Fonts normal font title font emphasis font normal font colour title font colour emphasis font colour normal font size title font size emphasis font size Text alignment image source image padding text block size text block origin Focus Graphic normal colour activated colour corner radius (optional) image source (optional) padding UI Graphics logo image background image remote control hints image home screen lower third image text screen lower third image video lower third image video upper third image video now-playing indicator image list screen upper fade image list screen lower fade image green tooltip graphic Buttons normal colour focus colour activated colour inactive colour active colour image source (optional)

20 UI Design Connected TV application for TiVo Project Jigsaw 20 Appendix B: Text Block test An actionscript testing the dynamic image wrapping for the text blocks. Everything has been hardcoded for the test, but the content and the CSS would be put in external files.

TITLE - Size 16 - Bold

EDCE 2010-2011 - Size 12 - Normal Conceptual Design of Structures - Size 12 - Normal Instructor: A. Muttoni, R. Salvi, P. Wahlen - Assitant: T. Clément - Author: X. Name - TITLE - Size 16 - Bold Pier Luigi