Global Headers: Using the Web to Help Unify an Academic Health Center

A spider's web with dewdrops representing the interconnected web of UF&Shands online presenceOne of the simplest ways of describing the internet is to simply refer to it as “the web”. The term “the web” is now synonymous with the internet in general. But pause for a moment and reflect on what “the web” symbolizes: A series of connected elements, strung together by a unifying medium.

In looking at our 6 colleges, 6 major research institutes and centers, and a health system that spans throughout the region, we were charged to come up with a way to effectively connect these unique but related units together by using the web. Part of our solution came in the form of a global header.

A Look Around

One of the first tasks we embarked on was to look outside our organization at our peers. The list of Academic Health Centers (AHCs) is impressive, so suffice to say we spent a lot of time observing and cataloging how similar organizations attempted to unify themselves. Some units stood out for their consistency and uniformity (e.g., OHSU, Stanford), while others for their modern and easy to use design (e.g., Brown, University of Utah).

We noticed that most organizations, however, made their individual colleges, hospitals, and institutes feel insulated from one another.

The truth is that in most cases, there was no quick and easy way to appreciate the organization by a quick glance of their web presence.

Our Goals

Instead, we wanted our global header to accomplish things like:

  • Expose medical patients on one website to the availability of care for their pets, and vice versa allow pet owners to learn about our other health facilities.
  • Make it easier to find information about our discoveries and research facilities.
  • Allow potential students and residents to appreciate the interdisciplinary nature of our organization.
  • Make it easier for volunteers and those in the community to engage with us and help give back.

Scrolling up to the very top of this page, you will notice a thin bar with a UF&Shands crest. This is our global header. We have just started the process of inserting this element on *every* website in our system, no matter the size of the website; from a student group, to a major research institute or college.

Considerations

Just a few of the considerations we have made during the design of our global header included:

  • Aesthetics
    • Position: should the bar run as an object that nudges down the entire website, or should it float?
    • Size: the vertical size of the bar needed to be visible, but not take up too much precious and valuable “above the fold” space
    • Color: early designs had the bar set in a color that caused some users to confuse it as a function of the browser, and not of the website, thus they completely ignored it.
  • Behavior
    • Hover effect/Dropdown: Should there be any kind of dropdown effect that accompanied the bar and its sub-regions? If so, should it take on the function of a traditional dropdown, or exploit mega dropdown menu techniques?
  • Content
    • How much and why: who was the audience, what did they need access to, and how do we not include confusing or useless content?
    • Form: should things be presented as simple lists, visual graphics, or more interactive elements like forms?
  • Technical
    • Accessibility: Can the list be read and accessed properly by those with disabilities?
    • Search Engine Optimization: how can we leverage this area to increase our page ranks across our enterprise by leveraging internal-linking techniques?

Testing and Measuring

We are some ways off from having the global header on every website, but the rollout has started. As of this writing, we have ~120 websites constructed, or under-development, with the bar available.

We’ve installed event tracking on each one of those websites so we can monitor what kind of traffic the global header generates.

I will revisit the subject of analytics in a future article once we have some available data.

Additionally, we plan to revisit all of the content placed on the global header in the future through focus groups and usability testing. The current implementation is based largely on patient survey data, existing analytics, and input from a broad spectrum of individuals within the organization.


Photo by Luc Viatour, Flickr.

About the Author

 Avatar

Jeffrey Stevens

Jeff Stevens is the Assistant Web Manager for UF Health Web Services. He focuses on user experience, information architecture, content strategy, and usability.

Read all articles by Jeffrey Stevens