Infograph component
Description
Infographics are visual representations of information, graphical data, or knowledge intended to present complex information quickly and clearly. They combine text, images, and design elements to convey messages in an engaging and easily digestible format.
Goal
Information graphics translate data into a visual medium that is easy to understand and engaging. The goal is to integrate visuals with text and pictures that strengthen each other, but this is hard to achieve.
Core user needs
The human brain processes images 60,000 times faster than it does text. And it is more accustomed to processing images.
Infographics are an effective way to present information visually instead of long reading material. It is easier to memorize the concept when it is presented in images.
Components of infographics
| Component Type | Component | Component Description |
|---|---|---|
| 1. Visuals | Icons and Graphics | These help illustrate the points and make the information more visually appealing. |
| Charts and Graphs | This is used to present data visually, such as bar charts, pie charts, or line graphs. | |
| Colour Schemes | Colours highlight key information, maintain visual consistency, and guide the viewer's attention. | |
| 2. Content | Headlines | Captivating titles that convey the main message or theme of the infographic. |
| Body Text | Brief (summary), clear text that provides necessary details or explanations. | |
| Data Points | Specific statistics or facts that are visualized to support the narrative. | |
| 3. Design Layout | Structure | The layout is often hierarchical, guiding the viewer for the most important to the least important information. |
| Flow | Infographics are designed to lead the viewer's eye through the content logically, often using lines or arrows. |
Design System guidelines
Title
Do
- Use heading h1 or h2 component for infographic titles.
Don't
- Don’t use the title inside the infographic when possible. The screen reader will read the headings and the responsive screen sizing with follow the component.
Colour contrast
Do
- Ensure accessible contrast background and font.
- For all the screen sizes, the font minimum size is 16 pixels.
- Minimize the amount of information on the visuals. Group information visually.
- Use a maximum of four colours, to control cognitive load.
Don't
- Don’t use a low-contrast background. The font should be readable.
- Don’t use font size lower the 16 pixels.
Text (Content)
Do
- For all the screen sizes, the font minimum size is 16 pixels.
- Minimize the use of the text on top of a background.
- Description as content (HTML), not as image as it can not be resized with screen sizes.
- When description is content explaining the data, it does not need accessibility accordion. The screen reader doesn't need to read it twice.
Don't
- Don’t use descriptions as images. It gets pixelated and it is not readable.
- The text will lose the resizing with different screen sizes.
- Don’t use accessibility long descriptions as the content field.
- The long description is for the screen reader to give a summary of the infographic.
Accessibility long description (Accordion)
Do
- Evaluate the best format to explain the data:
- a. List
- b. Table (recommended for data chart)
- c. Description (250 characters) – summary or overview
- Profile heading
- Summary of the infographics
Don't
- Don't use more than one format.
- Don't use accessibility long descriptions as the content field.
The long description is for the screen reader to give a summary of the infographic. - Don't use another container inside a container (accordion).
Animations
Do
- Evaluate the need for animation. When using animation the following requirements are needed:
1. Keyboard features
2. Availability to stop the animation
- Give time for the user to read information.
- Reduce the amount of information in animated pieces.
Before planning an infographic evaluate if there is another component with better accessibility and functionality. (E.g. Timelines, steppers, tables, etc.)
Don't
- Animation is not recommended for mobile.
- Don't use flashy or fast animation.
General guidelines: dos and don'ts
Do
- Use infographics to deliver information simply and memorably.
- Use descriptions in the content. Keep the image as clean as possible.
- Use 16 pixels font as the minimum size. Make sure the mobile minimum size is 16 pixels.
- Make sure infographics are visible on the different screen size layouts (Desktop, tablet and mobile).
- Before planning an infographic evaluate if there is another component with better accessibility and functionality. (E.g. Timelines, steppers, tables, etc.)
Don't
- Don’t use more than one format.
- Don’t use accessibility long descriptions as content field. The long description is for the screen reader give a summary of the infographic.
- Don’t use another container inside a container (accordion).
Accessibility
Recommendations for creating infographics
First plan the accessibility data, it helps to:
- Organize data for language level 6 or plain language.
- Monitor length, vocabulary and sentence structure to minimize cognitive load.
- Review image in context to ensure proper tone, structure and vocabulary.
- Focus in the data not in the details.
- Start with the general overview and move to more specific details about the image.
- Utilize HTML headings (H1, H2, H3).
Recommendations for writing accessible descriptions
How to write descriptions:
- Why is the image there?
- Who is the intended audience?
- If there is no description what will the viewer miss?
- Keep in mind the reader tool will be reading this information. Don’t duplicate information.
Image description could be in:
- Data in table format
- Data in list format
- Data in description – 250 maximum character
Parts of a complex description
Guidelines for adding illustrations
Do
- Add title using h1 or h2
- Use the images component. Not the infogram component.
- If possible add accessibility contrast to the illustration.
- Add text as content.
- In the "caption" section of the image component, add a summary of the image.
Nearby amenities
- Downtown – 3 km
- SAIT – 3.5 km
- Deerfoot Trail/QE2 – 0.85 km
- Sunridge commercial – 3.6 km
- Calgary airport – 6.5 km
- Winston Heights & Fox Hollow Golf courses – 1.3 km
- Renfrew Aquatic & Recreation Centre – 0.75 km
- Peter Lougheed Hospital – 4 km
- Marlborough commercial district – 4 km
- Calgary Zoo – 2.6 km
- Mount View School – 1.3 km
- Colonel Macleod School – 0.75 km
- Stanley Jones School – 1.6 km
- Calgary Coop North Hill Food Centre – 0.80 km
MAX Orange – MO
Proposed Green Line LRT – G
Guidelines for adding a print version of an infographic
Do
- When adding a print version of an infographic, ensure it occupies a full page for readability.
- Include a link to download the PDF version.
- Provide a detailed description, using a list, table, or narrative format, focusing on the text rather than graphics. Break the content into sections.
Example
