Radioplayer. Style Guide Version 1.1. Radioplayer November 2010

Transcription

1 Radioplayer Style Guide Version.

2 Contents 00. Introduction Page 3 0. Core design Page 4 0. Use of logos Page Background Page Errors Page Overlays Page 06. Controls Page 07. Fuctionality Page Other requirements Page 40 Radioplayer September 00

3 00. Introduction Radioplayer is a partnership between the BBC and commercial radio, aimed at growing online listening. Each station in Radioplayer hosts their own pop-up console, streams, and associated content. They're all linked together through Search and Preset features. Radioplayer September 00 To bring consistency to the user experience, Radioplayer partners have agreed design standards for those consoles. These standards are minimal, but mandatory - they relate to the core controls and common areas. All designs and imagery are property of UK Radioplayer Ltd, the not-for-profit company formed to launch and develop the Radiolpayer console. 3

4 0. Core design All players must have the dimensions as shown on the right. All players must open in a pop-up, consoled window. 35px 3px 0px 0px 50px 5px 40px 5px 5px Radioplayer September 00 There should be no browser scroll bars and no white space around the frame. The 'plugin space' is not covered in this document. However, nothing in this area must intefere with, or cover, any of the core controls or top section. 665px 57px Plug-in space 0px 360px 380px 4

5 0. Use of logos All station logos must be displayed in the top left of the player window with a maximum size of 50px by 80px. 50px 80px Radioplayer September 00 5

6 0. Use of logos For any logos that incorporate text, this text must be legible. In order to ensure legibility of text your standard logo assets may need to be reworked. Radioplayer September 00 Text must be legible within logos For reference and as a recommendation see the BBCs 'Use of Colour' guidelines: 6

7 0. Use of logos Station logos must be static images, and must link to the station homepage (in a separate window). The Radioplayer logo must be displayed in the top right of the player window with a width of 53px and height of px with a 0px margin. 53px px 7

8 03. Background The background to the Radioplayer must be a static colour or image. Particular attention SHOULD be paid to colour contrasts. For reference and as a recommendation see the BBCs 'Use of Colour' guidelines: 8

9 04. Errors The Global 404 and Global 500 error pages must be used. GLOBAL 500 ERROR PAGE 9

10 04. Errors The Global 404 and Global 500 error pages must be used. Type Specification Font: Arial Kerning: -0pt Weight: Bold Colour: # Size: 6pt Font: Arial Kerning: -0pt Weight: Regular Colour: # Size: 8pt Font: Arial Weight: Bold Size: 9pt Kerning: 0pt Colour: #f0006a 5 4 Font: Arial Leading: 0pt Weight: Regular Colour: # Size: 5.5pt 5 6 Font: Arial Leading: 6pt Weight: Regular Colour: # Size: 4pt Font: Arial Leading: 6pt Weight: Bold Colour: # Size: 4pt Font: Arial Weight: Regular Size: 4pt Leading: 6pt Colour: #f0006a GLOBAL 404 ERROR PAGE 0

11 05. Overlays Radioplayer templates have been designed to complement both light and dark designs. To ensure consistent visual treatment (hover states, shadow etc), you must use either the light or dark overlay. LIGHT TEMPLATE DARK TEMPLATE

12 06. Controls There must also be the following core control components positioned as shown in the diagram: A. main control button that can display stop, play and pause symbols as appropriate (see section 7. Functionality for more requirements); A D B E C B. State indicator that reads Loading... while the stream is buffering or LIVE while playing; C. Volume control (see section 7. Functionality for more requirements); D. PLAYING button (see section 7. Functionality for more requirements); E. MY STATIONS button (see section 7. Functionality for more requirements).

13 06. Controls F. a Search box For recorded content there must also be a time counter and a scrubbing pointer in the position shown on the diagram over the page F Type Specification Font: Arial Colour: # Weight: Bold Size: 9pt 3 Font: Arial Weight: Bold Size: pt Colour: #ffffff 4 Font: Arial Colour: #f Weight: Regular Size:.5pt 3

