Top Banner
Pushing Hospital Website Design BEN DILLON, MBA | VICE PRESIDENT & EHEALTH EVANGELIST
66

Pushing Hospital Website Design

Sep 20, 2014

Download

Marketing

All content above the fold. No scrolling. The three-click rule. There are many Web design rules, and they’re about to be broken. New Web technologies are changing the way users interact with your site, making many of these design guidelines outdated. In this webinar you will learn how advances in technology are affecting Web design. We’ll introduce new design concepts and provide ideas to help you stand out in a crowded market.

In this webinar, you’ll learn how to:

New technologies, like mobile and touch-screen computing, that are influencing design
Many common Web design rules, such as home page scrolling, that are becoming outdated
Design trends that are setting new standards for hospital websites
Hospitals that will inspire you to design differently
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Pushing Hospital Website Design

Pushing Hospital Website Design

BEN DILLON, MBA | VICE PRESIDENT & EHEALTH EVANGELIST

Page 2: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Today’s Presenter

Ben Dillon, MBA | VP & eHealth EvangelistGeonetric, Inc.

Ben is a vice president at Geonetric. He writes and speaks extensively about healthcare technology trends, everything from social media strategies to accountable care organizations. Ben is a SHSMD board member, a member of the HIMSS Personal Health Information Taskforce chairs the eHealth Special Interest Group, is an inaugural judge of the Healthcare Internet Hall of Fame and has judged the eHealth Leadership Awards for the past ten years.

He’s also a Twitter junkie – follow him at @benatgeo.

Page 3: Pushing Hospital Website Design

Click icon to add picture

Geonetric Clients

Page 4: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

About Geonetric

Geonetric develops the VitalSite healthcare CMS, and provides online marketing services to hospitals, physician practices and health systems.

Page 5: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Video Of This Webinar

Watch the VideoInterested in learning more about how advances in technology are affecting Web design from experts?

Visit our website to watch a free recording of our popular webinar.

Watch the Pushing Hospital Web Design webinar!

Page 6: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

New White Paper Available

Fill out the survey at the end of the webinar and we’ll send one your way.

Request your free copy!

Page 7: Pushing Hospital Website Design

Pushing Hospital Website Design

BEN DILLON, MBA | VICE PRESIDENT & EHEALTH EVANGELIST

Page 8: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Has Web Design Ever Stopped Changing?

• Text only sites with links

• Table-based sites

• Flash

• CSS

• Javascript

• Web 2.0/AJAX

UIHC.Uiowa.Edu circa 1997, Source: Archive.org

Page 9: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Other Things Drive Design Trends

Screen Resolutions, for Example…

Page 10: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

What’s Driving Design Changes Today?

Page 11: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Mobile

Page 12: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

New Device Sizes and Formats

Page 13: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Touch Screens

Page 14: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Variable-Dimension Devices

Page 15: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

The Rise of HTML 5Death of Flash

Page 16: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Some Looks Work at the

Time…

But They Don’t Last.

Page 17: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Breaking the “Old Rules”

Page 18: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

OLD RULE:Build a Separate Site for

Mobile

Page 19: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

What We Thought Mobile Consumers Wanted

• “On the go” capabilities– Location directory

– Maps and directions

– Physician directory

– ER wait times

Page 20: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

What Mobile Consumers Actually Want

Page 21: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

NEW TREND: Go Responsive

Page 22: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Responsive Isn’t Where Changing Design Trends End.

It’s Where They’re Beginning!

Page 23: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

OLD RULE:Build for the Most Common

Platform and Adapt to Others

Page 24: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

It’s Hard to Downsize

Page 25: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

NEW TREND: Mobile First Design

Page 26: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

What’s Good for Mobile:Pruning and linking

Page 27: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Why only mobile?

Page 28: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

OLD RULE:Use Familiar Visual Paradigms

Online

Make the Interface Look Like the Real-World Thing You’ve

Replaced

Page 29: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Page 30: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

NEW TREND: Flat Design

