Adaptive Content, Responsive Design and Medical Information

@Cooper_42
www.rockley.com© The Rockley Group, Inc. Intelligent Content for Life Sciences and Healthcare #ICCLSH
Adaptive Content, Responsive Design
and Medical Information
@Cooper_42 #ICCLSH
Charles Cooper – VP The Rockley Group

@Cooper_42
Why do we do this?
• To communicate ‘stories’ to our readers.
• Those stories can be:
• Technical
• Narrative
• Informative, non-fiction
• Graphical
• Sales and marketing
• Any information that we want others know and remember

@Cooper_42
We’ve used many techniques
• Face to face communication
• Cave wall
• Clay tablets
• Scrolls
• Handwritten books
• Typeset books
• Portable computers
• Mobile phones & PDAs
• eReaders
• Smartphones
• Tablets

@Cooper_42
• Cave wall
• Clay tablets
• Scrolls
• Typeset books
• eReaders
• Smartphones
• Tablets
Wall Art– Matobo Hills, Zimbabwe

@Cooper_42
• Cave wall
• Clay tablets
• Scrolls
• Typeset books
• eReaders
• Smartphones
• Tablets Clay tablet (87 BCE) describing the arrival of
Halley’s Comet– British Museum

@Cooper_42
• Cave wall
• Clay tablets
• Scrolls
• Typeset books
• eReaders
• Smartphones
• Tablets
Book of Kells – Trinity College, Dublin

@Cooper_42
• Cave wall
• Clay tablets
• Scrolls
• Typeset books
• eReaders
• Smartphones
• Tablets
Gutenberg Bible – Morgan Library NYC

@Cooper_42
When most successful…
• We’ve adapted the way we
display the content to
match the medium
Book of Kells – Trinity College, Dublin

@Cooper_42

@Cooper_42
We’re pretty good at migrating content

@Cooper_42
The available technology used to be a
problem

@Cooper_42
This now fits in your pocket

@Cooper_42
But the tech is finally here
• To deliver content, to anyone, any time, on any device, in any
language.

@Cooper_42
What is mobile?
• Five main types of mobile information delivery:
• Traditional Web
• Mobile Aware Web
• Adaptive
• Responsive
• And blends
• Web Apps
• Ebooks
• Kindle
• EPUB and variants
• Native Apps

@Cooper_42
How do you define a mobile?
• It used to be easy
• If you could carry it, it was a
mobile device.

@Cooper_42
• That changed, and became related to screen size.
Luke Wroblewski - UXIM 2013

@Cooper_42
Luke Wroblewski - UXIM 2013
• Then keyboard access became the defining feature.

@Cooper_42
• Then it didn’t

@Cooper_42
Our definitions of a mobile device
keep changing

@Cooper_42
We’re in the multi-device world
http://commons.wikimedia.org/wiki/File:Device_pile.jpg

@Cooper_42
Not just ‘tablets’

@Cooper_42
Some work better than others…

@Cooper_42
Everyone uses mobile
• For recreation

@Cooper_42
Everyone uses mobile
• And for health/wellness
• Wello case
• ECG
• Heart Rate
• Blood Oxygen
• Temperature
• Lung Function (with spirometer add-on)
• Blood Pressure
https://azoi.com 1:46

@Cooper_42
Willing to access medical info on a smartphone
Manhattan Research - Cybercitizen Health® U.S. 2013, *ePharma Consumer® 2012

@Cooper_42
Not just looking for information
• Pfizer partners with game
designer Akili Interactive
Labs
• Project Evo
• Hope to detect
indications of
Alzheimer's in healthy
individuals
http://mobihealthnews.com/28429/video-game-maker-partners-with-pfizer-for-alzheimers-clinical-trial/

@Cooper_42
Health care professionals
• Are getting more of their information from digital sources
Manhattan Research - Taking the Pulse® 2013

@Cooper_42
• Use a broad range of sources
Manhattan Research - Taking the Pulse® 2013

@Cooper_42
Working together
• 30% of patients said they or their
doctor used a mobile device during
the exam period.
• Patient use of mobile is 30-50%
higher if the doctor uses a mobile
device during the exam.
• Patients were 80% more likely to
switch medications if mobile devices
were used in the exam room.
http://lifesciencesnow.com/wp-content/uploads/2013/11/10.24.2013-Digitas-Health-Study-Consumer-Mobile-Health-Impact-Assessment.pdf

