CONSUMER CART STYLE GUIDE V2.1

Transcription

1 CONSUMER CART STYLE GUIDE V2.1

2 TABLE OF CONTENTS Price Points, Package Description Text, Interactive Elements ABOUT General GUI Typography, Icons, General Specifications... 2 Package Cards Price points, Package Descriptions, Interactive Elements... 3 Buttons Interactive Buttons (Including visual feedback states)... 4 Forms Input Fields, Drop-Down Menus and Check-Boxes... 5 Overlays Page Overlays for Action and Error Panels... 6 Overlays (Continued) Order Details Overlay... 7 Overlays (Continued) TV Add-On Descriptions... 8 Scheduling Calendar Default State... 9 Scheduling Calendar (Continued) Expanded State This updated document is intended to outline the primary DISH visual guidelines for the DISH.com consumer shopping cart. The initial design was authored by the Rokkan agency in The style conventions and specifications herein should more or less be followed with fervency. As of this writing, the current Production Build has a few misalignments in certain areas of design and consistency (which will be addressed in future releases). Where such misalignment occur, this guide attempts to explain why a particular style is encouraged and how it relates to consistent DISH brand practices and UX principles. In many cases, preexisting specifications were amended to follow what is already developed for the current Production Build. Some deprecated items have been removed. Tabs Secondary Tabulated Navigation Sticky Navigation Primary Navigation Menus Miscellaneous Auxiliary Navigation, Graphical Section Dividers, Contextual Help Authored by Glenn Whitmore, Senior UX Designer. Version 2.1. March DISCLAIMER: The information in this user s guide is accurate at the time of writing. This guide is provided as is without express or implied warranty of any kind. Copyright 2014 DISH Network. All rights reserved. All trademarks and registered trademarks used are the properties of their respective owners.

