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
- Content viewing area is maximized
- ISI still constantly accessible on every page
- Barriers to usability are low
- Anchoring a user far down a page when they click a button can be disorienting
- Reduced ISI prominence May not meet the requirements of regulatory bodies
Option 2: Expandable ISI within content area
- Provides an extra layer of compliance for brand websites that require several lines of ISI visible at all times
- Viewable content area is severely reduced, causing major usability issues
- Browser chrome (the browser controls) cause an even greater reduction in viewable area (this depends on the device being used)
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?