@Cooper_42
Working together
• Using dedicated
apps to explain
problems and
treatments to
patients as part of
the examination
https://orcahealth.com/1:141:21

@Cooper_42
Working together
• Using dedicated
apps to explain
problems and
treatments to
patients as part of
the examination
• Show animations
https://orcahealth.com/

@Cooper_42
Working together
• Using dedicated
apps to explain
problems and
treatments to
patients as part of
the examination
• Show explanations

@Cooper_42
Working together
• Using dedicated
apps to explain
problems and
treatments to
patients as part of
the examination
• Share information

@Cooper_42
New technologies abound
• Technical Illusions
• The ability to view projected, 3D
images (of just about any data) in
free space.
• Can interact with images via a
’magic wand’.
https://www.youtube.com/watch?v=Pb8h-Mauc-E
0:35

@Cooper_42
• Are beginning to see tests of integrated mobile device systems
https://www.youtube.com/watch?v=jnEdaslPtEg
3:24

@Cooper_42
IRL - now
“When a clinician walks into an emergency
department room, he or she looks at bar code (a
QR or Quick Response code) placed on the wall.
Wearable Intelligence’s software running on
Google Glass immediately recognizes the room
and then the ED Dashboard sends information
about the patient in that room to the glasses,
appearing in the clinician’s field of vision. The
clinician can speak with the patient, examine
the patient, and perform procedures while
seeing problems, vital signs, lab results and
other data.”
http://geekdoctor.blogspot.com/2014/04/google-glass-details.html
John D. Halamka, MD, MS,
Chief Information Officer of
Beth Israel Deaconess
Medical Center, Chairman of
the New England Healthcare
Exchange Network (NEHEN),
Co-Chair of the HIT
Standards Committee, a full
Professor at Harvard Medical
School, and a practicing
Emergency Physician

@Cooper_42
Interoperability

@Cooper_42
Lots of catching up to do…
“Our maiden Digital
Competitive Landscape survey
last fall found that less than a
third of pharma U.S.
consumer-facing websites
were mobile optimized.”
Matthew Arnold, Principal Analyst, Manhattan Research
http://healthandpharmainsight.tumblr.com/post/80991320870/will-pharmas-be-ready-for-healthbook

@Cooper_42
Enter Responsive Design

@Cooper_42
Responsive (web) Design
• Responsive web design (RWD)
is a web design approach
aimed at crafting sites to
provide an optimal viewing
experience—easy reading and
navigation with a minimum of
resizing, panning, and
scrolling—across a wide range
of devices (from mobile
phones to desktop computer
monitors).
http://en.wikipedia.org/wiki/Responsive_Web_Design http://alistapart.com/article/responsive-web-design

@Cooper_42
Responsive Design
• I like responsive design
• I’m so over this >>>>

@Cooper_42
Responsive Design
• Reflects what can easily be
seen on the screen
• Low bandwidth friendly
• Ignore the visual design

@Cooper_42
Visual design is not content design

@Cooper_42
Don’t think it’s always easy…
• The website for LG’s android
powered watch (a mobile
device!) viewed in the ‘wrong’
orientation

@Cooper_42
Don’t think it’s always easy…

@Cooper_42
No better on a ‘big screen’

@Cooper_42
Properly Done Responsive Design

@Cooper_42
TRG website on a laptop

@Cooper_42
TRG website on an iPad Mini

@Cooper_42
TRG website on iPhone 4s

@Cooper_42
What’s wrong with that?

@Cooper_42
What’s wrong with that?
Nothing – but what if I need more
functionality?

@Cooper_42
Enter Adaptive Content

@Cooper_42
What is adaptive content?
• Adaptive Content is content that
adapts to the needs of the user or
reader, responding not only to the
screen size and orientation of
their device, but is aware of, and
takes advantage of the specific
device capabilities (such as GPS,
magnetometers, etc.) to display
content to the best advantage on
the device.

@Cooper_42
Adaptive vs Responsive
• Responsive
• Focused on displaying the
content in the best possible
way on a given device
• Adaptive
• An overall approach for
enhancing the usability or
capability of content on a given
device

@Cooper_42
Adaptive content
• Adaptive content is limited only by your design decisions, the
capabilities of the device being used, and the intelligence of
your content.

