Issuu on Google+

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

PDF

Links

Content Level Navigation Indicator

Left Nav

Delayed quotes

Watch list

Required information

Forms

Secure application

Online App

Print

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.


TDA | UI Specifications