Klick Health

Displaying ISI on mobile websites – the challenge of a small screen

Usability Specialist

Read More

At Klick, the User Experience (UX) team’s responsibility is vast and varied – we need to design a digital experience that simultaneously meets the brand’s business objectives while also creating an ideal experience for the users.

Complicating matters is the need to satisfy regulatory constraints imposed on brand marketers by the FDA; more specifically, the display requirements of fair balance and important safety information (ISI) in relation to marketing copy.

On the desktop or tablet, website real estate is plentiful.  Conventions have been well established regarding where and when to display ISI.  However, with the recent explosion of mobile website visitation, we have found ourselves in repeated conversations with brand managers about how to display ISI in a mobile environment.

The question is: how do we balance the need for a pleasing user experience while abiding by regulatory requirements? In other words, how do we effectively display ISI information without putting up barriers that prevent users from meeting their goals within a mobile website setting?

One of the best practices of mobile site design is to utilize the small viewing area of the phone to show people one thing – in other words, maintaining one point of focus. This means that one task or content area is in focus at any given time within the mobile screen.

In UX, we have explored two different options for displaying ISI in a mobile environment.  It is important to note that the details of ISI display – its presentation size and relative proximity to marketing copy – is largely determined by the interpretation of FDA regulations by internal regulatory bodies.  The Klick UX team will typically work with brand managers to determine specific requirements and customize solutions to meet them.

Option 1: ISI in the site footer

The ISI appears in the area beneath the primary content zone. A button in the header anchors the user down to the ISI. The top if the ISI area contains a “back to top” button.



Option 2: Expandable ISI within content area

The ISI is introduced in a pervasively visible area within the primary content zone. A button allows the ISI to expand fully, either obscuring the content area or extending further below it.



Option 1 is the recommended approach because it places the needs of the user first. ISI is readily available but the viewing area is maximized to allow the user to navigate and consume content.

Option 2 should be avoided because it effectively reduces the viewable area of the website by almost half.  An alternative is to present the ISI in a full-screen experience on site load, then allow the user to dismiss that screen before continuing onto the website.

Have you built a mobile app or mobile optimized site? How did you handle ISI on the small screen?

More About the Author

Ilana Schwartz

Ilana is an artist with a BSc. in biochemistry and 12 years of professional experience in digital. Her fearless enthusiasm brings unique knowledge and creativity to the User Experience Group.

Go from news to action. Klick Wire

Weekly Digital Health Newsletter

Klick Health will NEVER spam you. Read our privacy policy

Thank you! You're now signed up to get the Klick Wire every week - news from the world of digital health marketing.

Sorry there seems to be a problem. Please try again later.