richkelly13
commented
2 years ago Anatomical Illustrations
Use of anatomical illustration conveys medical or biological information and provide for clear communication when words alone are not adequate. It gives people positional reference to their bodies organs and biological systems.
The human organism consists of twelve organ systems, skeletal, nervous, muscular, respiratory, endocrine, immune, cardiovascular/circulatory, urinary, integumentary, reproductive, digestive systems and skin.
Illustration facilitates creating anatomical views normally hidden and enables the display of anatomy unobtainable to the human eye or the camera. For skin/dermatology related images it is advised to still use photography unless there is a requirement to conceal graphic injury.
Anatomical imagery is important because it helps people better understand their bodies organs and systems in relation to their ongoing medical history. Medical professionals can also use the imagery to further explain medical conditions and drill down to specifics in that biological system.
Illustrations are generally a preferred visual method for anatomical imagery (as opposed to photography) as they are pseudonymised, meaning illustrations lack the visual data that identifies a real life individual, removing any data/GDPR risk on imagery.
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 image.
Design guidance:
- Anatomical Illustrations contain a lot of information so keep the design and colouring to a minimal
- Crop into areas of the body that are necessary and label elements from the organ/system only, leaving out any unnecessary details
- Use accessible colours with high contrast for any highlight on organs / biological systems. Make the organ/system being discussed in the content the most visually prominent with a consistent highlight colour
- Too much colour in the illustrations can be distracting. Use greyscale images for detailed objects, for example other organs that are not the main focus
(Insert visual example here when we publish)
- In order to ensure enough contrast on the greyscale objects we recommend a white background for the whole illustration. We also recommend black text labels with a white background that are easily readable above the illustration, for optimal contrast
- Use a light grey body colour with a thin black line separating it from the background. Light grey was preferred as it doesn’t denote any particular skin tone and is deemed more inclusive
- Consider using a line illustration for the outlines of the body, organs or systems, then add shading to the body to add extra depth and sense of 3D space. The mixture of line illustration and 3D space creates a warmer, more human and gender-neutral result compared to a 3D render alone, which in isolation can often look cold and sex-specific.
- Insert visual example
-
Create gender neutral body shapes in order to be representative of a wider range of audiences. However, if a medical condition is sex specific then you should look to represent that sex
-
Be reflective of different body shapes and not default to slim muscle physiques
-
Make illustrations accessible and easy to understand by adding descriptive labels and information on all relevant parts in the illustration. Consider how people using assistive technology or who are blind or hard of sight are getting the same information through additional image descriptions and alt text. See more here: https://service-manual.nhs.uk/accessibility/content#use-alternative-text-for-images-in-content
-
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
-
Draw all objects to real-life scale. Scales can also be used within the illustration, for example a visible scale such a ruler included within the illustration to aid the viewers understanding
-
Include helpful anatomical points of reference for users. For example, the belly button
-
Consider using a call-out box in the graphic that magnifies additional finer detail. For example, you may want to show an appendix in relation to other organs and then also the finer detail of what an appendix looks like. (The smaller the organ in the composition, the less detailed it can be)
-
Consider using a series of images or animation to present complex information. Make a judgement on the amount of information being communicated and the space available. For example, when showing a pacemaker, you may want to show it in relation to where it’s fitted in the body and then another image highlighting how it works.
-
Don’t create an illustration for decoration purposes only. Use anatomical illustration to help explain novel, rather than familiar, information.
-
Test with users to make sure the illustration is relevant to the content
-
Test with users asking if the illustration aids understanding of the content
This guidance is what we currently recommend. We’ll continuously update this based on ongoing research and contributions from the NHS Digital design community.
NHS website - anatomical illustration example. Pending another round of user research
paulpod
One part of new imagery guidance. Rich Kelly is leading on this.