How to add a complex image

Owned by Jess Pietsch (Unlicensed)
Last updated: 26 Mar, 2024 by Marcella Marino
3 min read

Instructions on how to add an infographic, graph, flowchart or map to a page using the complex image component.

Images added to web pages must have a text alternative that describes the information of that image, except for sensory and decorative images.

What are complex images?

Complex images contain a lot of detail. They include:

  • infographics: e.g. images that include text descriptions

  • graphs: e.g. bar or pie graphs

  • flowcharts: e.g. a step-by-step process that uses images and text

  • maps: a boundary map of a Victorian local government area.

On this page:

About the complex image component

  • This component was built to provide information from complex images in an accessible way.

  • Use the complex image component when you need to provide a longer description for an image or you have data that can be provided in a table. 

How to add a complex image

  1. Scroll down to Page content

  2. Click on Add component and select Complex image.

Complete the following fields:

  • Title: (this will display as a Heading 3) e.g. Figure 4.2: Excerpt from The Orange Door’s Client Experience Toolkit for staff

  • Image size: use the image ratios, sizes and component guide to ensure your image is in the correct format

  • Source: (not mandatory) e.g. The Orange Door 2018 evaluation

  • Corresponding data: Include a detailed description of the content included in the infographic, table, chart or image. For graphs you should include a table with the data from the graph.

You can edit the title fields which display the following options for an image:

  • View figure {custom title} in full screen

  • View figure {custom title} in table format

  • Download {custom title}

If left unchanged, the descriptions will pull in the default complex image title, for example:

  • View Figure 4.2: Excerpt from The Orange Door’s Client Experience Toolkit for staff in full screen

  • View Figure 4.2: Excerpt from The Orange Door’s Client Experience Toolkit for staff in table format

  • Download Figure 4.2: Excerpt from The Orange Door’s Client Experience Toolkit for staff

Complex image examples

Title

Victorian Government advertising expenditure by category 2019−20

Image

Sample complex image - pie chart

Image

Restricted

On

License Type

Creative Commons Attribution 4.0

Source

This the source line.

Corresponding data

CATEGORY

EXPENDITURE $

EXPENDITURE %

CATEGORY

EXPENDITURE $

EXPENDITURE %

Campaign

$73 million

86%

Functional

$7 million

8%

Recruitment

$4.6 million

6%

Title

Victorian Government advertising expenditure by year

Image

Sample complex image - bar chart

Image

Restricted

On

License Type

Copyrigh=t

Corresponding data

YEAR

EXPENDITURE ($ MILLION)

YEAR

EXPENDITURE ($ MILLION)

2009-10

$130.3

2010-11

$112.8

2011-12

$103.1

2012-13

$98.4

2013-14

$96.1

2014-15

$94.9

2015-16

$74.6

2016-17

$82.4

2017-18

$105.7

2018-19

$102.8

2019-20

$84.6

Title

Figure 4.2: Excerpt from The Orange Door’s Client Experience Toolkit for staff

Image

Figure 4.2: Excerpt from The Orange Door’s Client Experience Toolkit for staff

Image

Restricted

On

License Type

Copyright

Corresponding data

Client journey and practise tips for children and young people

Access: Before, referral, call up, walk in

Screening, ID & Triage: First connection, screening

Assessment & Planning: Exploring issues & context, in between (this could be true for a transition between any stages in the service experience)

Connecting to Services: Transition, leaving

After: Follow-up

Emotional journey

How the client might be feeling and what might be going through their mind

  • Thoughts and questions; who are these people? Can they help me? Curiosity. Emotions.

  • What's the point of this? Will there be a place to sit or play that feels comfortable? Anxious. Nervous.

  • Is this just going to be like all the other services? They seem friendly, not too bubbly. What should I say? Heard. Understood. Respected. 

  • Will my parents get in trouble? Will I be separated from my siblings? Anxious. Worried. 

  • Have I shared too much? How are they using this information? Nervous.

  • Have I done something wrong? Should I leave? Uncertain. 

  • These people seem nice and helpful. Maybe everything is going to be alright. Supported.

  • Who's going to take care of me? What will happen to my family after? Worry. Fear. 

  • Wow. Someone cares. Maybe it will be alright. Hopeful. 

What staff can do

Making the experience safe and comfortable

  • Have a calm tone and attitude, but not too cheerful or bubbly. Smile and appear approachable. This helps young people feel safe to share and sets you apart from their past experience of workers. 

  • Explain the system and possible outcomes in plain English as early as possible. This reduces uncertainty and stress, reducing the fear to not speak up. 

  • Explain how information will be used and how you're here to help. This helps them feel supported and safe to share.

  • Be light-hearted and reciprocal in conversation. This helps them see you as a friendly professional that they can trust; they will be more willing to continue engaging when working with someone they respect and feel respected by. 

Check in to see how the service is working for people. This helps people know someone is looking out for them and gives them confidence to continue. It helps you ensure the service is a good fit or it is switched if not. 

Qualities and behaviours

Essential considerations for creating a positive and safe client experience

  1. building trust through authenticity

  2. reducing uncertainty and cognitive fatigue

  3. listening, understanding and taking action

  4. modelling positive relationships

  5. instilling hope and possibility

  6. validating initiative and commending progress

  7. respectful and non-judgemental attitudes

  8. welcoming