How-to display media in the interview

Overview

Buoy uses media in question and answer option text in order to help clarify a concept for an end user. For example, Buoy may display an image that helps a user to clarify where pain is occuring on the body. Buoy's media library consists of a variety of images and short video clips. Your application should expect to handle a variety of content types, including:

  • .jpeg
  • .jpg
  • .png
  • .gif
  • .mp4

Displaying media

Media will be returned in the media field of the response body. Alt-text available for the image will be stored in the media_alttext field. Media associated with question text will be returned in the top level question element. Media associated with answer options will be available within the specific answer option.

Organizations are able to customize how they display media to their end users. Outlined below are Buoy's recommendations for displaying media.

Displaying media associated with question text

Buoy may return media associated with a question at large or for a specific subset of text within a question. For example, your API client can expect to receive responses similar to the following from the read question endpoint.

{
   "token": "a140d078-fb8e-4c38-a120-a6a0be90f3a5",
   "text": "Any issues with your [back]?",
   "choice": "M",
   "media": "https://www.buoyhealth.com/static/images/questionImages/back-overall.png",
   "options": [
      {
         "token": "f0dff586-c78f-48ae-b3d4-157942596c98",
         "text": "Pain",
         "preselected": null,
         "media": "",
         "exclusive": false,
         "media_alttext": "",
         "free_text": false
      },
      {
         "token": "cab2d7f6-3443-4e92-803d-cc69a6fd9494",
         "text": "Swelling",
         "preselected": null,
         "media": "",
         "exclusive": false,
         "media_alttext": "",
         "free_text": false
      },
      {
         "token": "ea4828ee-f038-499b-9278-49011e0e34b0",
         "text": "A lump",
         "preselected": null,
         "media": "",
         "exclusive": false,
         "media_alttext": "",
         "free_text": false
      },
      {
         "token": "50b2c074-de76-4085-9a91-5aca08e24b79",
         "text": "Deformity",
         "preselected": null,
         "media": "",
         "exclusive": false,
         "media_alttext": "",
         "free_text": false
      },
      {
         "token": "3cf3c2fd-6484-4bc2-9967-ba8288740f08",
         "text": "Numbness or tingling",
         "preselected": null,
         "media": "",
         "exclusive": false,
         "media_alttext": "",
         "free_text": false
      },
      {
         "token": "0d161e05-8e4a-4447-8a11-faee64ca2f26",
         "text": "Stiffness or loss of mobility",
         "preselected": null,
         "media": "",
         "exclusive": false,
         "media_alttext": "",
         "free_text": false
      },
      {
         "token": "493aeb9a-540e-4003-acbf-cbeb4252d80a",
         "text": "None of the above",
         "preselected": null,
         "media": "",
         "exclusive": true,
         "media_alttext": "",
         "free_text": false
      }
   ],
   "answer": [],
   "interview": "b9439c91-e1fa-479f-8ee8-825d311b1739",
   "media_alttext": "rear view of torso with the whole area from the tailbone to the lower neck highlighted red"
}
{
   "token": "71aa75c1-b177-4608-a263-98c9b064cb17",
   "text": "Is your chest abnormally shaped where the breast bone (sternum) significantly protrudes inwards or outwards rather than flat?",
   "choice": "S",
   "media": "https://www.buoyhealth.com/static/images/questionImages/chestdeformity.jpg",
   "options": [
      {
         "token": "095ea1ed-2ed6-4a13-8866-fb777b3c219d",
         "text": "Yes",
         "preselected": null,
         "media": "",
         "exclusive": true,
         "media_alttext": "",
         "free_text": false
      },
      {
         "token": "c71752fe-6e1b-4e2a-866b-f534c9356850",
         "text": "No",
         "preselected": null,
         "media": "",
         "exclusive": true,
         "media_alttext": "",
         "free_text": false
      },
      {
         "token": "5ad9f8d2-4a46-4c66-aa05-f791f69f1a7c",
         "text": "Unsure",
         "preselected": null,
         "media": "",
         "exclusive": true,
         "media_alttext": "",
         "free_text": false
      },
      {
         "token": "41a710cd-d660-4027-bda6-eb5161fd392f",
         "text": "Something else",
         "preselected": null,
         "media": "",
         "exclusive": true,
         "media_alttext": "",
         "free_text": true
      }
   ],
   "answer": [],
   "interview": "f798e241-4649-4fde-b631-c950f697392b",
   "media_alttext": "breast bone sinking into the chest, as if the center of the chest has been hollowed out"
}
894

Example question with media associated with the word back.

Note that in the example above, the media is hyperlinked from the word "back" in the question text. Some question response bodies will have words surrounded by square brackets (i.e., "[" and "]"). This is the text that is most relevant to the media. Users do not need to see the brackets as part of the question text.

Buoy recommends displaying media associated with a subset of question text, as shown in the example above, within a modal pop-up. Images do not need to be resized, but the client should scale the image down if necessary.

For media associated with a question at large and not restricted to a subset of the text, as shown in the example below, Buoy recommends displaying the image below the question text and above the answer options. API clients should consider implementing a "click to view" mechanism to avoid users being jarred or unsettled from a medical image.

529

Example question with an image hidden behind a "click to view" mechanism.

Displaying media associated with answer options

Buoy may return media for one or more answer options within a question. For example, your API client can expect to receive a response similar to the following from the read question endpoint.

{
   "token": "ea1596c3-60c1-429f-9948-09bb455d189b",
   "text": "Do either of these describe your hip pain?",
   "choice": "M",
   "media": "",
   "options": [
      {
         "token": "385a5407-d6b4-495d-babc-31f64dd428d3",
         "text": "The front of the hip",
         "preselected": null,
         "media": "https://www.buoyhealth.com/static/images/questionImages/hip-front.png",
         "exclusive": false,
         "media_alttext": "frontal view of the torso, forearms, and upper legs with the hips highlighted in red",
         "free_text": false
      },
      {
         "token": "97f8d21f-29e8-48e4-9ee8-7bae5bd3f9bf",
         "text": "The side of the hip",
         "preselected": null,
         "media": "https://www.buoyhealth.com/static/images/questionImages/side-hip.png",
         "exclusive": false,
         "media_alttext": "side view of a leg with the hip area highlighted red",
         "free_text": false
      },
      {
         "token": "4f89f224-ca6f-4066-8435-9dd9e7dd10aa",
         "text": "It shoots down to the knee",
         "preselected": null,
         "media": "https://www.buoyhealth.com/static/images/questionImages/knee-front.png",
         "exclusive": false,
         "media_alttext": "frontal view of the legs with both knees highlighted in red",
         "free_text": false
      },
      {
         "token": "b1dabe5a-9b52-44dd-8db9-2a15fe070dc7",
         "text": "None of the above",
         "preselected": null,
         "media": "",
         "exclusive": true,
         "media_alttext": "",
         "free_text": false
      }
   ],
   "answer": [],
   "interview": "babb3939-699b-4200-a5ca-cda984a5d882",
   "media_alttext": ""
}

Buoy recommends resizing media to fit your answer option UI. For example, Buoy resizes all media associated with an answer option to 88px by 88px. Additionally, we recommend displaying media to the right of answer option text. All media should be clearly associated with an answer option to avoid confusion. For example, if your application displays media above the option text, your application should draw a border around the option text and associated media.

1034

Example question with media displayed to the right of answer options.