USWDS-Site - Icon: Update icon guidance #2643
Conversation
| - **Meaning is ambiguous.** Use icons only in a common or conventional way. Icon utility hinges on people quickly recognizing what each icon means. If you suspect that an icon’s intent isn’t perfectly clear, consider removing it or adding accompanying text. | ||
| - **Compensating for page structure.** Don’t rely on an icon to help draw attention to something important that’s otherwise hard to find. Icons don’t fix unclear page hierarchy or confusing content organization. | ||
| - **You need illustrative artwork.** Icons have a specific, functional meaning. Avoid using icons for illustrative purposes (like using the “visibility” eye icon ({{ visibility_icon }}) to illustrate an actual eye). If you want to enhance the appearance of your content or visually explain a concept, use an illustration instead of an icon. |
There was a problem hiding this comment.
@jaclinec @sarah-sch @finekatie
I wasn't sure the best method for adding the icon example here. Right now it is in a parenthesis inside a parenthesis. Could we replace the outer parenthesis with a comma? Let me know what is best here!
| - **You need illustrative artwork.** Icons have a specific, functional meaning. Avoid using icons for illustrative purposes (like using the “visibility” eye icon ({{ visibility_icon }}) to illustrate an actual eye). If you want to enhance the appearance of your content or visually explain a concept, use an illustration instead of an icon. | |
| - **You need illustrative artwork.** Icons have a specific, functional meaning. Avoid using icons for illustrative purposes, like using the “visibility” eye icon ({{ visibility_icon }}) to illustrate an actual eye. If you want to enhance the appearance of your content or visually explain a concept, use an illustration instead of an icon. |
There was a problem hiding this comment.
Do we need the icon inside parentheses or could we just have it kind of floating out there? I don't want people to think the parentheses are part of the icon itself.
There was a problem hiding this comment.
@amyleadem, @jaclinec - I would recommend removing the outer parentheses entirely and breaking it into two sentences: Avoid using icons for illustrative purposes. For example, don't use the "visibility eye icon (icon) to illustrate an actual eye.
Short, simple sentences are a plain language win, in addition to solving the parentheses issue.
There was a problem hiding this comment.
@amyleadem @sarah-sch Sarah's suggestion works for me!
There was a problem hiding this comment.
I updated this copy according to @sarah-sch's suggestion in a7d9334. Please let me know if you need any changes.
_data/changelogs/component-icon.yml
Outdated
| @@ -2,6 +2,11 @@ title: Icon | |||
| type: component | |||
| changelogURL: | |||
| items: | |||
| - date: NNNN-NN-NN | |||
There was a problem hiding this comment.
Important
We need to update the changelog date before merge
There was a problem hiding this comment.
@amyleadem - I reviewed and the page is looking good. I made one small suggestions. Thanks!
| {:.usa-content-list } | ||
| - **Combine icons with text.** Only a few icons are consistently understood across the digital-using public of the world, among them home ({{ home_icon }}), print ({{ print_icon }}), and search ({{ search_icon }}). Combine icons with text to improve clarity, and test your icons for recognition and memorability with your particular audience. | ||
| - **Be consistent with icon meaning.** Icons used more than once in an application or site must be used to represent the same thing, and have the same text description in every instance. For example, if an icon of a blank piece of paper means “new document” on most screens, choose a different icon to communicate “reformat document.” Consistency helps people with some cognitive disabilities, people who might be distracted or scanning, and creates a better user experience for all. |
There was a problem hiding this comment.
I recommend adding the word "helps" to give this list a more parallel structure: Consistency helps people with some cognitive disabilities, helps people who might be distracted or scanning, and creates a better user experience for all.
There was a problem hiding this comment.
Good note. Updated in da7f69a. Let me know if you need anything else!
There was a problem hiding this comment.
Looks good--thanks, @amyleadem!
Summary
Updated icon guidance according to the edits in USWDS Icon page guidance: Suggested changes (Google Docs 🔒)
Related issue
Closes #2612
Preview link
Icon component page
Testing and review