Mobile Mandate: Why You Need to Stop Worrying and Love the Mobile Web

Connected Healthcare Experiences

Mobile Mandate: Why You Need to Stop Worrying and Love the Mobile Web Digital Pharma East, Philadelphia, PA October 20, 2011

Presented by Seth Perlman President, The Lathe

©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com}

Propert

y of T

he La

the

Use by

perm

ission

only

©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011

By 2013, more people will access the web

from mobile devices than from computers.

Will you be ready?

Source: Morgan Stanley Research.

Propert

y of T

he La

the

Use by

perm

ission

only


How many pharma brand websites are mobile-friendly?

A. 10% B. 25% C. 40% D. 65% Prop

erty o

f The

Lathe

Use by

perm

ission

only


If you answered A (10%)... You’re still wrong. And I cheated.

Propert

y of T

he La

the

Use by

perm

ission

only


Only a tiny percentage of brand websites are mobile-friendly

Source: The Lathe’s Web Mobilization Index. Last update October 13, 2011.

Not Mobilized

96%

Mobilized

4%

Propert

y of T

he La

the

Use by

perm

ission

only


Not having a mobile-friendly website is: Poor user experience Dismissive of an engaged audience An issue of compliance

Propert

y of T

he La

the

Use by

perm

ission

only


Desktop websites are designed for large screens

Propert

y of T

he La

the

Use by

perm

ission

only


Desktop websites are not designed for small screens Logo Branding Claim Indication ISI Prop

erty o

f The

Lathe

Use by

perm

ission

only


But how about when it’s shown to scale?

Propert

y of T

he La

the

Use by

perm

ission

only


Perspectives from regulatory:

“FDA wants us to be more patient-friendly” “Find it very frustrating: difficult to read, difficult to navigate” “Fair balance must be pervasive” “Even if logo/colors are somewhat visible, it is a violation” “OPDP will now have the resources to scrutinize” “Most significant challenge is for products with boxed warning” “Take advantage of direct communication with FDA”

“Long term, I can see a mobile mandate” Prop

erty o

f The

Lathe

Use by

perm

ission

only


Mobile web UX is more complicated than desktop web UX. But why? Isn’t it just… smaller?

Propert

y of T

he La

the

Use by

perm

ission

only


The complexity of desktop web design and development is trivial compared to what it once was Consider the list of things we don’t care about any more: Mac vs. PC Connection speed OS version Firefox vs. Chrome vs. IE* Screen size Browser version Screen resolution Flash penetration CPU and RAM

* Unless we’re talking about IE6. Then there is crying and screaming and sadness.

Propert

y of T

he La

the

Use by

perm

ission

only


However, the complexity of mobile web design and development rivals the desktop world 12-15 years ago For mobile web, we have to care about a whole lot more:

iOS vs. Android vs. BlackBerry vs. Windows Platform version Screen size Screen resolution Single-window environment CPU and RAM Connection speed Flash Contextual content and navigation hints

Propert

y of T

he La

the

Use by

perm

ission

only


There are several considerations when developing a mobile website approach Mobile platform support — modern, legacy, small tablet Full website vs. partial website Presentation of ISI Adaptation of complex features Forms Video Charts and graphics Linked initiatives

Propert

y of T

he La

the

Use by

perm

ission

only


Let’s check out some examples from the 4%.

Propert

y of T

he La

the

Use by

perm

ission

only


Primarily text-based Safety information excerpt at top of every screen Best practice: Large, touch-friendly menus

Propert

y of T

he La

the

Use by

perm

ission

only


Best practice: Enable phone numbers to be tapped to initiate call

Propert

y of T

he La

the

Use by

perm

ission

only


Layout is much more app-like Establishes clear iconography for navigation

Propert

y of T

he La

the

Use by

perm

ission

only


Residual “click” instructions could be replaced with “tap” Best practice: Link to full website for users who want it Prop

erty o

f The

Lathe

Use by

perm

ission

only


Iconographic, touch-friendly navigation Visual emphasis on safety information

Propert

y of T

he La

the

Use by

perm

ission

only


Be careful that high-priority links are also mobile-friendly

Propert

y of T

he La

the

Use by

perm

ission

only


Best practice: Mobile-friendly without losing brand strength

Propert

y of T

he La

the

Use by

perm

ission

only


Best practice: Use of SVG or hi-res graphics for retina display

Propert

y of T

he La

the

Use by

perm

ission

only


Note jagged images compared to text

Propert

y of T

he La

the

Use by

perm

ission

only


ISI expanded by default on first visit, scrolls within its own panel ISI collapses to globally accessible tab after first tap

Propert

y of T

he La

the

Use by

perm

ission

only


Charts hidden until user taps to view Charts not optimized for hi-res mobile screens

Propert

y of T

he La

the

Use by

perm

ission

only


So, how do mobile websites work? There are three different models worth considering: Direct (self-contained on existing web infrastructure) Proxy (push through external server, e.g., usable.net) Hosted transformation (inject mobile design on the fly)

Propert

y of T

he La

the

Use by

perm

ission

only


The direct model: Mobile website is a different presentation layer on existing website Pros Self-contained Single content source Cons Tightly integrated future-proofing Inefficient for multiple websites

Propert

y of T

he La

the

Use by

perm

ission

only


The proxy model: Mobile traffic is pushed through a third party infrastructure Pros Decoupled future-

proofing

Cons Possible content

duplication Dependency on proxy

infrastructure Security, patient privacy

Propert

y of T

he La

the

Use by

perm

ission

only


The hosted transformation model: Mobile transformation injected on the fly Pros Single content source Decoupled future-

proofing Degrades gracefully Supports multiple sites

Cons Difficult to achieve for

older mobile platforms

Propert

y of T

he La

the

Use by

perm

ission

only


There are important considerations for maintaining a presence in the mobile web channel Phase-ins — supporting new platforms and versions Phase-outs — avoiding the IE 6 trap Testing and QA — covering enough of the market Multiple asset creation — e.g., SVG vs. raster images

Propert

y of T

he La

the

Use by

perm

ission

only


A closing thought:

Mobile website best practices will lead you to better desktop websites

Propert

y of T

he La

the

Use by

perm

ission

only


Thank you! For more about our mobile solutions, please visit us at thelathe.com Like us on Facebook and follow us on Twitter @thelathe

Prop

erty o

f The

Lathe

Use by

perm

ission

only


The Lathe


Connected Healthcare Experiences The Lathe helps companies utilize web and mobile technologies to connect patients, caregivers, and professionals to support improved outcomes.

Propert

y of T

he La

the

Use by

perm

ission

only


Bio


Seth Perlman, President [email protected] 646-291-6490 / 646-528-5755 m http://www.linkedin.com/in/sperlman Seth has more than 17 years of web development experience for hundreds of clients, from design and implementation to technical leadership to executive management. He has spent the past 8 years focused on healthcare and pharmaceuticals since founding The Lathe in 2003. Most recently, Seth has focused on mHealth and the application of mobile technology (apps, web apps) to the needs of patients, caregivers, and healthcare professionals.

Propert

y of T

he La

the

Use by

perm

ission

only

http://www.linkedin.com/in/sperlman

Mobile Mandate: Why You Need to Stop Worrying and Love the Mobile Web

Technology

Transcript of Mobile Mandate: Why You Need to Stop Worrying and Love the Mobile Web