IDD - Interactive Design Document Touch Screen Application 2012 London Olympic Games

Videographics Department Rede Record April 27th 2012

Contents Introduction London 2012 Screen Interactions Animations Medals Screen Interactions Animations Data Source Data Source (Acronym and Country Flag) Brazil Medal Winners Screen Interactions Animations Data Source Brazil Agenda Screen Interactions Animation Data Source Featured Athletes Screens Interactions Animations Data Source Videos Screens Interactions Animations Data Source Live Links Screens Iteractions Animation Data Source 3 4 4 4 5 5 5 5 8 - 11 6 6 6 6 12 12 12 12 13 13 13 13 14 14 15 15 16 16 16 16 Modalities Screens (Select Sport Screen) Interactions Animations Data Source Modalities Screens (Individual Sports) Records, Curiosities, Confrontation Interactions Data Source Animations Modalities Screens (Collective Sports) Groups, Agenda, Confrontation Data Source Interactions Brackets, Quarter finals, Semi finals, 3rd & 4th place, Final Data Source Animations Modalities Screens (Soccer) Interactions Team Formation, Team Formation Athlete Video Data Source Top Scorers, Groups, Agenda Data Source Confrontation Data Source Brackets, Quarter finals, Semi finals, 3rd & 4th place, Final Data Source Animations 17 17 17 17 18 18 18 18 25 19 19 19 19 - 20 20 20 25 21 21 - 24 21 21 22 22 23 23 24 24 25

Introduction With the objective of offering a dynamic and special broadcast of the 2012 Olympic Games in London, Rede Record has developed a touch screen application for TV show hosts. The project has been developed with the help of partnerships from companies that provide solutions for touch screen applications. With this device TV show hosts will be able to show different topics about the event. This project is divided into two different applications: a Touch Screen application and a Data Entry application. WASP 3D has been chosen to work together with Rede Records Videographics Department. The overall look and feel of the Touch Screen application will be developed by Rede Record. The final Touch Screen application and the Data Entry application will be developed by WASP. In the development phase of the Data Entry application WASP will evaluate what is the best way to develop the Data Entry application within the needs of Rede Records Videographics Department. Once the Data Entry application nears its final development stages and WASP is ready for data to be uploaded into the Data Entry application, WASP will send spreadsheets to Records Videographics Department. These spreadsheets will contain the proper format for feeding the different parts of the Data Entry application. All data will then be filled in by Rede Record and then sent to WASP for uploading into the Data Entry application.

London 2012 London 2012 Screen The London 2012 screen is the starting point for accessing information within the touch application. The user chooses which content to display by tapping one of the icons. The color coding on the numbers is a reference to the navigation layout at the end of this document (page 36).
1

Figure 1.1 London 2012 Screen

Interactions Tap Medals Icon Button: Tapping the medals icon loads the medals screen (Figure 2.1). The medals screen has different ways of displaying informaiton. The default screen that is displayed after tapping the medals icon has countries sorted in a Most Gold Medals won ordered list. Tap Agenda Icon Button: Tapping the agenda icon loads the Brazil agenda screen (Figure 3.1). The Brazil agenda screen displays an ordered list of events from different sports that will be broadcast by Record. Tap Featured Athletes Icon Button: Tapping the featured athletes icon loads a carousel of featured athletes (Figure 4.1). This carousel is made up of cards with different athletes. Tap Videos Icon Button: Tapping the videos icon loads the videos screen (Figure 5.1). The videos screen has 6 pre-defined videos that are displayed in 2 rows and 3 columns. The TV show host can tap on one of the videos arranged on the screen. The chosen video scales to a large single video on screen. The user can then play, pause, scrub, draw and zoom in or out on the video. Tap Live Link Icon Button: Tapping the link icon loads the live links screen (Figure 6.1). The live links screen has a 3D ilustrative map of London and some of the venues where events will be held. The TV show host can tap on one of the venues arranged on the map. The chosen venue animates out off the screen with the map and a video screen scales and animates into a large single video on screen. Tap Sports Icon Button: Tapping the sports icon loads a sport selection screen with different cards (Figure 7.0). Each card has a sport pictogram. The cards shuffle left and right like cover flow on an ipod. The sports that show up in this card suffle will be defined by the Data Entry applicaton. Not all sports will need to be shown.

1 2 3 4 5 6

Animations London 2012 Screen - Construction of elements when user enters the London 2012 screen - icons scale in quickly and position themselves in a vertical stack on the right side of the screen - logo fades in and scales into position - London 2012 screen looping animation while idle - subtle glows and flares on the background structures - Medals button tap - subtle scale down then up animation - Video button tap - subtle scale down then up animation - Agenda button tap - subtle scale down then up animation - Featured Athletes button tap - subtle scale down then up - Live links button tap - subtle scale down then up - Sports button tap - subtle scale down then up animation - Deconstruction of the London 2012 screen - elements drop down and fade

Medals Medals Screens The medals section of the application has different ways of showing information. The user can choose to show an ordered list of Most Gold Medals won, Most Silver Medals Won, Most Bronze Medals Won or Most Total Medals won. By tapping on Brazil the user can view which athletes have won medals for Brazil.
1

Figure 2.1 Medals Classifications Screens 3 4 5 6

