New feature badges

New feature badges inform customers about a new product feature. The badge appears in context with the new feature for no more than 30 days since the customer’s last sign-in.

When to use new feature badges

Use this badge when we add a new feature to a product and want to let customers know.

• Primary use: To draw attention to a new navigational element that points to a new product feature
• Secondary use: To draw attention to a new area within an existing feature

Appearance

These three examples show what the new features badge looks like.

Example 1. New feature badge on left nav

Example 2. New feature badge on tabs

Example 3. New feature badge on flyout

Note that NEW shouldn’t appear as part of the image. And it should never be a persistent part of the product.

Behavior

For existing customers, new feature badges appear for 30 days.

For new customers, no new feature badges appear. For these customers, everything is new!
After 30 days of using the product, new feature badges can start appearing.

Dismissing the badge

• Once the customer accesses the new item or exposes the new feature area, the badge stops appearing.
• QuickBooks Online multiuser company:
  Individual company users need to dismiss the badge by accessing the new feature. The badge persists for other company users until they check out the new feature or until the badge stops appearing after 30 days.
• QuickBooks Online Accountant multiuser firm:
  The firm user needs to dismiss the badge by accessing the new feature, and then the new badge will stop appearing in the firm user’s view of their customers’ QuickBooks. But the badge will still appear for the firm’s customers until those customers check out the new feature.

Again, for companies, firms, and existing users who don’t access the new feature, the badge goes away after 30 days.

Accessibility

To help customers who are using the product with screen readers, the aria label should be set as “New [feature name]” or “[Feature name] new.”

Indicator dot

An indicator dot lets customers know about a change to a feature, section, or communication.

These dots bring attention to a specific product area without hiding or complicating the interface.

When to use indicator dots

Use indicator dots to inform users about general events within a product’s existing features.

Here are some of the types of things we can guide customers to with indicator dots:

• Updates to a section within a feature
• Communications from other users
• Well-timed, informative task reminders
• Status changes

Appearance

The indicator dot can show up on an icon, section label, or navigational elements.

Example 1. Indicator dot on global navigation

Example 2. Indicator dot on tabs

Behavior

When there’s a change in status, reminder, update, or new communication. we can inform users with the indicator dot.

We can use the indicator dot to lead to something new, but limit such dots to 2 levels of discovery ONLY.

Display: Show when there is a change in status, reminder, update, or new communication. Indicator dot can be used to lead to something that’s new, but limit to 2 levels of discovery only.

Example 1. New time period option within a dropdown

Dismissing the dot indicator

• Once the customer accesses or exposes the location of the indicator, it disappears.
• QuickBooks Online multiuser company:
  The dot goes away only for the company user who interacted with the new feature. Other users within the same company will still see the dot, if they have not checked out the features.
• QuickBooks Online Accountant multiuser firm:
  The dot is dismissed for all of clients’ QuickBooks only for the firm user who interacted with the changed item. The firm’s clients will still see the badge if they have not clicked on the changed item. Other users within the same firm will still see the badge if they have not selected the changed item.
• Note: Some notification types may dismiss the indicator dot if a user has been exposed to the notification without an interaction.

Expectations: There is supporting context within the page.
Duration: Display the indicator dot until the customer engages with the referenced section.

Accessibility

To help customers who are using the product with screen readers, the aria label should be set as “[Feature name] new updates.”

What NOT to do

To keep updated items as contextual and timely as possible, don’t use indicator dots for more than two levels deep of discovery.

Consider how frequent feature updates are. Don’t use indicator dots on the left nav. Instead, use the notification bell so that we don’t have too many dots and bells and whistles going off throughout the product.