1
TDA Web Guidelines The User Experience Group – Version 1.2 – Updated 02/24/2006
Welcome to the TD Ameritrade Web Guidelines. This document identifies a set of basic web elements and systems to reinforce creative communications. They are to be used in conjunction with the Master Brand Guidelines. Compliance with these guidelines is an important part of building the Company’s visual brand. The proper use of these elements will help project a strong, consistent identity and contribute to building a distinctive presence for our brand. Contents Overview 04 Logo 05 Color Palette 06 Typography Palette 18 Type 18 Page Titles 10 Site Framework 18 Page Structure Basic Page Elements 14 Tables 18 Content 18 Data 23 Lists 24 Charts 25 Messaging 26 Layers Graphics 28 Photography 29 Iconography 31 Modules 18 Specifications Interactivity 35 Buttons 18 Specifications 38 Hover States 39 Forms 40 Tabs 41 Status Indicators 42 Flip Book
Appendix 104 Development Requirements 105 Document Change Log
Navigation 44 Header 45 Footer 46 Navigation 18 Two-Tier 18 One-Tier 18 Reduced 18 Null 18 Content
Contact Lawrence Lipkin Director, User Experience llipkin@ ameritrade.com 201-761-5681
Layout 53 Content Templates 18 4-Column 18 3-Column 18 2-Column 18 3-Column + Left Nav 18 2-Column + Left Nav 18 Transactional 60 Data Templates 18 3-Column 18 2-Column 64 Liquid Layout 18 Examples 67 Pop-ups
Notes All measurements are in pixels. The navigation, content, and photography are for placement only (FPO).
Sample Screens 69 Content 80 Data 92 Transitional 100 Online Application
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
2
Visual Design Goals
Visual Design Goals Guiding Principles
Project Purpose
Communicate personality of new brand • Add dimension • Create warmth and distinction • Increase visual interest • Create coherent visual voice
Provide a flexible structure that facilitates: • TD Ameritrade’s new brand position • Designated communication channels • Functionality that encourages customization • Future merger-integration efforts • Optimal site performance through use of CSS, Ajax • A layered experience that delivers appropriate • • context for traders, investors, and new clients • Education through interactive, engaging learning • experiences
Increase legibility • Increase type size, page contrast • Increase interactive component: provide feedback on hover states/mouseover • Increase clarity: tell exactly what the purpose is, what is going on • Reduce visual noise • Turn up the volume on the most important things so they pop more Improve template structure • Plan for flexibility: improve template’s ability to scale • Provide liquid but proportional layout • Enable platform to support future mergers • Create hierarchy: Make the screen easier to scan, more legible • Use different sizes, fewer horizontal elements • Use white space gracefully • Indicate steps clearly (what to do 1, 2, 3) Improve educational component • “Build learning into the experience:” make it more interactive. • Create page areas and module definitions • Facilitate clarity and consistency for communication strategies/message types
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
3
Overview The User Experience Group
Contents 04 Logo 05 Color Palette
06 Typography Palette 18 Type 18 Page Titles 10 Site Framework 18 Page Structure
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
4
Overview: Logo
Logo TD Ameritrade Logo Light Green R G B #
13 176 43 0DB02B
Dark Green R G B #
31 56 46 1F382E
Clear Space LOGO SHOULD always appear clean and readable.
In order to maintain the integrity of the logo there should be no encroachment of text or graphic elements within the “clear space” as outlined. Clear Space: The distance as shown is the minimum amount of clear space to be maintained all around the logo.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
5
Overview: Color Palette
Color Palette Primary Colors Dark Green (Navigation link / Primary Header Bkg) R G 0 B 105 # 57 006939
Medium Grey (Lines)
Bright Green (Main Nav Bkg)
Light Grey (General shading)
R G B #
R G B #
0 177 5 00B105
R G B #
128 128 128 808080
238 238 238 EEEEEE
Medium Green (Secondary Header Bkg / CSS Buttons)
Inactive Grey (Inactive buttons)
R G B #
R G B #
13 134 35 OD9023
204 204 204 CCCCCC
Medium Orange (Apply Online / Messaging)
Light Orange (Highlight)
R G B #
R G B #
255 153 0 FF9900
248 235 216 F8EED8
Accent Colors Bright Red (Alerts / Required fields)
Medium Blue (Active Link)
R G B #
R G B #
255 0 0 FF0000
51 102 204 3366CC
Very Light Green (Messaging / Supertotal Row)
Navy Blue (Visited Link / Column Sort)
R G B #
R G B #
211 240 214 D3F0D6
0 69 108 00456C
Light Yellow (Messaging)
Very Light Blue (Sort Column)
R G B #
R G B #
255 248 219 FFF8DB
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
237 248 254 EDF8FE
The navigation, content, and photography are FPO.
6
Overview: Typography Palette
Typography Palette Site Graphics
Folio Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234567890
TYPOGRAPHICAL SITE GRAPHICS are used on home, landing, and concept pages. They are also used in modules for promotional purposes.
Folio Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234567890
System Text
Arial
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234567890
SYSTEM TEXT appears in all other cases. Headlines appear in 15pt Arial Body copy in 12pt Verdana
Arial Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234567890
Verdana
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234567890
Verdana Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz1234567890
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
7
Overview: Typography Palette: Type
Type Index Page Title Arial Bold 28px # 000000 Body Copy Verdana Reg 12px; Leading 16px # 000000 Contextual Link Verdana Bold Underline 12px # 3366CC Contextual Link (Hover) Verdana Bold Underline 12px # 000000 Highlight # F8EED8 Paragraph Title Arial Bold 15px # 000000 Visited Link Verdana Bold Underline 12px # 00456C Apply Online Now Link Verdana Bold Underline 12px; Carat Verdana Reg 12px # ED8100 Footer Link Verdana Reg Underline 9px # 3366CC Pipe Verdana Reg 9px # 808080 Footer Text Verdana Reg 9px # 808080 Utility Links Verdana Underline 11px; Client Login Verdana Bold Underline 11px # 3366CC Pipe Verdana Reg 11px # 808080
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Overview: Typography Palette: Type (Cont.)
8
Type (Cont.) Index Masthead Field Label Verdana Bold 10px # 000000 Field Example Verdana Italic 10px # 808080 Utility Link Verdana Reg Underline 10px # 3366CC Level 1 Navigation Arial Bold 12px # 000000 Level 2 Navigation Arial Bold 11px # 006939 Tab Arial Bold 12px # 000000 Tab Link Arial Bold 12px # 3366CC Left Nav Arial Bold 11px # 000000 Left Nav Link Arial Bold Underline 11px; Leading 15px # 006939
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Overview: Typography Palette: Page Titles
9
Page Titles Textual Content
“Clever Phrase” Graphic Treatment
Data Content
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
10
Overview: Site Framework
Site Framework Interface Framework :
Public site PAGE TEMPLATE
PANES Header
COMPONENTS
Topical (tabs)
Brand
ASSETS logo
Quote Box
new account button
Specific (secondary)
Null (sans navigation)
INTERACTIVITY
• tab states • secondary link states • button states
Search button quote button
Header
Concept
Content Content
Overview
Overview 2-column
modules
special promotion
Content
contact
Footer Footer
related
• • • •
module links link behavior local nav links flipbook transitions
TDA truth
Key spaces present Article
opportunities to:
Article w/ tiertiary navigation (local)
Article detail w/ flipbook
concept splash
- explore (user) - engage(user) - resolve (user) - promote(business) - educate (business)
topical splash
- inform (operations)
Article tabbed flipbook
Short
Long
Co-branded
3rd party brand
Footer
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Overview: Site Framework: Page Structure: Public Site
11
Page Structure Public Site
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Overview: Site Framework: Page Structure: Private Site
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
12
The navigation, content, and photography are FPO.
13
Basic Page Elements The User Experience Group
Contents 14 Tables 18 Content 18 Data 23 Lists 24 Charts 25 Messaging 26 Layers
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Basic Page Elements: Tables
14
Tables Content
Data
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
15
Basic Page Elements: Tables: Content Tables
Content Tables Vertical Columns
Horizontal Columns CONTENT TABLES are used to present information
that is not data-intensive.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
16
Basic Page Elements: Tables: Data Tables
Data Table Structure Balances & Positions Page Structure ACCOUNT EXPOSURE
ACCOUNT POSITIONS
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Basic Page Elements: Tables: Data Tables
17
Data Table Spacing Full Width Module
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Basic Page Elements: Tables: Data Tables
18
Data Table Spacing (Cont.) Partial Width Module
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Basic Page Elements: Tables: Data Tables
19
Data Table Module Headers Module Headers
Secondary (Partial Width) Module
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Basic Page Elements: Tables: Data Tables
20
Data Table Column Headers
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Basic Page Elements: Tables: Data Tables
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
21
The navigation, content, and photography are FPO.
Basic Page Elements: Tables: Data Tables: Rules
22
Data Table Rules Important Rules about Data Modules Module Headers • In general, related links take the client to different but related site pages, while the green “transactional” buttons are reserved for • functions that edit the module itself. Often these buttons also take the client to another page. • The vertical dotted line is used to separate abutting controls or groups of controls associated with different tasks. Column Data • The content type of the column determines the alignment (flush right or flush left) of the column’s content and header. Alphabetic • content is always flush left, numeric data is always flush right. • All currencies should include the currency symbol ( i.e., “$124.32”). The exception is if the symbol is implied in the column header • (i.e., “Cost($)”), in which case the content of that column would not carry the currency symbol (i.e. “124.32”). • A linking column header indicates the ability to sort by that data point. Sorting is denoted by the increased and bolded column • header text, and arrow to the right of the header, and the blue column background highlight. Totals + Summation Rows • The presentation of summary data always follows the TOTAL > SUBTOTAL > DETAILS order. The super-total is always presented • first, then any sub totals, then the details of these sums. This is a unified, site-wide convention aimed at providing clients with • critical data at a glance, without ever scrolling or searching around for the data. To aid in this, the super-total always appears on • the light green row background. • Only the super-total may appear on the light green row background • The super-total row must be as close to the top of the module as possible. the only case when it would not be the first row after • the module header is if the super-total actually totals columns of data inline. In this case, the column header row should appear • above the super-total row. • The super-total row is always bold and 1px larger in text size than the rest of the data. Gains/Losses • Text representing gains are always green with a “+” before them. • Text representing losses are always red with a “-” before them. Links and buttons in data tables • Symbols are always capitalized and bolded and follow the regular, blue link style • Orange links (secure side) are used to signify client-customizable content. (On the public site, orange links always lead to the • online application.) • Dark blue links are reserved for clickable column headers only • Orange (“more”) buttons are for critical yet ancillary information. These buttons produce an inline popup window upon clicking. • Green (“transactional”) buttons are for primary tasks, including high-level module-specific actions. • The white (“secondary”) buttons are for secondary tasks specific to the particular data chunk they reside in (i.e., collapse buttons, • or add symbol buttons).
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
23
Basic Page Elements: Lists
Lists
BULLETED LISTS are used in the “See Also” module, on FAQ, and in body copy for list formats.
TOP LINK is used every 3x on long lists.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Basic Page Elements: Charts
24
Charts To Be Determined
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Basic Page Elements: Messaging
25
Messaging Message Styles
Inline Error MESSAGES appear 10px above the the main content area. Various levels of messaging exist. Multiple messages can exist.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
26
Basic Page Elements: Layers
Layers
LAYERS display onClick.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
27
Graphics The User Experience Group
Contents 28 Photography 29 Iconography 31 Modules 18 Specifications
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
28
Graphics: Photography
Photography Homepage
Typography Folio Light # 000000 Key phrase is apx 1.75x larger All type rests on Power Path Power Path begins with the subject Lower corners have rounded edges Photography Use a clean, simple background with light colors Real-world setting
Concept pages
Character shows Personal Power & Individuality The subject should look: • Confident • Empowered • Passionate • Genuine Character Dont’s • Subject’s expression does not evoke confidence • Subject appears overly confident • Subject too active
Examples
Style is Refreshingly Straightforward • Natural Lighting • Not ‘over-styled’ i.e. make-up, clothing, hair • Backgrounds are more neutral and let the focus be on the subject Style Dont’s • Other elements within the image shouldn’t overpower the subject • Subject shouldn’t look like a model • Light subjects in a dramatic way • Burnout the environment or silhouette the subject • Subject should not have arms crossed Composition is Refreshingly Straightforward • Subject is the hero • Simple compositions • Clear space to position Power Path Composition Dont’s • Subjects face should not be cropped • Another object should not come between the • viewer and the subject • Subject should not have their backs to the viewer
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
29
Graphics: Iconography
Iconography Functional Last / Next
Flip Book
Collapse / Expand
Q&A
Refresh
Header / Tabs
Increase / Decrease
Fields
Collapse / Expand
B&P
Perform action (on ticker)
Data tables
Links
Content Level Navigation Indicator
Left Nav
Delayed quotes
Watch list
Required information
Forms
Secure application
Online App
Page Tools
Opens new browser window
Links
Column sort indicator
Tables
Signifiers
Messaging Severe Account Warning / Input Transactional Error
Message
System Account Warning System Alert Input or Transactional Confirmation Reminder Education Positive Affirmation
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
30
Graphics: Iconography (Cont.)
Iconography (Cont.) Concept No conflicting interests
Concept
Dedicated service Flexibility and ease of use Total security Quality execution Save time Innovation Seize opportunity Contact Us Call
Illustration
Fax Email Chat Write us Wire transfer Find a branch Icon Use in Buttons Log in
Home / Log in
Find a branch Close pop-up Minimize / Maximize Access Option Chain / Buying Power / Help
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
Contact us Pop-up SnapTicket SnapTicket
The navigation, content, and photography are FPO.
31
Graphics: Modules
Modules Offers OFFERS are the first element in the
right-hand column. Images and type can be packaged to create a visually alluring statement. The samples below are for illustrative purposes only.
Offer Module Test
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
32
Graphics: Modules (Cont.)
Modules (Cont.) Concept / Tout A CONCEPT TOUT will exist for
every concept page. It will display the iconographic treatment applied to that concept and the editorial tout.
Contact Us CONTACT US can have a number of forms: Get in touch, Visit a branch, or Let us call you.
Contextual THE SEE ALSO... contextual module
displays relevant downloads / cross links. The Q & A contextual module expands and collapses to reveal information.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
33
Graphics: Modules: Specifications
Module Specifications
2-COLUMN / 3-COLUMN TEMPLATES use these modules. They can use any combination of: offer, contact, concept / tout, or contextual modules. All modules are graphics except for the “See Also...” contextual module.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
34
Interactivity The User Experience Group
Contents 35 Buttons 18 Specifications 38 Hover States 39 Forms 40 Tabs 41 Status Indicators 42 Flip Book
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
35
Interactivity: Buttons
Buttons Button Elements & Sets Apply Online Now (Graphic)
Concept Call-to-Action (Graphic) Appears only in Concept banner area on Home.
Transactional Button Set The primary (dark green) button signifies the default action. It appears first. This is the most common button style. Minimum Button Size (68px) Some buttons use icons. Log in and Go are the only buttons that do not become inactive.
Inactive Buttons All buttons but Log in and Go have inactive states.
Half-active The secondary button becomes active before the primary button does.
Sequence Set When completing a linear process, the primary and secondary buttons reverse. Next > uses a carat. Button Spacing BUTTON SPACING All buttons are spaced the same
way: 20px down from the last item and 4px between. Like other page elements, buttons are 40px from the footer.
BUTTON SET Two types of button sets exist:
transactional and sequence. Transactional buttons are displayed to the left. They constitute the majority of buttons on the site. The sequence set (above) reverses the default button and concludes with the Next > button.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
36
Interactivity: Buttons: Specifications
Graphic Buttons Specifications Apply Online Now
APPLY ONLINE NOW is always orange. Apply Online
Now > links are also orange # ED8100. This button appears in the public site header.
Concept Call-to-Action
CONCEPT BUTTON is always blue and only appears
within an image on the PowerPath. (see example Home above)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
37
Interactivity: Buttons: Specifications
Transactional Buttons Specifications
TRANSACTIONAL BUTTONS are created with CSS and comprise the majority of the buttons on the site. All have up, over and down states. Some use icons. All are 23px high, except for “Go” buttons. Those buttons are the same height as the browser fields (20px). The maximum length of a button is 140px with 10px padding. Excluding the “Go” button, the minimum length is 68px with centered text.
If two or more buttons appear, the dark green version will be used to signify the “default” action.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
38
Interactivity: Hover States
Hover States INPUT FEEDBACK When moving through forms,
an indicator to the left and background highlight (# F8EED8) walks you through the process.
ROLLOVER Hover states for both text and navigation also displays highlight color # F8EED8.
ROW Hover states for rows displays highlight color # F8EED8 on mouseover. COLUMN Highlight color # EDF8FF and a down
arrow indicates sort criteria.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Interactivity: Forms
39
Forms Specifications
Field Structure FORMS use either button set. Buttons are inactive
until necessary fields are complete. Cancel button is inactive until the first field is affected. As a general rule, labels are always unbold (roman, regular) text, and the element being labeled (input boxes, drop boxes, check boxes) is always bold. Exceptions to this rule include the input boxes in the masthead, and specific view controls within data tables. Please refer to sections on those elements for their specific rules. The purpose of this rule is to aid the User in focusing on the critical information. Required fields have a red asterix unless all fields on the page are required. Highlight color moves through sections unless there is only one section.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Interactivity: Tabs
40
Tabs
TABS are used to compare like topics within the main content area. They are not used as third or fourth level navigation. The example above shows their implementation on the Account Types page.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Interactivity: Status Indicators
41
Status Indicators
STATUS is displayed at all times. When moving through a process / linear sequence, a progress bar appears at the top. When moving through a form, the form highlights both the row and the background of your task.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
42
Interactivity: Flip Book
Flip Book
FLIP BOOK is used on Article pages to display multiple screenshots.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
43
Navigation The User Experience Group
Contents 44 Header 45 Footer 46 Navigation 18 Two-Tier 18 One-Tier 18 Reduced 18 Null 18 Content
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Navigation: Header
44
Header Public
Private
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Navigation: Footer
45
Footer Public
Private
Footer Spacing FOOTER LINKS do not wrap. Prevent orphans in legal text / footer. Footer is 40px from last item on the page. Footer has 10px margins. Legal text aligns with footer text.
If the page is less than 410px, the footer starts at 410px (see left).
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Navigation: Navigation Overview
46
Navigation Two-Tier Global
One-Tier
Reduced
Null
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Navigation: Two-Tier Navigation
47
Two-Tier Navigation
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
48
Navigation: One-Tier Navigation
One-Tier Navigation
ONE-TIER NAVIGATION is used on transitional
pages when we want to encourage you to navigate elsewhere.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Navigation: Reduced Navigation
49
Reduced Navigation
REDUCED NAVIGATION is used when only one level
of navigational hierarchy exists. Pop-up windows use “close” buttons.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Navigation: Null (Navigation)
50
Null (Navigation)
THE NULL NAVIGATION bar is used in pop-ups and
other instances without global navigation. Pop-up windows use “close” buttons.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Navigation: Content Navigation
51
Content Navigation
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
52
Layout The User Experience Group
Contents 53 Content Templates 18 4-Column 18 3-Column 18 2-Column 18 3-Column + Left Nav 18 2-Column + Left Nav 18 Transactional 60 Data Templates 18 3-Column 18 2-Column 64 Liquid Layout 18 Examples 67 Pop-ups
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
53
Layout: Content Templates
Content Templates
Content 4-Column
Content 3-Column
Content 2-Column
Transactional
Content 3-Column + Left Nav
Content 2-Column + Left Nav
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
54
Layout: Content Templates: Content 4-Column
Content 4-Column Public Site Home
APPLIED TO PAGE TYPE:
Public site home
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
55
Layout: Content Templates: Content 3-Column
Content 3-Column Overview
Article
APPLIED TO PAGE TYPES:
Overview Article Concept Detail
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
56
Layout: Content Templates: Content 2-Column
Content 2-Column Content
APPLIED TO PAGE TYPE:
Content
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
57
Layout: Content Templates: Content 3-Column + Left Nav
Content 3-Column + Left Nav
APPLIED TO PAGE TYPE:
None
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
58
Layout: Content Templates: Content 2-Column + Left Nav
Content 2-Column + Left Nav Text Article
APPLIED TO PAGE TYPE:
Text Article
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
59
Layout: Content Templates: Content Transactional
Content Transactional Login
APPLIED TO PAGE TYPE:
Login / Log Out
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
60
Layout: Data Templates
Data Templates
Data 1-Column
Data 2-Column
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
61
Layout: Data Templates: Data 1-Column
Data 1-Column Watch lists
APPLIED TO PAGE TYPE:
Watch lists
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
62
Layout: Data Templates: Data 2-Column
Data 2-Column Balances & Positions
APPLIED TO PAGE TYPE:
Text Article
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
63
Layout: Liquid Layout
Liquid Layout MINIMUM AND MAXIMUM SITE WIDTH
/
LIQUID LAYOUT
TDAmeritrade.com is a center-aligned website designed to scale with the user’s browser window. To maintain the integrity of the site design, minimum and maximum site widths have been set. These site widths are based upon a browser window width of 800px (minimum) and 1024px (maximum). Following are some examples depicting how the page elements accommodate the “liquid layout”. NOTES
Navigation: The main and secondary navigation stretch to accommodate the liquid layout. It is helpful to think of each level of navigation as a unit that, all together, is horizontally centered. The extra space created by a larger browser window is divided up and inserted between each navigation element and the divider pipes, to a maximum of 50 pixels.
Liquid Content: In most cases, the right and left (navigation) columns, if present, remain fixed in size and align to the right and left sides of the site, respectively. The main content well stretches to accommodate the new browser size. Header Elements: The site logo always remains fixed to the left side of the site, while the remainder of the header elements remain fixed to the right side of the site. Footer: The footer always grows with the site width.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Layout: Liquid Layout: Examples
64
Liquid Layout Examples Home: To Be Determined
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
65
Layout: Liquid Layout: Examples (Cont.)
Liquid Layout Examples (Cont.) Liquid layout at minimum site size of 800px wide.
Liquid layout at maximum site size of 1024px wide. If the browser window is larger, the gutters to the left and right of the site (identified as 10px wide, below) absorb the space.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
66
Layout: Liquid Layout: Examples
Liquid Layout Examples (Cont.) Liquid layout at minimum site size of 800px wide.
Liquid layout at maximum site size of 1024px wide. If the browser window is larger, the gutters to the left and right of the site (identified as 10px wide, below) absorb the space.
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Layout: Pop-ups
67
Pop-ups To Be Determined
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
68
Sample Screens The User Experience Group
Contents These screens are not correct in every detail. They represent the spirit of the site; actual specifications should be referred to in the pages prior. 69 Content 80 Data 92 Transitional 100 Online Application
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Sample Screens: Home (4-Column Template)
69
Content Pages
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Sample Screens: Concept Overview (3-Column Template)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
70
The navigation, content, and photography are FPO.
Sample Screens: Concept Detail (2-Column Template)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
71
The navigation, content, and photography are FPO.
Sample Screens: Pricing (2-Column Template)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
72
The navigation, content, and photography are FPO.
Sample Screens: Account Types (2-Column Template)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
73
The navigation, content, and photography are FPO.
Sample Screens: Ways to Fund Your Account (2-Column Template)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
74
The navigation, content, and photography are FPO.
Sample Screens: FAQ (2-Column Template)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
75
The navigation, content, and photography are FPO.
Sample Screens: Trade Overview (3-Column Template)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
76
The navigation, content, and photography are FPO.
Sample Screens: Trade Triggers (3-Column Template)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
77
The navigation, content, and photography are FPO.
Sample Screens: Email Safety (2-Column Template + Left Nav)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
78
The navigation, content, and photography are FPO.
Sample Screens: Contact Us (2-Column Template)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
79
The navigation, content, and photography are FPO.
Sample Screens: Balances & Positions Expanded
80
Data Pages
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Sample Screens: Balances & Positions Expanded (Cont.)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
81
The navigation, content, and photography are FPO.
Sample Screens: Balances & Positions (Positions)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
82
The navigation, content, and photography are FPO.
Sample Screens: Balances & Positions (Single Account)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
83
The navigation, content, and photography are FPO.
Sample Screens: Balances & Positions Options Collapsed
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
84
The navigation, content, and photography are FPO.
Sample Screens: Balances & Positions Options Partial
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
85
The navigation, content, and photography are FPO.
Sample Screens: Balances & Positions Options Expanded
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
86
The navigation, content, and photography are FPO.
Sample Screens: Client Home
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
87
The navigation, content, and photography are FPO.
Sample Screens: Client Home (Cont.)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
88
The navigation, content, and photography are FPO.
Sample Screens: Order Stocks
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
89
The navigation, content, and photography are FPO.
Sample Screens: Order Options
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
90
The navigation, content, and photography are FPO.
Sample Screens: Watch list
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
91
The navigation, content, and photography are FPO.
Sample Screens: 404 Error (2-Column Template)
92
Transitional Pages
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Sample Screens: Log On (Transactional)
93
Login (accessed from research or other content rich area)
Login (accessed from utility link)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Sample Screens: Login Error / Log Off (Transactional)
94
Login Error
Log Off
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Sample Screens: Login Help (2-Column Template)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
95
The navigation, content, and photography are FPO.
Sample Screens: Reset Password (2-Column Template)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
96
The navigation, content, and photography are FPO.
Sample Screens: Request Additional Information (2-Column Template)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
97
The navigation, content, and photography are FPO.
Sample Screens: Branch Locator (Pop-up)
98
Branch Locator Results To Be Determined
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Sample Screens: TD Waterhouse re-direct (Unique Template)
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
99
The navigation, content, and photography are FPO.
Sample Screens: Online Application
100
Online Application
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Sample Screens: Online Application Form
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
101
The navigation, content, and photography are FPO.
Sample Screens: Online Application Review
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
102
The navigation, content, and photography are FPO.
103
Appendix The User Experience Group
Contents 87 Development Requirements 88 Document Change Log
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Appendix: Development Requirements
104
Development Requirements To Be Determined
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.
Appendix: Document Change Log
105
Document Change Log Courtney Bolton, 1.1, 2/17/2006 Courtney Bolton, 1.2, 2/24/2006
TD Ameritrade Web Guidelines – The User Experience Group – Version 1.2
The navigation, content, and photography are FPO.