14 07. Loading When an audio stream (live or recorded) is loading a stop icon must be displayed in the main control button and the word Loading... to the right of the main control button. Type Specification Font: Arial Weight: Regular Size: pt Colour: #cccccc 4

15 07. Play, stop and pause control The main control button must display the stop, pause and play icons as appropriate. It can take on the 'accent' colour you have chosen. For simulcast the play icon must be displayed when audio streaming is stopped, the stop icon must be displayed when audio is playing. The pause button must not be available for simulcast. Live stream - Loading Square is visible whilst stream loads. Users can still stop the stream whilst it is loading. When the user hovers their mouse over the play button, it must 'indent' as shown. Live stream - Playing Square button indicating stop. 5

16 07. Play, stop and pause control The main control button must display the stop, pause and play icons as appropriate. It can take on the 'accent' colour you have chosen. For recorded audio playout the play icon must be displayed when the audio stream is paused, the pause button must be displayed when the audio stream is playing. The stop icon must not be used for recorded audio playout. AOD - Playing Right pointing arrow is visible until clicked by user. When the user hovers their mouse over the play button, it must 'indent' as shown. AOD - Pausing 6

17 07.3 Volume The volume control must be represented by the volume icon shown in section 06. Controls. Volume Icon On hover, the volume control must display a slider controlling the volume which is at full volume at the far right and muted at the far left take to far left. Additionally clicking anywhere within the slider bar will move the volume to that position. There must be four different volume icons: one for muted, one for low volume, one for mid volume and one for max volume On launch the volume must be set to medium Max Volume Mid Volume Low Volume Muted 7

18 07.4 Visual Feedback The main controls have three main visual feedback states: Off state (by default shown within the rest of this document) Hover state (shown on the top right hand side) HOVER STATES - dark template On Click state (shown on the bottom right hand side) These states must be followed to give users the appropriate level of visual recognition and to clearly communicate that the player is in a reactive state ON CLICK STATES - dark template 8

19 07.4 Visual Feedback The main controls have three main visual feedback states: Off state (by default shown within the rest of this document) Hover state (shown on the top right hand side) HOVER STATES - Light template On Click state (shown on the bottom right hand side) These states must be followed to give users the appropriate level of visual recognition and to clearly communicate that the player is in a reactive state ON CLICK STATES - Light template 9

20 07.6 Time counter For recorded audio playout the time counter and scrubbing pointer must display beside the main control button. These must function as normal allowing the scrubbing pointer to be dragged left and right to any chosen point in the recording. The time bar itself must also be clickable allowing the user to choose any given point in the recording. You may change the colour of the time bar to a chosen accent colour to match your branding. If an accent colour is used, the colour chosen must be the same for all components where an accent colour is allowed. Type Specification Font: Arial Weight: Bold Size: pt Colour: #ececec 0

21 07.7 Playing Upon clicking the PLAYING button a drop down panel must be displayed over the plug-in space. Dependent upon information availability, the drop down panel must display information about the radio station, radio show, presenter and/or track playing in a hierarchical fashion going from Tier to Tier 4 as defined in the diagrams below. The display must comply with the specifed truncation rules. Accent colours may be used for the name of the radio show for Tiers to 3 and the name of the radio station for Tier 4. This accent colour must be the same as that used for the time counter (see 07.4).

22 07.8 Playing - Tier Programme Image (86 x 48 pixels) Programme Name (3 characters not including ellipses) Track Now Playing; Track title & Artist (90 characters not including ellipses) 3 Type Specification Font: Arial Kerning: -5 Weight: Regular Colour: #f0006a Size: 5pt Font: Helvetica Weight: Bold Size: 9pt Colour: #ffffff 3 Font: Arial Leading: Auto Weight: Regular Kerning: 5 Size: pt Colour: #cccccc