Interactions Scrub to scroll: Tapping and dragging the finger on the touch screen triggers scrolling. Tap Brazil entry in list: Tapping the Brazil entry opens the Brazilian medal winners window (Figure 2.2). The TV show host can move the list up and down. Tap Gold Medals Button: Tapping the gold medal icon orders the list by Most Gold Medals. The country with the most gold medals is at the top of the list. The TV show host can move the list up and down. Tap Silver Medals Button: Tapping the silver medal icon orders the list by Most Silver Medals won. Tap Bronze Medals Button: Tapping the bronze medal icon orders the list by Most Bronze Medals won. Tap Total Medals Button: Tapping the total medals icon orders the list by Total Medals won. The country with the most medals is at the top of the list. The TV show host can move the list up and down. Tap Brazil Button: Tapping the Brazil button jumps the medal tally to the position where Brazil is. The TV show host can move the list up and down. Tap London 2012 Button: Tapping the London 2012 icon leads to the London 2012 screen (Figure 1.1). Data Source The Medals tally must be automated with the Data Feed provided to Broadcast Rights Holders. It must also allow for manual insertion in case of a data feed failure or other systemas failure. Animations Medals Screen - Medals button tap (in London 2012 screen) - subtle scale down then up animation - Construction of elements when user enters the medals classification screen - slight rotation of the bars that form each item in the list; these have an offset timing also (the top item animates in first followed by the others offseted in relation to each other) - scale and offset make a diagonal swipe animation of elements that hold the medals numbers populating the screen - background structures nest into a diagonal position - Medals screen looping animation while idle - glows and flares on the background structures - Scrolling items in the medals classification screen - items scroll up and down according to position of the users finger on - Gold, Silver, Bronze or Total order button tap - subtle scale down then up animation - list is reconstructed with the same animation as when it enters the screen for the first time - London 2012 button tap - subtle scale down then up animation - Deconstruction of the medals classification screen - elements drop down and fade
2 1

7 8

Medals Brazil Medal Winners Screen By tapping on Brazil the user can view which athletes have won gold, silver and bronze medals for Brazil. The default screen is the Gold Medals screen. Tie breakers are silver medals and then bronze medals. Interactions Scrub to scroll: Touching and dragging the finger on the touch screen triggers scrolling through the list of athletes that have won medals. Tap Gold Medals Button: Tapping the gold medal icon orders the list by Brazilian athletes who won Gold Medals (Figure 2.2). The list is alphabetically ordered by athlete name and sport. The TV show host can move the list up and down. Tap Silver Medals Button: Tapping the silver medal icon orders the list by Brazilian athletes who won Silver Medals (Figure 2.3). The list is alphabetically ordered by athlete name and sport. Tap Bronze Medals Button: Tapping the bronze medal icon orders the list by Brazilian athletes who won Bronze Medals (Figure 2.4). The list is alphabetically ordered by athlete name and sport. Tap Medals Button: Tapping the medal icon takes the user back to the medals screen (Figure 2.1). Tap London 2012 Button: Tapping the London 2012 icon leads to the London 2012 screen (Figure 1.1).
Figure 2.4 Brazil Bronze Medal Winner Screen Figure 2.2 Brazil Gold Medal Winner Screen

5 6

Figure 2.3 Brazil Silver Medal Winner Screen

5 6

Animations Medals Screen - Medals button tap (in London 2012 screen) - subtle scale down then up animation - base plate with Brazilian athletes slides up - Construction of elements when user enters the medals classification screen - base plate with Brazilian athletes slides down - the bars that form each item in the list rotate in with an offset timing (the top item animates in first followed by the others sequentially) - medal icon for each athlete scales up - background structures nest into a diagonal position - Medals screen looping animation while idle - glows and flares on the background structures - Scrolling items in the Brazilian medal winners box - items scroll up and down according to position of the users finger - Gold, Silver, Bronze or Total order button tap - subtle scale down then up animation - list is reconstructed with the same animation as when it enters the screen for the first time (items rotate in) - London 2012 button tap - subtle scale down then up animation - Deconstruction of the medals classification screen - elements drop down and fade Data Source When entered in the Data Entry application the data for Brazilian medal winners must take into account the athletes name and the event in which he or she won a gold, silver or bronze medal. The Data Entry application must insert new items to each screen. When a Brazilian wins a medal the sports journalist will add a new item to the corresponding medal tally (gold, silver or bronze). The parameter for gold, silver or bronze can be done with a combo box or drop down list. With this new item the journalist must have two text fields; one for the athletes name and the other for the event where the medal was won.

5 6

blank page

Medals Data Source (Country Acronym and Flag) The country acronyms should be in accordance with the IOC - International Olympic Committee. The following list contains the countries that are confirmed in the 2012 London Olympics. Flag Country in English Afghanistan Albania Algeria
Acronym Country in Portuguese

Bulgaria Burundi

Burkina Faso Cambodia Canada

BUL BDI

BUR CAM CAN CPV CAY CAF CHI

Bulgria Burundi

Burkina Faso Camboja Canad

AFG ALB ALG ASA

Afeganisto Albnia Arglia

Cameroon Cape Verde

CMR

Camares Cabo Verde

American Samoa Andorra Angola

AND ANT

Samoa Americana Andorra Angola

Cayman Islands Chad Chile

Antigua and Barbuda Argentina Armenia Aruba

ANG ARG ARU AUS AUT AZE

Central African Republic

Ilhas Cayman Chade Chile China

Antgua e Barbuda Argentina Armnia Aruba

CHA CHN TPE COL

Repblica Centro-Africana

ARM

China

Chinese Taipei Colombia Comoros Congo

Taip Chinesa Colmbia Comores Congo

Australia Austria Azerbaijan Bahamas Bahrain

Austrlia ustria Azerbaijo Bahamas Bahrain

COM CGO COK CRC CIV

BAH BAN BAR BLR BEL BIZ

