The role of body avatars in symptom checkers and how to work with them

From symptom checkers to medical bots, body avatars help users to describe their state in moments when they are the most vulnerable - feeling weak, uncertain about their health, and not sure what help they need.

Our role, as designers and developers of tools for digital health assessment, is to make this moment as easy and seamless as possible for the user. At the same time, we should think about the moment of adding initial symptoms by the user, as it strongly influences the accuracy of the tool.

Body avatars, sometimes called visual body locators or body maps, are simplified models of the human body that help users enter their symptoms. On one hand, body avatars do not allow you to add general symptoms that do not relate to any particular body area, like lethargy, fever, or tiredness. But on the other, they are more engaging than a simple list of symptoms, and for some users, they may be a preferable form of adding symptoms.

One of the key steps of the healthcare journey is the moment of adding initial symptoms. This is the starting point in which symptom-checking tools are getting the first information about the patient. Initial symptoms are then picked by intelligent algorithms, hidden in the inference engine, which are thoroughly analyzed and connected with all possible conditions. The inference engine uses them to generate personalized questions and verify all possible hypotheses. Each new answer from the patient leads us closer to the most probable medical conditions.

Every symptom added at the beginning of the interview has a huge value. The more we know about the user, the more adjusted the questions asked by the inference engine will be, and the more accurate the symptom assessment afterward. The number of initial symptoms can also influence the length of the digital checkup.

Symptom checkers with body avatars are one of the tools helping us to engage the user more and encourage them to add more initial symptoms, increasing the tool’s accuracy.

Apart from their role in the symptom assessment process, body avatars are also easier and more intuitive to use. Moreover, using a visual form is often easier to comprehend than a long list of symptoms and, thanks to its form, it brings a more human approach.

"In our last usability test of Symptomate, users marked the pointing on the body very, very positive," adds Alicja Jędrzejas, UX designer at Infermedica. "Respondents found this to be an easy and intuitive way to add symptoms."

Exploring a symptom checker with a body avatar can also lead to helping users name their symptoms. If someone finds it difficult to describe their symptoms, marking a particular body area will expand the list of symptoms and help them find the right signs.

An avatar is an attractive form of adding symptoms, but it shouldn’t be the only one. Adding it along with other text-based formats, like symptom search, will create a comfortable space for users to choose the form they prefer.

Help users find what they need. Self-examination can be challenging, as some of the symptoms may be hard to locate. What’s more, users may not always be able to find words to describe their symptoms. Give them suggestions of related symptoms in related body areas (both the front and back of the body) to support them in this step.

Help your users to identify with the avatars. Our bodies look different across our lifespan - provide avatars representing children, teenagers, and adults.

Using avatars of opposite genders may be frustrating. Add avatars of women and men to build the engagement of both of these groups.

See the body avatars in action on symptomate.com

Adding a body avatar to a symptom-checking tool is not difficult; however, it requires some preparation and planning. Cooperation between developers, designers, and doctors is a must to create intuitive and medically-correct avatars.

First, we should start with some planning. We need to consider how to divide the entire body into separate parts. Should we differentiate between an elbow and a forearm, or should it be a single, larger part? It’s important to keep the balance between precision and ease of use. Go too far into one of those, and it becomes hard for users to find their symptoms.

Secondly, having the list of body parts we want to use, it’s time to connect them to symptoms from the Infermedica API. We recommend going through our symptom list and deciding which are the most common or important. Remember that some symptoms can happen across multiple body parts.

At Infermedica, we keep it as simple mapping and a list of body parts, with each one storing another list of corresponding symptoms ['s’']:

'bodyParts': {
  'head': [ 's_1', 's_2' ],
  'chest': [ ... ],
  ...
}

This concludes the planning part. The good news is that the Infermedica team can support you with ready-to-use body parts symptom mapping. In fact, we can provide the same one we’re using in our own applications, like Symptomate. Feel free to use it as an inspiration or baseline, or even copy it 1:1.

After we finish the planning, it’s time to get into design. We need to prepare at least four body avatars (front and back for women and men) and then split them into separate body parts. We recommend using SVG, with each body part being a separate group or path. This will be very helpful for development.

<svg>
  <g id="head">
    <path id=”ears”/>  
    <path id=”eyes”/>
    ...
  </g>
  <g id="chest" />
  ...
</svg>

It’s also very important to build the avatar with the best practices of accessibility for all types of users. We like to follow the WCAG recommendations to make colors, contrasts, or clickable elements accessible to people with disabilities.

With the design ready to go, it’s time to finish with development. If the previous steps were carefully completed, it should be fairly straightforward. First, we should fetch full symptom names via the /symptoms endpoint and match them with our mapping with symptom IDs. This is important - we shouldn’t store hardcoded symptoms because, as our medical models progress, they might get outdated. It can also act as an additional filter of safety, so you won’t, for example, show Gynecomastia on a woman's avatar.

With our list ready to be displayed, it’s now only a matter of adding listeners for user actions and using the mapping to match selected body parts to the symptom list.

Contact our support team to get access to the symptoms mapping.

BL/EN/2021/06/29/2