Navigation

The global system by which a user moves between website pages, and to locations within pages. Orients users by reinforcing the context of a destination prior to navigation.

Skip Nav

Landmark regions can be used as targets for skip navigation to enhance keyboard navigation of a page.

When the first interaction is a Tab key press, this reveals a skip navigation bar across the top of the page.

The skip nav includes a list of links for jumping to page landmarks, bypassing deeper content.

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.

Left Menu Bar

This component replaces the dropdown navigation menus that appear along the bottom of the standard masthead.

Tier 1 options are visible by default, and accordions are used to access tier 2 and tier 3 options.

As with the sidebar menu that's seen on smaller breakpoints, the menu currently doesn't support tier 4 or deeper.

This component may be collapsed and expanded by users via the button on its right border/divider.

The left nav menu sometimes retains its state after navigating. When users select an option within the left menu bar to navigate, the component remains in its prior expanded state, with the selected option visually indicated. In all other navigation scenarios the left menu bar resets to its original collapsed state.

On smaller breakpoints, this component is replaced with the standard sidebar menu that's triggered by a Menu option in the masthead.

It's important to use a skip nav component on any page with a left menu bar, otherwise keyboard users are forced to Tab through the left menu options on every page.

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