Cook Islands Costa Rica Croatia Cuba Cyprus Cte dIvoire

Ilhas Cook

Bangladesh Barbados Belarus Belize Benin Belgium

BRN

Costa Rica Crocia Cuba Chipre

Bangladesh Barbados Blgica Belize Benin Bielorrssia

CRO CUB CYP CZE DJI

Costa do Marfim

Czech Republic Denmark Djibouti

Bermuda Bhutan Bolivia

BEN BER BOL BIH BHU

DEN DMA COD TLS ECU ESA

Repblica Checa Dinamarca Djibouti Dominica

Bermudas Buto Bolvia

Dominica

Dominican Republic DR Congo Ecuador Egypt East Timor

DOM

Repblica Dominicana RD do Congo Timor Leste Equador Egito

Bosnia and Herzegovina Botswana Brazil

BOT BRA IVB BRU

Bsnia e Herzegovina Botswana Brasil

British Virgin Islands Brunei Darussalam

Ilhas Virgens Britnicas Brunei Darussalam

El Salvador

EGY GEQ

Equatorial Guinea

El Salvador

Guin Equatorial 8

Medals Eritrea Estonia Fiji ERI EST FIJ Eritreia Etipia Fiji Estnia Jordan Kenya Kazakhstan Kiribati Kuwait Laos Kyrgyzstan Latvia JOR KAZ KIR KEN KUW KGZ LAO LAT LIB Jordnia Qunia Kuweit Laos Cazaquisto Quiribati Quirguisto Letnia Lbano Lesoto Libria Lbia

Ethiopia Finland France Gabon

ETH FIN

FRA

Finlndia Frana Gabo

Gambia

GAB

Georgia Ghana

GAM GEO GER GHA GBR GRE GRN GUA GUI GBS HAI

Gmbia

Germany Great Britain Greece Guam Grenada Guatemala Guinea Guinea-Bissau Guyana Haiti

Gergia Gana

Alemanha Gr-Bretanha Grcia Guam Guin Granada Guatemala Guin-Bissau Guiana Haiti

Lebanon Lesotho Liberia Libya

LES LBA LIE LTU

LBR

Liechtenstein Lithuania Luxembourg Macedonia Malawi Madagascar Malaysia Maldives Mali Malta

Liechtenstein Litunia Luxemburgo Macedonia Malavi Madagscar Malsia Mali

GUM

LUX

MKD MAD MAS MLI MAW MDV MLT

GUY HON HKG HUN ISL IND INA IRI

Honduras Hungary Iceland India Iran Iraq

Hong Kong

Honduras Hungria Islndia ndia Ir

Maldivas Malta

Hong Kong

Marshall Islands Mauritania Mauritius Mexico

MHL MRI

MTN MEX FSM MDA MGL

Ilhas Marshall Mauritnia Maurcia Mxico

Indonesia

Indonsia Iraque Israel Itlia

Ireland Israel Italy

IRQ IRL ITA ISR JAM JPN

Micronesia Moldova Monaco

Micronsia Moldvia Monaco

Irlanda

Mongolia Morocco

MON MNE MAR MOZ

Jamaica Japan

Jamaica Japo

Montenegro Mozambique

Monglia

Montenegro Marrocos Moambique 9

Medals Myanmar Namibia Nauru Nepal MYA NAM NRU NEP NZL NIG NED NCA NGR PRK NOW OMA PAK PLE PLW PAN PAR PHI Mianmar Nambia Nauru Nepal Saudi Arabia Senegal Serbia KSA SEN SRB SEY SLE SIN Arbia Saudita Senegal Srvia

Netherlands Nicaragua Niger Nigeria

New Zealand

Holanda

Seychelles Singapore Slovakia Slovenia Somalia

Nova Zelndia Nicargua Nger Nigria

Sierra Leone

Seychelles Cingapura Eslovnia Somlia

Serra Leoa Eslovquia Ilhas Salomo frica do Sul Espanha Sudo

SVK SLO SOL SOM RSA ESP SRI KOR

North Korea Norway Oman Palau

Coria do Norte Noruega Oman Palau

Solomon Islands South Africa Spain

Pakistan Palestine Panama Papua New Guinea Paraguay Peru

Paquisto Palestina Panam Papua Nova Guin Paraguai Peru Filipinas Polnia Portugal Catar

South Korea Sri Lanka Sudan Suriname Sweden Syria

Coria do Sul Sri Lanka Suriname Sucia Sua Sria

SUD SUR SWZ SUI

PNG PER POL

Swaziland Switzerland Tajikistan Tanzania Thailand Togo Tonga

SWE SYR TJK TAN

Suazilndia

Philippines Poland Portugal Qatar

Puerto Rico Romania Russia Rwanda

POR PUR QAT

Tajiquisto Tanznia Tailndia Togo Tonga

Porto Rico Romnia Rssia Ruanda

THA

ROU RUS SKN LCA VIN RWA

TOG TGA TRI TUN TUR TUV TKM UGA UKR UAE

Trinidad and Tobago Tunisia Turkey Tuvalu

Trinidad e Tobago Tunsia Turquia Tuvalu

Saint Kitts and Nevis Saint Lucia Samoa Saint Vincent & Grenadines San Marino

So Cristvo e Nevis Santa Lcia Samoa So Vicente e Granadinas San Marino

Turkmenistan Uganda Ukraine United Arab Emirates

Turcomenisto Uganda Ucrnia Emirados rabes Unidos 10

SAM STP

Sao Tome and Principe

SMR

So Tom e Prncipe

