Image File Formats

Description

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 road

Correctly optimized

Incorrectly optimized

Incorrectly optimized

Last modified: August 23, 2010 at 9:48 pm.

Posted in Style | 2 Comments

Calendar Picker

Calendar Picker

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]

Last modified: August 10, 2010 at 6:35 pm.

Posted in Style | Tagged , , , , | 2 Comments

Transitions

Transitions

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]

Last modified: August 23, 2010 at 9:48 pm.

Posted in Style | 2 Comments

Accordion

Accordion

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/

Last modified: August 9, 2010 at 5:58 pm.

Posted in Design Principles | Tagged , , , , | 3 Comments

Progress Bar, determinate

Progress Bar, determinate

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

Last modified: August 9, 2010 at 11:10 pm.

Posted in Design Principles, Style | Tagged , , , | 1 Comment

Drop-down menus

Drop-down (mega?) menus

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]

Last modified: August 9, 2010 at 5:01 pm.

Posted in Style | Tagged , , , , , | 3 Comments

Progress Bar, steps

Progress Bar, steps

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

Last modified: August 9, 2010 at 10:42 pm.

Posted in Style | Tagged , , , | 1 Comment

Tabs

Tabs

Standards for using Tabs.

Characteristics and Best Practices

  • Tab controls are the interface component for navigating through the module tabs panes.
  • The tab control text is the text that describes the tab control. It should be short (one to two words) and should effectively depict the corresponding information that will display.
  • The active tab control refers to the tab control that is presently selected. Only one tab control should be active. The first tab control is the default active tab control when the web page first loads.
  • Don’t use scrolling inside panes.
  • Allow keyboard navigation.
  • Tab control graphics should reach the end of the widget instead of being cut off.
  • Tab control graphics should not change sizes when activated. Change colors or font styles to show activation.

When to use this Style

Use tabs to organize vast amounts of content and to control what displays at one time.

What Problem does this solve?

Tabs are design elements that separate content into panes that appear one at a time. Users activate what they want displayed by clicking or hovering over the tab. Use tabs to optimize screen real estate without losing the amount of content on a page.
The interaction of radio buttons behave similarly to tabs.

Examples

tabs

Last modified: August 9, 2010 at 5:15 pm.

Posted in Style | Tagged , , , , | Leave a comment

Symbols and Icons

Symbols and Icons

Icons and symbols are simplified and highly recognizable visual representation of actions or things. When used with a textual label, icons can make the label more identifiable.

Characteristics and Best Practices

  • An effective icon communicates is recognizable in a glance.
  • A distinct shape is more effective than its color or content.
  • Simple shapes give more impact than intricate details.
  • Avoid vague or subtle concepts, and use established representations to provide consistency for the customer.
  • Apply a similar visual style to an icon as a part of a set.
  • Use icons/symbols in conjunction with a text label.
  • Align all elements symbols and icons along the same line when used in close proximity.
  • Keep sizes similar when showing a set.

When to use this Style

  • To reinforce a text link or as an accent.
  • In a list of items to quickly differentiate items in the list.

What Problem does this solve?

Icons can make it possible to quickly differentiate content. They are powerful tools that can emphasize content by showing a quick reference to what the action will be.

Examples

Last modified: August 10, 2010 at 10:04 pm.

Posted in Design Principles | Tagged , , , , , | 2 Comments

Frequently Misused Terms and Product Names

AAA.com
Always capitalize AAA when referring to the website.  Do not include “www”.

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.

Last modified: August 6, 2010 at 12:17 am.

Posted in Editorial | Tagged , , , , , , | 1 Comment