Images: instructional illustrations (instructions for use)

[sarawilcox]

Part of planned imagery guidance.

[richkelly13]

Examples of Instructional imagery include, an exercise routine or workout, a procedural example of taking medication or using technology, a medical test or medical device.

Design guidance

• If showing a body. Create gender neutral body shapes in order to be representative of a wider range of audiences. However, if the communication is sex specific then you should look to represent that sex
• Use a light grey body colour with a thin black stroke separating it from the background. Light grey was preferred as it doesn’t denote any particular skin tone and is deemed more inclusive
• Choose an accent colour to highlight key areas in the graphic
• Include helpful anatomical points of reference for users. For example, add all facial features if you need to show someone performing a swab test, don’t over dramatize the emotion, keep it looking realistic and neutral – focusing on the action and position of the body.
• Be reflective of different body shapes and not default to slim muscle physiques
• Check there is enough contrast between all the elements in the composition and check your colour choices are appropriate for colour blindness (with any highlight colours still being clearly visible). Use a colour-blind-friendly palette when appropriate. For example, blue or orange are often considered colour-blind-friendly colours. You can check your colour contrast at webaim.org/resources/contrastchecker
• Instructional images should demonstrate a step-by-step action which serve as a visual cue to the learner. They should be simple, effective and leave no room for confusion
• Our user research shows that photography works best for exercise movements. However, if you do use illustration or photos, consider using illustrated arrows that give more context of the direction of movement. Provide more than one image for a movement to better convey the different stages of the exercise. Depending on the amount of movements - a video may be better to show this.
• Think about numbering any images that follow a sequence and also write out any specifics on the process
• Test that users can do the thing they are being shown to do.

NHS website - anatomical illustration example (DHSC – Test and Trace)

Have asked DHSC for any User Research on their illustrations.

[richkelly13]

User Research

https://designnotes.blog.gov.uk/2021/11/22/creating-clear-instructions-for-all-users/

“Images must be easily understood by all users. Testing users with different accessibility needs found that “imagery of the test was appreciated and matched participants’ desires to check the test kit components on opening.”

“We aim for a simple clarity, function and aesthetic in all our visual design and icon usage, working towards a straightforward solution that can work well with the content text.”

“A video, properly subtitled, hosted by a trusted doctor takes users through the steps they need to successfully complete a rapid lateral flow test. Because no matter how clear your content and images are, when there are millions of users with different literacy levels and accessibility needs, some will find a video easier to follow.”

Blog: Creating clear instructions for all users https://designnotes.blog.gov.uk/2021/11/22/creating-clear-instructions-for-all-users/

NHS.UK Discovery: Additional language support

I am unable to understand written English

People struggle to understand written English, especially medical jargon, so they have to get people to help, re-read things multiple times, search for alternative explanations, or they simply give up. All of which can lead to misinformation or no information at all.

“There is a lot of information that is provided but it's in English and that's not my first language. I miss out on lots of things.” (a BSL user)

This particular BSL user was unable to find a video on how to take a PCR in British Sign Language, ultimately they had to rely on images in order to complete the test: “I have to fill in the gaps...I was looking for a video and couldn't find and couldn't find on YouTube, had to rely on pictures, if an interpreter had explained it would have been so much easier to understand”.

Health Education England health literacy 'how to' guide:

“Pictures, photographs and symbols can be used to improve understanding and reinforce key messages." (Includes examples and guidance. They signpost to Visualizing Health and recommend ‘fact boxes’.)

The Health Literacy Place (NHS Education for Scotland) recommends using pictures, for example to explain self-management (like injections or wound care).

Medical Image Professional:

An illustration/diagram is clinical and exact – it explains a surgery or shows the position on the body.

When I request a diagram it’s usually to compliment the text, explain a procedure – I find it easier when explaining a medical procedure to be exact and clinical with the diagram. Also, a diagram can be less scary for the patient – a photograph of a procedure or surgery could frighten a patient so much that they choose not to go ahead.

When it comes to using photographs, I tend to request these to reassure patients That way the patient/relative can picture where they’re going when they come into hospital and it will hopefully relieve some stress/tension.