Medals United States Uruguay Vanuatu Vietnam Yemen Zambia United States Virgin Islands Uzbekistan Venezuela USA ISV URU UZB VAN VIE Estados Unidos Ilhas Virgens Uruguai Uzbequisto Vanuatu Vietn Imen Venezuela

VEN YEM ZAM ZIM

Zimbabwe

Zmbia

Zimbbue

11

Agenda Brazil Agenda Screen Displays information about the current days events for Brazil. The TV show host can choose to show information for the next two days. The default calendar screen displays 3 events at any given moment. Each item has the time (Brasilia GMT -3:00) for which that event will occur as well as which sport will occur at that time. For head to head matches flags are also displayed. Scrolling occurs in a pages fashion.
1

Interactions Up Swipe and Down Swipe: Swiping up or down will display the other events of that day. This will use the pages characteristic available in the WASP 3D design features. Tap go back arrow button: The go back arrow only shows up after the host taps the go forward arrow. There is no go back arrow when the current day is showing. (This screen is for showing the events that Record will be broadcasting therefore there is no need for showing what was already broadcast.) Tap go forward arrow button: Tapping the go forward button the user can show what events Record will be broadcasting in the next two days. When the date is changed the top plate at the top of the box which holds the current data scales up and back down into its original position and size. This will serve as a visual cue to inform the viewer what date the show host is talking about. Tap London 2012 button: Tapping the London 2012 button takes the user back London 2012 (Figure 1.1).

Animation Brazil Agenda Screen - Agenda button tap (in London 2012 screen) - subtle scale down then up animation - Construction of elements when user enters the agenda screen - main bounding box scales and eases quickly into position - different events populate the bounding box in a sequence of offset animations from top to bottom - the background structures slightly fade in and animate in a nesting manner into a diagonal final position - Loop agenda screen - subtle glows and flares on the background structure - Scroll agenda - no visual queue is provided as a scroll bar on the right, however the user can touch anywhere on screen and drag their finger up or down for scrolling - Tap previous day button - subtle scale down then up animation - content items within agenda bounding box roll backwards and update data - date changes at the top of the bounding box with a scale and rotation animation - Tap next day button - subtle scale down then up animation - content items within agenda bounding box roll forward and update data - date changes at the top of the bounding box with scale and rotation - Tap London 2012 button - subtle scale down then up - Deconstrution of the agenda screen - elements drop down and fade Data Source The Data Entry application is used to fill in data for the Brazil Agenda Screen. The data that needs to be shown are: Date, Time, Sport and layout type (Individual sports or Collective Sports). For individual sports the Data Entry application must contain an add new item option. This will add a new item to the agenda. This item must have a date picker for defining the date at the top of the layout. It must also have a time drop down box or text field for defining the time the event will occur. An icon picker needs to be available so that we can pick the correct icon associated to the sport. Text fields will be used to define the sport modality for that entry (ex. NATAO, ATLETISMO, FUTEBOL MASCULINO - final). A text field will be used to describe the event that will occur for that sport (ex. 100m borboleta - finais, eliminatrias). A check box will assign a Brazil flag for the item (shows if there are Brazilians competing in that event).

Figure 3.1 Brazil Agenda Screen

2 1 3

For collective sports two drop down boxes are needed to define what countries are scheduled for a match. The Data Entry application must also provide a check box to define what kind of layout is applied into an entry (individual or collective). 12

Featured Athletes Featured Athletes Screens The featured athletes screen has a carousel of cards with different athletes (Figure 4.1). The amount of athletes that are displayed at any moment is controlled by the Data Entry application. The lateral shuffling should stop once all data entries have been show on the left or on the right of the cards (it should not shuffle infinately or loop).
1

Figure 4.1 Featured Athletes Screen (Card Frontside)

Iteractions Srub horizontally: Scrubbing will shuffle the cards horizontally depending on the direction that the finger is dragged. This has to be similar to cover flow in ipods. The center card has to snap into position. Tap card: Tapping on a card rotates it and shows more information about that athlete (Figure 4.2). Tap Featured Athletes button: Tapping on the Featured Athletes button takes us back to the featured athletes selection screen (Figure 4.1). Tap video button: Tapping the video button opens a video screen with a video about that athlete (Figure 4.3). The show host has the same functions as the videos section of the application (Figure 5.2). Scrubbing must be accurate and precise so that the user can pick a specific frame in the video. If the chosen athlete does not have a video assigned to him this button does not show up. Tap London 2012 button: Leads back to the London 2012 screen (Figure 1.1).
Figure 4.2 Featured Athletes Screen (Card Info)

1 5

Animations Featured Athletes Screen - Featured Athletes button tap (in London 2012 screen) - subtle scale down then up - Construction featured athletes screen - background structures slide into diagonal final position - cards scale into position - Loop featured athletes screen - subtle glows and flares on background structure - Sideways carousel for featured athletes cards scroll - front and center card is larger - Tap card - card turns and shows information - Click London 2012 - subtle scale down and then up - Deconstruct features athletes screen - elements drop down and fade

3 5

Data Source The data for the featured athletes will be fed manually into the application through the Data Entry application. The Data Entry application must account for the athletes photo, display name and country. For the screen with the athletes information the Data Entry application must contain 8 text fields to define the content. If an athlete has a video for him/her the Data Entry application must provide a video picker. The videos for the featured athletes should not be related to the videos of the videos section of the touch screen.

Figure 4.3 Featured Athletes Video Screen

7 8

3 5

13