@Cooper_42
MyAsthma app
• Developed by GSK in the UK
• Updated information on weather,
temperature, pollen and pollution for your
local area
• Handy personalised reminders and tips
sent directly to your mobile device
• The Asthma Control Test™ and regular
reports to help you monitor your asthma
control
• Tailored information about how to identify
and manage your asthma triggers
• Tips on travelling with asthma
• Customised lifestyle tips and information
on treatments
• How to get the most from working
together with your healthcare professional

@Cooper_42
How do you manage this?

@Cooper_42
Decide what mobile means to you
• Remember this?

@Cooper_42
Mobile Aware Web
• Responsive Design
• Screen size
• Orientation
• Progressive Content Disclosure

@Cooper_42
Mobile Aware Web
• Adaptive Design
• All of the above PLUS
• Location*
• Direction*
• Language*
• Speed*
• Acceleration*
* depends on browser used on device

@Cooper_42
Web App
• Like having a customised mini browser in which to display
your content
• No content lives on the device
• Connectivity is required

@Cooper_42
Native Apps
• All of the above
• Screen size
• Orientation
• Progressive Content Disclosure
• Location
• Direction
• Language
• Speed
• Acceleration
• ALL THE DATA, ALL THE TIME!
• But can reach out to external sources

@Cooper_42
How much info can an app determine?
• More information than you require

@Cooper_42
Location-based information
• It knows where you are,
but the direction you’re
facing is unimportant
• App has full access to the
capabilities of the device
• GPS
• Wifi or
• 3/4G connectivity

@Cooper_42
Augmented Reality
• Using AR to explore an
unfamiliar location
• App has full access to the
capabilities of the device
• Compass
• GPS
• Camera
• Wifi or
• 3/4G connectivity

@Cooper_42
So you’re going to do an App, right?
• There are downsides
• More expensive

@Cooper_42
• Only works on one device/family

@Cooper_42
• Experiences will be very different from system to system

@Cooper_42
• You have to think it all the way through
• You have to reimagine it on a regular basis
• It’s not all bad
• On the positive side, you can load all the data ‘into’ the app
• You have full control over the experience

@Cooper_42
Talk to the hand (set)
• Works with apps
• Not as simple as Media
Queries
• Much more reliable
• Code fragment querying the
device to see if it has a
magnetometer (compass)
and if it’s working

@Cooper_42
Mobile Aware with Adaptive
• Many of the advantages of an App
• Usually much cheaper
• Can access many of the device functions
• Easier to rollout (just change the referenced data)
• Easier to make work on multiple platforms

@Cooper_42
Media Queries
• Simple idea – why don’t we
ask the device about itself?
• Part of the available meta
information from a webpage
• How big is the content area
on the screen? - use the
‘viewport’ query
• Protip – sometimes the
devices lie
<meta name="viewport"
content="width=device-width"
content="height=device-height" />

@Cooper_42
Are people doing this?

@Cooper_42
Yeah – sometimes all of them

@Cooper_42
WebMD traditional site

@Cooper_42
WebMD mobile site

@Cooper_42
WebMD apps

@Cooper_42
WebMD Allergy app
• Personal data tracking
• Multiple profiles
• Location (gathers local information)

@Cooper_42
Where can it go?

@Cooper_42
Remember this?
• That was an ad!
• The IRL they use QR codes to
determine the room they were
in.
• That could be replaced with
automatic location detection.
• If the ambulance has it’s siren
on, an ‘urgent’ flag could be
sent to the primary care
facility…

@Cooper_42
You need a Content Strategy

@Cooper_42
You need a Content Strategy
Not a Mobile Content Strategy

@Cooper_42
Where does Content Strategy Start?
• Right at the beginning
• Not restricted to:
• Content creation
• Publishing/Printing
• Translation
• Localisation
• Mobile
• All are important facets of an
overall method

@Cooper_42
• Without a content strategy none of this works.

@Cooper_42
You need to understand:
• Structure
• Modularity and Granularity
• Metadata
• Your users
• Your content

@Cooper_42
It’s all about the content

@Cooper_42
It’s not “all about the content”…
• It’s about balance

@Cooper_42
Balance

@Cooper_42
Content
• Determine primary content to display
• What can be layered/scrolled?
• How does the content need to be structured to facilitate
filtering/layering/scrolling?
• What content should be eliminated and in what situation?
• What alternate content should be presented?
• How must your content be structured to support this
functionality?
• Can you structure your content for unexpected situations?

@Cooper_42
…and how your customer will experience it
• Know your customer
• Know your device constraints
• Map their requirements to content requirements