Image source: http://www.apple.com/ios/ios7/design/

Page 31: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Page 32: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Page 33: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Page 34: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Page 35: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

OLD RULE:Design Should Support the

Presentation of Content

Page 36: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

NEW TREND: Content as a Design Element

• Why bother?– Design elegance

– Adherence to brand standards

– Flexibility

– Less manual manipulation

– Empower non-technical contributors

– Load speed

– SEO

Page 37: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Typekit Fonts

Page 38: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

NEW TREND: Content-Driven Design

Page 39: Pushing Hospital Website Design

Discover Structure Populate Create

Project KickoffStakeholder Interviews

Success MetricsWeekly Status Calls

Preference Survey (Design)

Information ArchitectureVisual Site Map

TaxonomyNaming Conventions

Content Plan

Page Content OptimizationPage Content Development

Module Content Development - Providers - Locations - Services - Events

Image Loading

Dev SiteStage Site

Hosting Configuration

VitalSite Panel TrainingForms Training

Functionality Requirements

Writing for the WebVitalSite Roles & Permissions

Pla

nn

ing

&

Man

ag

em

en

tC

on

ten

t &

D

esig

nS

oft

ware

&

Fu

ncti

on

ality

Com

mu

nic

ati

on

& T

rain

ing

(1-3 weeks) (1-2 weeks) (client determines) (3-6 weeks)

Content Inventory

Panel IntegrationForms Customization

Database DevelopmentSystem Integration

GeoCentralNewtonGeoLabsWebinars

Design Moves Back in ProcessLaunch(1-2 weeks)

Preference Survey (IA)

Visual DesignUsability Testing

Template CreationContent Wrap-up

- Links - Custom Panels - Pages

Stat report

Link Checking

System TestingForms Testing

Integration Testing

VitalSite Pages TrainingVitalSite Modules Training

Modules Implementationand Configuration

12

Page 40: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

OLD RULE:Navigation Lives (Primarily) Under Menus and Follows a

Few Formats – Audience, Task or Topic-based

Page 41: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

NEW TREND: Experience-Centered Designs

Page 42: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Page 43: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

OLD RULE:Home Pages Shouldn’t Scroll

Page 44: Pushing Hospital Website Design

TWEET IT: #GEOLIVE Source: Archive.org July, 2010

Page 45: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

NEW TREND: Vertical Scrolling & Single-Page

Layouts

Page 46: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Page 47: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Page 48: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Single-Page Layout

Scrolling banner

Choose your doctorOur services

Find a location

About your visit

Health library

Page 49: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

OLD RULE:Paginate to Manage Load Times for Long Result Sets

Page 50: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Page 51: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

NEW TREND: Infinite

Scrolling

Page 52: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

OLD RULE:Avoid Large Images

Page 53: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

NEW TREND:Large Photo Backgrounds

• VS.

VS

Page 54: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Page 55: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Page 56: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

OLD RULE:Use Mobile Apps for a Better User Experience

Page 57: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

NEW TREND: App-Like Experiences on the

Web

• Off canvas layouts• Hidden menus• Gesture support

Page 58: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Page 59: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Page 60: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Page 61: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Gesture Support

Page 62: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

What Does This Mean For Me?

• Plan for a redesign soon

• Responsive is the biz case

• Modernization is a goal

• Mobile first, content-driven

• Reimagine the experience

• Build for your audience

• Don’t be afraid to stand out!

Page 63: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Questions?

Contact Ben:800.589.1171

[email protected]

www.Geonetric.com

Geovoices.com

@benatgeo

Pinterest.com/benatgeo

Page 64: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

Video Of This Webinar

Watch the VideoInterested in learning more about how advances in technology are affecting Web design from experts?

Visit our website to watch a free recording of our popular webinar.

Watch the Pushing Hospital Web Design webinar!

Page 65: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

New White Paper Available

Fill out the survey at the end of the webinar and we’ll send one your way.

Request your free copy!

Page 66: Pushing Hospital Website Design

TWEET IT: #GEOLIVE

The End