Videos Videos Screens The videos screen has 6 pre-defined videos that are displayed. The TV show host can tap on any one of the videos. The chosen video scales up and becomes the only video on screen. The user can play, pause, scrub and draw on the video.
1

Figure 5.1 Videos Screen

Interactions Tap video: The TV show host can tap on one of the videos arranged on the screen (Figure 5.1). The chosen video scales to a large single video on screen (Figure 5.2). Tap play button: Tapping the play button the video plays. Tap pause button: Tapping the pause button pauses the video at its current frame. Tap stop button: Tapping the stop button stops the video at its current frame. Tap & drag to scrub: For scrubbing the user can touch the pin head on the timeline and move it left or right. Tapping anywhere on the video bounding box and dragging your finger will also scrub the video. Scrubbing must be accurate and precise so that the user can pick a specific frame in the video. Tap select color button: By tapping the current color button (number 6 in figure 5.2) the other color options button is shown. The four different colour options are shown when the user wants to change the colour of the drawing color. The user can choose to set the drawing color to be yellow, blue, red or green. Tap draw button: Tapping the draw button allows for drawing with the current color. Tap zoom button: Tapping the zoom button allows the show host to zoom into the video by dragging two fingers outwards to zoom in or inwards to zoom out. Tap L button: Tapping the L button erases the current drawings from the screen. Tap back to videos button: Tapping the go back to videos button takes the user to the videos screen (Figure 5.1) with 6 videos. Tap London 2012 button: Tapping the London 2012 button takes the user back to the London 2012 screen (Figure 1.1).
5 6 7 8 9 4 3 2 11 10 Figure 5.2 Selected Video Screen 1 11

2 3 4 5

7 8

9 10

11

14

Videos Animations Videos Screen - Video button tap (in London 2012 screen) - subtle scale down then up animation - Construction of when user enters the vdeos screen - videos enter scaling in with the bottom center box coming in first and the left and right bottom ones animating in lastly - background structures nest into horizontal final position - Loop videos screen - subtle glows and flares on the background structure - Tap a vdeo - scale up and subtle bounce into final position taking up most of screen (subtle bounce at final position) - other videos in background fade out - Tap play - slight scale down then up when the play button is tapped - Tap & hold for scrub - a visual cue in the form of a play pin with be visible for the show host to have a reference as to where in the video he or she is during scrubbing; user touches within video and drags finger left or right for scrubbing; since the touch screen is a large 103 inch surface the show host will scrub only on the right hand part of the touch screen this has to be taken into account when testing the range of lateral movement needed to scrub the video - Tap to stop button - subtle scale down then up - Tap to draw button - subtle scale down then up - Tap button back to choose videos - subtle scale down then up - chosen video taking up most of the screen scales down and bounces into final position - Tap London 2012 button - subtle scale down then up - Deconstruction of the videos screen - elements drop down and fade Data Source The videos screen has 6 pre-defined videos that are displayed in an orderly fashion. The Data Entry application controls the call up of the videos. These videos should be separate from the videos assigned to featured athletes and the team formation section of the touch screen application.

15

Live Links Live Links Screens The live links screen displays a map with different venues of the London 2012 Olympics. The show host can rotate the map and tap on a venue. The icons for each sport on each venue are billboarded and therefore always face the camera. The chosen venue quiackly animates in scale and the whole map animates to an off screen position. A video plate animates in from off screen and scales to a large single video on screen.
1

Figure 6.1 Live Links Screen

Iteractions Tap live link: Tapping on one of the venues with live feeds leads to the Selected Live Link Screen (Figure 6.2). There is a small scale animation on the venue when it is tapped. This will indicate that it has been tapped. Once tapped the map animates quickly out off screen and the video plate animates quickly into screen. Scrub: Scubbing rotates map. This must be a precise scrub so that the show host can stop the rotation at a specific point and tap on a venue. Tap back to live links button: Leads to the Live Links Screen (Figure 6.1). Tap London 2012 button: Leads to the London 2012 screen (Figure 1.1). Animation Live Links Screen - Live links button tap (in London 2012 screen) - subtle scale down then up - Construction live links screen - live link map scales in and venues drop into position - background structures nest into a diagonal position - Loop live links screen - subtle glows and flares on the background structure - Tap live link item - tapped item scales up and slightly bounces back down - map animates out and video screen scales up - Tap back to live links items screen button - subtle scale down then up - chosen live link video that is taking up most of the screen scales down and animates off screen - map with venues animates back in, scales back up and venues drop into position - Tap London 2012 - subtle scale down then up - Deconstruction live links screen - elements drop down and fade Data Source A table allows for each venue on the map and video signal to be identified. With this table we can define which video is being assigned to which venue. The TV show host will never tap more than 3 venues during 1 show. Each venue must have a check box that allows the video link that is associated to that venue to be displayed in a full format (Instead of using channel 1 it uses channel 2 from the DVS card).
Figure 6.2 Live Links Screen

1 2 4

3 4

16

Modalities

Modalities Screens

Before showing information about any modality / sport the TV show host enters the modality / sport selection screen. The sports that show up on these cards is controlled by the Show options in the Data Entry application. The shuffling of the cards has the same motion as the cover flow of an ipod (the central card snaps into position.) The default screen will show up after selecting a sport will be defined in the Data Entry application.

Figure 7.0 Sport Selection Screen

Interactions Srub through and tap card: Srubbing left or right shows different cards for different sports. Tapping on a card loads the default screen for that card (controlled with Data Entry application). Tap London 2012 button: Tapping the London 2012 button goes back to the London 2012 screen (Figure 1.1). Animations Lateral shuffling similar to ipod cover flow. Cards snap into center position. The lateral shuffling should stop once all data entries have been show on the left or on the right of the cards (it should not shuffle infinately or loop).

