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

#ICCLSH

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

#ICCLSH

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

#ICCLSH

Wall Art– Matobo Hills, Zimbabwe

#ICCLSH

• Face to face communication• Cave wall• Clay tablets• Scrolls• Handwritten books• Typeset books• Portable computers• Mobile phones & PDAs• eReaders• Smartphones• Tablets Clay tablet (87 BCE) describing the

arrival of Halley’s Comet– British Museum

#ICCLSH

Book of Kells – Trinity College, Dublin

#ICCLSH

Gutenberg Bible – Morgan Library NYC

#ICCLSH

When most successful…

• We’ve adapted the way we display the content to match the medium

Book of Kells – Trinity College, Dublin

#ICCLSH

We’re pretty good at migrating content

#ICCLSH

The available technology used to be a problem

#ICCLSH

This now fits in your pocket

#ICCLSH

But the tech is finally here

• To deliver content, to anyone, any time, on any device, in any language.

#ICCLSH

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

#ICCLSH

What is mobile?

• Native Apps

#ICCLSH

What is mobile?

• Native Apps

#ICCLSH

What is mobile?

• Native Apps

#ICCLSH

What is mobile?

• Native Apps

#ICCLSH

What is mobile?

• Native Apps

#ICCLSH

How do you define a mobile?

• It used to be easy

• If you could carry it, it was a mobile device.

#ICCLSH

• That changed, and became related to screen size.

Luke Wroblewski - UXIM 2013

#ICCLSH

Luke Wroblewski - UXIM 2013

• Then keyboard access became the defining feature.

#ICCLSH

• Then it didn’t

#ICCLSH

Our definitions of a mobile device keep changing

#ICCLSH

We’re in the multi-device world

http://commons.wikimedia.org/wiki/File:Device_pile.jpg

#ICCLSH

Not just ‘tablets’

#ICCLSH

Some work better than others…

#ICCLSH

Everyone uses mobile

• For recreation

#ICCLSH

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

#ICCLSH

Willing to access medical info on a smartphone

Manhattan Research - Cybercitizen Health® U.S. 2013, *ePharma Consumer® 2012

#ICCLSH

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/

#ICCLSH

Health care professionals

• Are getting more of their information from digital sources

Manhattan Research - Taking the Pulse® 2013

#ICCLSH

• Use a broad range of sources

Manhattan Research - Taking the Pulse® 2013

#ICCLSH

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

#ICCLSH

Working together

• Using dedicated apps to explain problems and treatments to patients as part of the examination

https://orcahealth.com/

1:141:21

#ICCLSH

Working together

• Show animations

#ICCLSH

Working together

• Show explanations

#ICCLSH

Working together

• Share information

#ICCLSH

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

#ICCLSH

• Are beginning to see tests of integrated mobile device systems

https://www.youtube.com/watch?v=jnEdaslPtEg

#ICCLSH

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

#ICCLSH

Interoperability

#ICCLSH

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

#ICCLSH

Enter Responsive Design

#ICCLSH

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

#ICCLSH

Responsive Design

• I like responsive design

• I’m so over this >>>>

#ICCLSH

Responsive Design

• Reflects what can easily be seen on the screen

• Low bandwidth friendly

• Ignore the visual design

#ICCLSH

Visual design is not content design

#ICCLSH

Don’t think it’s always easy…

• The website for LG’s android powered watch (a mobile device!) viewed in the ‘wrong’ orientation

#ICCLSH

Don’t think it’s always easy…

#ICCLSH

No better on a ‘big screen’

#ICCLSH

No better on a ‘big screen’

#ICCLSH

Properly Done Responsive Design

#ICCLSH

TRG website on a laptop

#ICCLSH

TRG website on an iPad Mini

#ICCLSH

TRG website on an iPad Mini

#ICCLSH

TRG website on iPhone 4s

#ICCLSH

What’s wrong with that?

#ICCLSH

What’s wrong with that?

Nothing – but what if I need more functionality?

#ICCLSH

Enter Adaptive Content

#ICCLSH

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.

#ICCLSH

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

#ICCLSH

Adaptive content

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

#ICCLSH

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

#ICCLSH

How do you manage this?

#ICCLSH

Decide what mobile means to you

• Remember this?

#ICCLSH

Mobile Aware Web

• Responsive Design• Screen size• Orientation• Progressive Content Disclosure

#ICCLSH

Mobile Aware Web

• Adaptive Design• All of the above PLUS• Location*• Direction*• Language*• Speed*• Acceleration*

* depends on browser used on device

#ICCLSH

Web App

• Like having a customised mini browser in which to display your content

• No content lives on the device• Connectivity is required

#ICCLSH

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

#ICCLSH

How much info can an app determine?

• More information than you require

#ICCLSH

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

#ICCLSH

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

#ICCLSH

So you’re going to do an App, right?

• There are downsides

• More expensive

#ICCLSH

• Only works on one device/family

#ICCLSH

• Experiences will be very different from system to system

#ICCLSH

• 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

#ICCLSH

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

#ICCLSH

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

#ICCLSH

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

#ICCLSH

Are people doing this?

#ICCLSH

Yeah – sometimes all of them

#ICCLSH

WebMD traditional site

#ICCLSH

WebMD mobile site

#ICCLSH

WebMD apps

#ICCLSH

WebMD Allergy app

• Personal data tracking• Multiple profiles• Location (gathers local

information)

#ICCLSH

Where can it go?

#ICCLSH

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…

#ICCLSH

You need a Content Strategy

#ICCLSH

You need a Content Strategy

Not a Mobile Content Strategy

Unified

#ICCLSH

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

#ICCLSH

• Without a content strategy none of this works.

#ICCLSH

You need to understand:

• Structure• Modularity and Granularity• Metadata• Your users• Your content

#ICCLSH

It’s all about the content

#ICCLSH

It’s all about the content

#ICCLSH

It’s not “all about the content”…

• It’s about balance

#ICCLSH

Balance

#ICCLSH

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?

#ICCLSH

…and how your customer will experience it

• Know your customer• Know your device constraints• Map their requirements to content requirements

#ICCLSH

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?

#ICCLSH

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.

#ICCLSH

Test on actual devices

http://www.topatoco.com/merchant.mvc?Screen=PROD&Store_Code=TO&Product_Code=QC-DEVICES&Category_Code=QC

#ICCLSH

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.

#ICCLSH

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?

#ICCLSH

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.

#ICCLSH

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

#ICCLSH

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’.

#ICCLSH

• 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>

#ICCLSH

• 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>

#ICCLSH

• If your technology makes your employees look like this… you’re doing it wrong!

• It must be easy to use

#ICCLSH

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!

#ICCLSH

Questions?

moreinfo@rockley.com

adaptive content, responsive design and medical information

Technology

responsive versus adaptive web design

[austin wordpress meetup] adaptive images in responsive web...

bahamas medical council – responsive medical health

christopher schmitt, "adaptive images for responsive web...

digital publishing in a multi-screen world: how responsive...

responsive | adaptive web design by dmitry beynya &...

gamezboost responsive and adaptive gaming platform

responsive & adaptive web design

responsive & adaptive design

adaptive smt control for more responsive web...

responsive web design (rwd) vs adaptive web design (awd)

responsive design: how to weave content into an adaptive...

integrated use of responsive and adaptive web design...

responsive design with axure 7.0’s adaptive views

adaptive design: the next generation of responsive

responsive web design vs. adaptive web design 2013 by ilan...

“upside medical – responsive wordpress theme

responsive vs adaptive web design - what about device...

adaptive and responsive web design in las vegas

joomla!day2013 albacete spain, responsive, adaptive y la...