Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 1
A Timeline-Based, Interactive Graphical User Interface for the Electronic Health Record
Rick Weinhaus, MD
Note: In order to see the TimeBar at intended screen resolution, please consider downloading this PDF file and viewing it on a
full size monitor at a screen resolution of 125%. Otherwise, the images will be too small to take full advantage of the brain’s
visual processing capability.
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 2
The Doctor’s Mental Model of the Patient
In order for an Electronic Health Record (EHR) system to optimally support patient care, its user interface needs to reflect the
doctor’s mental model of the patient.
When taking care of patients, I believe most doctors use a chronological mental model, namely, the patient is a complex
biological organism whose health changes over time. Each event in the patient’s past potentially affects all future events.
In order to understand how a patient arrived at his present state of health and what interventions are now most likely to help,
the patient’s medical history should unfold like a compelling story.
Organizing a patient’s documents chronologically and displaying their subject matter graphically on an interactive timeline, as
above, supports comprehension, encourages exploration, reveals relationships, and can lead to insights that improve care.
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 3
Current EHR User Interfaces
Most EHRs do not provide a timeline-based
or visual user interface for navigation,
exploration, searching, and selection of a
Tab-based EHR designs are much more
common, where documents are organized
first by category and only secondarily by
A screenshot of a well-known vendor’s
interface, typical of tab-based EHR design, is
shown to the left. Working with such
interfaces requires significant cognitive
For interactive examples, see the following
Major EHR Vendor #1
• 1:08 minutes total length
Major EHR Vendor #2
• short version: minute 8:05 to 8:35
• long version: minute 3:53 to 8:35
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 4
The Data Set
The data set used for the TimeBar design is closely based on the documents in my own electronic medical record at the Beth
Israel Deaconess Medical Center (BIDMC) in Boston when I was first treated for acute myelogenous leukemia (AML) in
September, 2013 through July 2014. I compiled a chronological list of all clinically relevant documents in my outpatient record
along with their available metadata, and added only the most important documents from my two hospitalizations, including
my discharge summaries, my chemotherapy protocols, and my stem cell transplant protocol, also with their metadata. This
resulted in a total of 143 documents, a portion of which is shown below. The red headers indicate the metadata elements.
In this example and all that follow, pseudonyms are used for all providers.
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 5
Visual Encoding of Information:
In the TimeBar design, each document is represented by a square tile which visually encodes attributes of the document. The
tiles are available in two display sizes.
The small tiles conserve screen real estate, while the large tiles display more attributes. The user can switch between the two
A small and a large tile representing the same document are shown below:
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 6
In the BIDMC EHR, each document is assigned to a category. I retained and slightly modified these category designations so
that each of my 143 documents was assigned to one of the seven categories shown below:
Visual Encoding of Document Categories:
The background color of the tile visually represents its document category, as shown below. The colors for the document
categories have been chosen to be easily distinguishable and rapidly perceived. After a short learning curve, the user can
identify each document category by its background color, instead of having to read text.
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 7
Visual Encoding of Document Subcategories:
Each document in the BIDMC electronic record also includes metadata which can be used to assign that document to a
subcategory (see page 4).
I retained, with some modifications, the same subcategories used in the BIDMC record.
These subcategories are represented visually with commonly-accepted and/or representational icons, as shown below:
Thus, the small tile set (shown above) visually encodes two attributes of a document:
• the document category (background color)
• the document subcategory (icon)
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 8
The Large Tile Set -- Content Icons
The large tile set retains the same visual encoding of document category and subcategory information as the small tile set. In
addition, the large tile set has room to display an additional attribute of the document using:
• a content icon
Some examples of content icons are shown below:
Content icons work well when visually encoding medical information, because easily recognizable organs and tissues can also
represent abstract concepts. For instance, the heart icon above represents both the heart and the field of cardiology.
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 9
The Large Tile Set -- Acronyms and Abbreviations
A further attribute of the document can be encoded at the bottom of a large tile by using an accepted, text-based
• medical acronym or abbreviation
Some examples are shown below:
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 10
The Tile ‘Visual Language’
Thus, with a relatively small set of elements, the large tile set allows the user to perceive the subject matter of each document
visually. The document category is encoded by the background color, the subcatetory icon always displays in the upper right
corner, and the content icon’s meaning is determined by the document category.
If needed, an acronym or abbreviation can be placed at the bottom of tile, as shown in the examples below:
In the examples above, for Imaging, Reports, and Procedures documents, the content icon displays the body part or organ
involved. In contrast, for Notes documents, the content icon displays the department or specialty.
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 11
Further Visual Encoding of Document Information
Further visual encoding, as shown below, extends the ability of the tile ‘visual language’ to convey concepts and relationships:
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 12
The TimeBar Design
The TimeBar design uses a variant of The Perspective Wall (see also Perspective Wall video – 54 seconds) allowing the user to
focus on events occurring within a selected time interval while maintaining an overall awareness of the entire sequence of
the patient’s medical history.
The design employs the widely-used visual metaphor of a one-dimensional horizontal line or bar to represent the abstract
concept of the passage of time. Standard time units such as months and years are marked out along the bar at uniform
Each document (event) is visually represented by a tile connected to the bar by a vertical line which indicates the document’s
Again note: Intended screen resolution for displaying the TimeBar is 125% of the resolution of this PDF file.
The TimeBar, including the attached tiles, can be thought of as a pliable band that slides along a fixed 3-D frame consisting of
three panels (see above). The central panel is the focus panel where the subject matter of each document is indicated by a
tile which can be clicked in order to view the document in full detail. The receding panels, shown in perspective on either
side, provide context. The left panel contains previous documents and the right panel more recent documents.
The TimeBar occupies a fixed position at the top center of the user’s screen and remains visible when documents are opened,
providing context and helping the user remain oriented in information space.
Although the design presented here is tailored to display outpatient data, the TimeBar design can also be used with inpatient
EHR systems, using a time scale of hours and days instead of months and years.
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 13
Semantic Zooming – First Level
For each document, three levels of semantic zooming (‘zooming’ in on detail) are available. We have already seen the first
level of semantic zooming, that of switching
• from small tiles:
• to large tiles:
At this first level of semantic zooming (to the ‘large tile’ set), the goal is to encode enough information visually so that the user
can comprehend the subject matter of each document in the central panel without further interaction. For a clinician already
familiar with a patient’s history, this view simplifies chart review by converting the difficult task of recall to the easier one of
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 14
Semantic Zooming – Second Level
If the user requires more detail, a second level of semantic zooming for any document in the central panel is available from
either the small or large tile view: a mouse-hover or equivalent touch-screen gesture highlights the tile and causes an
information box to ‘pop up,’ displaying metadata for the document, as in the example below:
This second, ‘pop up’ level of semantic zooming provides an additional way for the user to rapidly comprehend the subject
matter of each document without opening it.
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 15
Semantic Zooming -- Third Level
If full detail is required, a mouse-click or equivalent touch screen gesture on any tile in the central panel opens the document
and displays it directly below the TimeBar:
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 16
Stretching and Compressing the Time Scale
When stretching or compressing the time scale, The TimeBar design utilizes
• the metaphor of a rubber band
• that can be stretched:
• or allowed to contract along its horizontal axis:
Options for the design of the controls to change the time scale include the scroll wheel, plus and minus buttons, and keystroke
Regardless of the specific design controls and gestures chosen, the display of stretching and compressing the TimeBar should
be animated so that visual processing, rather than cognition, can be used to maintain awareness of tiles and markers as they
move to new locations.
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 17
Losing Track of ‘Today’
When viewing documents (events) in a patient’s EHR, it is easy to lose track of ‘today’ (July 12, 2014 in this example, indicated
by the blue diamond), even though ‘today’ is in a sense always the reference point. Furthermore, the most recent events are
frequently the most relevant.
For these reasons, when stretching or compressing the TimeBar, the anchor point (green arrows) should be the right post of
the central focus panel. This way, if the month containing ‘today’ (July in this example) is adjacent to the right post, ‘today’
remains in the central panel as previous months enter or exit from the left.
If desired, the day of the week can be determined by a simple hover:
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 18
Just as the metaphor of stretching or compressing a rubber band is used to change the TimeBar’s time scale, the metaphor of
sliding that rubber band along the fixed 3-D frame is used to bring earlier or later time intervals onto the frame’s central
panel, where individual documents can be viewed in detail.
Navigation is accomplished through direct manipulation – by sliding the Timebar horizontally along its fixed frame. In
addition, direct manipulation of markers including first document, last document, today, year, previous central panel and
next central panel (indicated by green arrows below) rapidly brings those sections of the TimeBar to the central panel.
Again, TimeBar navigation should be animated so that visual processing, rather than cognition, can be used to maintain
awareness of tiles and markers as they move to new locations.
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 19
Using Visual Processing for Searching and Filtering
The central panel below displays the 75 documents in my data set for the six-month period from February through July, 2014.
To conserve space, a split tile has been used to indicate both a progress note and a lab document on the same date. Two red
dots indicate two documents of the same category on the same date.
An advantage of the TimeBar design over standard text-based chronological lists of EHR documents (see pages 3 and 4) is that
our high-bandwidth visual processing system, with its capacity for preattentive processing, can be used to search and filter the
data set, instead of having to read text.
For example, despite the high number of documents represented in the central panel above, it is relatively easy (especially
when viewed at intended screen resolution, i.e., 125% of this PDF file) to find all procedure documents (green background), all
imaging documents (blue background), or all pathology reports (microscope icon with red background).
For comparison, see the text-based chronological list of just the first 25 documents in my data set (page 4) and note the time
and cognitive effort required to find all procedure documents, all imaging documents, or all pathology reports.
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 20
If needed, however, the TimeBar design does provide controls for searching and filtering. In the example below, the user is
searching for documents that include the keyword cardiology:
Resulting in the display below:
The search has identified all 4 documents in the central panel with the keyword cardiology. All documents without the
keyword cardiology are deselected and visually muted, but still visible.
In addition, without having to navigate to previous time intervals, the user can immediately perceive that more remote
cardiology documents exist along the receding left-hand panel: a note (yellow encoding) and a report (red encoding).
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 21
The select control allows the user to
filter by document category and/or
In the example to the right, the user
has applied filters to de-select all
Labs and all Notes, except for Initial
• Resulting in the display below:
As with the search control, even though the filtering operation visually mutes and de-activates the non-selected documents,
the user doesn’t completely lose sight of them. Hence, the design both helps the user stay oriented in information space and
reminds her that de-selected documents exist which may contain important clinical information. Without having to expend
navigational effort, the user can also see that more remote, selected (non-visually muted) documents exist along the receding
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 22
Side-by-Side Viewing of Documents
The TimeBar design supports the simultaneous viewing and comparison of documents of different dates, as shown below.
Because the temporal location of events is encoded visually, the user can process these temporal relationships perceptually,
freeing cognitive resources for detecting and interpreting changes between the two documents themselves.
In contrast, many EHR user interfaces (such as the ones shown on page 3) require the user to expend cognitive effort to find
and select the desired documents from a date-sorted list, compute and carry in working memory how the two documents
relate temporally to each other and to the rest of the documents in the patient’s record, and then carry in working memory
the image of one document while viewing the other.
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 23
Potential Benefits and Feasibility of Development
Many EHR implementations “provide little support for the cognitive tasks of physicians . . . [they] do not take advantage of
human-computer interaction (HCI) principles . . . [and] can increase the chance of error, add to rather than reduce workflow,
and compound the frustrations of doing the required tasks” (Stead and Lin). EHR usability issues are becoming increasingly
recognized as a major barrier to achieving the Triple Aim of enhancing patient experience, improving population health, and
reducing costs. Hence, well-constructed EHR user interfaces have the potential to improve the quality and decrease the cost
of health care while improving the day-to-day lives of physicians.
Much of the innovation in EHR design and usability over the next one to two decades will probably come from new user
interface applications (front ends) for existing EHR systems (personal communication, Farzad Mostashari MD, former U.S.
National Coordinator for Health Information Technology, 2012).
The TimeBar was designed to serve as a new user interface where both the subject matter and the temporal relationships of
EHR documents can be grasped visually, sparing working memory and cognitive resources for patient care issues. It is an
alternative to the prevailing EHR user interface paradigm where documents are organized by category into tab-based
directories (see page 3). The TimeBar design focuses on review, exploration, navigation, and selection of EHR documents and
does not address other aspects of UI design.
In order to make the TimeBar as compatible as possible with existing EHRs, including older legacy systems, the TimeBar design
works at the level of EHR ‘documents,’ including ones that are page-formatted, scanned, or transmitted electronically in text-
based formats, and it uses existing metadata (see page 4). The TimeBar is less ‘granular’ than several other excellent EHR
timeline-based designs (for instance, see Plaisant, Plaisant video, Scarlat) which plot separate channels of structured data
(such as changes over time in individual lab values or medication dosages) against the same time-based horizontal axis.
The recently announced collaboration of several major EHR vendors and other healthcare entities to develop interoperability
standards (HL7 Argonaut Project to Advance FHIR) as well as the increasing availability of published application program
interfaces for EHRs (for instance, see Mandl, JAMIA 2012) increase the likelihood that applications such as the TimeBar can be
developed that will interface with data derived from multiple sources, including personal health records (see addendum), to
provide a comprehensive, intuitive, longitudinal view of the patient’s history.
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 24
Addendum 1 -- The TimeBar as the User Interface for the Patient Portal
Although the TimeBar was initially conceived as an alternative user interface (front end) for existing EHR systems, it is clear
that if the EHR system supports a patient portal, patient-generated entries could be easily interleaved with clinicians’
documents. The same TimeBar views could be identical both for physicians and for the patient, except in cases where
sensitive or patient-protected information should not be widely disseminated.
If the TimeBar is used as a patient portal, another background tile color is required to encode the category of patient-
generated documents. In this design, a tile with a light pastel blue/green background has been added. Like the other
background tile colors, this color can usually be perceived preattentively without the need for visual searching.
The subcategory icons for patient entries are the same as some of the Notes icons (letters, phone calls, emails), but more
importantly, there is a subcategory icon for entries that the patient directly enters into the EHR electronically (see pointer) in
the same way a clinician enters a document:
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 25
Addendum 1 (continued) -- The TimeBar as the User Interface for the Patient Portal
There are at least three types of entries a patient might want to make:
• Questions requiring a response from the provider:
• Clarification or correction of unclear or inaccurate provider-entered information:
• Journal entry:
The option of being able to interleave patient journal notes, questions, and comments with EHR documents makes it easy for
both the physician and the patient to see the sequence of events. It helps the patient become an active participant in his own
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 26
Addendum 1 (continued) -- The TimeBar as the User Interface for the Patient Portal
In the example above, a patient with bipolar disorder and his psychiatrist are actively involved in optimizing his mood and
ability to function using psychotherapy and the pharmacological agent lithium. (The Greek letter psi (Ψ) is the icon used to
represent the specialty of psychiatry).
In this example, the patient sees his psychiatrist in early May. The patient reads the psychiatrist’s progress note and makes
one minor clarification.
Over the next week, the patient enters two journal entries directly into the EHR noting that he is feeling and functioning very
well. Then he begins to develop confusion and headaches, so he enters a note to his psychiatrist directly into the EHR (instead
of using email, for instance) with the question of what might be causing these new symptoms. The psychiatrist phones the
patient the same day and they discuss the fact that the lithium dose may be too high.
The psychiatrist arranges for a serum lithium level to be drawn, which turns out to be elevated. He calls the patient and they
agree to lower the lithium dose and for the patient to be seen in the office in a few days.
Before the office visit, the patient makes a journal entry stating that the symptoms have resolved on the lower dose of
lithium, without any worsening of mood or function. At the subsequent office visit, both the patient and psychiatrist
appreciate the fact that the entire course of events can be seen and reviewed in a single screen view.
Rick Weinhaus, MD The EHR Timebar v2.0 31-Oct-15 P a g e | 27
Addendum 2 – The TimeBar as the User Interface for an Interoperable Patient-Centered Medical Record
An overarching goal of the recently released ONC Federal Health IT Strategic Plan for 2015-2020 is that EHRs “be person-
centered.” Similarly, a recent JASON report adopts the principle that the ultimate owner of a given health record is the
patient him/herself. Thus, there is an increasing consensus that true interoperability will depend on a patient-centered
medical record, where the patient has access to and control of all his/her medical records, regardless of the sources.
The Electronic Health Record is fundamentally a longitudinal record of the patient’s history. As such, a timeline view of a
patient’s records, capable of chronologically organizing and visually displaying the subject matter of documents from multiple
sources, supports the patient’s and the doctor’s mental model of how the patient’s health status evolves over time.
The JASON report notes that as of 2013 large-scale interoperability amounts to little more than replacing fax machines with
delivery of page-formatted medical records. And even if a patient is able to able to download or obtain paper copies of all her
health care documents, unless there is a way to automate the task of chronologically interleaving and visually displaying the
subject matter of documents from multiple institutions and providers, the amount of cognitive effort required to make sense
of the record is enormous for both the doctor and the patient.
Assuming that the salient metadata was created at the time of document creation (as it often is), the TimeBar user interface
software code simply uses this preexisting metadata to digitally organize and present graphically both of the chronology and
the subject matter of documents from multiple sources, eliminating the need for additional data entry by either the sending
or receiving party.
By using our high bandwidth visual perceptual system to grasp both the temporal relationships and subject matter of
documents, we free our finite cognitive capabilities for relevant patient care issues.
As discussed before, the TimeBar design does not require structured data documents and hence can work with legacy systems
and page formatted documents. In the near term, I believe that the most important contribution ONC could make to advance
EHR interoperability is to ensure that patients can access, download, and control all their documents, regardless of the source,
along with each document’s salient metadata.