23 07.8 Playing - Tier Programme Image (86 x 48 pixels or station image) Programme Name (3 characters not including ellipses) Programme Description (90 characters not including ellipses) Type Specification Font: Arial Kerning: -5 Weight: Regular Colour: #f0006a Size: 5pt Font: Arial Leading: Auto Weight: Regular Kerning: 5 Size: pt Colour: #cccccc 3

24 07.8 Playing - Tier 3 Programme Name (3 characters not including ellipses) Programme Description (90 characters not including ellipses) Type Specification Font: Arial Kerning: -5 Weight: Regular Colour: #f0006a Size: 5pt Font: Arial Leading: Auto Weight: Regular Kerning: 5 Size: pt Colour: #cccccc 4

25 07.8 Playing -Tier 4 Service Name (Medium name - 6 characters) Station Tagline (90 characters not including ellipses) Each panel must have the word Close and a close icon displayed in the top right. Accent colours may be used for the name of the radio show for Tiers to 3 and the name of the radio station for Tier 4. This accent colour must be the same as that used for the time counter (see 07.6) Type Specification Font: Arial Kerning: -5 Weight: Regular Colour: #f0006a Size: 5pt Font: Arial Leading: Auto Weight: Regular Kerning: 5 Size: pt Colour: #cccccc 5

26 07.9 MY STATIONS Upon clicking the MY STATIONS button a drop down panel must be displayed over the plug-in space. The drop down panel must display in rows of four the logos of the user s selected radio stations (including the last played logo as the first station in the first row). As a default the last played live streaming station logo must appear in the first box (with the wording LAST PLAYED in capitals above it as shown) with three blank boxes. 6

27 07.9 MY STATIONS As a default the last played live streaming station logo must appear in the first box (with the wording LAST PLAYED in capitals above it as shown) with three blank boxes Type Specification Font: Arial Colour: # Weight: Regular Size: pt Font: Arial Colour: # Weight: Bold Size: pt 3 Font: Arial Weight: Bold Size: 9pt Colour: #ffffff 4 Font: Arial Colour: # Weight: Regular Size: pt 5 Font: Arial Weight: Regular Size: pt Colour: #ccc 6 Font: Arial Colour: # Weight: Regular Size: pt 7

28 07.9 MY STATIONS If this is the first time a user opens the player, then the current station is displayed in the Last Played area. As a user adds station the MY STATIONS panel must expand to hold a maximum of 6 station logos (including the last played logo as the first station in the first row). Upon opening the MY STATIONS panel the top of the panel must display from left to right, the text Stations added (x) where x is the number of station the user has added to the panel, an Add button which allows the user to add further stations and on the far right a close button with close icon. Once a user has added a radio station to their MY STATIONS panel an Edit button must also be displayed. 8

29 07.9 MY STATIONS Type Specification Font: Arial Colour: # Weight: Regular Size: pt Font: Arial Colour: # Weight: Bold Size: pt Font: Arial Colour: # Weight: Regular Size: pt 8 4 Font: Arial Weight: Regular Size: pt Colour: #ccc 5 Font: Arial Colour: # Weight: Bold Size: 9pt 6 7 Font: Arial Colour: # Weight: Regular Size: pt Font: Arial Colour: #666 Weight: Bold Size: pt 8 Font: Arial Colour: # Weight: Regular Size: pt Brand logo size must be w 76px, h 43px 9

30 07.9 MY STATIONS Re ordering Drag and drop action Rolling over a station Brings up programme name, if programme name data is not available, we fall back to service name My Stations Edit Canvas Each active radio station is overlaid with a remove icon and a "grab box" 30

31 07.9 MY STATIONS On rollover of any station present within the MY STATIONS panel a play icon and a message showing the programme information of the programme currently playing on that station should be displayed. If this information is unavailable then the play icon only must be displayed. If a user clicks off the MY STATIONS panel without saving any changes that have been made, a warning message in a modal dialogue box must be displayed. 3