I also use photographs to demonstrate exercises. Some authors prefer diagrams for exercises but I personally find it easier to follow an exercise when I’m looking at another individual doing it.

Scenarios when illustration is chosen over photography:

Illustration is the better option particularly when sensitive subject matter is to be portrayed within patient information materials for example. For example, women’s health. An illustration of the birthing process for example, is more readily received, is more informative and educational than a photograph which in this instance would offer a very graphic and uncensored view.

A medical artist is able to create an illustration that removes unwanted graphic material within the picture, removing blood for example. This allows for a clear view of the anatomy, to bring focus to the message to be communicated within the illustration. An illustrator will also remove unwanted backgrounds that are not needed or necessary. A photograph of birth for example, has limitations to the scenarios where it could be used within patient education.

A photograph is subject to patient confidentiality. An illustration of the same subject matter is not. An illustration in these instances provides a generic view of anatomy, it’s not patient specific and therefore an acceptable form of visual communication that will go on to suit a range of target audiences and patient communication materials.

As opposed to a photograph of a patient, medical illustrations offer a generic view of all anatomy, they are not of any one patient. This automatically removes any bias; the viewer does not question who is in the photograph.

An illustration is the better medium when a graphic is required, for example a graph, an illustrated table, a PP presentation, a logo, a black and white line drawing, a new design of a web page. Medical artists have anatomical education but also graphic design, layout and Storyboarding skills. Medical artists have desktop publishing skills to hand that can be used within all projects providing an overall service. Photography provides a valuable service but with not as many options as a medical illustrator can provide.

A photograph provides a flat 2D visual that includes everything shot within the lens. This can be confusing if viewed by the layperson when it contains a great deal of anatomical detail.

Cellular and microbes including modes of action - these are regular illustration requests for use within journal and science papers. An artist can create an illustration of anatomy when is not normally visible to the naked eye, whilst also creating into a mode of action illustration, that explain the actions and processes of cellular anatomy. A photograph cannot be customised in this way.

An artist creates a custom illustration to compliment medical and scientific written text. A photograph provides one view, whereby the artist has the ability to create from scratch a visual to exemplify the text, even provide multiple views of one subject matter to help illuminate the text and help the reader understand the medical information.

A medical artist can create illustrations of slices through the layers of anatomy, creating an educational visual of anatomy that is normally unseen anatomy that provides insights and information over and above a photograph.

Illustrations of anatomy, science subject matters can be created to a scale. Scales can be used within the illustration, for example a visible scale such a ruler included within the illustration to aid the viewers understanding. Labelling is a regular addition and is included to further enhance the illustration. They can be positioned in the white space around the illustration, whereby, this method is more difficult to achieve with a photograph.

Medical devices and surgical instruments. Often surgeon’s and medical device companies have new and innovative devices that are ready to be marketed but are not yet in existence. They exist only CAD form. In these instances, there is a request for a medical artist to create a visual from the CAD file, to create into a 3D model or 2D visual ready for a funding pitch and proposal. In these instances, photography is not possible when the visual only exists in CAD format.

Patient education videos are used with hospitals, on health website and for doctor to patient communications. A medical artist will have created these specifically to show a surgical process, how to take medication, how to brush and floss teeth. The options are limitless. This is above the capability of the camera or video.

There are journal papers that have researched illustration effectiveness and other useful research:

https://www.tandfonline.com/doi/full/10.1080/17453054.2019.1633237

https://www.tandfonline.com/doi/abs/10.3109/17453059809063125

https://www.tandfonline.com/doi/abs/10.3109/17453057809153862

https://www.tandfonline.com/doi/full/10.1080/17453054.2019.1633237

http://www.jbiocommunication.org/issues/31-3/pdf/Mader-Medical_Legal_Illustrations.pdf

[sarawilcox]

I've put this back into Proposed column. The NHS.UK multimedia team is looking at a feature to explore whether sequences of images and text, like Easy Read could meet the needs of a variety of user groups. Once we have clear findings from that project, instructional images will probably follow similar principles.