Images used on csaa.com must be optimized.

Characteristics

Image file size should be as small as possible, but there should be no visible loss of quality.

When to use the different file types

• Use JPG file format for continuous tone images (i.e. photographs)
• Use GIF file formats for vector images (i.e. logos) and graphics with predominantly type.
• Use PNG format when some part of the graphic is transparent.

What Problem does this solve?

Correctly optimized files have excellent legibility and do not add significant page weight.

Examples

Correctly optimized

Incorrectly optimized

This interface tool helps users to easily apply or submit a date or date range.

Characteristics

• The user is presented a calendar icon as an optional alternative to date selection from the standard date pulldowns.
• User clicks on the calendar icon and the calendar widget opens below the date form entry fields, so as not to obscure them). The default date selected should be today.
• The user may select a date from the graphical representation of the calendar by clicking one of the active dates. These may be in the future or the past depending on the scope of the data set or the task at hand. (i.e Selection of a flight when traveling would only show active dates in the future, selection of blog posts available to edit would be in the past.)

• The Single month Calendar Widget displays the current month and year.
• Users are able to view only one month at a time. Clicking onto the arrow graphics will show the previous or next month.

When to use this Style

Use this pattern when the person interacting with the application or experience would want to easily apply a date or date range to an item. This includes contexts where the application itself needs to apply date metadata (“date-stamp”) a piece of information in order to track, filter, and sort items by by date or date order.

What Problem does this solve?

User will be easily able to identify the Page / Screen where they are currently.

Examples

[insert a picture here]

A transition is the animated change of content from one state to another. This animation helps the user to better notice and understand the change that is happening.

Characteristics

• The more rapid the change the more important the event.

• Rapid movement is seen as more important than rapid color change.

• Movement toward the user is seen as more important than movement away from
the user.

• Very slow change can be processed without disrupting the user’s attention.

• Movement can be used to communicate where an object’s new home is. By seeing the object moving from one place to another we naturally understand where it went and therefore will be able to locate the object in the future.