Data Source The Data Entry application controls which sports show up on the cards. Not all sports need to be loaded. The order of the icons must be determined manually through the Data Entry application also. For all other modalities screens every text field can vary and should be controlled by the Data Entry application. In this Sport Selection screen (Figure 7.0) the Data Entry application must allow for the sport name and icon to be assigned.

17

Modalities

Modalities Screens (Individuals)

Different sports will show different screens during specific moments. This will be controlled by the Show options in the Data Entry application. When the TV show host is navigating through these screens the buttons on the right change state to show where she is in the touch screen application. The white button is a visual cue as to where he or she is within the touch screen application. Records / Curiosities Screen The Records / Curiosities Screen has two layouts. One layout shows records that have been broken during an event of the 2012 Olympics. This layout has items with a type of record (olympic or world), the athletes name and the record data. (Figure 7.1) The other layout works like a curiosities screen where the sports journalist can type up to two lines of text to describe something interesting about any given subject.
Figure 7.1 Records Screen Figure 7.2 Curiosities Screen

Confrontation Screen The Confrontation Screen has two individuals or two nations side by side with 3 items each. It shows records, stats or other interesting things that the sports jornalists want to show.
Figure 7.3 Confrontation Screen (Individuals)

1 2 4

1 2 4

Interactions Tap records button: Tapping the Records button the TV show host can show records or curiosities for athletes depending on the sport (Figure 7.1 or 7.2). Tap confrontation button: Takes the user to the comparison / confrontation screen (Figure 7.3). Swipe in bounding box: Swipping inside the bounding box loads more info coming in from the right hand side. Tap London 2012 button: Tapping the London 2012 button goes back to the London 2012 screen (Figure 1.1). Data Source The Records screen will be manually defined in the Data Entry application. It must provide a means of defining the modality (can be through a drop down box). A text field must be provided for the sport event associated to the modality in the title of the box (ex. 100m livre, at 60kg). The Record screen also needs two text fields to define data for an Olympic Record and then two more text fields for defining a World Record. For the Curiosities screen the Data Entry must assign a modality and allow for 4 text fields in the following format: Title, Content (2 lines), Title, Content (2 lines).

Interactions Tap records button: Shows records or curiosities for athletes depending on the sport (Figure 7.1 or 7.2). Tap confrontation button: Takes the user to the comparison / confrontation screen (Figure 7.3). Tap London 2012 button: Goes back to the London 2012 screen (Figure 1.1). Data Source The Data Entry application must define the sport / modality, the athlete or country, and 9 text fields in the following format: Title, 1 variable x 1 variable, Title, 1 variable x 1 variable, Title, 1 variable x 1 variable. When a country is defined instead of an athlete the small flag that shows up next to the cards title must not show up (the cards photo will already be a flag when the country is defined). 18

2 3 4

Modalities

Modalities Screens (Collective Sports)

These screens will be mainly used for Basketball, Handball and Volleyball however any other collective sports that have interesting news to be shown will fall into this section of the applicatoin. When the TV show host is navigating through these screens the buttons on the right change state to show where she is in the touch screen application. The white button is a visual cue as to where he or she is within the touch screen application. Once the TV show host chooses a sport from the sport selection screen (Figure 7.0) the default screen that is called up can vary depending on the chosen sport. The default screen will be defined in the Data Entry application. Groups Screen Shows different groups for collective sports during the preliminary phase. User can click which group to show. Men and women have the same competition format in basketball, handball and volleyball. 12 countries are divided into 2 groups of 6. The 4 best of each group advances to the quarter finals. For soccer it is different.
Figure 7.4 Groups Screen (Collectives)

Agenda / Results Screen This screen will have the match ups for each group. By scrubbing down or up the user can show future or past match ups. These matches are games that are still scheduled to happen or they are results for events that have already occured. This screen can show matches with different dates for each one.
Figure 7.5 Agenda / Results Screen (Collectives)

Confrontation Screen This screen can contain nations that are being compared with varying content as well as individual athletes being compared.

Figure 7.7 Confrontation Screen (Collectives)

7 8 5 6

1 2 3 4 14

2 4 14

1 3 5 6

2 4

1 3

5 6

14

Interactions Tap groups button: Tapping the groups button the TV show host can show a groups classification screen for a nation within a sport such as soccer, basketball or volleyball. (Figure 7.4) Tap agenda / results button: Tapping the agenda / results button takes the user to a screen with game results and future games for a specific collective sport of a specific nation (Figure 7.5). This is controlled through the Show options in the Data Entry application. Data Source Tables control the modality, groups, countries and sex for the different groups that show up in this screen. Men and women have the same competition format in basketball, handball and volleyball. 12 countries are divided into 2 groups of 6. The 4 best of each group advances to the quarter finals. These tables need to assign a points column, a games played column and a victories column. Different data for male and female particular groups must be available.

Tap brackets button: Tapping the bracket button loads the Road to The Finals layout. (Figure 7.6). Tap confrontation button: Tapping the confrontation button goes to the collectives confrontation (Figure 7.7). Tap F button: Tapping the F button filters the confrontation data to show data for female athletes. Data Source The agenda / results screen needs a add new item option in the Data Entry application. With this new item the journalist will need 4 text fields to define a date and time, a result for the left country, a result for the right side country and an address for the event. This part of the Data Entry application must also define the country that will be shown on the left side and the country on the right side. Different data for male and female particular results must be available.