@Cooper_42
Know your customer
• Who are the primary customers?
• What language do they use?
• Where do they live?
• What the typical customer profile?
• Where do your customers come from (region/country,
referring site, search engine)?
• What platform are they using: Smartphone, Tablet, Phablet
(OS)?
• What do customers need to know to make a buying decision?
• What do they think are the most effective ways to be
reached?

@Cooper_42
Know your device constraints
• Even though you should write content separate from its
eventual output, you must understand the constraints of the
device on which your content will be displayed.
• Design your models to adapt to those constraints.

@Cooper_42
Test on actual devices
http://www.topatoco.com/merchant.mvc?Screen=PROD&Store_Code=TO&Product_Code=QC-DEVICES&Category_Code=QC

@Cooper_42
Like regular ”writing for online”
• But more so…
• Keep titles short
• Keep content short
• Use bulleted lists
• Balance brevity with legibility and clarity
• Carefully consider the use of charts/tables/images.
• They may be the best way to present information on a
page, but are problematic on a small screen.

@Cooper_42
Tables
• Tables are always an issue on mobile. Some options include:
• Tables where screen real estate permits
• Image of the table
• Modularized table
• Fixed first column, scrolling remainder
• Cascading list
• Drill down
• Tables are inherently structured, you need to map your table
structure to desired output
• Why are you using a table?

@Cooper_42
Navigation is key
• Navigation can be a challenge, due to small screen size.
• Try not to break content into too many pages, one page per
item/article is usually better, even if the page is loooong.
• Flatten the hierarchy.
• Drilling down to reach content is problematic.
• Cluster like information together
• Use ”more like this” or ”related content” links to make it easy
for the user to navigate
• Images should not be used for navigation, and should never
be used as the only means of navigation.

@Cooper_42
Business rules
• Business rules are the rules that your content follows to
adapt to different devices and different customer
requirements.
• Business rules allow the system to automatically pick and
choose content and adjust the presentation of that content to
meet specific requirements.
• If ‘this’ then ‘that’
• If displaying on a mobile device break content into ‘pages’ at
the intro, ingredients and instructions
• Integral to your complete content strategy

@Cooper_42
Format free content: XML
• XML lets you separate content from
layout and visual design
• Like HTML, but focuses on structure,
not appearance
• Can use one of many underlying
structural schemas
• DITA
• DITA4Publishers
• DocBook
• Industry specific
• Very powerful for transformation and
reconfiguration for multiple channels
Concerned about XML? Don’t be,
even Word uses a form of XML
“under the hood’.

@Cooper_42
XML

@Cooper_42
But!
• Technology is not the focus for content contributors and
never should be
• Tools should support tasks, not impede tasks
• Tools must enable your content strategy
<?xml version="1.0"?>
<procedure>
<title>Logging On to AccSoft </title>
<p>The first time you click on a component in AccSoft you are required to log on to the system.</p>
<intro>To log on to AccSoft:</intro>
<procedure_steps>
<step>Double-click the AccSoft application.</step>
<step>Select Accounts Payable from the Explorer.</step>
<step>Type your USERID into the Name field.</step>
<step>Type your password into the Password field.</step>
<step product="extended">Select the customer to update.</step>
<step>Click the OK button to log on to AccSoft.</step>
</procedure_steps>
<note>If you do not know your USERID or Password, consult your System Administrator.
</note>
</procedure>

@Cooper_42
But!
• If your technology makes your
employees look like this… you’re
doing it wrong!
• It must be easy to use

@Cooper_42
Summary
• Determine your ‘concept of mobile’.
• Know what content is required, by whom, when, in what
circumstance, and in conjunction with what other content or
interactivity.
• Create structured content separate from format.
• Create a balanced design, not Mobile first or eBook first or
Video first or Poster first or Content first or Package Insert
first…. but always with an awareness of where and how
content can be consumed.
• Remember – mobile is expected, it’s not something special!

@Cooper_42
Questions?
moreinfo@rockley.com

Adaptive Content, Responsive Design and Medical Information

Recommended

Recommended

More Related Content

Similar to Adaptive Content, Responsive Design and Medical Information

Similar to Adaptive Content, Responsive Design and Medical Information (20)

More from Ann Rockley

More from Ann Rockley (13)

Recently uploaded

Recently uploaded (20)

Adaptive Content, Responsive Design and Medical Information