Last Updated: 02/19/2024
One of the main talking points when kicking off website design within the pharmaceutical and med-tech industry is always how to strategically display the ISI or important safety information, in the most non-intrusive way.
When you hear words, important safety information, what do you think of? Side effects, risk factors, and possible dangers associated with a product, drug, or treatment. While it is required to provide this information within certain parameters, it is also important that it does not take away from the overall user experience on the website, become a visual focal point, or decrease marketing efforts.
A common challenge for medical brands is combining best practices in design and marketing their brand effectively while also satisfying legal requirements. FDA guidance is vague at best. They want medical websites to have an equal balance of marketing claims and indication statements on the intended use as well as clearly identified side effects and risks. But what that equal balance actually looks like is left up to the individual companies to decide.
With our vast experience creating websites in the healthcare space, we have seen it all.
Through research, data, and experience we have come up with decisive best practices on how to best display the ISI while designing a pharmaceutical website. It is important to make it visually appealing and user-friendly while adhering to the FDA guidelines for the display of Important Safety Information.
However, these side trays have proven to be a usability nightmare. Data has shown user frustration when it comes to page scroll functionality on websites with a scrollable sidebar tray placed near a browser’s native scrolling features. Pay close attention to page scroll controls vs. ISI tray scroll control interactivity to decrease user pain points.
One of the least-invasive Important Safety Information / Indication layouts we’ve seen is the horizontal ISI anchor link callout bar that drives a user down to the native ISI content already on the page. Eloctate’s small Important Safety Information and Indication blue bar at the bottom page will anchor link & auto-scroll you down to the page’s native content.
In most instances, the prominence and “fair balance” of a company’s Important Safety & Indication Information is determined by a company’s legal team.
“The law requires that product claim ads give a ‘fair balance’ of information about drug risks as compared with information about drug benefits. This means that the content and presentation of a drug’s most important risks must be reasonably similar to the content and presentation of its benefits.” (FDA source link)
See the Full FDA Guidance for Industry Presenting Risk Information in Prescription Drug and Medical Device Promotion for more information.
For ISI trays, this means that the amount of pixel space & screen real-estate that Important Safety Information & Indication Information requires is determined by legal boards outside the realm of marketers. So, unfortunately, medical marketers don’t have free reign over ISI layouts. It can be difficult to give a straight answer of which layout is best, as each medical product’s legal requirements are different. But, what we can showcase are some healthcare industry best practices for pharma ISI & Indication Trays that we’ve developed over the years.
Usually, marketers aim to feature campaign artwork & a clear navigation structure in their above-the-fold (first full viewable screen) priority content. We know from years of industry research that web users typically eye-track in an F-shaped viewing pattern. If allowed by a product’s legal teams, we recommend sticking with the default bottom ISI tray so that other important content can be a user’s first visual priority. View the F Shaped image below from Nielsen Norman Group:
If legally permitted to collapse any Indication or Important Safety information. This is especially important on mobile screens where website real estate is even tighter. We’ve seen an average of 2x more tray-collapse actions taken on mobile websites – the size of tap-state is even more important for a mobile experience.
The W3C Web Accessibility Initiative has found that a mobile button size must be at least 44 x 44 pixels to meet accessibility minimum requirements – note the pixel height for the up/down arrows in the ISI tray examples below. The first example could easily lead to users tapping the wrong arrow or missing the ISI tray’s arrows altogether – creating user frustration & taking attention away from the site’s primary content and conversion goals.
Between Entry Interstitial pop-ups on HCP websites, commonplace COVID-19 pop-up statements, required Utility Navigation links + a site’s menu structure and campaign messaging… Your users may experience cognitive overload from too many different transactional messages appearing, discouraging them from diving deeper into your website’s content & therefore increasing exit rates.
This sensation of executive function overwhelm is commonly defined as: “The cognitive load imposed by a user interface is the amount of mental resources that is required to operate the system.”
We want to avoid users having to close multiple different tabs, trays or pop-ups to view their page content – showcasing too many interruptive pieces of content (that a user has to intake content from & then understand what action to take to get to their desired content) on page-load can cause cognitive overload.
UX teams should work to minimize any extraneous cognitive load that doesn’t add value to your site’s end goal. If possible, keep your ISI & Indication paired together in an easily collapsible tray to avoid users clicking in multiple locations to increase their viewable screen real estate.
What's the best hands-on approach to solve for your optimal user experience within your legal team’s specific parameters? Set up quantitative data points via Google Tag Manager (GTM) or Google Analytics (GA) insight dashboards, Adobe Experience Manager (AEM) Adobe Analytics dashboards, etc. Run Qualitative research exercises by user-testing your available layout options to gain a deeper understanding of your audience’s needs within those parameters. A/B test your legally approved layout options to see which improves your users’ experience.
Aside from our resourcefulness, resolve, drive, and resilience combined with the utmost professionalism, our dedicated and highly experienced team has a hands-on approach and a relenting commitment to success.
Contact us today to learn how we can help with your marketing needs.