Tap M button: Tapping the M button filters the confrontation data to show data for male athletes. Tap G1 button: Tapping the G1 button shows group 1. Tap G2 button: Tapping the G2 button shows group 2. Scrub vertically: Shows more pages with games. Data Source The Data Entry application must define the sport / modality, the athlete or country, and 9 text fields in the following format: Title, 1 variable x 1 variable, Title, 1 variable x 1 variable, Title, 1 variable x 1 variable. When a country is defined instead of an athlete the small flag that shows up next to the cards display name must not show up (the cards photo will already be a flag when the country is defined). The Data Entry application must account for inputting different data for male and female particular confrontations. The TV show host might show off both male and female data in the same show. 19

7 8 9

Modalities Brackets Screen This screen shows the Road To The Finals layout. By tapping on the quarter finals column the user has a detailed screen of the quarter final match ups. By tapping on the semi finals column or the finals column the same type of detailed view is brought up according to the chosen column.

Figure 7.6 Brackets Screen (Collectives)

Figure 7.6a Quater Finals Details Screen (Collectives)

Figure 7.6c Third Place Details Screen (Collectives)

10

11

13 12 5 6

2 4

1 3 5 6

1 2 3 4 14

14

5 6

1 2 3 4 14

10

Tap quarter finals column: Calls the quarter finals details screen (Figure 7.6a). Tap semifinals column: Calls the semi finals details screen (Figure 7.6b). Tap 3rd & 4th place box: Calls up the 3rd & 4th place details screen (Figure 7.6c). Tap finals box: Tapping the finals box calls up the finals details screen (Figure 7.6c). Tap London 2012 button: Tapping the London 2012 button loads the London 2012 screen (Figure 1.1).

Figure 7.6b Semi Finals Details Screen (Collectives)

Figure 7.6d Final Details Screen (Collectives)

11

12

13

5 6

1 2 3 4 14

5 6

1 2 3 4 14

14

Data Source The Data Entry application must define the sport / modality, two countries for each match, a short date (ex. 17/07, or 23/07), a long date with time (ex. 17/07 - TERA - 16:00), 2 text fields for the scores of each match, and a text field for the venue. The Data Entry application must account for inputting different data for male and female particular quarter finals, semi finals, 3rd & 4th place and finals. The TV show host might show off both male and female data in the same show.

20

Modalities

Modalities Screens (Soccer)

Soccer will show different screens during specific moments. This will be controlled by the Show options in the Data Entry application.

Team Formation Screen This screen shows a soccer pitch with cards that represent each player on the field. The show host can tap on a players card to view a video of that player. The show host can tap on the pitch and reposition a player on the field. When this is done the field animates to a top view of the pitch. Once the host is finished positioning the players on the field he/she taps the the pitch once again and it animates back to a perspective view. This screen also shows the players that have received yellow cards in previous games.
Figure 7.8 Team Formation 3-4-4 Screen (Soccer) 1 2 3 4 5 6 19 Figure 7.8a Team Formation Screen (Soccer) Figure 7.8b Team Formation 4-3-3 Screen (Soccer)

10

7 8

Interactions Tap team formation button: Loads the team formation screen (Figure 7.8). Tap top scorers button: Tapping the top scorers button brings up a list of athletes with the number of goals each has scored (Figure 7.10). Tap groups button: Shows a groups classification screen. (Figure 7.11) Tap agenda / results button: Loads the game results and future games. Controlled through the Show options in the Data Entry application. (Figure 7.12). Tap brackets button: Tapping the bracket button goes to the Road to The Finals layout. (Figure 7.14). Tap confrontation button: Tapping the confrontation button goes to the soccer confrontation (Figure 7.13).

Figure 7.8c Team Formation 5-3-2 Screen (Soccer)

7

Tap F button: Tapping the F button filters the confrontation data to show data for female athletes. Tap M button: Tapping the M button filters the confrontation data to show data for male athletes. Tap athlete card in team formation pitch: Tapping an athlete in the the team formation soccer pitch goes to a video screen of that athlete (Figure 7.9). Scrubbing must be accurate and precise so that the user can pick a specific frame in the video. Tap soccer pitch: Tapping the soccer pitch makes the pitch animate into a top view (Figure 6.8a). The players are billboarded and always face the camera. In this top view the show host can reposition the athletes on the pitch. Tapping the soccer pitch a second time animates the pitch back to a perspective view. (Figure 7.8).
Figure 7.9 Team Formation Athlete Video Screen (Soccer) 1 2 3 4 5 6 19

10

Data Source A registry of 11 male and 11 female soccer athletes is needed. Only Brazilian soccer athletes will be shown on this screen. A photo picker is needed for each player. A text field is needed for each athletes name. A drop down menu can define if the player has 1 or 2 yellow cards. Each player must have the possibility to assign a video to him/ her. We will use the players position in the list of 1 to 11 to define where the player is positioned on the field. 1 will always be the goalie at the top back of the field. 2 will be the top left defender, 3 the next one to its right and so on from top to bottom and left to right. The layout of the cards on the field must have formation variables from a drop down box with the following formation sets: 4-3-3, 4-4-2, 3-5-2 (Figures 6.8b & 6.8c) . There must be an option to create a new formation set (ex. 6-3-1). The coach needs only a text field for his/her name.

7 8

4 2 7

21

Modalities Groups Screen Shows different groups for soccer during the preliminary phase. The show host can click which group to show. In soccer the competition format is different for men and women. For men there are 16 countries that are divided into 4 groups of 4. The 2 best of each group advances to the quarter finals. For women there are 12 countries that are divided into 3 groups of 4. The 2 beast of each group and the 2 best third place nations advance to the quarter finals.
Figure 7.11 Groups Screen (Soccer) 1 2 3 4 5 6 19 1 2 3 4 5 6 20

