niso webinar: taking your website wherever you go: delivering great user experience across multiple...
TRANSCRIPT
NISO Webinar: Taking Your Website Wherever You Go:
Delivering Great User Experience across Multiple Form Factors
Wednesday, June 10, 2015Speakers:
Marty Picco, Vice President of Product Management, Atypon
Hathy Simpson, MPH, Public Health Information Specialist, Project Coordinator, Public Health Partners Website Project, National Network of Libraries of Medicine, New England
Region (NN/LM NER), University of Massachusetts Medical School
Lisa Sedlar, Librarian, National Information Center for Health Services Research and Health Care Technology (NICHSR), National Library of Medicine
Bobby Foster, Director of User Experience & Design, Health Learning, Research & Practice, Wolters Kluwer
http://www.niso.org/news/events/2015/webinars/responsive/
‹#›
Road to RESS and Beyond
Marty PiccoVP Product Management
“We need to be in the App Store”
• App Infatuation
• What could go wrong?
• App Store Discoverability is an oxymoron
• Keeping content in sync is problematic
• Separate code bases for iOS, Android, Web
• Great for the last 10% of UX “delight”
• Heavy to maintain
Hybrid Apps• Use app container but deliver content
from web
• Still in app store, but content stays in sync
Web Apps
• Ditch the app container, go full web
• No longer in app store, but this matters only for a small subset of publishers & use cases
• Single code base across platforms (well almost…)
• UX Delight is more difficult but doable
API-based Approach
• Separate model, view & controller through API
• Web app embodies view and controller and depends on API
• Retains all the advantages of HTML5
• Enables 3rd parties to develop new experiences, such as native apps or even satellite web sites
• Focus on content delivery and access control
Responsive Design• Use CSS to adapt to
different viewports
• Gives publishers more control
• Requires more effort to set up and maintain
LIMITATIONS
• Same payload is always sent from server, which can be very wasteful
• No sense of “app”, only pages
• Can be 2x the work
RESSResponsive Design + Server Side Components
• Server adapts response based on browser
• Two basic cases: widget visibility & image handling
• Other complex behaviors are possible
LIMITATIONS
• Responds to browser type, not screen resolution or orientation
Blended ApproachLiteratum for Mobile (LFM)
• HTML5 app functionality
• Seamless integration with RESS components
PageBuilder
• Self-service RESS for highly customized sites
APIs
• Extensibility & third party experiences
Design Challenges• “Mobile-first”
designs tend to result in sparse desktop sites
• Moving from desktop-only site to mobile can be difficult because mappings are not obvious
• Lean + augmentation vs. full-featured and streamlining
• Generally requires a re-design
Design Approach• “Why should I come
here every day?”
• Content forward
• User centered
• De-clutter: allow what’s important to stand out
• Emotional appeal
‹#›
Thank You
Providing Information across Multiple Devices to the
Public Health Workforce: Challenges and Opportunities
Hathy Simpson, MPHUniversity of Massachusetts Medical School
Lisa Sedlar, MLIS, MT (ASCP)National Library of Medicine
June 10, 2015
13
Public Health Partners• Partners in Information Access for the Public
Health Workforce (PHPartners)– Public Health Organizations– Federal Government Agencies– Health Science Libraries
• Founded in 1997• Mission: To help the public health workforce
find and use information effectively to improve and protect the public’s health.
• Website: http://PHPartners.org 14
Partners in Information Access for the Public Health Workforce• Agency for Healthcare Research and Quality (AHRQ)
• American Public Health Association (APHA)
• Association of Schools & Programs of Public Health (ASPPH)
• Association of State and Territorial Health Officials (ASTHO)
• Centers for Disease Control and Prevention (CDC)
• Health Resources and Services Administration (HRSA)
• Medical Library Association (MLA)
• National Agricultural Library (NAL)
• National Association of County and City Health Officials (NACCHO)
• National Association of Local Boards of Public Health
• National Library of Medicine (NLM)
• National Network of Libraries of Medicine (NN/LM)
• Public Health Foundation (PHF)
• Society for Public Health Education (SOPHE) 15
PHPartners.org• Information for public
health practice• Components:
Topic pages Data, tools & statistics Conferences/webinars News Jobs & careers PubMed searches Reports, guidelines
and more!
• Updated daily
• Strong selection criteria
16
Public Health WorkforceUse of Mobile Technology Tools
Mobile Technology Tools
All Local Health Departments
Size of Population Served
<50,00050,000-499,999 500,000+
Smartphones 91% 86% 97% 98%
Electronic Tablets 48% 40% 55% 75%n=419
Public health departments are increasingly using mobile technology for activities and services including disaster preparedness and emergency response.
17
Sources: National Association of County and City Health Officials. 2013 National Profile of Local Health Departments. Washington, DC: National Association of County and City Health Officials, 2014. http://nacchoprofilestudy.org/reports-publications/.
Rubin S et al. The adoption of social media and mobile health technologies for emergency preparedness by local health departments: a joint perspective from NACCHO and the UPMC center for health security. J Public Health Manag Pract. 2014 Mar-Apr;20(2):259-63.
U.S. Mobile Device UseAdult Americans:
• 90% own a cell phone1 • 64% own a smartphone2
• 32% own an e-reader1
• 42% own a table computer1
1 As of October 20142 As of January 2014
Source: Pew Research Center. Mobile Technology Fact Sheet. http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/
Americans use smartphones to:
Source: Pew Research Center American Trends Panel Survey, October 2014. http://www.pewinternet.org/2015/04/01/u-s-smartphone-use-in-2015/pi_2015-04-01_smartphones_03/
18
Responsive Design• Allows users to have similar web experiences
on all types of devices– smartphones, tablets, desktops, smart TVs,
wearables, and future devices.• Responsive web pages automatically change
their visual layout to fit the screen• Same URL and content optimized to display• No need for separate mobile website
19
• Flexible, grid-based layout• Flexible images and media• Style rules for pages based on characteristics
of the device
20
Why Responsive Design for PHPartners.org?
• The public health workforce is using mobile technology (users of PHPartners.org)
• Technical team at NLM able to work on responsive design (technical support)
• Google’s mobile-friendly algorithm:– In April 2015, Google expanded the use of mobile-
friendliness as a ranking signal– Search results optimized for devices– Mobile-friendly sites rank higher in search results
21Source: Makino T, Jung C, Phan D. Finding More Mobile-friendly Search Results February 26, 2015 http://googlewebmastercentral.blogspot.com/2015/02/finding-more-mobile-friendly-search.html
The Process1. Reviewed Partner members’ websites and
responsively designed sites2. Reviewed content: highest-value content first3. Determined how to display content on
different devices (desktop, tablet, smartphone)
4. Cleaned up code and integrated with content management system
5. Reviewed and tested on development/beta site
22
Mobile-friendly PHPartners.org
Smaller screen display: – Text readable without zooming– Easy tapping– Three columns change to one column–Menus and headings collapse–Buttons replace text – click to open
23
PHPartners.org Responsive Design
24
PHPartners.org Responsive Design
25
PHPartners.org Responsive Design
26
PHPartners.org Usage
Before responsive Q1 2014 After responsive Q1 20150
20000
40000
60000
80000
100000
120000
140000
160000
VisitorsVisits
27
PHPartners.org Usage
Before responsive Q1 2014 After responsive Q1 20150
100,000
200,000
300,000
400,000
500,000
600,000
700,000
800,000
900,000
page views
28
Mobile Visits
Before responsive Q1 2014 After responsive Q1 20150
1000
2000
3000
4000
5000
6000
7000
8000
9000
mobile visits
29
PHPartners.orgPost Responsive Design
• Overall increase in use of PHPartners site by 44%• Mobile use increased by 137%• 1/3 of increase of site visits can be attributed to
Google referrals • Referrals from Google increased by > 240%
30
Responsive Design Feedback• Comments for PHPartners Editorial Board:– “I have tested the Responsive design – mobile
version - and I like it. Kudos to you guys for getting it done.”
– “Looks great”– “Very usable”
• Recommendation: improve display of search results
• Spread the word among Partner Organizations• Test and report back
31
Challenges• Technical team– Need their time and expertise– New tech (Apple watch) need to adapt and change
• Portal site– Not all links in PHPartners are responsively designed– More sites are moving to responsive design– Hoping this happens in a timely manner– When Partners released, not many of the public health
sites were responsively designed, and did not have plans to become responsive
32
Addressing Issues• Size and spacing of font and headings• Headings and home page content• Images in responsive design• PubMed searches in site:• PubMed has a mobile site, limited functions• Will be responsively designed, but no date set• Other mobile only sites
33
Other NLM Responsive Design Sites• M+ Medline plus– Consumer health information
• Daily Med– provides trustworthy information about marketed drugs in
the United States. DailyMed is the official provider of FDA label information (package inserts)
• AIDSInfo• Other NLM sites in process of responsive
design
34
35
Responsive at NLM
36
Responsive at NLM
37
38
Health Hotlines
Environmental Health Student Portal
NLM Digital Collections
Next Steps
• PHPartners.org is undertaking a usability study• We will get feedback from users, make
adjustments as necessary• Will incorporate any website changes into the
responsively designed website• Continue to adapt to new mobile devices
39
Thank you!Hathy Simpson, MPH
University of Massachusetts Medical [email protected]
Lisa Sedlar, MLIS, MT (ASCP)National Library of Medicine
NISO WebinarJune 10, 2015
40
Responsive Design:Meeting Your CustomersWhere They Are
What is Responsive Design?
Responsive web sites RESPOND to their environment.One site presented on many devices.
Should We Do Responsive Design?
Cisco (CSCO) has forecasted that there will be 50 billion devices by 2020 while Morgan Stanley has predicted the number could be closer to 75 billion.
Device Proliferation
Where will it go?
?
Device Proliferation
“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive design represents a fundamental shift in how we’ll build sites for the decade to come.”
– Jeffrey Veen, VP Products, Adobe
Why do Responsive Design
Cost and development time savings Design and Develop once for use on multiple platforms Lower cost of maintenance by maintaining single site
Better user experience Target features appropriate for device
Better SEO Single URL for web bots to crawl
Scalability and Adaptation to future devices
47
Know Thy Customer
Questions to be answered…
49
Who are my customers today? What do they want to accomplish? Who will be my customers tomorrow? What will they want to accomplish? Where do I start?
The Shifting Landscape
50
Millennials Say…
51
They want it all now…
52
Users carry out 221 tasks per day on their smartphones, compared to just 140 on a desktop or laptop.
With the rise in digital technology, the human attention span has shortened from 12 seconds to eight seconds in more than a decade, a recent study by Microsoft Corporation has found.
Fitting into the user’s lifestyle, when and how they want it.
What tasks will my customer
want to do here?
What tasks will my customer
want to do here?
What tasks will my customer
want to do here?
Who Are My Customers and What Do They Want to Accomplish?
54
Understand the context of use. In what environment will they engage
my site? How much time will they have? Is there a social aspect? What devices will they use? Get into their world to understand them.
Know Your Customer’s Priorities and Give Them the ONE THING that Matters Most to Them.
55
Thoughts about mobile/responsive design:
Responsive design should not be about real estate management.
Stop thinking, “How do I get my site to fit on a mobile device.”
Responsive design should help the user focus on device-appropriate tasks.
Start thinking, “What do my users want to do on their device.”
Responsive works because, unlike a single task app, it can allow users to access the entire site.
Prioritizing tasks
Desktop devices provide the largest workspace and can provide immediate access to many tasks.Easier to provide multiple points of focus.
Ideal for:
Complex Tasks (Graphic Design,
Large Spread Sheets)
Comparative Analysis
Development
Multitasking
1 2 3 4
5 6 7 8
Prioritizing tasks
Desktop devices provide the largest workspace and can provide immediate access to many tasks.
1 2 3 4
5 6 7 8
Tablets provide a nominal workspace and can provide access to a subset of desktop tasks.Ideal for:
1. Collaboration
2. Consumption
3. Basic Creation
4. Multimedia
1 2
3 4
Prioritizing tasks
Desktop devices provide the largest workspace and can provide immediate access to many tasks.
1 2 3 4
5 6 7 8
Tablets provide a nominal workspace and can provide access to a subset of desktop tasks.
1 2
3 4
Smart PhonesOne Thing at a TimeIdeal for:
Communication
Consumption
Status Checking
Simple Tasks
5
4
3
2
1
Where do I start?
60Start Mobile.
Desktop Experience
Tablet
Phone
Phone
Tablet
Desktop Experience
Typical Site Map
61
Home
Articles
Current
Archived
E-Only
Featured
Videos
By Topic
Podcasts
Images
Collections
Galleries
For Authors
Submissions
Journal Info
Search
About Us
Contact Us
Editorial Team
Don’t Make Your Customers Dig.They Don’t Have the Time.
62
Mobile Solution
63
Home
Articles
Current
Archived
E-Only
Featured
Videos
By Topic
Podcasts
Images
Collections
Galleries
For Authors
Submissions
Journal Info
Search
About Us
Contact Us
Editorial Team
Responsive done well…
64
Responsive done well…
65
Responsive done well…
66
Responsive done well…
67
How will responsive impact your revenue models?
68
Questions?
69
NISO Webinar • June 10, 2015
Questions?All questions will be posted with presenter answers on the NISO website following the webinar:
http://www.niso.org/news/events/2015/webinars/responsive/
NISO WebinarTaking Your Website Wherever You Go: Delivering Great User Experience across Multiple Form Factors
Thank you for joining us today. Please take a moment to fill out the brief online survey.
We look forward to hearing from you!
THANK YOU