bet.com redesign · 2 bet.com redesign ux specification / version 7.5 / may 25, 2016 changelog...
TRANSCRIPT
2
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016
Changelog
Version Date Changes
7.5 5/25/2016 • Added Large variation for enhanced article video embed for use with tier 2 • Fixed typos on Enhanced Article content pages• Added Loader Module for Enhanced Article Tier 1• Updated Ongoing Story Tile to include End of List varation• Added Sticky share links to Ongoing Story Landing page• Added Listicle Item: Text-only Variation
7.4 5/18/2016 • Re-numbered a few Content Pages to reduce confusion
• Added Ongoing Story Gallery List page
• Updated Ongoing Story Article Page
• Updated creative for Ongoing Story Inline Module
• Updated Enhanced Article Pages
• Clarified annotations for Enhanced Hero Module
• Enhanced Ad renamed to Enhanced Promo Module
• Enhanced Promo Module Halftone mask details updated
• Updated Nav behavior for Tier 1 Enhanced Article Page
7.3 5/12/2016 • Updated Image Carousel module with latest creative
• Added Enhanced Ad module
• Renamed Enhanced Graphic CTA to Enhanced Parallax Promo
• Updated Enhanced Parallax Promo with more details and variations
7.2 5/10/2016 • Updated Ongoing Story List Module with latest creative
• Added Ongoing Story Inline Module
• Renumbered Enhanced Article content modules to keep Ongoing Story modules together
• Replaced deprecated Subtitle Text module with Title Text Module
• Added Ongoing Story variations to Title Text
7.1 5/9/2016 • Updated Enhanced Hero Module
• Updated Image Carousel Module
• Updated Ongoing Story content pages
3
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016
ChangelogVersion Date Changes
7.0 5/5/2016 • Added Enhanced Hero Module
• Added Progress Bar content module
• Updated Body Copy Module to include Enhanced Article variations
• Updated Video Embed to include Enhanced Article variation
• Updated Listicle Item with latest creative
• Added Image Carousel module
• Enhanced Graphic CTA
• Added Enhanced Article Pages (Tier 1 and 2)
6.3 3/29/2016 • Updated timestamp rules for Content Feed Modules
• Updated timestamp rules for Social Share Links
• Minor updates to Schedule Page behavior
• Clarified Ad and tablet portrait behavior for Grid List Module
• Added Ongoing Story List Module, Tile, and content pages
• Added Video Playlist Player Module, and Detail Page
6.2 3/24/2016 • Added Listicle Item content module
• Added Listicle content page
• Updated List Module and Revised List Module CTA button behavior
• Updated Branded Banner Without Subnav variation screens
• Updated Related In-Line Item with single item variation
• Updated Featured modules to include references to the styleguide for sizing and other style information
6.1 3/16/2016 • Added a Without Subnav variation for Branded Banner
• Updated Global Nav behavior when Branded Banner is present
• Updated Revised List Module CTA button behavior
• Updated Social Share Links buttons
• Updated Share menu buttons for Content Feed Modules
6.0 3/1/2016 • Deprecated the old Countdown Module, FM.8
• Removed the note about ad injection from the Feed Container Module FM.1
• Video Embed Age Gate authorization states updated to include a re-authorization step
• Added Image Gallery Detail End Cap variation
• Added image count to Image Gallery Embed content icon
• Added Top Video Landing grid page
• Added Grid Container See All variation for Tentpoles and Events to allow for different button behavior
4
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016
Table of ContentsGLOBAL NAVIGATION
GN.1.1. Global Navigation Elements ...........................................................................................................................10
GN.1.2. Global Navigation Responsive Behavior ...........................................................................................11
GN.1.3. Global Navigation: Pull-out Menu (Mobile) ....................................................................................12
GN.1.4. Global Navigation: Desktop Variation .................................................................................................13
GN.1.5. Global Navigation: Varying Viewport Widths (Desktop) ..................................................14
GN.1.6. Global Navigation: Shows Drop-down (Desktop) ...................................................................15
GN.1.7. Global Navigation: Music, Celebs, Lifestyle Drop-downs (Desktop) ......................16
GN.1.8. Global Navigation: More Drop-down (Desktop) .......................................................................17
GN.1.9. Global Navigation - Triple Promo ............................................................................................................18
GN.2.1. Branded Banner ........................................................................................................................................................19
GN.2.2. Branded Banner (Desktop) ..........................................................................................................................20
GN.2.3. Branded Banner: Show Specific Variation .....................................................................................21
GN.2.4. Branded Banner: Responsive Behavior ............................................................................................22
GN.2.5. Branded Banner: Global Nav Behavior .............................................................................................23
GN.2.6. Branded Banner: Without Subnav Variation ...............................................................................24
GN.3.1. Page Footer ..................................................................................................................................................................25
GN.3.2. Page Footer: Responsive Behavior.......................................................................................................26
GN.3.3. Page Footer: Back to Top ..............................................................................................................................27
GN.3.4. Page Footer: Back to Top Responsive Behavior .....................................................................28
GN.4.1. Search .................................................................................................................................................................................29
GN.4.2. Search: Autosuggest ..........................................................................................................................................30
GN.4.3. Search: Search Results Page ......................................................................................................................31
GN.4.3. Search: No Results Page .................................................................................................................................32
GN.4.4. Search: Mobile Menu Variation .................................................................................................................33
GN.5.1. Countdown Module ...............................................................................................................................................34
GN.5.2. Countdown Module: Responsive Behavior ...................................................................................35
GN.5.3. Countdown Module: Scroll Behavior ...................................................................................................36
GN.5.4. Countdown Module: Roll-Over Behavior ........................................................................................37
GN.5.5. Countdown Module: Add to Calendar Roll-over .....................................................................38
FEED MODULESFM.1.1. Feed Container ............................................................................................................................................................41
FM.1.2. Feed Container Responsive Behavior ..................................................................................................42
FM.1.3. Feed Container: Limiting and Filtering ...............................................................................................43
FM.1.4. Feed Container: Pagination and Lazy Load ..................................................................................44
FM.2.1. Content Module .......................................................................................................................................................45
FM.2.2. Content Module: Responsive Behavior .............................................................................................46
FM.2.3. Content Module: Video Variation ..........................................................................................................47
FM.2.4. Timestamp Rules and Variations ............................................................................................................48
FM.2.5. Share Menu Expanded ......................................................................................................................................49
FM.2.6. Roll-Over Behavior ...............................................................................................................................................50
FM.3.1. Trending Module .......................................................................................................................................................51
FM.3.3. Trending Module Responsive Behavior ............................................................................................52
FM.3.4. Roll-Over Behavior ...............................................................................................................................................53
FM.4.1. Featured 1-Up Module .........................................................................................................................................54
FM.4.2. Featured 1-UP Module: Large Responsive Behavior ............................................................55
FM.4.3. Featured 1-UP Module: Small Responsive Behavior .............................................................56
FM.4.4. Featured 1-UP Module: Roll-Over Behavior..................................................................................57
FM.4.5. Share Menu Expanded –DEPRECATED ...........................................................................................58
FM.5.1. Featured 2-Up Module ........................................................................................................................................59
FM.5.2. Featured 2-UP Module: Large Responsive Behavior ...........................................................60
FM.5.3. Featured 2-UP Module: Small Responsive Behavior ............................................................61
FM.5.4. Featured 2-UP Module: Roll-Over Behavior.................................................................................62
FM.5.5. Share Menu Expanded – DEPRECATED ..........................................................................................63
FM.6.1. Follow And Newsletter Sign-up ................................................................................................................64
FM.6.2. Follow and Newsletter Signup: Responsive Behavior ........................................................65
FM.6.3. Email Entry Flow ....................................................................................................................................................66
FM.6.4. Follow and Newsletter Signup: Left Rail Condensed Variation ................................67
FM.7.1. List Module .....................................................................................................................................................................68
FM.7.2. List Module: Responsive Behavior ..........................................................................................................69
FM.7.3. List Module: Sponsored Variation ...........................................................................................................70
FM.7.4. List Module: 2-Column Variations ...........................................................................................................71
FM.7.1. List Module (Deprecated) ................................................................................................................................72
FM.7.2. List Module: Responsive Behavior (Deprecated) ....................................................................73
FM.8.1. Countdown Module ...............................................................................................................................................74
FM.8.2. Countdown Module: Responsive Behavior ...................................................................................75
FM.9.1. Tag Banner Module ................................................................................................................................................76
FM.9.2. Tag Banner Module: Variation ....................................................................................................................77
FM.9.3. Tag Banner Module: Responsive Behavior ....................................................................................78
FM.10.1. Static Promo Module ..........................................................................................................................................79
FM.10.2. Static Promo Module: Small Variation .............................................................................................80
5
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016
Table of ContentsFM.10.2. Static Promo Module: Responsive Behavior ..............................................................................81
FM.11.1. Parallax Promo Module ......................................................................................................................................82
FM.11.2. Parallax Promo Module: Responsive Behavior ..........................................................................83
FM.12.1. TV Schedule Module ...........................................................................................................................................84
FM.12.2. TV Schedule: Responsiveness ..................................................................................................................85
FM.12.3. TV Schedule Module: Single Item Variation ................................................................................86
FM.13.1. Related List Module (Deprecated) ........................................................................................................87
FM.13.2. Related List Module: Responsive Behavior (Deprecated) ............................................88
FM.14.1. Simple List Module (Deprecated) ..........................................................................................................89
FM.14.2. Simple List Module: Responsive Behavior (Deprecated) ..............................................90
FM.15.1. Ongoing Story List Module...........................................................................................................................91
FM.15.2. Ongoing Story List Module: Responsive Behavior ...............................................................92
FEED PAGESFP.1.1. Responsive Considerations for All Feed Pages .............................................................................95
FP.2.1. Home Page ......................................................................................................................................................................96
FP.3.1. Music Landing Page ................................................................................................................................................97
FP.8.1. Tag Page ............................................................................................................................................................................98
FP.9.1. Topic Page ........................................................................................................................................................................99
FP.10.1. Full Episodes Page .................................................................................................................................................100
CONTENT MODULESCM.1.1. Article Body Container ........................................................................................................................................104
CM.2.1. Hero Container Module......................................................................................................................................105
CM.2.2. Hero Container: Responsive Behavior ...............................................................................................106
CM.3.1. Title Text Module ......................................................................................................................................................107
CM.3.2. Title Text: Responsive Behavior ...............................................................................................................108
CM.3.3. Title Text Module: No Subtitle Variation ..........................................................................................109
CM.3.4. Title Text Module: Ongoing Story Variation .................................................................................110
CM.4.1. Author ................................................................................................................................................................................111
CM.4.2. Author: Responsive Behavior ....................................................................................................................112
CM.5.1. Hero Image (Deprecated) ...............................................................................................................................113
CM.5.2. Hero Image: Responsive Behavior (Deprecated) ...................................................................114
CM.6.1. Image Source Attribution ................................................................................................................................115
CM.6.2. Image Source Attribution: Responsive Behavior ....................................................................116
CM.7.1. Social Share Links ....................................................................................................................................................117
CM.7.2. Social Share Links: Responsive Behavior ........................................................................................118
CM.7.3. Social Share Links: Scrolled State ..........................................................................................................119
CM.7.4. Social Share Links Expanded States ...................................................................................................120
CM.7.5. Social Share Links: Hero Variation .........................................................................................................121
CM.7.6. Social Share Links: Video Embed Expanded State ...............................................................122
CM.7.7. Social Share Links: Without Metadata Variation .......................................................................123
CM.8.1. Body Copy .....................................................................................................................................................................124
CM.8.2. Body Copy: Responsive Behavior .........................................................................................................125
CM.8.3. Body Copy: Featured Article Variation ............................................................................................126
CM.8.2. Body Copy: Container Width .....................................................................................................................127
CM.9.1. Image Embed ..............................................................................................................................................................128
CM.9.2. Image Embed: Responsive Behavior ..................................................................................................129
CM.9.3. Image Embed: Hero Variation ...................................................................................................................130
CM.10.1. HTML Embed .............................................................................................................................................................131
CM.10.2. HTML Embed: Responsive Behavior .................................................................................................132
CM.11.1. Related In-Line Item .............................................................................................................................................133
CM.11.2. Related In-Line Item: Responsive Behavior .................................................................................134
CM.11.3. Related In-Line Item: Single Item Variation ..................................................................................135
CM.12.1. Topic / Tag Links ....................................................................................................................................................136
CM.12.2. Topic / Tag Links: Responsive Behavior .........................................................................................137
CM.13.1. Social Post Embed Module ..........................................................................................................................138
CM.15.1. Grid List Module ......................................................................................................................................................139
CM.15.2. Grid List: Responsive Behavior ...............................................................................................................140
CM.16.1. Video Embed .............................................................................................................................................................141
CM.16.2. Video Embed: Responsive Behavior .................................................................................................142
CM.16.3. Video Embed: Hero Variation ..................................................................................................................143
CM.16.4. Video Embed: Short Browser Hero Variation ...........................................................................144
CM.16.5. Video Embed: TVE Auth Required Variation ............................................................................145
CM.16.5. Video Embed: Age Gate Variation ......................................................................................................146
CM.16.6. Video Embed: Multiple Image Option .............................................................................................147
CM.16.7. Video Embed: Enhanced Article Variation ..................................................................................148
CM.16.8. Video Embed: Enhanced Article Large Variation .................................................................149
CM.16.9. Video Embed: Enhanced Article Large Variation: Responsive Behavior.......150
CM.17.1. Video Playlist Embed ..........................................................................................................................................151
CM.17.2. Video Playlist Embed: Hero Variation ...............................................................................................152
CM.17.3. Video Playlist Embed: Responsive Behavior ..............................................................................153
6
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016
Table of ContentsCM.18.1. Video Playlist Player ............................................................................................................................................154
CM.18.2. Video Playlist Player: Responsive Behavior ................................................................................155
CM.18.3. Video Playlist Player: Mobile Variation ............................................................................................156
CM.20.1. Image Gallery Embed ......................................................................................................................................157
CM.20.2. Image Gallery Embed (Hero Variation) ........................................................................................158
CM.20.3. Image Gallery Embed: Responsive Behavior ..........................................................................159
CM.21.1. Listicle Item .................................................................................................................................................................160
CM.21.2. Listicle Item: Responsive Behavior .....................................................................................................161
CM.21.3. Listicle Item: Text-only Variation ...........................................................................................................162
CM.22.2. Pull Quote: Responsive Behavior ........................................................................................................163
CM.23.1. Comments ...................................................................................................................................................................164
CM.23.2. Comments: Responsive Behavior .......................................................................................................165
CM.23.1. Comments: Wide Variation .........................................................................................................................166
CM.24.1. Recommended Content ................................................................................................................................167
CM.24.2. Recommended Content: Responsive Behavior ....................................................................168
CM.25.1. Heading..........................................................................................................................................................................169
CM.25.2. Heading: Responsive Behavior ..............................................................................................................170
CM.25.3. Heading: Variations ...........................................................................................................................................171
CM.26.1. Ongoing Story Tile ..............................................................................................................................................172
CM.26.2. Ongoing Story Tile: Responsive Behavior ..................................................................................173
CM.26.3. Ongoing Story Tile: Large Variation .................................................................................................174
CM.26.4. Ongoing Story Tile: End of List Variations ................................................................................175
CM.27.1. Ongoing Story Inline Module .....................................................................................................................176
CM.27.2. Ongoing Story Inline Module: Responsive Behavior .........................................................177
CM.28.1. Enhanced Hero Module ..................................................................................................................................178
CM.28.2. Enhanced Hero Module: Responsive Behavior ......................................................................179
CM.28.3. Enhanced Hero Module: Tier 1 Layer Structure .....................................................................180
CM.28.4. Enhanced Hero Module: Tier 1 Mobile Parallax Behavior .............................................181
CM.28.5. Enhanced Hero Module: Tier 1 Desktop Parallax Behavior .........................................182
CM.28.6. Enhanced Hero Module: Vertical Scroll Behavior................................................................183
CM.29.1. Progress Bar Module .........................................................................................................................................184
CM.29.2. Progress Bar Module: Calculating Progress ..............................................................................185
CM.30.1. Image Carousel Module .................................................................................................................................186
CM.30.2. Image Carousel Module: Responsive Behavior .....................................................................187
CM.30.3. DEPRECATED–Image Carousel Module: Responsive Page Behavior .............188
CM.30.1. Enhanced Parallax Promo ...........................................................................................................................189
CM.30.2. Enhanced Parallax Promo: Responsive Behavior ...............................................................190
CM.30.3. Enhanced Parallax Promo: Layer Structure ..............................................................................191
CM.30.4. Enhanced Parallax Promo: Video Variation ..............................................................................192
CM.31.1. Enhanced Promo Module ..............................................................................................................................193
CM.31.2. Enhanced Promo Module: Responsive Behavior ..................................................................194
CM.31.3. Enhanced Promo Module: Layers and Scroll Behavior ...................................................195
CM.32.1. Enhanced Article Loader ..............................................................................................................................196
CM.32.2. Enhanced Article Loader: Responsive Behavior ..................................................................197
CONTENT PAGESCP.1.1. Responsive Considerations for All Content Pages .....................................................................200
CP.2. Article Page .......................................................................................................................................................................201
CP.3.1. Image Gallery List Page ......................................................................................................................................202
CP.3.2. Image Gallery List: Responsive Behavior .........................................................................................203
CP.4.1. Image Gallery Detail Page ................................................................................................................................204
CP.4.2. Image Gallery Detail Page: Responsive Behavior ....................................................................205
CP.4.3. Image Gallery Detail Page - Mobile States .....................................................................................206
CP.4.4. Image Gallery Detail Page - Desktop States ................................................................................207
CP.4.5. Image Gallery Detail Page: End Cap ....................................................................................................208
CP.5. Video Detail Page ........................................................................................................................................................209
CP.6. Listicle Page ......................................................................................................................................................................210
CP.7. Ongoing Story Article Page ...............................................................................................................................211
CP.8. Ongoing Story Video Detail Page ...............................................................................................................212
CP.9. Ongoing Story Image Gallery List Page ................................................................................................213
CP.10. Ongoing Story Landing Page ........................................................................................................................214
CP.11. Video Playlist Detail Page....................................................................................................................................215
CP.12. Tier 1 Enhanced Article Page ..........................................................................................................................216
CP.13. Tier 2 Enhanced Article Page .........................................................................................................................217
GRID MODULESGM.1.1. Grid Container .............................................................................................................................................................220
GM.1.2. Grid Container Responsive Behavior ...................................................................................................221
GM.1.3. Grid Container: Ad Placement ....................................................................................................................222
GM.1.4. Grid Container: See More Variation .......................................................................................................223
GM.1.5. Grid Container: See All Variation .............................................................................................................224
GM.2.1. Video Playlist Tile ....................................................................................................................................................225
7
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016
Table of ContentsGM.3.1. Show Tile .........................................................................................................................................................................226
GRID PAGESGP.1.1. Responsive Considerations for All Grid Pages ..............................................................................229
GP.2.1. Trending Landing Page .......................................................................................................................................230
GP.3.1. Top Video Landing Page ...................................................................................................................................231
SHOW PAGESSP.1. All Shows Landing Page ..........................................................................................................................................234
SP.2. Show-Specific Landing Page ............................................................................................................................235
SP.3. Show-Specific Video Detail Page .................................................................................................................236
SP.4. Show-specific Image Gallery List Page ..................................................................................................237
SP.5. Show-specific Cast Page.......................................................................................................................................238
SP.6. Episode List Page ........................................................................................................................................................239
SP.7. Show-specific Article Page..................................................................................................................................240
SP.8. Show-specific Videos Page ................................................................................................................................241
SP.9. Show-specific Photos Page ................................................................................................................................242
UNIQUE PAGESUP.1.1. Schedule Page ...............................................................................................................................................................245
UP.1.2. Schedule Page: Responsive Behavior ...................................................................................................246
UP.2.1. Plain Text Page ............................................................................................................................................................247
UP.3.1. Cable Subscription Authentication .........................................................................................................248
UP.3.2. Cable Subscription Form Flow ..................................................................................................................249
UP.3.3. Cable Subscription Form: View All Providers ..............................................................................250
UP.3.4. Cable Subscription Form: Signed In .....................................................................................................251
UP.3.5. Cable Subscription Form: Provider Not Listed Flow ............................................................252
UP.3.6. Cable Subscription Form: Xfinity Login ............................................................................................253
UP.3.7. Cable Subscription Form: Access Ended .........................................................................................254
UP.4.1. 404 Error Page ...........................................................................................................................................................255
UP.4.2. 404 Error Page: Responsive Behavior ...............................................................................................256
UP.5.1. HTML Modal Layer ...................................................................................................................................................257
UP.5.2. HTML Modal Layer: Responsive Behavior .......................................................................................258
TENTPOLE & BETX MODULESTM.1.1. Revised List Module ................................................................................................................................................261
TM.1.2. Revised List Module: Responsive Behavior ....................................................................................262
TM.2.1. Packaged List Module .........................................................................................................................................263
TM.2.2. Packaged List Module: Responsive Behavior .............................................................................264
TM.3.1. Revised Featured Module ................................................................................................................................265
TM.3.2. Revised Featured Module: Responsive Behavior ....................................................................266
TM.3.3. Revised Featured Module: Roll-Over Behavior .........................................................................267
TM.4.1. Featured 3-UP Module .......................................................................................................................................268
TM.4.2. Featured 3-UP Module: Responsive Behavior ...........................................................................269
TM.5.1. Featured 4-UP Module .......................................................................................................................................270
TM.5.2. Featured 4-UP Module: Responsive Behavior ...........................................................................271
TM.6.1. Featured 5-UP Module .......................................................................................................................................272
TM.6.2. Featured 5-UP Module: Responsive Behavior ............................................................................273
TM.7.1. Revised Schedule Module ................................................................................................................................274
TM.8.1. Revised Global Nav ................................................................................................................................................275
TM.9.1. Branded Banner: Awards Show .................................................................................................................276
TM.9.2. Branded Banner and Subnav: BET Experience .........................................................................277
TM.10.1. Logo Quilt Module ................................................................................................................................................278
TM.10.2. Logo Quilt Module: Responsive Behavior ....................................................................................279
TENTPOLE & BETX PAGESTP.1.1. Tentpole Homepage .................................................................................................................................................282
TP.2.1. Tentpole Nominees ..................................................................................................................................................283
TP.3.1. Tentpole Winners .......................................................................................................................................................284
TP.4.1. Tentpole Performers ...............................................................................................................................................285
TP.5.1. Tentpole Videos (e.g. Performances) .....................................................................................................286
TP.6.1. Tentpole Honorees ...................................................................................................................................................287
TP.7.1. Tentpole Article / Image Gallery Detail Page .................................................................................288
TP.8.1. Tentpole Tag page ....................................................................................................................................................289
TP.9.1. BET Experience Homepage ............................................................................................................................290
TP.10.1. BET Experience Logo Grid Page ..............................................................................................................291
TP.11.1. BET Experience Events .......................................................................................................................................292
TP.12.1. BET Experience Information pages .......................................................................................................293
TP.14.1. BET Experience Performers Page ...........................................................................................................294
TP.15.1. BET Experience Schedule Page ................................................................................................................295
TP.16.1. BET Experience Event Detail Page ........................................................................................................296
BET.com Redesign / UX Specification
Global Navigation
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 9
GLOBAL NAVIGATIONOverview
GN.1.1. Global Navigation Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
GN.1.2. Global Navigation Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
GN.1.3. Global Navigation: Pull-out Menu (Mobile) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
GN.1.4. Global Navigation: Desktop Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
GN.1.5. Global Navigation: Varying Viewport Widths (Desktop) . . . . . . . . . . . . . . 14
GN.1.6. Global Navigation: Shows Drop-down (Desktop) . . . . . . . . . . . . . . . . . . . . . . . 15
GN.1.7. Global Navigation: Music, Celebs, Lifestyle Drop-downs (Desktop) . 16
GN.1.8. Global Navigation: More Drop-down (Desktop) . . . . . . . . . . . . . . . . . . . . . . . . . 17
GN.1.9. Global Navigation - Triple Promo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
GN.2.1. Branded Banner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
GN.2.2. Branded Banner (Desktop) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
GN.2.3. Branded Banner: Show Specific Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
GN.2.4. Branded Banner: Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22
GN.2.5. Branded Banner: Global Nav Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
GN.2.6. Branded Banner: Without Subnav Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
GN.3.1. Page Footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
GN.3.2. Page Footer: Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
GN.3.3. Page Footer: Back to Top . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27
GN.3.4. Page Footer: Back to Top Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . 28
GN.4.1. Search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
GN.4.2. Search: Autosuggest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
GN.4.3. Search: Search Results Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
GN.4.3. Search: No Results Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
GN.4.4. Search: Mobile Menu Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
GN.5.1. Countdown Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
GN.5.2. Countdown Module: Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
GN.5.3. Countdown Module: Scroll Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
GN.5.4. Countdown Module: Roll-Over Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37
GN.5.5. Countdown Module: Add to Calendar Roll-over . . . . . . . . . . . . . . . . . . . . . . . 38
The Global and Show Navigation areas accomplish two things: they show you what content is available, they give you a way to navigate to that content.
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 10
GLOBAL NAVIGATION
The Global Navigation is visible on all pages and gives easy access to all the main categories, as well as other selected destinations.
GN.1.1. Global Navigation Elements
1 BET LOGO
Tap to go to the home page.
2 QUICK ACCESS ICONS
Quickly access Trending and Must Watch Videos.
3 NAV DROPDOWN
Tap to have the nav slide in from the left, pushing the content right.
2
1
3
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 11
GLOBAL NAVIGATIONGN.1.2. Global Navigation Responsive Behavior
On tablet, the layout is the same. The nav bar is compacted to preserve space on mobile.
On desktop, the nav bar is more complete, with all the main categories displayed, as well as the three special icons.
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 12
GLOBAL NAVIGATION
On small touch devices, and on all browser sizes on show pages, the Global Navigation is minimized with a pull-out menu hidden behind a button.
GN.1.3. Global Navigation: Pull-out Menu (Mobile)
1 CLOSE BUTTON
The menu button turns into a close button when the nav is open. Tapping this again closes the nav.
2 TOP NAV LINKS
The Home, Trending and Videos links (or their replacements when showing a branded banner) should still be active when the menu is open.
3 SEARCH BAR
Tap to focus and begin entering search term.
4 SHOWS DROPDOWN LINK/EXPANDED SHOWS LIST
Tap to expand a list of shows, which will push down the rest of the nav. This reveals a curated set of up to four shows. Each links to its Show Landing page. Tapping again closes the expanded list.
5 ALL SHOWS LINK
This is a static link to the All Shows page.
6 OTHER CATEGORY LINKS
The four remaining main categories are displayed here. Each links to the landing page for that category.
7 FULL EPISODES & TV SCHEDULE LINKS
Links to the Full Episodes page, and the TV Schedule page.
8 FEATURED ITEMS
Up to 3 curated items. Each one links to the URL assigned in the CMS.
9 APP PROMO
Links to a redirect that either opens the app store most relevant to you, or opens an app description page.
10 FOLLOW LINKS
11 NEWSLETTER SUBSCRIPTION FORM
12 LEGAL LINKS AND INFO
Copyright information, legal info and partner links.
3
1 2
4
5
6
7
8
9
10
11
12
UPDATE PENDING
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 13
GLOBAL NAVIGATION
The desktop version of the nav mirrors the mobile, but with some extra features and states.
GN.1.4. Global Navigation: Desktop Variation
1 DEFAULT STATE (HOMEPAGE, TAG PAGES, AND SEARCH RESULTS)
The nav bar in its default state, top of the page.
2 CATEGORY LINKS
These are broken out as separate links on desktop, and when you hover your mouse over them, drop-down menus appear below.
3 MORE MENU
The items that are not part of a category section in the mobile nav (i.e., anything at the bottom of the slide out menu) appears in this menu when you mouse over the three dot link.
4 SEARCH BUTTON
Click this button to open the search entry field.
5 COMPACT STATE (HOMEPAGE, TAG PAGES, AND SEARCH RESULTS)
When you scroll to the point at which the nav bar “hits” the top of the viewport, it transitions to a shorter, more compact mode, with a different logo treatment and no labels for the featured links. This bar remains fixed at the top of the viewport until you scroll back to the top of the page again.
6 DEFAULT STATE (CATEGORIZED PAGES)
When viewing a page that has a primary category that matches one of the 5 shown, the category link in the nav bar is highlighted.
7 COMPACT STATE (CATEGORIZED PAGES)
The highlight remains as the page is scrolled and the nav bar assumes its compact state.
1
5
6
7
3 42
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 14
GLOBAL NAVIGATION
At different viewport widths, the global nav appears slightly different.
GN.1.5. Global Navigation: Varying Viewport Widths (Desktop)
997PX
1230PX
125PX 125PX
1451PX
1 BROWSER WIDTH = 997–1229PX
When the browser is at least 997 pixels wide, but still not a wide screen (e.g., a tablet in landscape) there is very little padding around the content and the nav.
2 BROWSER WIDTH = 1230–1450PX
The margins become fixed at 125 px on either side of the content and nav such that the nav may be narrower than 997 pixels wide at some screen sizes. This is to better accomodate certain hero content.
3 BROWSER WIDTH > 1450PX
When the browser width is larger than 1450px, the content width stays fixed at 1200px as the outer margins continue to grow.
1
2
3
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 15
GLOBAL NAVIGATION
The Shows expanded dropdown is unique in that it contains links to full episodes and the TV Schedule.
GN.1.6. Global Navigation: Shows Drop-down (Desktop)
1 FEATURED SHOW LINKS
Up to 4 featured shows may be curated and they appear as links in the left column here. These correspond to the shows that appear in the expandable shows menu in the mobile version of the nav.
2 STATIC LINKS
Taking up the last two slots are Full Episodes and TV Schedule links. Unlike the featured show links, these two are static.
3 FEATURED THUMBNAILS
The first three content items featured on the All Shows Landing Page are also featured here, in thumbnail form.
4 SEE ALL SHOWS
Link to the All Shows Landing Page.
1
2
3
4
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 16
GLOBAL NAVIGATION
The Music, Celebs, and Lifestyle mouse-over states of the desktop nav all contain the same structure and elements.
GN.1.7. Global Navigation: Music, Celebs, Lifestyle Drop-downs (Desktop)
1 PROMOTED LINKS
Up to 6 curated links here; can link to anything within the given category.
2 FEATURED CONTENT
The first three featured content items on the corresponding category landing page also appear here in thumbnail form.
3 SEE ALL BUTTON
This says ‘SEE ALL [CATEGORY NAME]’ and links to the appropriate Category Landing page.
1 2
3
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 17
GLOBAL NAVIGATION
The dropdown that appears when you hover over the ... link looks similar to the other dropdowns, but has several different elements.
GN.1.8. Global Navigation: More Drop-down (Desktop)
1 PROMO LINKS
These are links to various promotional items, as specified in the CMS. Max number of links is 6.\
2 FEATURED ITEMS
These 3 featured items are the same as the Featured items in the mobile dropdown menu and the Triple Promo.
3 SOCIAL BUTTONS
These link to their respective BET social pages from which you can follow BET.
4 APP PROMO
A redirect link that will lead you to the appropriate app store for your platform or take you to a page where you can find app store links.
5 NEWSLETTER SUBSCRIPTION FORM
Enter your email address to subscribe to the BET newsletter.
2
53 4
1
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 18
GLOBAL NAVIGATION
This promotional element appears only on wide screens, and only on the first page view per session.
GN.1.9. Global Navigation - Triple Promo
1 PROMOTED ITEMS
Three items that appear at the top of the page. They don’t lock up like the rest of the nav, rather they scroll with the page content. These are the same three items that appear in the “...” dropdown on desktop, and also in the mobile dropdown. They are curated in the CMS. This module only appears on the first page of a session, and only on browsers wider than 995px.
2 BACKGROUND IMAGE
Each promo has a background image, and this is a different crop of the same image in the other views of this item.
3 CTA TEXT
Text that tells you what you’re looking at. Also the same label as in the other views of this item.
1 2
3
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 19
GLOBAL NAVIGATION
The Branded Banner is an element that can be added to a franchise template, and any page with the corresponding franchise tag will display it.
GN.2.1. Branded Banner
1
4
6
52
3
7
8
9
1 GLOBAL NAV BAR
The Global Nav Bar appears in a minimized form above the branded banner, but scrolls off the screen as the page is scrolled. Scroll up the page again to reveal it.
2 BRAND NAME
The banner itself, titled with the name of the brand, event, or show in question.
3 SUPPORTING TEXT
This could be a hashtag, a tune-in time, or a subtitle for the section.
4 SPONSOR NAME:
OPTIONAL: If there is a sponsor, the logo will appear with configurable intro text. The logo optionally links to a sponsor-defined page.
5 BACKGROUND
Optionally, a background image can be specified to fill the banner and sub-nav areas. Alternatively, a color will have to be indicated in the CMS.
6 EXPAND BUTTON
On mobile, tap to expand the sub-nav if there is one. Tap again to close.
7 SCROLLED VERSION
Scrolling past the banner triggers it to shrink in size, showing only the title and supporting text. The banner sticks to the top of the viewport, but doesn’t expand again until you scroll back to the top of the screen.
8 SUB-NAV LINKS
These link to subpages within branded content area. These are curated in the CMS, though HOME appears irrespective of the number of other links.
9 SOCIAL BUTTONS
These link to brand-specific social pages as specified in the CMS. They open in a new tab.
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 20
GLOBAL NAVIGATION
The Branded Banner display all the same elements on desktop, but in a somewhat different configuration.
GN.2.2. Branded Banner (Desktop)
1 GLOBAL NAV
2 BRAND NAME
3 SUPPORTING TEXT
4 SPONSOR NAME
5 BACKGROUND
If this is an image, an additional hi-res version will have to be added in the CMS.
6 SUB-NAV
OPTIONAL; the links are arranged horizontally, and when in a given sub-section, that link will be highlighted.
7 SCROLLED STATE
Upon scroll, the size of the banner decreases, and the global nav and sponsor are hidden.
8 SOCIAL LINKS
These links are visible at all times on desktop.
2
1
4
5 6
7
3
8
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 21
GLOBAL NAVIGATION
The Branded Banner is featured on all show pages and gives easy access to all the content within a show.
GN.2.3. Branded Banner: Show Specific Variation
1
2
5
6
7
3
4
UPDATE PENDING
1 SHOW NAME
The title of the branded content area in this case is the name of the show.
2 TUNE IN TIME
The supporting text for a show should be the tune-in time.
3 TVE AUTH LINK
Shows rely on TVE Authentication in order to play full episodes with restricted access. As a convenience, the buttons on the right side of the global nav have been replaced with a Sign In / authorization link that launches the flow in “.3.2. Cable Subscription Form Flow” on page 249.
4 SIGNED IN STATE
When you have successfully authorized yourself with your cable service provider, the state of the “Sign In” link changes to show your service provider’s logo. Click to open the authorization flow with which you can log out.
5 SCROLLED VERSION
The scrolled state of the banner would therefore show the show title and tune-in time.
6 SUB-NAV
Shows will generally have a subnav for things such as episodes, cast list, videos, photos, social, etc.
7 SOCIAL LINKS
These link to social properties for the show. These open in a new tab.
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 22
GLOBAL NAVIGATIONGN.2.4. Branded Banner: Responsive Behavior
On tablet, the layout is the same. The nav bar is compacted to preserve space on mobile.
On desktop, the dropdown options are revealed and items are rearranged.
#THEWESTBROOKSWED 9P/8C
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 23
GLOBAL NAVIGATION
The Branded Banner takes the place of the global nav in terms of prominence, but the when you open the global nav, it takes over the screen.
GN.2.5. Branded Banner: Global Nav Behavior
1 1 GLOBAL MENU BUTTON
When the Branded Banner is present, the Global Nav, even on desktop, behaves as it would on mobile devices. Click or tap the menu icon to open it; click or tap again to close it.
2 SITE CONTENT
The page content is pushed over to the right and a darkened layer is displayed on top of it to make the menu content more prominent. The amount the content is pushed over is proportional to the screen width. The amount that is overlapped is also proportional to the screen width, but the menu should never cover the menu button. Click anywhere on the dark layer to close the menu.
2
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 24
GLOBAL NAVIGATION
The Branded Banner can also be used without sub nav, and with or without social links.
GN.2.6. Branded Banner: Without Subnav Variation
1 SOCIAL LINKS
When the packaged or branded content requires social links but not sub navigation, the dark bar remains (on desktop) but contains nothing but the social links.
2 NO SOCIAL LINKS
When neither social links nor subnav are required, the branded banner shrinks in height by an amount equal to the height of the dark bar.
3 MOBILE VERSION
On mobile, when there is no subnav there is no need for a drop-down menu. The social links can simply be displayed as part of the normal, unscrolled state of the branded banner, or not, as the case may be.
2
1
WITH SOCIAL LINKS
MOBILE VERSION
WITHOUT SOCIAL LINKS
3
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 25
GLOBAL NAVIGATION
The footer displays at the bottom of every page on the site.
GN.3.1. Page Footer
1 AD
300x250
2 FOLLOW/NEWSLETTER SIGNUP MODULE
Refer to item FM.6 for details
3 BET LOGO
4 LEGAL LINKS
5 COPYRIGHT LINE1
2
4
5
6
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 26
GLOBAL NAVIGATIONGN.3.2. Page Footer: Responsive Behavior
On tablet, it spreads out to 2 columns. The footer stacks into a single column on mobile.
On desktop, it fills the full 3 columns of the screen.
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 27
GLOBAL NAVIGATION
The footer displays at the bottom of every page on the site.
GN.3.3. Page Footer: Back to Top BACKLOG FEATURE
1 BACK TO TOP BUTTON
This button appears as soon as you’ve scrolled down the page a bit. Its position is fixed within the browser window, overlaying all content on the site except the footer, which will push the button up and out of the way.
1
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 28
GLOBAL NAVIGATIONGN.3.4. Page Footer: Back to Top Responsive Behavior
On desktop, if there is room in the margin, the button will hover over the margin.
BACKLOG FEATURE
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 29
GLOBAL NAVIGATION
Search is a globally-accessible function that lives in the global nav.
GN.4.1. Search
2 3
1 SEARCH BUTTON
Click or tap the search button to open the search field. The search entry field will gain focus and be activated immediately. Click or tap the search button (now an ‘X’) again, or click anywhere else outside the search field to close it.
2 SEARCH FIELD
Enter your search term(s) here. While the search field is open, all other interaction is disabled, except clicking outside the field to close it.
3 SUBMIT BUTTON
Either click this or hit enter while the search field is focused to submit the search.
1
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 30
GLOBAL NAVIGATION
Autosuggest is a way to suggest possible search terms based on what others have searched for or likely pages.
GN.4.2. Search: Autosuggest
1
2
1 SEARCH TERM(S)
As soon as you enter at least 2 letters as a search term, the autosuggest will kick in.
2 SUGGESTED TERMS
Based on what you’ve entered, you will get up to 5 suggested search terms. These are generated using a BET-owned Google search appliance.
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 31
GLOBAL NAVIGATIONGN.4.3. Search: Search Results Page
1
3
4
2
1 TAG BANNER
The search term(s) you entered are displayed in a Tag Banner at the top of the page.
2 RESULTS COUNT
The number of results is shown as part of the Tag Banner.
3 RESULTS FEED
The results themselves are shown in a standard feed, ordered by recency.
4 FOOTER
The page is capped with a Page Footer.
Left Rail OrderThe feed on this page is one of the rare exceptions to the standard left rail item order. In this case, the first set of items will be an ad and a follow/subscribe module, and then after a page’s worth of items the order will continue according to the rules in “.1.4. Feed Container: Pagination and Lazy Load” on page 44
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 32
GLOBAL NAVIGATIONGN.4.3. Search: No Results Page
1
3
4
2
1 TAG BANNER
The search term(s) and the number of results are shown in a Tag Banner.
2 NO RESULTS FOUND MESSAGE
The main content of the page consists of a message apologizing for no results having been found. This message should be humorous so as to soften the blow.
3 TRENDING MODULE
In order to spark interest in other content on the site, the left rail module in this case is Trending.
4 FOOTER
The page is capped with a Page Footer.
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 33
GLOBAL NAVIGATION
Search works just a little bit differently on mobile or when the mobile-style menu is used.
GN.4.4. Search: Mobile Menu Variation
Tap the search field to enter your search term(s) and after entering at least 2 characters, up to 5 suggestions will be shown.
When you submit your search, the menu will close and the results page will load.
Of course, the search engine might not find any results.
Search is accessed through the slide out menu on mobile.
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 34
GLOBAL NAVIGATION
This is a page overlay that pops up at the bottom of your screen to inform you of impending events.
GN.5.1. Countdown Module
1
23
1 EVENT NAME
The name of the event or TV show being promoted.
2 TUNE-IN TIME
Date and time to watch or take other action. On click or tap, instead of taking you to the promo link, you download a .ics file with the tune-in time as a calendar event so you can add it to your calendar.
3 COUNTDOWN CLOCK
Counts down the days or hours until the event takes place, and acts as a link to add the event to your calendar.
4 BACKGROUND IMAGE
A responsive image that fills the background.
4
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 35
GLOBAL NAVIGATIONGN.5.2. Countdown Module: Responsive Behavior
On tablet, the layout is the same. The nav bar is compacted to preserve space on mobile.
On desktop, the dropdown options are revealed and items are rearranged.
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 36
GLOBAL NAVIGATIONGN.5.3. Countdown Module: Scroll Behavior
On initial page load, the countdown module is not visible at all.
Once you’ve scrolled past 33% of the page height, the countdown module pops up using an ease-in curve.At this point, if you mouse over the module, it stays open.
After 3 seconds, unless you’ve moused over the module, it pops back down until it’s hidden using an ease-in curve again.If you scroll back up until the top 3rd of the page is visible and then scroll back down, the module appears again.
1. INITIAL PAGE LOAD 2. POP-UP 3. POP-DOWN
0 ms 0 ms
100% 100%
Height Height
0% 0%
200 ms 200 ms
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 37
GLOBAL NAVIGATIONGN.5.4. Countdown Module: Roll-Over Behavior
Intial state on pop-up. Image zooms out slowly with an ease out curve:
The rollover effect is reversed, but much more quickly and with an ease-in curve:
1. INITIAL STATE 2. HOVER STATE 3. HOVER OFF
0 ms 0 ms
120% 120%
Zoom Zoom
100% 100%
1000 ms 1000 ms500 ms
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 38
GLOBAL NAVIGATIONGN.5.5. Countdown Module: Add to Calendar Roll-overOn desktop only, when you hover over the Tune-in Time, there is a roll-over state that tells you what will happen when you click it.
1 ROLL-OVER STATE
The calendar icon lights up and the caption “Add to My Calendar” appears.
1
BET.com Redesign / UX Specification
Feed Modules
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 40
FEED MODULESOverview
FM.1.1. Feed Container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
FM.1.2. Feed Container Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
FM.1.3. Feed Container: Limiting and Filtering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
FM.1.4. Feed Container: Pagination and Lazy Load . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
FM.2.1. Content Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
FM.2.2. Content Module: Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
FM.2.3. Content Module: Video Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
FM.2.4. Timestamp Rules and Variations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
FM.2.5. Share Menu Expanded . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
FM.2.6. Roll-Over Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
FM.3.1. Trending Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
FM.3.3. Trending Module Responsive Behavior. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52
FM.3.4. Roll-Over Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
FM.4.1. Featured 1-Up Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
FM.4.2. Featured 1-UP Module: Large Responsive Behavior . . . . . . . . . . . . . . . . . . . 55
FM.4.3. Featured 1-UP Module: Small Responsive Behavior . . . . . . . . . . . . . . . . . . . 56
FM.4.4. Featured 1-UP Module: Roll-Over Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57
FM.4.5. Share Menu Expanded –DEPRECATED . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
FM.5.1. Featured 2-Up Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
FM.5.2. Featured 2-UP Module: Large Responsive Behavior . . . . . . . . . . . . . . . . . . 60
FM.5.3. Featured 2-UP Module: Small Responsive Behavior . . . . . . . . . . . . . . . . . . . 61
FM.5.4. Featured 2-UP Module: Roll-Over Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
FM.5.5. Share Menu Expanded – DEPRECATED . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
FM.6.1. Follow And Newsletter Sign-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
FM.6.2. Follow and Newsletter Signup: Responsive Behavior . . . . . . . . . . . . . . . . 65
FM.6.3. Email Entry Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
FM.6.4. Follow and Newsletter Signup: Left Rail Condensed Variation . . . . . 67
FM.7.1. List Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
FM.7.2. List Module: Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
FM.7.3. List Module: Sponsored Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
FM.7.4. List Module: 2-Column Variations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
FM.7.1. List Module (Deprecated) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72
FM.7.2. List Module: Responsive Behavior (Deprecated) . . . . . . . . . . . . . . . . . . . . . . . .73
FM.8.1. Countdown Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .74
FM.8.2. Countdown Module: Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .75
FM.9.1. Tag Banner Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
FM.9.2. Tag Banner Module: Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77
FM.9.3. Tag Banner Module: Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
FM.10.1. Static Promo Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
FM.10.2. Static Promo Module: Small Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
FM.10.2. Static Promo Module: Responsive Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
FM.11.1. Parallax Promo Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
FM.11.2. Parallax Promo Module: Responsive Behavior. . . . . . . . . . . . . . . . . . . . . . . . . . 83
FM.12.1. TV Schedule Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
FM.12.2. TV Schedule: Responsiveness . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
FM.12.3. TV Schedule Module: Single Item Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
FM.13.1. Related List Module (Deprecated) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
FM.13.2. Related List Module: Responsive Behavior (Deprecated) . . . . . . . . . . . 88
FM.14.1. Simple List Module (Deprecated) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
FM.14.2. Simple List Module: Responsive Behavior (Deprecated) . . . . . . . . . . . . 90
Feed modules are simply modules that appear in a feed. They generally take up one column width, and flow from left to right, top to bottom.
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 41
FEED MODULES
This component is a container for a feed of the most recent content on BET.com. It holds the content modules for the feed itself, and also dictates their width.
FM.1.1. Feed Container
LATEST ON BET.COM
LOAD MORE
1 TITLE
Optionally, you may turn on the title for the feed container. The text either reads “Latest on BET.com” or “Latest in <TAG>,” where TAG is the tag used to filter the list.
2 FEED ITEMS
The latest items from around BET.com globally, or optionally filtered by a valid content tag. You may also specify a zero-based offset to begin at a certain arbitrary point in the feed. Useful for pagination or for continuing a feed further down a page.
3 LAZY LOAD INDICATOR
When pagination is enabled, scrolling to the end of the feed automatically loads more content. While the new items are loading, a loading indicator is shown.
4 LOAD MORE BUTTON
When pagination is enabled and after 6 pages of content modules have been loaded, the auto-loading stops and a Load More button is shown instead. If you click it, it loads another page of content just as above.
1
2
3
4
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 42
FEED MODULESFM.1.2. Feed Container Responsive Behavior
The feed also fills the sceen on tablet, but the extra width makes room for two columns.
The feed fills the full width of the screen on mobile, which leaves enough room for a single column.
On desktop, the feed container takes up the full width of the screen, but splits the space into two parts: the 2-column grid as seen on tablet, as well as a left rail for use by those modules that are designed for it.
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 43
FEED MODULES
You can also specify a tag by which to filter, and optionally turn on the filter label. This example shows a feed filtered by “Music” with the label turned on, as would be seen on a content page published in the Music category.
FInally, you can further filter by content type. In this case the content is restricted to videos only.
You can specify a limit for the number of items that are loaded, such as 2 in this example. In this way, the component can be used in the middle of a page.
Feed containers can be constrained by number of items, tag, and/or content type.
FM.1.3. Feed Container: Limiting and Filtering
Music Item 4
Music Item 2
Music Item 3
Music Item 1
Item 2Item 1
LATEST IN MUSIC LATEST VIDEOS
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 44
FEED MODULES
On desktop, the layout will change somewhat, with the promo items appearing in the left rail next to the feed.
Promo items will be injected at the end of every page. You can specify a page size value of 4 or greater, and only in multiples of 2, so as to not disrupt the grid. The promo items are fixed and not customizable.
Here the page size is 6 items, and the promo items load at the bottom. Scroll to the end to load another page–full.
Feed containers can also be set up for lazy loading of more items, in which case they are paginated and promo items are automatically injected.
FM.1.4. Feed Container: Pagination and Lazy Load
PROMO ITEMS
PROMO ITEMS
Item 2
Item 4
Item 6
Item 1
Item 3
Item 5
Item 4
Item 2
Item 6
Item 3
Item 1
Item 5
PROMO ITEM SEQUENCEThe promo items at the bottom of each page follow a repeating sequence as follows:
1. Trending Module
2. 300x250 Ad + Follow/Subscribe Module
3. 300x250 Ad + Small BET Promo Module
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 45
FEED MODULESFM.2.1. Content Module
Title Luptas quos doluptat natur, totatium ut endestium explacessi optum dolorist, ut ernat ut etSubtitle Ad eossequatur? Pa nonsend elescius et harum nisci ullescipis velignis alitatio. Hent alicab ius etur simagnam.
15 min. ago
CATEGORY / SHOW TITLE / OTHER LABEL
Content Modules simply link to content detail pages. They show a summary of the content to which they link.
LABEL RULESLabel text is determined in the following sequence:
1. Top–level Content Category
2. Show Content? —> Show Title
3. Editorial Label Applied? —> Editorial Label
4. Does the label match the current feed context name? —> Don’t display a label
1 LABEL
The content category, show title, or other editorial label (see Label Rules below).
2 THUMBNAIL
A small preview image of the content, with an icon overlaid to indicate video, image gallery, or video playlist.
3 TITLE
Titles are limited to a maximum of 3 lines at a column width of 375px, with the number of lines possibly changing on different size screens. Any extra text will fade to white vertically.
4 SUBTITLE
Subtitles are limited to a maximum of 2 lines on mobile. Title takes precedence, pushing the Subtitle down as necessary, and the text may be cut off with a graphical fade.
5 TIMESTAMP
Indicates how long ago the content was published.
6 SHARE MENU
Click to reveal sharing options.
2
6
1
3
4
5
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 46
FEED MODULES
When the column width is at its narrowest, the title and subtitle text may be too long to fit. They are truncated with a gradient overlay to make it appear as though the text is disappearing at the bottom of the module.
When the column is at its widest, the entirety of the title and subtitle may fit without issue. In this case, the module retains its square shape.
The behavior on mobile is a little different. In order to preserve vertical space, the height of the module is dynamic, with the maximum being equal to the modules width, and the minimum being the height required for one line of title text.
Content Modules always take up exactly one column width, no matter the display size, and height to match, maintaining a square aspect ratio.
FM.2.2. Content Module: Responsive Behavior
Title Luptas quos doluptat natur, totatium ut endestium explacessi optum dolorist, ut ernat ut etSubtitle Ad eossequatur? Pa nonsend elescius et harum nisci ullescipis velignis alitatio. Hent alicab ius etur simagnam.
15 min. ago
CATEGORY / SHOW TITLE / OTHER LABEL
Title Luptas quos doluptat natur, totatium ut endestium explacessi optum dolorist, ut ernat ut etSubtitle Ad eossequatur? Pa nonsend elescius et harum nisci ullescipis velignis alitatio. Hent alicab ius etur simagnam.
15 min. ago
CATEGORY / SHOW TITLE / OTHER LABEL
Title Luptas quos doluptat natur, totatium ut endestium explacessi optum dolorist, ut ernat ut etSubtitle Ad eossequatur? Pa nonsend elescius et harum nisci ullescipis velignis alitatio. Hent alicab ius etur simagnam.
15 min. ago
CATEGORY / SHOW TITLE / OTHER LABEL
1. MINIMUM WIDTH: 300PX 2. MAXIMUM WIDTH: 400PX 3. MOBILE BEHAVIOR
Title Luptas quos doluptat natur, totatium ut endestium explacessi optum dolorist, ut ernat ut etSubtitle Ad eossequatur? Pa nonsend elescius et harum nisci ullescipis velignis alitatio. Hent alicab ius etur simagnam.
15 min. ago
CATEGORY / SHOW TITLE / OTHER LABEL
Title Luptas quos doluptat natur, totatium ut endestium explacessi optum dolorist, ut ernat
Title Luptas quos doluptat natur, totatium ut endestium explacessi optum dolorist, ut ernat ut etSubtitle Ad eossequatur? Pa nonsend elescius et harum nisci ullescipis velignis alitatio. Hent alicab ius etur simagnam.
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 47
FEED MODULESFM.2.3. Content Module: Video Variation
15 min. ago
BEING MARY JANE
23:47
Season 2, Episode 1
Mary Jane recommits herself to work, family and friends; David’s new girlfriend is pregnant.
People in Glass Houses Shouldn’t Throw Fish
Video content has some extra metadata fields that will be shown in a feed.
1 LABEL
The content category, show title, or other editorial label
2 LOCK ICON
Appears when the video is a full episode that requires cable provider authentication.
3 DURATION
The length of the video in the format HH:MM:SS.
4 TITLE
The title of the video or epsiode.
5 SEASON AND EPISODE NUMBERS
Full episodes show the season and episode numbers below the title.
6 SUBTITLE
A brief description, introduction, or tease for the video.
2
3
1
4
5
6
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 48
FEED MODULESFM.2.4. Timestamp Rules and Variations
Title Luptas quos doluptat natur, totatium ut endestium explacessi optum dolorist, ut ernat ut etSubtitle Ad eossequatur? Pa nonsend elescius et harum nisci ullescipis velignis alitatio. Hent alicab ius etur simagnam.
15 min. ago
CATEGORY / SHOW TITLE / OTHER LABEL
Title Luptas quos doluptat natur, totatium ut endestium explacessi optum dolorist, ut ernat ut etSubtitle Ad eossequatur? Pa nonsend elescius et harum nisci ullescipis velignis alitatio. Hent alicab ius etur simagnam.
15 min. ago
CATEGORY / SHOW TITLE / OTHER LABEL
Title Luptas quos doluptat natur, totatium ut endestium explacessi optum dolorist, ut ernat ut etSubtitle Ad eossequatur? Pa nonsend elescius et harum nisci ullescipis velignis alitatio. Hent alicab ius etur simagnam.
15 min. ago
CATEGORY / SHOW TITLE / OTHER LABEL
The standard timestamp follows these rules:1. Less than 1 minute ago: Just now2. More than 1 minute ago: X min. ago3. More than 1 hour ago: 1 hr. ago4. More than 2 hours ago: X hrs. ago5. More than 1 day ago: Yesterday6. More than 2 days ago: X days ago7. More than 1 week ago: 1 week ago8. More than 2 weeks ago: X weeks ago9. More than 1 month ago: <Month> <Day>
(e.g., Jan. 25th)10. More than 1 year ago: <Month><Day>, <Year>
(e.g., Feb. 3rd, 2014)
When the content to which the module links is sponsored, the timestamp is replaced by the text “Sponsored By” and the sponsor’s name.
When it appears on the trending page, the format wil be slightly different. The sub-title will be omitted, a number label will be included on top of the image, and the timestamp will be replaced with the number of page views, with the format following the rules for “Page view format” on page 51.
1. STANDARD 2. SPONSORED 3. TRENDING ITEM
4K viewsSponsored By NIKE
3
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 49
FEED MODULESFM.2.5. Share Menu Expanded
Title Luptas quos doluptat natur, totatium ut endestium explacessi optum dolorist, ut ernat ut etSubtitle Ad eossequatur? Pa nonsend elescius et harum nisci ullescipis velignis alitatio. Hent alicab ius etur simagnam
15 min. ago
CATEGORY / SHOW TITLE / OTHER LABEL
SHARE THIS
Google+
f
1 CLICK STATE
When you click the button, the Share Menu pops out. On touch devices, tap to show the menu. Tap or click again, tap off the menu, or scroll the page to close it again.
2 SHARE LINKS
This list is consistent across all devices, screen sizes, and content types, with the exception of WhatsApp, which appears only on mobile.
3 MENU POSITION
The bottom of the menu should line up with the bottom of the menu button, extending upward over the module.
1
3
2
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 50
FEED MODULESFM.2.6. Roll-Over Behavior
Title Luptas quos doluptat natur, totatium ut endestium explacessi optum dolorist, ut ernat ut etSubtitle Ad eossequatur? Pa nonsend elescius et harum nisci ullescipis velignis alitatio. Hent alicab ius etur simagnam.
15 min. ago
CATEGORY / SHOW TITLE / OTHER LABEL
Title Luptas quos doluptat natur, totatium ut endestium explacessi optum dolorist, ut ernat ut etSubtitle Ad eossequatur? Pa nonsend elescius et harum nisci ullescipis velignis alitatio. Hent alicab ius etur simagnam.
15 min. ago
CATEGORY / SHOW TITLE / OTHER LABEL
Title Luptas quos doluptat natur, totatium ut endestium explacessi optum dolorist, ut ernat ut etSubtitle Ad eossequatur? Pa nonsend elescius et harum nisci ullescipis velignis alitatio. Hent alicab ius etur simagnam.
15 min. ago
CATEGORY / SHOW TITLE / OTHER LABEL
Image thumbnail is zoomed in 5%, no extra color treatment of any kind.
Image thumbnail zooms out to 100%, a 20% black treatment is applied, and a drop shadow appears, all with an ease-out curve:
The rollover effects are reversed, but much more quickly and with an ease-in curve:
1. NORMAL STATE 2. HOVER STATE 3. HOVER OFF
0 ms 0 ms
105% 105%
Zoom Zoom
20% 20%
Opacity Opacity
100% 100% 0% 0%
800 ms400 ms
(shadow appears)
200 ms
(shadow disappears)
400 ms 800 ms
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 51
FEED MODULES
Trending Modules show a short list of the top trending items from around BET.com globally, or within a category. Each item links to a content piece.
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
TRENDING ON BET.COM
15 min. ago
15 min. ago
15 min. ago
3k views
3k views
3k views
SEE ALL TRENDING
3
2
1
FM.3.1. Trending Module
PAGE VIEW FORMATPage views will be listed as follows:
1. 1—999: Listed as “X views”
2. 1,000—999,999: Listed as “(X/1,000)k views”
3. 1,000,000+: Listed as “(X/1,000,000)m views”
1 MODULE TITLE
For the global trending module (on homepage and elsewhere) the title is “Trending on BET.” Within a category, the title is “Trending in <CATEGORY>.”
2 THUMBNAIL
A small, square–crop of the main image for that content piece with list ordinal overlaid.
3 HEADLINE
The headline from the linked content piece.
4 TIMESTAMP AND VIEW COUNT
When the content piece was posted, and how many views it has received within the trending window.
5 SEE ALL BUTTON
Invites you to see all the trending items from around BET.com. Clicking or tapping takes you to the global Trending Page.
3
4
1
2
5
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 52
FEED MODULES
On desktop, the trending module pulls out to the left rail.It takes up slightly more visual width on tablet, but logically fills 2 columns so as to not complicate the flow order.
The Trending Module fills a column and stacks like any other on mobile.
FM.3.3. Trending Module Responsive Behavior
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
TRENDING ON BET.COM
15 min. ago
15 min. ago
15 min. ago
3k views
3k views
3k views
SEE ALL TRENDING
3
2
1
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
TRENDING ON BET.COM
15 min. ago
15 min. ago
15 min. ago
3k views
3k views
3k views
SEE ALL TRENDING
1
1
1
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
TRENDING ON BET.COM
15 min. ago
15 min. ago
15 min. ago
3k views
3k views
3k views
SEE ALL TRENDING
3
2
1
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 53
FEED MODULESFM.3.4. Roll-Over Behavior
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
TRENDING ON BET.COM
15 min. ago
15 min. ago
15 min. ago
3k views
3k views
3k views
SEE ALL TRENDING
3
2
1
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
TRENDING ON BET.COM
15 min. ago
15 min. ago
15 min. ago
3k views
3k views
3k views
SEE ALL TRENDING
3
2
1
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
TRENDING ON BET.COM
15 min. ago
15 min. ago
15 min. ago
3k views
3k views
3k views
SEE ALL TRENDING
3
2
1
Image thumbnail is normal, and the number label is white text on black.
Image is immediately darkened with a 20% black overlay, and the thumbnail zooms by 5% over 400 milliseconds.
When you roll over the Trending button, the text animates away to be replaced by the trending arrow icon. When you move your mouse off again, it returns to normal.
1. NORMAL STATE 2. HOVER STATE 3. HOVER OFF
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 54
FEED MODULES
The Featured 1-Up Module features a single piece of content at a time, with two possible sizes from which to choose.
CATEGORY / SHOW TITLE / OTHER LABEL
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
MON AT 9P/8C NEW EPISODES
FM.4.1. Featured 1-Up Module
1 LABEL
The content category, show title, or other editorial label (see “Label Rules” on page 45).
2 THUMBNAIL
A small preview image of the content, with an icon overlaid to indicate video, image gallery, or video playlist.
3 TITLE
Titles are limited to a maximum of 3 lines at a width of 375px, with the number of lines possibly changing on different screen sizes.
4 INFO STRIP (OPTIONAL)
If the content is from a show, the show’s tune-in time will be shown at the left, or “Online Exclusive” if it’s a web series. Sponsorship information is also shown here.
5 NEW EPISODES INDICATOR
If a new episode has been added in the last several days, the New Episodes indicator is displayed on the right.
1
2
3
4 5
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 55
FEED MODULES
This module stretches to the full 3-column width on desktop, maintaining the half-square aspect ratio (cf. Large 2x1 in style guide).
On tablet, the aspect ratio can change, and so the 1-up expands to fill two columns and assumes a half square aspect ratio (cf. Medium 2x1 in style guide).
On Mobile, the largest an item can be is a full-width square, so all featured items appear in this manner (cf. Medium 1x1 in style guide).
CATEGORY / SHOW TITLE / OTHER LABEL
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
Sponsored by COVERGIRL
CATEGORY / SHOW TITLE / OTHER LABEL
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
Sponsored by COVERGIRL
CATEGORY / SHOW TITLE / OTHER LABEL
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
MON AT 9P/8C NEW EPISODES
This is the responsive behavior for the large size of this module.
FM.4.2. Featured 1-UP Module: Large Responsive Behavior
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 56
FEED MODULES
CATEGORY / SHOW TITLE / OTHER LABEL
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
Sponsored by COVERGIRL
This module maintains the 2-column width on desktop, as well as the half-square aspect ratio (cf. Medium 2x1 in style guide).
On tablet, the aspect ratio can change, and so the 1-up expands to fill two columns and assumes a half square aspect ratio (cf. Medium 2x1 in style guide).
On Mobile, the largest an item can be is a full-width square, so all featured items appear in this manner (cf. Small 1x1 in style guide).
CATEGORY / SHOW TITLE / OTHER LABEL
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
Sponsored by COVERGIRL
CATEGORY / SHOW TITLE / OTHER LABEL
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
MON AT 9P/8C NEW EPISODES
This is the responsive behavior for the small size of this module.
FM.4.3. Featured 1-UP Module: Small Responsive Behavior
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 57
FEED MODULESFM.4.4. Featured 1-UP Module: Roll-Over Behavior
CATEGORY / SHOW TITLE / OTHER LABEL
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
MON AT 9P/8C NEW EPISODES
CATEGORY / SHOW TITLE / OTHER LABEL
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
MON AT 9P/8C NEW EPISODES
CATEGORY / SHOW TITLE / OTHER LABEL
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
MON AT 9P/8C NEW EPISODES
The title text will change to White on Black with an ease-in curve:
Image normal, text: Black on White. The rollover effect is reversed, but with an ease-out curve:
1. NORMAL STATE 2. HOVER STATE 3. HOVER OFF
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
This applies to all sizes and aspect ratios.
0 ms 0 ms
White on Black White on Black
Black on White Black on White
Text Change Text Change
200 ms 200 ms
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 58
FEED MODULESFM.4.5. Share Menu Expanded –DEPRECATED
CATEGORY / SHOW TITLE / OTHER LABEL
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
DIGITAL EXCLUSIVE NEW EPISODE
SHARE THIS
f
1 MOUSEOVER STATE
When you hover your mouse pointer above the share menu button, the button highlights, and the Share Menu pops out. On touch devices, tap to show the menu. Tap again or move your mouse to close it again.
2 SHARE LINKS
This list is consistent across all devices, screen sizes, and content types.
3 MENU POSITION
The menu position should match the button to the top item in the list, with the list covering whatever is below the feed item. However, if there is not enough room on the screen, the menu will push up to remain visible with a small margin.
1
3
2
DEPRECATED
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 59
FEED MODULES
The Featured 1-Up Module features two pieces of content at a time, with two possible overall sizes from which to choose.
CATEGORY / SHOW TITLE / OTHER LABEL
CATEGORY / SHOW TITLE / OTHER LABEL
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
DIGITAL EXCLUSIVE
WED AT 9P/8C
FM.5.1. Featured 2-Up Module
1 FIRST FEATURED ITEM
A featured content item as explained in “FM.4.1. Featured 1-Up Module” on page 54.
2 SECOND FEATURED ITEM
Though these are separate items they act as one module in this instance with respect to their responsive behavior.1
2
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 60
FEED MODULES
This module stretches to the full 3-column width on desktop, maintaining the square aspect ratio of the child modules (cf. Large 1x1 in style guide).
On tablet, the aspect ratio can change, and so the 2-up expands to fill two columns with each child module retaining the full square aspect ratio (cf. Medium 1x1 in style guide).
On Mobile, the largest an item can be is a full-width square, so all featured items appear in this manner (cf. Medium 1x1 in style guide).
CATEGORY / SHOW TITLE / OTHER CATEGORY / SHOW TITLE / OTHER
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT
TITLE SED ENTUSANDA SAESCILIQUIA NIT LATUM EXERUPT IBUSDA NOS NI DITI SUNDIS
TUE AT 9P/8C NEW EPISODES Sponsored by COVERGIRL
CATEGORY / SHOW TITLE / OTHER CATEGORY / SHOW TITLE / OTHER
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT
TITLE SED ENTUSANDA SAESCILIQUIA NIT LATUM EXERUPT IBUSDA NOS NI DITI SUNDIS
TUE AT 9P/8C NEW EPISODES Sponsored by COVERGIRL
CATEGORY / SHOW TITLE / OTHER LABEL
CATEGORY / SHOW TITLE / OTHER LABEL
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
DIGITAL EXCLUSIVE
WED AT 9P/8C
This is the responsive behavior for the large size of this module.
FM.5.2. Featured 2-UP Module: Large Responsive Behavior
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 61
FEED MODULES
CATEGORY / SHOW TITLE / OTHER CATEGORY / SHOW TITLE / OTHER
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT
TITLE SED ENTUSANDA SAESCILIQUIA NIT LATUM EXERUPT IBUSDA NOS NI DITI SUNDIS
TUE AT 9P/8C NEW EPISODES Sponsored by COVERGIRL
This module maintains the 2-column width on desktop, with each of the child modules effectively taking up a single column width (cf. Medium 1x1 in style guide).
This is the responsive behavior for the small size of this module.
FM.5.3. Featured 2-UP Module: Small Responsive Behavior
CATEGORY / SHOW TITLE / OTHER LABEL
CATEGORY / SHOW TITLE / OTHER LABEL
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
DIGITAL EXCLUSIVE
WED AT 9P/8C
On Mobile, the largest an item can be is a full-width square, so all featured items appear in this manner (cf. Medium 1x1 in style guide).
On tablet, the aspect ratio can change, and so the 2-up expands to fill two columns with each child module retaining the full square aspect ratio (cf. Medium 1x1 in style guide).
CATEGORY / SHOW TITLE / OTHER CATEGORY / SHOW TITLE / OTHER
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT
TITLE SED ENTUSANDA SAESCILIQUIA NIT LATUM EXERUPT IBUSDA NOS NI DITI SUNDIS
TUE AT 9P/8C NEW EPISODES Sponsored by COVERGIRL
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 62
FEED MODULESFM.5.4. Featured 2-UP Module: Roll-Over Behavior
CATEGORY / SHOW TITLE / OTHER LABEL
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
MON AT 9P/8C NEW EPISODES
CATEGORY / SHOW TITLE / OTHER LABEL
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
MON AT 9P/8C NEW EPISODES
CATEGORY / SHOW TITLE / OTHER LABEL
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
MON AT 9P/8C NEW EPISODES
The title text will change to White on Black with an ease-in curve:
Image normal, text: Black on White. The rollover effect is reversed, but with an ease-out curve:
1. NORMAL STATE 2. HOVER STATE 3. HOVER OFF
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
This applies to all sizes.
0 ms 0 ms
White on Black White on Black
Black on White Black on White
Text Change Text Change
200 ms 200 ms
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 63
FEED MODULESFM.5.5. Share Menu Expanded – DEPRECATED
CATEGORY / SHOW TITLE / OTHER LABEL
CATEGORY / SHOW TITLE / OTHER LABEL
TITLE LUPTAS QUOS DOLUPTAT NATUR, TOTATIUM UT ENDESTIUM EXPLACESSI OPTUM DOLORIST, UT ERNAT UT ET
DIGITAL EXCLUSIVE
SHARE THIS
f
1 MOUSEOVER STATE
When you hover your mouse pointer above the share menu button, the button highlights, and the Share Menu pops out. On touch devices, tap to show the menu. Tap again or move your mouse to close it again.
2 SHARE LINKS
This list is consistent across all devices, screen sizes, and content types.
3 MENU POSITION
The menu position should match the button to the top item in the list, with the list covering whatever is below the feed item. However, if there is not enough room on the screen, the menu will push up to remain visible with a small margin.
1
3
2
DEPRECATED
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 64
FEED MODULES
The Follow and Newsletter Sign-up module makes it easy to keep up with the latest BET news and info through social feeds or email newsletters.
GET YOUR FIX
FOLLOW US ON SOCIAL
SUBSCRIBE TO OUR NEWSLETTER
GET YOUR BEING MARY JANE FIX
FOLLOW US ON SOCIAL
SUBSCRIBE TO OUR NEWSLETTER
SUBMIT
SUBMIT
Enter Your Email Address
Enter Your Email Address
f
f
FM.6.1. Follow And Newsletter Sign-up
VARIATION
1 TITLE
The title gives a brief reason for this module to exist. It is context dependent, and will change depending on the category or show.
2 SOCIAL LINKS
Click one of these to go to the relevant social feed page where you can subscribe or follow updates. These links will be different as the context dictates.
3 SUBSCRIBE FORM
Enter your email address and click or tap “Submit” to sign up for email updates. You will receive a confirmation email and a link to update your subscription preferences.
2
2
1
1
3
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 65
FEED MODULES
GET YOUR FIX
KEEP UP ON SOCIALSUBMITEnter Your Email Address
OR
SUBSCRIBE TO OUR NEWSLETTER
f
This format is maintained on desktop, with the module filling the right double column width.
FM.6.2. Follow and Newsletter Signup: Responsive Behavior
GET YOUR FIX
FOLLOW US ON SOCIAL
SUBSCRIBE TO OUR NEWSLETTER
GET YOUR BEING MARY JANE FIX
FOLLOW US ON SOCIAL
SUBSCRIBE TO OUR NEWSLETTER
SUBMIT
SUBMIT
Enter Your Email Address
Enter Your Email Address
f
f
On Mobile, the module takes on a compact, stacked single column layout.
On tablet, the module unstacks and takes the full width of the screen.
GET YOUR FIX
KEEP UP ON SOCIALSUBMITEnter Your Email Address
OR
SUBSCRIBE TO OUR NEWSLETTER
f
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 66
FEED MODULESFM.6.3. Email Entry Flow
GET YOUR FIX
FOLLOW US ON SOCIAL
SUBSCRIBE TO OUR NEWSLETTER
GET YOUR BEING MARY JANE FIX
FOLLOW US ON SOCIAL
SUBSCRIBE TO OUR NEWSLETTER
SUBMIT
SUBMIT
Enter Your Email Address
Enter Your Email Address
f
fGET YOUR FIX
FOLLOW US ON SOCIAL
SUBSCRIBE TO OUR NEWSLETTER
f
GET YOUR FIX
FOLLOW US ON SOCIAL
SUBSCRIBE TO OUR NEWSLETTER
SUBMIT
GOT IT!
f
GET YOUR FIX
FOLLOW US ON SOCIAL
SUBSCRIBE TO OUR NEWSLETTER
f
GET YOUR FIX
FOLLOW US ON SOCIAL
SUBSCRIBE TO OUR NEWSLETTER
SUBMIT
GOT IT!
f
The initial, default state invites you to enter your email address.
Email validation will occur on the front end as well as the back end.
Once the email address has been validated, the Submit button becomes enabled.
Click it to submit and the button is disabled until a positive server response is received, at which point the button displays a confirmation message. After 10 seconds, the form resets to its initial state.
1. INITIAL STATE 2. EMAIL ENTERED 3. FORM SUBMITTED
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 67
FEED MODULESFM.6.4. Follow and Newsletter Signup: Left Rail Condensed VariationWhen in the left rail on wider screens, the module shrinks in height in order to be visible on screens that are not so tall.
1 REDUCED HEIGHT
The height of the module is reduced to the point where the button and email address labels are removed, and the height of the buttons is reduced slightly.
1
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 68
FEED MODULES
List Modules are multi-purpose, flexible modules that are useful for many things, from curated reccomendations to quick summaries.
FM.7.1. List Module
Rick SanchezJustin Roiland
Morty SmithJustin Roiland
Summer SmithSpencer Grammer
Meet The Cast
SEE ALL CAST
1 TITLE
Customizable name for the list.
2 THUMBNAIL
16:9 aspect ratio.
3 TITLE AND SUBTITLE
The actual content of these will vary from application to application, as specified by the associated page editor.
4 SEE MORE BUTTON
OPTIONAL: Default text is See More, but can be customized for any purpose.
3
1
2
4
Possible List Sources
1. Grid Page
2. Feed (Tag or Topic) Page
3. Listicle
4. Curated List of content pages
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 69
FEED MODULES
This format is maintained on desktop, with the module filling the right double column width.
FM.7.2. List Module: Responsive Behavior
Rick SanchezJustin Roiland
Morty SmithJustin Roiland
Summer SmithSpencer Grammer
Meet The Cast
SEE ALL CAST
On Mobile, the module takes on a compact, stacked single column layout.
On tablet, the module expands to take the full width of the screen, and the columns are balanced. In the case where there is an odd number of items with a CTA button, the button takes the place of the last item.
Rick SanchezJustin Roiland
Rick SanchezJustin Roiland
Rick SanchezJustin Roiland
Morty SmithJustin Roiland
Morty SmithJustin Roiland
Morty SmithJustin Roiland
Beth SmithSarah Chalke
Beth SmithSarah Chalke
Beth SmithSarah Chalke
Jerry SmithChris Parnell
Jerry SmithChris Parnell
Jerry SmithChris Parnell
BirdpersonDan Harmon
Summer SmithSpencer Grammer
Summer SmithSpencer Grammer
Summer SmithSpencer Grammer
Meet The Cast
Meet The Cast
Meet The Cast
SEE ALL CAST
SEE ALL CAST
Rick SanchezJustin Roiland
Rick SanchezJustin Roiland
Rick SanchezJustin Roiland
Morty SmithJustin Roiland
Morty SmithJustin Roiland
Morty SmithJustin Roiland
Beth SmithSarah Chalke
Beth SmithSarah Chalke
Beth SmithSarah Chalke
Jerry SmithChris Parnell
Jerry SmithChris Parnell
Jerry SmithChris Parnell
BirdpersonDan Harmon
Summer SmithSpencer Grammer
Summer SmithSpencer Grammer
Summer SmithSpencer Grammer
Meet The Cast
Meet The Cast
Meet The Cast
SEE ALL CAST
SEE ALL CAST
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 70
FEED MODULESFM.7.3. List Module: Sponsored Variation
On wider screens, the logo moves up to the same baseline as the title, and it slides over to the right side of the module.
On mobile, the sponsor logo goes just under the title of the list module, and it is left justified.
As in all other instances of sponsorship, the List Module may be sponsored by adding a logo that is optionally a hyperlink.
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 71
FEED MODULESFM.7.4. List Module: 2-Column Variations
When it is impossible to fully balance the columns, an empty space is permitted.
When it is possible to balance the columns using the button, it fills in the empty space.
When the columns are balanced already with list items, the button is pushed down to the bottom right.
1. NO BUTTON, ODD NUMBER 2. ODD NUMBER W/ BUTTON 3. EVEN NUMBER W/ BUTTON
Rick SanchezJustin Roiland
Rick SanchezJustin Roiland
Rick SanchezJustin Roiland
Morty SmithJustin Roiland
Morty SmithJustin Roiland
Morty SmithJustin Roiland
Beth SmithSarah Chalke
Beth SmithSarah Chalke
Beth SmithSarah Chalke
Jerry SmithChris Parnell
Jerry SmithChris Parnell
Jerry SmithChris Parnell
BirdpersonDan Harmon
Summer SmithSpencer Grammer
Summer SmithSpencer Grammer
Summer SmithSpencer Grammer
Meet The Cast
Meet The Cast
Meet The Cast
SEE ALL CAST
SEE ALL CAST
Rick SanchezJustin Roiland
Rick SanchezJustin Roiland
Rick SanchezJustin Roiland
Morty SmithJustin Roiland
Morty SmithJustin Roiland
Morty SmithJustin Roiland
Beth SmithSarah Chalke
Beth SmithSarah Chalke
Beth SmithSarah Chalke
Jerry SmithChris Parnell
Jerry SmithChris Parnell
Jerry SmithChris Parnell
BirdpersonDan Harmon
Summer SmithSpencer Grammer
Summer SmithSpencer Grammer
Summer SmithSpencer Grammer
Meet The Cast
Meet The Cast
Meet The Cast
SEE ALL CAST
SEE ALL CAST
Rick SanchezJustin Roiland
Rick SanchezJustin Roiland
Rick SanchezJustin Roiland
Morty SmithJustin Roiland
Morty SmithJustin Roiland
Morty SmithJustin Roiland
Beth SmithSarah Chalke
Beth SmithSarah Chalke
Beth SmithSarah Chalke
Jerry SmithChris Parnell
Jerry SmithChris Parnell
Jerry SmithChris Parnell
BirdpersonDan Harmon
Summer SmithSpencer Grammer
Summer SmithSpencer Grammer
Summer SmithSpencer Grammer
Meet The Cast
Meet The Cast
Meet The Cast
SEE ALL CAST
SEE ALL CAST
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 72
FEED MODULES
List Modules are multi-purpose, flexible modules that are useful for many things, from top lists, to curated items, to quick summaries.
FM.7.1. List Module (Deprecated)
These Are the BestHeadline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
SEE ALL
3
2
1
1 TITLE
Customizable name for the list.
2 THUMBNAIL
Optional. Two aspect ratios are possible, 1:1 and 16:9.
3 NUMBER LABEL
Optional list ordinal.
4 HEADLINE
Depending on the source of the list, will either be a content title or custom text.
5 SEE ALL BUTTON
Optional. If the list source has more items than are shown, this button links to that content item.
4
1
2
3
5
Possible List Sources
1. Grid Page
2. Feed (Tag or Topic) Page
3. Listicle
4. Curated List of content pages
DEPRECATEDPLEASE REFER TO FM.7 ON PAGE 68
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 73
FEED MODULES
This format is maintained on desktop, with the module filling the right double column width.
FM.7.2. List Module: Responsive Behavior (Deprecated)
These Are the BestHeadline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
SEE ALL
3
2
1
On Mobile, the module takes on a compact, stacked single column layout.
On tablet, the module expands to take the full width of the screen.
These Are the BestHeadline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
SEE ALL3
2
1 4
5
These Are the BestHeadline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
Headline ilis rehendant rerum, soles dit, optin parchilla volupic iandips aperibus fugias aborem facesci
SEE ALL3
2
1 4
5
DEPRECATEDPLEASE REFER TO FM.7 ON PAGE 68
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 74
FEED MODULES
Everyone will know when a big event is coming, thanks to the countdown clock that appears atop the home and event pages.
FM.8.1. Countdown Module
In 3 Days9P/8C
The 2015 Soul Train Awards Hosted by Erykah Badu
1 COUNTDOWN TIMER
The time left until the event begins, and the tune-in time.
2 DETAIL COPY
Copy that tells when the show or event will begin, along with any other brief, important details.
3 BACKGROUND IMAGE
Optional image for the background.
4 SHOW / EVENT LOGO
A Logo Image for the event or show.
21
3 4
Countdown Timer States
1. More than 1 day away: “In X Days”
2. Within 24 hours: “Tonight”
3. After the fact: “Rewatch Tonight”
DEPRECATEDPLEASE REFER TO GN.5 ON PAGE 34
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 75
FEED MODULES
In 3 Days 9P/8CThe 2015 Soul Train Awards Hosted by Erykah Badu
FM.8.2. Countdown Module: Responsive Behavior
In 3 Days9P/8C
The 2015 Soul Train Awards Hosted by Erykah Badu
In 3 Days9P/8C
The 2015 Soul Train Awards Hosted by Erykah Badu
DEPRECATEDPLEASE REFER TO GN.5 ON PAGE 34
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 76
FEED MODULES
Thin strip at the top of the page which communicates which tag/topic/on-going story you’re currently viewing.
FM.9.1. Tag Banner Module
1 TAG BANNER
Displays text identifying the page that is currently being viewed. Ideally this tag will display as one line of text, however if a tag requires more than one line, the text wraps and extends the height of the banner module,
2 ITEMS FOUND LABEL
Present on tag or search results pages to indicate the number of matching items in the subsequent feed.
1
2
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 77
FEED MODULES
This module can also be used at the top of a page to mark Category or other page context.
FM.9.2. Tag Banner Module: Variation
1 TAG BANNER
Text only, and the background is transparent. Text color is defined globally.
1 DEPRECATEDPLEASE REFER TO CM.25 “.25.1. HEADING” ON PAGE
169
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 78
FEED MODULES
The text scales larger on desktop as well, and remains centered.
FM.9.3. Tag Banner Module: Responsive Behavior
The module displays below the header.
On tablet, the text simply scales larger.
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 79
FEED MODULESFM.10.1. Static Promo ModuleA simple, small promotional module for promoting BET stuff.
1 LOGO
OPTIONAL; The logo can be programmed in the CMS, depending on whether an admin wants to use a standard BET logo or a special logo (as seen in comp).
2 BACKGROUND IMAGE
The image used for the promo can be edited in the CMS as well, as long as it meets the module requirements outlined by RED. Max dimensions for the image are 400x480px.
3 TEXT
OPTIONAL; The text can be programmed in the CMS. Max length TBD.
4 BUTTON
OPTIONAL; The button CTA text as well as the color of the button are editable in the CMS. Color choices are still TBD.
12
3
4
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 80
FEED MODULESFM.10.2. Static Promo Module: Small VariationThe static promo has two sizes; this is the small one.
1 BACKGROUND IMAGE
All the content and pieces are the same, but the max dimensions for the image is 400x190px.
1
DEPRECATED
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 81
FEED MODULES
On desktop, the module behaves much as it does on mobile, but it will take up the column width of the left rail.
FM.10.2. Static Promo Module: Responsive Behavior
The promo module will display as full width.
On tablet, the module will be take up its maximum width (i.e., 400px).
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 82
FEED MODULES
A large, parallaxing promotional module for promoting BET stuff.
FM.11.1. Parallax Promo Module
1 LOGO
The logo can be programmed in the CMS, depending on whether an admin wants to use a standard BET logo or a special logo (as seen in comp).
2 TEXT
The text can be programmed in the CMS. Max length TBD.
3 BUTTON
The button CTA text as well as the color of the button are editable in the CMS. Color choices are still TBD.
4 IMAGE
The image used for the promo can be edited in the CMS as well, as long as it meets the module requirements outlined by RED.
1
2
3
4
Scroll Behavior
Depending on the device, this module displays differently as the user scrolls down the page.
1. On mobile and tablet, the module slides upward using a sliding window effect.
2. On desktop, the module slides upward using a parallax effect.
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 83
FEED MODULES
On dektop, the behavior is similar to tablet; the module is full width and displays as a parallax effect as the user scrolls down the page.
FM.11.2. Parallax Promo Module: Responsive Behavior
The promo module will display as full height/full width on mobile.
On tablet, the module will be full width while still displaying the main page content in a portion of the screen.
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 84
FEED MODULES
This module promotes up to two shows on TV, and includes CTA links.
FM.12.1. TV Schedule Module
1 TITLE
The title is editable in the CMS, so that the title can change from “On Tonight” to “On Tomorrow” as needed.
2 THUMBNAIL IMAGE
Image that corresponds to the text to the right. When selected, links to the show landing page.
3 TITLE
Text that represents the name of the scheduled programming. Editable in the CMS. When selected, links to the show landing page.
4 TUNE IN TIME
Text component that displays the time the programming is scheduled to start. This text is editable in the CMS.
5 VIEW FULL SCHEDULE CTA
Button that links the user to the full BET programming schedule.
1
2 3
4
5
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 85
FEED MODULES
On desktop, the behavior is similar to tablet; the module has a single column width within the main content area.
FM.12.2. TV Schedule: Responsiveness
The promo module will display as full width on mobile.
On tablet, the module will be represented as a single column module in the two column layout.
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 86
FEED MODULES
There may only be 1 single thing to be promoted on TV tonight, in which case the module should respond accordingly.
FM.12.3. TV Schedule Module: Single Item Variation
Being Mary JaneWed 10p/9c
ON TONIGHT
VIEW FULL SCHEDULE
1 TITLE
The title is editable in the CMS, so that the title can change from “On Tonight” to “On Tomorrow” as needed.
2 THUMBNAIL IMAGE
Image that corresponds to the text to the right. When selected, links to the show landing page.
3 TITLE
Text that represents the name of the scheduled programming. Editable in the CMS. When selected, links to the show landing page.
4 TUNE IN TIME
Text component that displays the time the programming is scheduled to start. This text is editable in the CMS.
5 VIEW FULL SCHEDULE CTA
Button that links the user to the full BET programming schedule.
1
2
3
4
5
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 87
FEED MODULES
The Related List Module shows things that are related to what you are viewing, in compact way.
FM.13.1. Related List Module (Deprecated)
Rick SanchezJustin Roiland
Morty SmithJustin Roiland
Summer SmithSpencer Grammer
Meet The Cast
SEE ALL CAST
1 TITLE
Customizable name for the list.
2 THUMBNAIL
Optional. 16:9 aspect ratio.
3 ITEM TITLE AND SUBTITLE
These are dependent on the source content, but some examples include Character/Actor, Topic/Topic Type, etc.
4 SEE ALL BUTTON
Optional. If the list source has more items than are shown, this button links to that content item.
3
1
2
4
List Constraints
1. Minimum number of items is 2, max is 6.
2. When the button is enabled, the number of items displayed may change
Possible List Sources
1. Curated List of Topics
2. Listicle Page (e.g., Cast)
DEPRECATEDPLEASE REFER TO FM.7 ON PAGE 68
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 88
FEED MODULES
This format is maintained on desktop, with the module filling the right double column width.
FM.13.2. Related List Module: Responsive Behavior (Deprecated)
Rick SanchezJustin Roiland
Morty SmithJustin Roiland
Summer SmithSpencer Grammer
Meet The Cast
SEE ALL CAST
On Mobile, the module takes on a compact, stacked single column layout.
On tablet, the module expands to take the full width of the screen, and the columns are balanced. The button counts as an item here, and the number of items shown might be fewer than on mobile in order to balance the columns.
Rick SanchezJustin Roiland
Rick SanchezJustin Roiland
Rick SanchezJustin Roiland
Morty SmithJustin Roiland
Morty SmithJustin Roiland
Morty SmithJustin Roiland
Beth SmithSarah Chalke
Beth SmithSarah Chalke
Beth SmithSarah Chalke
Jerry SmithChris Parnell
Jerry SmithChris Parnell
Jerry SmithChris Parnell
BirdpersonDan Harmon
Summer SmithSpencer Grammer
Summer SmithSpencer Grammer
Summer SmithSpencer Grammer
Meet The Cast
Meet The Cast
Meet The Cast
SEE ALL CAST
SEE ALL CAST
Rick SanchezJustin Roiland
Rick SanchezJustin Roiland
Rick SanchezJustin Roiland
Morty SmithJustin Roiland
Morty SmithJustin Roiland
Morty SmithJustin Roiland
Beth SmithSarah Chalke
Beth SmithSarah Chalke
Beth SmithSarah Chalke
Jerry SmithChris Parnell
Jerry SmithChris Parnell
Jerry SmithChris Parnell
BirdpersonDan Harmon
Summer SmithSpencer Grammer
Summer SmithSpencer Grammer
Summer SmithSpencer Grammer
Meet The Cast
Meet The Cast
Meet The Cast
SEE ALL CAST
SEE ALL CAST
DEPRECATEDPLEASE REFER TO FM.7 ON PAGE 68
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 89
FEED MODULES
The Simple List Module is the most minimal way to show a list for when all you need is a textual list or simple group of links,
FM.14.1. Simple List Module (Deprecated)
More Things to Check Out in LifestyleFashionStyle & BeautyHealthFor HimFamily
1 TITLE
Customizable name for the list.
2 ITEM
Plain text or text link. Numbers may optionally be displaye.1
2
List Constraints
1. Minimum number of items is 2, max is 6.
Possible List Sources
1. Curated List of Links
2. Feed Page
DEPRECATEDPLEASE REFER TO FM.7 ON PAGE 68
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 90
FEED MODULES
This format is maintained on desktop, with the module filling the right double column width.
FM.14.2. Simple List Module: Responsive Behavior (Deprecated)
More Things to Check Out in LifestyleFashionStyle & BeautyHealthFor HimFamily
On Mobile, the module takes on a compact, stacked single column layout.
On tablet, the module expands to take the full width of the screen. The title remains on the left, and the list items stack on the right.
More Things to Check Out in Lifestyle
FashionStyle & BeautyHealthFor HimFamily More Things to
Check Out in Lifestyle
FashionStyle & BeautyHealthFor HimFamily
DEPRECATEDPLEASE REFER TO FM.7 ON PAGE 68
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 91
FEED MODULES
Ongoing stories are groups of content pieces linked by a common story thread or theme, presented chronologically.
FM.15.1. Ongoing Story List Module
1 TITLE
The text “Ongoing Story:” is automatically included when displayed; the rest is the actual title.
2 SUBTITLE
Further describes the story content with an editorial bent.
3 LATEST ITEM
The most recent item is called out separately with a larger image, the text “LATEST”, and a different color background.
4 TIMELINE LIST
3 more items from the ongoing story are shown below the latest item. Every item includes a title and timestamp. These items will be the next most recent after the Latest item when on a feed page, but may be a different set of three when on a content page.
5 SEE ALL BUTTON
Click this to go to the landing page for this ongoing story that lists all the content pieces.
1
2
3
4
5
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016 92
FEED MODULES
This format is maintained on desktop, with the module filling the right double column width.
FM.15.2. Ongoing Story List Module: Responsive Behavior
On Mobile, the module takes on a compact, stacked single column layout.
On tablet, the module expands to take the full width of the screen, with the latest to the left and the list of items on the right.
BET.com Redesign / UX Specification
Feed Pages
94
FEED PAGES
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016
Overview
FP.1.1. Responsive Considerations for All Feed Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
FP.2.1. Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
FP.3.1. Music Landing Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
FP.8.1. Tag Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
FP.9.1. Topic Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
FP.10.1. Full Episodes Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Feed pages include landing and search results pages—basically any page that contains a feed as its main contents.
95
FEED PAGES
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016
On desktop (or tablet landscape) the layout gets even more interesting, and care must be taken to ensure that unsightly gaps do not appear in the main layout. Any items that will be pulled out to the left rail will need to be isolated in a separate containing element within a larger group element. The total height of the left rail items should not be taller than the height of the other items within the same containing element.
When viewed on tablet, however, another column is added, meaning that feed items that will only take up a single column should paired together in order to not break the grid structure at this screen size or larger.
On mobile, Feeds will consist of a linear, single-column list of modules. The ordering of items is—prima facie—not critical.
Left Rail Item
Item 3
Item 5
Item 2
Item 4
Item 1Item 1
Item 3Item 2
Item 4 Item 5
Item 3
Item 4
Item 2
Item 1
All feed pages are subject to these structural constraints
FP.1.1. Responsive Considerations for All Feed Pages
96
FEED PAGES
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016
The Home Page is the main landing page of the site. It features a variety of modules from around the rest of the site, and the feed is unfiltered.
FP.2.1. Home Page
1
2
3
4
7
5
6
8
9
10
10
1 LARGE FEATURED
Either 1-up or 2-up featured as needed.
2 SMALL FEATURED
3 SMALL FEATURED
Either 1-up or 2-up; the second of these is optional as needed.
4 AD
300x250; Mobile Only!!
5 FEED CONTAINER MODULE
Title: off, Filter: OFF, Pagination: OFF, Start At: 1, Show Only: 1 item.
6 TV SCHEDULE MODULE (ON TONIGHT)
7 FEED CONTAINER MODULE
Title: Off, Filter: Off, Pagination: Off, Start At: 2, Show Only: 2 items.
8 AD
300x250; Left Rail item on desktop.
9 FOLLOW / NEWSLETTER SIGN-UP MODULE
10 BET PROMO
11 FEED CONTAINER MODULE
Filter: OFF, Pagination: ON, Start At: 4.
Large Featured
Small Featured
Small Featured
AD
AD
TV Schedule Module
Follow / Newsletter Sign-up Module
Feed Container Module
Feed Container Module
Feed Container Module
Required Items Optional Items
BET Promo
97
FEED PAGES
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016
The Music Landing Page is the central hub for all things music-related on BET.com. Its structure is very similar to the Home Page, but it only shows music-related stuff.
FP.3.1. Music Landing Page
1
2
3
1 LARGE FEATURED
Either 1-up or 2-up featured as needed.
2 SMALL FEATURED
3 FEATURED MODULES
Music-specific featured modules. Any number is allowed, but it is recommended not to use more than 3.
4 AD
300x250; Mobile Only!!
5 FEED CONTAINER MODULE
Title: off, Filter: Music Content Only, Pagination: OFF, Start At: 0, Show Only: 4 items.
6 MUSIC LIST MODULE
Top track list, Music videos, etc.
7 AD
300x250; Left Rail item on desktop.
8 FOLLOW / NEWSLETTER SIGN-UP MODULE
9 BET PROMO
10 FEED CONTAINER MODULE
Filter: Music Content Only, Pagination: ON, Start At: 3.
Large Featured
Small Featured
Music Featured Modules
Required Items Optional Items
4
7
5
6
8
9
10
AD
AD
Music List Module
Follow / Newsletter Sign-up Module
BET Promo
Feed Container Module
Feed Container Module
98
FEED PAGES
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016
A Tag Page is essentially a search results page for a specified tag. The page is constructed programmatically, without editor intervention.
FP.8.1. Tag Page
1
2
3
1 TAG BANNER
Shows the tag to which the page corresponds, and the number of items found.
2 1-UP SMALL FEATURED
The first item of the feed is shown as a small featured item.
3 FEED CONTAINER MODULE
Title: off, Filter: Page Tag, Pagination: OFF, Start At: 1, Show Only: 4 items.
4 AD
300x250; Left Rail item on desktop.
5 FOLLOW / NEWSLETTER SIGN-UP MODULE
6 BET PROMO
7 FEED CONTAINER MODULE
Filter: Page Tag, Pagination: ON, Start at: 5
1-Up SmallFeatured Item
Tag Banner
Feed Container Module
Required Items Optional Items
4
7
5
6
AD
Follow / Newsletter Sign-up Module
BET Promo
Feed Container Module
99
FEED PAGES
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016
A Topic Page is virtually the same as a Tag Page, except that an editor has created a custom page for the tag in question.
FP.9.1. Topic Page
Hero Container
Article Body Container
1
2
3
5
9
11
10
4
7
6
1 BRANDED BANNER
For packaged content, this can be used for branding, sub-nav, and sponsorship.
2 HERO CONTENT
Page Title plus any media that should be featured at the top of the page, e.g., banner image.
3 ARTICLE CONTENT
Editorial content describing the topic, such as a bio or introductory text. Can also include share links, embedded media, and any other article content.
4 OPTIONAL FEATURED MODULES
These can be any kind of featured feed module that the editor desires, though it is recommended to keep the total number of items at 3 or less.
5 AD 300x250; Show this on the mobile layout only.
6 FEED CONTAINER MODULE
Title: off, Filter: Page Tag, Pagination: OFF, Start At: 0, Show Only: 4 items.
7 RELATED TOPICS
List module showing 3-6 related topics, depending on screen size.
8 AD
300x250; Left Rail item on desktop.
9 FOLLOW / NEWSLETTER SIGN-UP MODULE
10 BET PROMO
11 FEED CONTAINER MODULE
Filter: Page Tag, Pagination: ON, Start At: 5
Media Embed
Title Text
Body Copy
Featured Module
Featured Module
Branded Banner
Feed Container Module
Feed Container Module
Required Items Optional Items
AD
AD8
Follow / Newsletter Sign-up Module
BET Promo
Related Topics
100
FEED PAGES
BET.com Redesign UX Specification / Version 7.5 / May 25, 2016
A page for listing all the Full Episodes from across all BET shows, ordered by recency.
FP.10.1. Full Episodes Page
1
2
3
1 HEADING
Small Heading: “Full Episodes”
2 1-UP SMALL FEATURED
The first item of the feed is shown as a small featured item.
3 FEED CONTAINER MODULE
Title: off, Filter: Full Episode Videos, Pagination: OFF, Start At: 1, Show Only: 4 items.
4 AD
300x250; Left Rail item on desktop.
5 FOLLOW / NEWSLETTER SIGN-UP MODULE
Left Rail item on desktop.
6 BET PROMO
Promo for BET Live app.
7 FEED CONTAINER MODULE
Filter: Full Episode Videos, Pagination: ON, Start at: 5.
1-Up SmallFeatured Item
Heading
Feed Container Module
Required Items Optional Items
4
7
5
6
AD
Follow / Newsletter Sign-up Module
BET Promo
Feed Container Module