• Transitions should normally be reflexive. If an object moved and collapsed to a new spot, you should be able to open it and see it open up with the reverse transition. If you delete an object and it fades, then if you create an object it should fade into place. This reinforces the concept of ‘symmetry of action’ (the opposite action is implied by the initial action.

When to use this Style

Animated transitions should be used very sparingly, and only in situations where it is very important to focus a users attention toward an interaction.

What Problem does this solve?

Animated transitions can help call attention to something that is generally static and is difficult to comprehend or perceive.

Examples

[insert a picture here]

An accordion is a vertical or horizontal list of items stacked on on top of each other / or next to each other. Generally at least one of the tabs is expanded.

Characteristics

The exact style of this element is TBD.

When to use this Style

This is a good technique to use when there is very limited space and there is a lot of information to show. (Air+Car+Hotel | Vacation+Cruises |  Triptik+Maps+Guides) These would all fall into the category of travel, so compiling them in a

What Problem does this solve?

• Brings windows together which have some relation to each other.
• One window available at a time to reduce information “overload.”
  

Examples

http://jqueryui.com/demos/accordion/

The determinate progress bar indicates the progress of a task based on completion. It gives the user an idea of how long the task will take to complete, and reassures them that something is happening.

There are two types of ProgressBar controls:

• A determinate ProgressBar control is a linear representation of the Progress of a task over time. You use a determinate ProgressBar when the scope of the task is known.
• An indeterminate ProgressBar control represents time-based processes for which the scope is not yet known. As soon as you can determine the scope, you may want to use a determinate ProgressBar control.

Characteristics

• The progress bar should begin as soon as the user has decided to start the process.
• If the task requires the user to wait until completion, be sure to add motion to the bar to give the perception of progress.
• Ensure that a task cancel option is included, and that proper steps are taken to store, or discard any successful progress.

When to use this Style

Use a progress bar when your task has a determinable goal or finish point. Progress bars should never decrease in progress, and should display a fairly accurate representation of actual progress. They may be used for uploads, searching, connecting, or other actions.

What Problem does this solve?

The progress bar gives the user an idea of how much progress has been completed, and approximately how long until the task is completed. It also reassures the user that progress is being made.

Visual Elements

Ensure the visual design can’t be mistaken for clickable navigation.

Examples

Dynamic drop-down or expanding menus allow visitors to reach most pages no matter where they are. Dropdown menus provide a way to expose more options without showing them on the screen by default.

Characteristics

• Menus can be opened on click or on hover.
• The element used to activate a menu should have a downward pointing arrow to indicate that more options are available. TBD?
• Other interaction TBD.
• The functionality contained within the dropdown menu should be minimal.
• Menu should not have more than one level. No secondary menu items should pop up when you roll over any of the menu’s links.

When to use this Style

In the primary navigation tabs.

What Problem does this solve?

• Users need to access more options that are secondary to the primary navigation.
• The amount of real estate on the screen is limited, and dedicated to site conent.

Visual elements

• Links shown in size TBD, font TBD, color TBD.
• Drop shadow behind the menu is TBD.
• Background color of menu #FFFFFF, opacity TBD.
• All links or text should be visible in one screen. No scrolling.

Copy/Text elements

• Main header text of the drop-down menu is COLOR SIZE STYLE TBD.
• Link size is COLOR SIZE STYLE TBD.
• Link rollover state COLOR SIZE STYLE TBD.
• Link text should represent/explain key-words or phrases that send the user to the secondary level of the site.
• Links in the menu should be grouped appropriately (or in related categories TBD?).

Related Links

Jakob Nielsens’s Drop-Down Nav Study
Best Practices of Drop-Downs

Examples

[insert a picture here]

The progress bar indicates the length of a multi-step process. It highlights the current step, and indicates which steps are complete and which are incomplete.

Characteristics

• The progress bar should begin as soon as the user has decided to start the process.
• The final step in the progress bar should reflect the last screen where action is required (e.g., Complete Registration, Submit Order). Don’t include a passive Confirmation or Receipt Page in the progress bar.

When to use this Style

Use a progress bar in a wizard or other predefined multistep process that the user may only ever have to complete one time, or at most on rare occasions. Do not use for routine tasks for which a heavy step-by-step handholding will eventually wear out its welcome.

What Problem does this solve?

When the user is expected to complete a multi-step process, steps help the user know that several steps are involved, and where they are in relation to the completion of the process.

Visual elements

• Ensure the visual design can’t be mistaken for clickable navigation.
• Other TBD.

Copy/Text elements

• Use short names for each step.
• Action-oriented verbs are good, but use only if each step can be fairly described this way.

Useful links

Progress Trackers

Examples

AAA Auto Insurance
AAA offers three types of auto insurance, however, on AAA.com, we refer to all types simply as “AAA Auto Insurance.” The individual product names are for use only in face-to-face sales. For reference only, they are “AAA Select Auto Insurance,” “AAA Flex Auto Insurance” and “AAA Choice Auto Insurance.”

AAA Branches
Refer to our offices as “branches” not “branch offices” or “district offices”. When possible, use a branch’s full name. Ex: The AAA Lakeshore Plaza branch.

AAA Emergency Road Service
This is the official product name.  Always spell it out and include “AAA”.  Never use the internal shortening, “ERS” in any customer-facing communications.

When speaking generically about road service, the term “roadside assistance” may be used. However it should never be preceded by “AAA”.  ”AAA Roadside Assistance” is not a product name.

Incorrect: AAA Roadside Assistance is the nation’s fastest.
Correct: AAA offers the nation’s fastest roadside assistance.

AAA Gift Membership
This is the official product name.  Reference can also be as, “the gift of AAA Membership”.

AAA Home Insurance
The product name is “AAA Home Insurance” not “AAA Homeowner’s Insurance” or “AAA Homeowner Insurance”.

AAA Job Titles
Capitalize the title of AAA employees with Member-facing positions:
AAA Claims Representative
AAA Insurance Agent
AAA Life Insurance Specialist
AAA Vacation Specialist

AAA Prescription Savings® program
This is the official product name. The registered trademark symbol must be used in the first mention of the program in any communication.

AAA TourBook® guide
Please include the registered trademark symbol in the first mention of this product.
Incorrect: AAA Tourbooks
Correct: AAA TourBook® guides

Online space limitations make the following constructions acceptable, but less desirable:
AAA Maps and TourBook® guides
AAA Maps and tourbooks (This example does not employ the trademarked name.)

AAA TripTik® Travel Planner
This is the official name of the AAA National product that we license.  Should be referred to by its full name.  If space is limited online, “Travel Planner” may be omitted from the formal name.

If the full name is used once at the beginning of a communication, the product may be referred to as “TripTik” throughout the rest of the piece.

Associate Membership
Avoid using this product name in headlines, banners or other places where adequate explanation of the product is not readily present. While this is a product name, it doesn’t mean much to a user who isn’t familiar with how we define it.  Instead, try using copy that reflects the idea: ”Share the Benefits of AAA”

Auto Club
Avoid this term as much as possible. Refers specifically and only to AAA and its motor clubs. Not to be used as a generic term. Both Auto and Club must be capitalized. Never say, “AAA is comprised of auto clubs.”

Automatic Renewal
This is not an official product name and should not be capitalized in running text.

Correct: Sign up for automatic renewal of your AAA Membership
Incorrect: Sign up for Automatic Membership Renewal

Member, Members, Membership
“AAA Membership” is considered a product name and capitalized as such. When referring to AAA Members, always capitalize “Member”, and any of its derivatives. It is acceptable to use capitalized “Member” or “Membership” without using “AAA” in front of it when referring to our Members or their Membership. Note: Non-members are referred to with a lowercase “m.”

Motor Club
Refers to motor clubs in general, including AAA or not.  Should not be capitalized.

VIA
VIA is italicized. If the word magazine is needed, it is not capitalized.