Contact Drawer

A persistent element that enables customers to contact Dell customer service by a desired means, or to otherwise gain immediate assistance. The options within the drawer are specific to a certain segment/branch within the site architecture.

Timing and Behavior

  • The drawer is a fixed element at the right edge of the screen on larger breakpoints, and in the lower left corner of the screen on smaller breakpoints.
  • The drawer proactively opens after 30 seconds. When coded, this behavior must adhere to accessibility standards such that it doesn't interrupt screen readers as it slides in/out.
  • Transition time to open/close is 500ms.
  • The drawer proactively closes if the user doesn't interact with it for 5 seconds.
  • Ideally, the drawer should proactively open no more than twice consecutively on any page. Implementations may vary.
  • If the user closes the drawer through direct interaction, then it no longer proactively opens for that session (although this value resets during Cart & Checkout).

Direct Interaction

When a user clicks the label tab, the drawer slides out to reveal several contact and help options.

When the user clicks the label tab a second time, or clicks the close X button, the drawer slides closed.

Content

The drawer content is specific to the current segment/branch. For example: products For Home, products For Work, or Solutions & Services. Currently, all of the downstream pages within the segment will have the same content as the parent node, although a future goal is to provide the capability for making the content page-specific.

Content limits are minimum of 1 link, maximum of 4 links, plus an optional advertising/MDF area.

Links should be displayed in order of popularity. For example, chat is almost always first.

Each link should include an icon with supporting text. Clicking either element produces the same outcome for the link.

An optional introduction may precede the link list. This introduction can be personalized based upon page context and authentication. For example, "Hello Josh, do you need any help with laptops?"

If the drawer includes an optional MDF (inline marketing banner) at the bottom of its content, then don't remove this without approval from the legal department as doing so could cause a breach of contract.

Do's and Don'ts

Visual Design & Screen Location

The contact drawer is effective as a sitewide method for communication with Dell due to the consistency in its visual design and screen location.

Tab Label

Production testing validated that the best labels to accommodate all major use cases are "Contact Us" and "Chat or Call".

Drawer Timing

The proactive timing rules, transition time and all other behaviors related to the timing of the drawer should not be changed as they were arrived at through extensive testing.

Types

Variants

Common Button Labels and Usage

Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.

Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.

Button Label:
Corresponding Action:
Add to Cart
Search
Cancel
Save
Edit
Delete
Continue
Next/Previous
Submit
Select
Sign In/Sign Out
View Details
Ok/Cancel
Learn More
Close
Takes users to Cart page, with item added
Used for search buttons
Takes users back to entry point for a task
Used to save an item
Navigates users to change an item
Deletes an item on the page, usually with a verification step
Used as progression
Used as forward and backward navigation (Next is primary, Previous is secondary)
Used to submit a task or info
Used for choosing items in a task flow
Authentication standard, for consistency do not use Log In/Log Out or Signin/Signout
Used instead of “Select” in cases of product details or within learn content
For use in modal verification steps when more specific CTAs will not fit due to space
Used to link users to more learning content or contextual help
Used within modal windows

Contact Drawer

Contact Drawer

<div class="uicore-reboot-wrapper"><aside class="dds__drawer dds__drawer-open" data-toggle="dds__contact-drawer" aria-label="Contact Us" style="transition: all 500ms ease 0s;"> <a href="#" class="dds__drawer-tab"> <div class="dds__drawer-tab-text">Contact Us</div> </a> <div class="dds__drawer-content" aria-hidden="false"> <button class="dds__icons dds__close-x" aria-label="Close Contact Us"></button> <p>Need help? We're here for you.</p> <ul class="dds__drawer-list"> <li> <a href="https://marketing.dell.com/learn/ssi?ref=stpchatlink"> <i class="dell-tech-icon dds__comment"></i> <span>Contact an expert</span> </a> </li> <li> <a href="tel:+1-888-346-2289"> <i class="dell-tech-icon dds__phone"></i> <span>Call 888-346-2289</span> </a> </li> <li> <a href="mailto:US_SALES_SOHO@dell.com"> <i class="dell-tech-icon dds__mail"></i> <span>Email Dell sales</span> </a> </li> </ul> </div>
</aside></div>

No items found.

No items found.

No items found.

To be determined.

The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.

Please follow the best practices for complementary landmarks from WAI-ARIA authoring practices 1.1.

You may refer to this example of a complementary landmark from WAI-ARIA practices 1.1.

You may also refer to these tutorials for complementary content from Web Accessibility Tutorials.