32 07.9 MY STATIONS Type Specification Font: Arial Kerning: 5 Weight: Bold Colour: #ffffff Size: pt Font: Arial Kerning: 5 Weight: Regular Colour: #ffffff Size: pt Font: Arial Kerning: 0 Weight: Bold Colour: #ffffff Size: 3pt Font: Arial Leading: Auto Weight: Regular Kerning: 0 Size: pt Colour: #ffffff 5 Font: Arial Weight: Regular Size: pt Colour: #ffffff 6 Font: Arial Colour: # Weight: Regular Size: pt On rollover message of programme information is displayed Warning message is displayed 3

33 07.0 Search The search box must as a default display the text Search Radioplayer. To the right of the search box there must be a button that initiates the search, labelled with the icon as shown in the diagram below. The search box must allow free text entry up to a maximum of 7 characters. Type Specification Font: Arial Colour: # Weight: Regular Size:.5pt Search Box 33

34 07.0 Search On key press within the search field a tip must be displayed. This tips must display the agreed wording as follows: Tip: Try entering a station name, programme dj or artists. For local results try entering a postcode. 3 The tip must be accompanied with a line of text below the tip reading Do not show this tip again followed by a close icon Type Specification Font: Arial Weight: Bold Size: pt Colour: #ffffff Font: Arial Weight: Regular Size: pt Colour: #ffffff 3 Font: Arial Weight: Regular Size: pt Leading: 6pt Colour: #ffffff TIP Box 34

35 07.0 Search Upon entering a search term and clicking the search icon, or hitting return, the results must be displayed in a result screen which overlays the plug-in area. Up to a maximum of 50 search results will be returned. Research result must be shown in hierarchical order. In the first instance results must be displayed in a group of nine, with five being shown within the visible area of the results screen and a further four shown by scrolling down within the results screen window. A More results button must be displayed under the ninth result of each search results window, with the exception of the window showing the final 50th search result. 35

36 07.0 Search Type Specification Font: Arial Kerning: 5 Weight: Bold Colour: #f0006a Size: 5pt Font: Arial Kerning: 5 Weight: Regular Colour: # Size: pt Font: Arial Leading: Auto Weight: Regular Colour: # Size: pt 4 Font: Arial Weight: Bold Size: 9pt Colour: #ffffff 5 Font: Arial Colour: # Weight: Regular Size: pt Font: Arial Colour: # Weight: Regular Size: pt 8 7 Font: Arial Kerning: -5 Weight: bold italic Colour: # Size: 0.5pt 8 Font: Arial Kerning: -5 Weight: italic Colour: # Size:

37 07.0 Search Image shows search results 6 to 9 from a search Individual search result must be displayed with a radio show or station image, where one is available or use the fallback no station image if not. Images must be accompanied by text displaying the radio station name, the programme name, and programme description or station information where the programme information is not available. The radio station name may be displayed in an accent colour. This colour must be the same colour as that used for the timebar (see 07.6) & the programme name within the PLAYING panel (see 07.7). 37

38 07.0 Search Upon rollover of a search result the background must display as white. Additionally a play icon must appear over the image or image box which allows the user to play that programme and an Add button must appear on the top right of the search result allowing the user to add this station to the MY STATION panel. An 'Added' icon should be displayed for any stations which are already present in a user's My Station presets. 38

39 07.0 Search If a search term results in no found matches a No results message must be displayed as shown. 3 Type Specification 5 4 Font: Arial Kerning: -0 Weight: Bold Colour: # Size: 6pt 5 Font: Arial Leading: 0pt Weight: Regular Colour: # Size: 5.5pt 6 Font: Arial Kerning: -0 Weight: Bold Colour: # Size: 8pt 6 7 Font: Arial Leading: 6pt Weight: Regular Colour: # Size: 4pt 7 3 Font: Arial Kerning: -0 Weight: Regular Colour: # Size: 8pt 8 Font: Arial Weight: bold Size: 4pt Leading:6pt Colour: #f0006a 8 4 Font: Arial Weight: Bold Size: 9pt Colour: #f0006a 39

40 08. Other requirements 40

41 Radioplayer September 00