3 GENERAL GUI Typography, Icons, General Specifications TYPOGRAPHY ANIMATED PROCESSING INDICATOR GENERAL LINKS This style guide utilizes greeking to indicate placement, formatting, styles and other Action Hyperlinks (Links that exposes or hides content) typographic specifications. Greeked text should not be mistaken for actual content. Icon dimensions: W 18px x H 18px Type size and line spacing are expressed in pixel height/leading (ex: 12px/18px). Cart design follows best practices for text contrast for increased legibility while minimizing eye fatigue. Therefore, DISH Cart should consistently use dark gray text (#454545) instead of the harsh contrast of pure black text. Arial Bold, 12px, #f00026 Arial Bold, 12px, # Section Headers Optical spacing: 20px Berthold Akzidenz Grotesk XBd, all upper-case, 20px, # Bottom padding: 20px 4px corner radius Progress indicator should float horizontally and vertically centered within the browser window. Modal window should have drop-shadows on all four sides (#bfbfbf). Arial Regular, 12px, #454545, underscored Sub Headings and Body Copy Sub-heading: Arial Bold, 14px/18px, # COLORS #f00026, underscored Disabled state: # Arial Regular, 12px, # Arial Regular, 12px, #f00026 Arial Bold, 12px, #f00026 Arial Bold, 12px, # Body copy: Arial Regular, 12px/18px, # Standard Hyperlink (resolves to other pages or modal windows) Arial Regular, 12px, #454545, underscored Phone number always bold font Arial Regular, 12px, #f00026, underscored Legal Disclaimer Text Disclaimer text, Arial Italic, 11px/20px, # ICONS Arial Regular, 12px, #454545, underscored Arial Regular, 12px, #f00026, underscored TV icons: w 34px x H 22px Set-Top Box icons: W 34px x H 9px Arial Bold, 12px, #f00026, underscored Chat and Phone icon set: W 85px x H 34px Arial Bold, 12px, #f00026, underscored Line Breaks Check-mark icon: W 20px x H 15px Overlay panel Close button, normal state Plus bullet point: W 6px x H 6px Overlay panel Close button, on rollover Avoid typographic widows and orphans 2

4 PACKAGE CARDS Price Points, Package Description Text, Interactive Elements PACKAGES CARDS Unselected (normal) State Left padding: 20px Top padding: 30px ADD-ON CARDS Default Special Offers Tab W 960px H 150px Berthold Akzidenz Grotesk XBd, 24px/22px, #ececec, all upper-case Arial Regular, 13px/16px, # Maximum character count: 250 (including spaces) Maximum Rows: 4 W 233px, H 322px Berthold Akzidenz Grotesk XBd, #ececec all upper case,19px/18px Right padding: 10px minimum Arial Bold, 14px/20px, #f00026 Arial Bold, 13px/16px, #ececec Premium, A La Carte and Adult Add-On Cards Arial Regular, 13px/16px, # W 233px H 270px Berthold Akzidenz Grotesk XBd, 20px, #ececec COMPARE PACKAGES Special Offers Tab W 168px Berthold Akzidenz Grotesk XBd, 20px/22px, #ececec Left padding: 15px Selected State Drop-shadows (all cards): webkit 5px 5px 5px #bfbfbf Arial Regular, 13px/18px, # Maximum character count: 180 (including spaces) Unselected state: # (No line-rule border) H 170px Button label changes to Selected, button color indicates selected state 4px, #f00026, inner line-rule indicates selected state Unavailable state: # px #f00026 inner line-rule indicates selected state International Core Add-On Bar W 470px H47px Arial Bold, 14px, #454545, underscored Arial Bold, 10px Dollar sign: Berthold Akzidenz Grotesk XBd, #ececec (roughly 1/2 the height of the numeral) 20px, #ececec Line-rule: 1px, #ececec Disabled Add-To-Core Arial Regular, 13px, # Copy-fitting: (ideally) 2 lines per item, 4 items or less, avoid widows 1px line-rule border, #b8b8b8 Primary numerals: 52px, #ececec Note: Optically kern glyphs, especially when paired with a numeral 1. Arial Regular, all upper-case, 9px /9px, #ececec ADD graphic: 38px x 12px BG: #

5 BUTTONS Interactive Button Graphics (Including Visual Feedback States) PRIMARY NAVIGATION BUTTONS Validates and Processes User Input Disabled state: W 132px ADD-ON BUTTONS Special Offer Tab W 142px W 80px Arial Bold, 13px, # W 80px UPDATE ORDER BUTTON Configure My DISH Page (Enabled by selecting TV drop-down item) Disabled state: W 115px H 40px Enabled normal state: Arial Bold, 13px, #ececec Special Offer Page W 160px W 180px Premium, A La Carte and Adult Tabs W 80px Arial Bold, 13px, # On rollover: # Arial Bold, 13px, # SHOW CALENDAR BUTTON Configure My DISH Page (Enabled by entering ZIP Code) Disabled state: H 40px H 40px W 122px On rollover: # On rollover: # Arial Bold, 13px, # International Tab W 100px Disabled state: CORE PACKAGE BUTTONS Package Cards on Build Page W 80px Arial Bold, 13px, #ececec W 80px Selected button for English Package cards BG: #c1112c Arial Bold, 13px, # On rollover: # CHECKOUT BUTTON Checkout Page W 132px COMPARE PACKAGES BUTTON Build Page (Enabled by selecting two or more Package Cards) W 142px Disabled state: Selected button for Latino Package cards BG: #d97c13 SPECIAL OFFERS BUTTONS Select Your Offer (Top of Build Page) W 130px Compare Offers W 130px On rollover: #ffffff ONLINE ID & PRINT CONFIRMATION BUTTONS Confirmation Page W 172px H 40px On rollover: #ffffff H 40px Enabled state: On rollover: #ffffff 4

6 FORMS Input Fields, Drop-Down Menus, Check-Boxes and Other Interactive Form Elements INPUT FIELDS STANDARD CHECK BOX COMPARE PACKAGES DROP-DOWN MENUS Basic Input Box Collapsed State Arial Regular, 12px, # Variable width Check-box style: browser default W 168px H 31px Input prompt: Arial Regular, 12px, #b0b0b0 On focus: Input prompt disappears COMPARE PACKAGES CHECK BOXES Normal Inactive State H 23px W 78px Text: Arial Regular, 11px, #ececec, no hover state Check-box style: browser default BG: #000000, 50% opacity Arial Bold, 12px, #ececec H 32px (Click to slide open drop-down panel) Inputed text: Arial Regular, 12px, # Active State (2 or more check-boxes selected) Expanded State Arial Regular, 11px, #ececec, underscored hyperlink Top-Aligned Field Labels Section label: Arial Bold, 15px, # Bottom padding: 15px RADIO BUTTONS Selected: f00026 Arial Regular, 11px, #ececec Background color: #4e4e4e Selected item text: #ffffff Selected item indicator: #f00026 (Click to select item and slide collapse panel) Padding: 30px Text: Arial Regular, 12px, # Padding: 30px Individual field label: Arial Regular, 12px, # Bottom padding: 5px DROP-DOWN MENUS Variable width H 32px Left-Aligned Field Labels Arial Regular, 12px, # Left padding: 10px On rollover (Click to slide open dropdown panel) Corner radius: 3px Padding: 15px Padding: 10px Selected States Arial Regular, 12px/28px, # Padding: 20px Padding: 20px Selected item text: #ffffff Selected item indicator: # (Click to select item and slide collapse panel) Background color: #ffffff Conditional to selecting one of America s Top packages Conditional to selecting one of the Latino packages Conditional to selecting one of the International packages Stroke: #cfcfcf, W 1px, 3px corner radius Left and bottom padding: 15px 5

7 OVERLAYS Page Overlays for Action and Error Panels CONFIRM ADD-ON REMOVAL OVERLAY Triggered by selecting Remove button on Build page 30px top and left padding Berthold Akzidenz Grotesk XBd, all upper-case, 20px, #454545, centered horizontally Variable width based on content Variable height based on content 30px right and bottom padding Arial Regular, 12px/18px, # px corner radius 30px spacing, centered horizontally Detail View of Panel with Transparent Overlay Background Close [X] button positioned as pictured. Note: This Close [X] button design introduces an increased target area. This will be especially useful for future Responsive Design efforts. The style is intended to be more compatible with the other DISH icons and interactive elements. Overlay BG: #000000, about 60% opacity All overlay panels should include drop-shadows: webkit 20px 20px 20px 20px #bfbfbf 6

8 OVERLAYS Page Overlays (Continued) ORDER DETAILS OVERLAY Triggered by selecting Show Details hyperlink in Sticky Nav W 870px Berthold Akzidenz Grotesk XBd, all upper-case, 20px, # Arial Bold, 12px, #f px padding, 4px corner radius BG: # Arial Regular, 12px/18px, # BG: c9c9c9 Arial Bold, 13px, # Variable height based on content Arial Italic, 11px, # Pricepoints: Arial Bold, 16px, #ececec and # BG: #ffffff 7

9 OVERLAYS Page Overlays (Continued) TV ADD-ON OVERLAYS Preselected Premium Add-On Overall Dimensions: W 920px, H 280px Top and left padding: 30px Berthold Akzidenz Grotesk XBd, 20px, #ececec Berthold Akzidenz Grotesk XBd, 72px, #ececec, optically kerned Berthold Akzidenz Grotesk XBd, 24px, #ececec Bottom padding: 30px Left padding: 30px Berthold Akzidenz Grotesk XBd, 32px, #ececec Left padding: 50px Right padding: 30px Selected item BG: #f00026 Arial Regular, 13px/18px, #ececec Maximum rows: 10 Image view displays channel logos Unselected International Add-On Overlay (List view shown in right scroll panel) W 514px W 406px Non-scrollable column labels Arial Bold, 14px, # W 280px Unavailable item BG: # Unselected item BG: # Arial Regular, 13px/18px, #ececec Maximum Rows: 10 Scrollable list view: Arial Regular, 13px/18px, # Maximum rows: 10 (before activating scrollbar) 8

10 CALENDAR Installation Scheduling TWO-WEEK VIEW Default Disabled State W 747px Disabled view: 30% opacity, all radio buttons removed H 374px 4px corner radius Enabled State W 92px W 662px H 36px Arial Bold, 16px, #ececec BG: # W 85px H 52px Arial Bold, 12px, # Top padding: 20px Bottom padding: 10px H 36px H 36px Arial bold, 18px, #454545, centered vertically and horizontally within cell BG: #c8c8c8 BG: # Calendar BG: #f8f8f8 Stroke: 1px, #5b5b5b Arial Bold, 12px, #ffffff Arial Bold, 12px, # Expansion displays two additional weeks Selected state: #

11 CALENDAR Interactive Scheduling (Continued) FOUR-WEEK VIEW Expanded to display two additional weeks Expired dates: Arial bold, 18px, #c4c4c4 BG: #fcfcfc BG: #e0e0e0 BG: #c4c4c4 Top padding: 20px W 630px Collapses to display only two week span Bottom padding: 20px 10

12 TABS Secondary Tabulated Navigation CORE PACKAGES TABS W 960px Arial Bold, 13px, # W 36px Padding: 20px Stroke: 1px, #aaaaaa Note: Gradient divider tapers to a point on each end as shown. It should not abruptly terminate on the ends. ADD-ON TABS W 960px Selected state: #f0f0f0 W 36px Padding: 20px COMPARE TABS W 960px Note: Selected state tabs do not have a closing line-rule along the bottom. W 36px Padding: 20px INTERNATIONAL TABS W 960px Indicator triangle centered on selected parent tab W 36px Tab dividers (for red menu): 1px, #c40020 Stroke: 1px, #aaaaaa BG: #f00026 (Conditional to English Core Package selection) W 36px BG: # (Conditional to Latino or International Core Package selection) Padding: 20px Note: Closing bottom line-rule should be included on sub menu tabs. Tab dividers (For dark gray menu): 1px, #aaaaaa 11

13 STICKY NAVIGATION MENUS Primary Navigation Menus PROGRESS INDICATOR NAVIGATION AND ORDER SUMMARY Page 1 (Build My DISH) W 630px BG: #4f4f4f Arial Bold, 12px, #ececec BG: # Arial Regular, 12px, Underscored # BG: # H 76px Progress Indicator Navigation hyperlinks: Arial Bold, 12px, active link underscored, #ececec, visually centered beneath page indicators Conditionally deactivated text: # Disabled Proceed Button Page 2 (Configure My DISH) Active labels: Arial Regular, 12px, #ececec #ececec, underscored Active pricepoint: Arial Bold, 16px, #ffffff Enabled Proceed Button Page 3 (Checkout) Left padding: 10px, top padding: 7px Left padding: 30px Bottom padding: 20px Parenthetical text: Arial Italic, 10px (leading as shown), #ececec Checkout Button BOTTOM STICKY MENU Positioned on Bottom Edge of Browser Window (Right edge positioned at 960px) Arial Regular, 12px, #ececec Arial Bold, 12px, #ececec Phone Number: Arial Bold, 12px, #ececec Arial Regular, 12px, underscored hyperlink, #ececec 12

14 MISCELLANEOUS Auxiliary Navigation, Graphical Dividers, Contextual Help PACKAGE SELECTION STATUS W 960px BG: #e6e6e6 Border: 1px, #b8b8b8 Arial Regular, 12px, #454545, underscored hyperlink On rollover: #f00026 Arial Bold Italic, 14px, # Berthold Akzidenz Grotesk XBd, 14px, #f00026, all upper-case Tapered gradient drop shadow as shown H 36px H 16px GRADIENT SELECTION DIVIDERS Top padding: 20px W 960px H 14px Bottom padding: 0px (will appear to be 20px optical padding) Do not truncate the ends. Each end should taper gradually and seamlessly into background. LINE-RULE DIVIDERS CONTEXTUAL HELP AND DISCLOSURES Top and bottom padding: 20px Arial Bold, 12px/18px, # Double line-rule against cart background: Upper line-rule: 1px, dedede Lower line-rule: 1px, #f9f9f9 Top and left padding: 20px When line-rules are used against a colored background (i.e. Package Cards), it s important to adjust for color contrast. Otherwise, the visual effect is too harsh, distracting and unaesthetic. Upper line-rule: 1px #6a6a6a, 30% opacity Lower line-rule: 1px, #f9f9f9, 30% opacity Arial Regular, 12px/18px, # BG: #e6e6e6 Line-rule: 1px, #b2b2b2 Note: This can be handled with CSS3 opacity settings. 13