Icons

Considerations in choosing icons

When we choose icons, we want to reflect Dell and Boomi values, as well as the world we're living within. For an example of the first, this means choosing icons that do not show preference toward specific genders, races, or other identifiers. For the second, this means being aware that not all cultural icons are universal - an envelope is a good symbol for receiving a message because they are used throughout the world. A mailbox is not. Not only do mailboxes look different from one place to the next, but not all countries deliver the mail door-to-door.

Icons set by themselves are particularly ineffective if not labeled. The Ineffectiveness of Lonely Icons by Matt Wilcox outlines many of the reasons that icons break in general, and icons by themselves specifically.

Icon display, behavior, and accessibility

Icons convey meaning, and all of our users should have access to that meaning. This takes multiple layers of design to get right. (There's no guarantee all of our designs will be right at any given time -- and "right" is often up for debate -- but these are guidelines.)

• The icon should align with the meaning of what we're trying to tell them. For example, a green check mark aligns with "This is OK" in most countries and languages. In contrast, a green check mark next to a critical system failure message does not align with the meaning of "this is broken".
• The icon should be visible and with enough contrast that people with moderate  visual disabilities can see it. Follow accessibility guidelines in color and size. For example, a grey icon at 6px by 6px intended to communicate a critical system failure would likely fail because people would generally not see it, or have trouble making out what it is.
• The icon should communicate whether it is actionable or not. In some instances, we're handling this by always making specific icons interactive. In others, we're changing the behavior of the icon on hover.
• If the icon is not actionable, and the icon's meaning is repeated through text, then the icon should likely be a background image (so that screen readers and the like don't read its meaning twice).

Actionable vs decorative icons

Actionable icons do something when the user takes action. They're generally coded as images in an anchor (link) tag.

Actionable icons need to be in the HTML (foreground) because CSS Background Images are not able to be detected through a screen reader, and the user will never know they are there. This is especially true if the actionable icon is not wrapped in an anchor link.

Decorative icons provide clarity and attract the user’s eye, but they're not interactive - clicking on them does nothing.

Some decorative icons carry critical meaning and need to be in the HTML (foreground). For example, a Loading spinner tells the user that we're waiting for data to come from the server, and the system isn't broken. If the Loading icon is a background image, not only will people using screen readers not know it's there it, but if the CSS fails to load, neither will anyone else.

Other decorative icons are truly purely for decoration. They restate the meaning of the text that they're aligned with in a visual way, or they make the page more effective and pleasing to the eye through their presentation. In these cases, the images should only be in the CSS (background) because failing to display them will not break the user's experience. For example, menus may use an icon with each menu choice -- these are aesthetically pleasing icons which, if left out, won't prevent the user from being able to use the site.

Note that purely decorative icons still have their place in a system. They may make a list easier to scan, break up monotonous text, or perform other similar usability functions. On the other hand, overuse of decorative icons can degrade a page's usability, because they create visual "noise" that distracts the user from their task at hand, or require too much thought to understand, or slow a page's performance. There's a fine line between useful decorative images and "doodads",and we're still working to strike that balance. Considerations include:

• Are there so many icons on the page that trying to understand what each one means takes too much cognitive load for the user to find them useful?
• Are we attaching iconography to elements because it seemed like a good idea 5 years ago, not because they serve a purpose?
• Are we repeating an icon so frequently on the page that it loses its meaning?
• Are the icons causing performance or system issues through calls to the system or load times?

All foreground icons are required to have alt text describing the icon. If alt text is not provided, a screen reader will read the name of the file or the path to the file as the alt text. That is *very very bad*

Other Accessibility considerations

All foreground icons are required to have alt text describing the icon. If alt text is not provided, a screen reader will read the name of the file or the path to the file as the alt text. Considering that many websites serve up a data URL consisting of all the bits in the PNG file, that would be very very bad.

• How can I make my icon system accessible? by Chris Coyier on CSS-Tricks provides instructions for building accessibility into either icon fonts or SVG icons.

Icon libraries

These are not necessarily endorsed, but they exist.

• 104 free radical science icons by Invision
• Remix Icon