Top Scorers Screen Shows the top scorers for the soccer modality.
Figure 7.10 Top Scorers Screen (Soccer)

Agenda / Results Screen This screen will have the match ups for each group. By scrolling down or up the user can call up future or past match ups. These matches are games that are still scheduled to happen or they are results for events that have already occured. This screen can show matches with different dates for each one.
Figure 7.12 Agenda / Results Screen (Soccer) 1 2 3 4 5 6 20

11

12 13 14 15 7 8

11

7 8

7 8

11

Swipe: Changes through pages.

12 13 14 15

Tap G1 button: Tapping the G1 button shows group 1. Tap G2 button: Tapping the G2 button shows group 2. Tap G3 button: Tapping the G3 button shows group 3. Tap G4 button: Tapping the G4 button shows group 4. Data Source Tables control, groups, countries and sex for the different groups that show up in this screen. These tables need to assign a points column, a games played column and a victories column. Different data for male and female particular groups must be available. In soccer the competition format is different for men and women. For men there are 16 countries that are divided into 4 groups of 4. The 2 best of each group advances to the quarter finals. For women there are 12 countries that are divided into 3 groups of 4. The 2 beast of each group and the 2 best third place nations advance to the quarter finals. Data Source The agenda / results screen needs a add new item option in the Data Entry application. With this new item the journalist will need 4 text fields to define a date and time, a result for the left country, a result for the right side country and an address for the event. This part of the Data Entry application must also define the country that will be shown on the left side and the country on the right side. Different data for male and female particular results must be available.

Data Source The Data Entry application must allow for a new item to be added to this list. Each item needs a text field for his/her name and a text field for the number of goals he/she scored. Each item also needs a drop down box to define his/her country.

22

Modalities

Confrontation Screen This screen can contain nations that are being compared with varying content as well as individual athletes being compared.
Figure 7.13 Confrontation Screen (Soccer) 1 2 3 4 5 6 20

7 8

Data Source The Data Entry application must define the athlete or country, and 9 text fields in the following format: Title, 1 variable x 1 variable, Title, 1 variable x 1 variable, Title, 1 variable x 1 variable. When a country is defined instead of an athlete the small flag that shows up next to the cards display name must not show up (the cards photo will already be a flag when the country is defined). The Data Entry application must account for inputting different data for male and female particular confrontations. The TV show host might show off both male and female data in the same show.

23

Modalities Brackets Screen This screen shows the Road To The Finals layout. Tapping the quarter finals column opens a screen with the quarter final match ups (Figure 7.14a). Tapping the semi finals column the detailed screen for semis is shown (Figure 6.14b). For the finals column the same type of detailed view is brought up according to the chosen box (Figures 7.14c & 7.14d).

Figure 7.14 Brackets Screen (Soccer) 1 2 3 4 5 6 20

Figure 7.14a Quater Finals Details Screen (Soccer) 1 2 3 4 5 6 20

Figure 7.14c Third Place Details Screen (Soccer) 1 2 3 4 5 6 20

19 16 17 18 7 8

7 8

7 8

16

Tap quarter finals column: Calls the quarter finals details screen (Figure 7.14a). Tap semifinals column: Calls the semi finals details screen (Figure 7.14b). Tap 3rd & 4th place box: Calls up the 3rd & 4th place details screen (Figure 7.14c). Tap finals box: Tapping the finals box calls up the finals details screen (Figure 7.14d). Tap London 2012 button: Tapping this button goes back to the London 2012 screen (Figure 1.1). Data Source The Data Entry application must define two countries for each match, a short date (ex. 17/07, or 23/07), a long date with time (ex. 17/07 - TERA - 16:00), 2 text fields for the scores of each match, and a text field for the venue. The Data Entry application must account for inputting different data for male and female particular quarter finals, semi finals, 3rd & 4th place and finals. The TV show host might show off both male and female data in the same show.

Figure 7.14b Semi Finals Details Screen (Soccer) 1 2 3 4 5 6 20

Figure 7.14d Final Details Screen (Soccer) 1 2 3 4 5 6 20

17

18

19

7 8

7 8

20

24

Modalities Animations Modalities Screens - Tap buttons - subtle scale down then up animation - change clicked button state to white button - Construction sports cards screen - background structures nest into a diagonal position - cards animate in - Records / Curiosities Screen - menu buttons on right hand side animate in with an offset - base plate scales in and items that contain content inside base plate scale up from the left side to the right side - Confrontation Screen - cards scale in with a subtle bounce at the end - 3 content items in the middle of the cards scale and rotate in with an offset - Groups Screen - base plate scales in and items with content fields rotate and scale in - Agenda / Results Screen - Should follow the overall style of animation (quick scale in and subtle rotate) - Brackets Screen - Should follow the overall style of animation (quick scale in and subtle rotate) - Team Formation Screen - soccer pitch rotates in from behind camera and nests into final position - player cards rotate in slightly into final rotation (slightly inclined backwards) - items with player names animate in with the numbers plate scaling in and the names plate scaling in from the left - Team Formation Player Video Screen - same animation as video screen - Top Scorers Screen - base plate scales in and items with content fields rotate and scale in - Loop sports shuffle cards screen - subtle glows and flares on the background structure - Deconstruction sports shuffle screen - elements drop down and fade - Tap London 2012 - subtle scale down then up - Desconstruction sports details screen - elements drop down and fade 25