Navigation

The global system that a visitor can use to move around a website. Orients users by reinforcing the context of a destination prior to navigation.

Mastheads

A masthead is a collection of navigation elements (structured nav, search, and elevated links to the mostly frequently used features including account and cart) that provide users with global pathways to the most important information across the site.

The masthead promotes the company brand and makes it instantly recognizable to the user (via the Dell icon and brand colors).

Masthead navigation should not be a sitemap or a table of contents. Some patterns don't belong in the global navigation menu.

The masthead must scale to work on all digital properties owned by Dell Commerce Service Group (DCSG) including, but not limited to:

  • Browse
  • Learn
  • SnP
  • Cart&Checkout
  • My Account
  • Premier
  • PartnerDirect
  • Community
  • Dell Sales Application (DSA)

Any updates to the site structure and link labels (within the limits set when the code was written) must NOT require additional code changes.

The types and variants on this page are meant to communicate the visual and interaction design intention. Taxonomy and content herein should be consider placeholder.

Masthead & Authentication

The unauthenticated masthead is used for all experiences on Dell.com. Before a user signs-in, they are presented with the unauthenticated state.

After the user has signed in, they are shown the authenticated masthead in a state that's contextual to their account (personal or Premier).

Masthead Menu Segmentation

The unsegmented masthead menu (seen on the homepage of Dell.com) provides users the option to browse deeper into the For Home (personal) segment or For Work (business) segment via products, solutions, services, deals or financing.

A segment-specific masthead menu is seen after users navigate to a For Home or For Work destination, or as the result of navigating to Dell.com via organic external search.

Other Masthead Variations

The Premier masthead has an additional menu for Premier tools.

The sitelet masthead is for Dell-branded pages or sitelets that are not within Dell.com’s navigation structure.

  • This masthead helps maintain brand and user experience continuity between Dell’s digital properties.
  • Takes on the same functionality as the unauthenticated and authenticated masthead, but with more design flexibility.
  • All elements are optional except the Dell logo, blue background, and the sitelet name.

The simplified masthead keeps users focused on the task at hand and limits the likelihood that they will navigate away. Used predominately in cart and checkout, and workflow pages.

SEO

The masthead dropdown menus must be in the HTML (loaded before JavaScript ) so that search engines can read them.

CSS or JavaScript can be used to hide the menus after the page is loaded.

Don’t put too many links in the masthead. Google suggests no more than 100 total links per page (including the masthead menus and the rest of the page).

Content Strategy

Link labels must take popular keywords into consideration.

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” - Antoine de Saint-Exupery. This guidelines is very important when it comes to the masthead because it shows on every single page. The more we have in the masthead, the farther we push down the page content, and the more we overwhelm the site visitors.

Footers

Footer navigation is used to link to parts of a website that are more frequently used than others, but does not follow the hierarchical structure of the masthead navigation.

Footers also house functionality that's important regardless of what page users are visiting, such as language and country selection.

A footer has two sections - the top footer and the legal footer ...

Top Footer

  • The links should stay consistent across regions, and should be non-commercial in nature.
  • Text should not wrap or go to a second line.

Legal Footer

  • The legal requirements for the links at the top of this section can vary by region.
  • These links must be displayed on all pages that are customer facing, including pages for channel partners, Premier users, and any users outside of Dell.

Do's and Don'ts

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

Mastheads

No items found.

No items found.

No items found.

No items found.
No items found.

To be completed.

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

Mastheads

The A11Y Style Guide has excellent examples of markup for site logos.

Please follow the best practices for menu bars from WAI-ARIA authoring practices 1.1.

Please also refer to these recommendations for menubars from WAI-ARIA 1.1.

You may refer to this example of a navigation menubar from WAI-ARIA practices 1.1.

You may also refer to this tutorial for flyout menus from Web Accessibility Tutorials.

Footers

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

Please also refer to these recommendations for contentinfo from WAI-ARIA 1.1.

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

You may also refer to this tutorial for page footer region from Web Accessibility Tutorials.