UX Principles

Actions

  • No right clicks
  • No hover to access pertinent information
  • Every click counts

Context Sensitivity

  • App should be aware of action context to present the appropriate content
  • Reuse established scenarios (Ex: accessing a task from different entry points should follow the same workflow)
  • Role-based workflow

Persistence

  • Ability to resume an order
  • Ability to resume a note

Colors

Primary

$primary

#0D68A1

rgba(13,104,161,1)

$primary-dark

#132F50

rgba(18,46,81,1)

$primary-light

#DCE4EF

rgba(220,228,239,1)

$primary-light-alt

#BDCCDB

rgba(189,204,219,1)

$primary-lighter

#E2F3F8

rgba(226,243,248,1)

$primary-lightest

#F3F5F7

rgba(243,245,247,1)

Secondary

$secondary

#328443

rgba(51,133,67,1)

$secondary-light

#E4EFEC

rgba(228,239,236,1)

$secondary-dark

#256632

rgba(42,101,52,1)

Tertiary

$tertiary

#F8C54F

rgba(248,197,80,1)

$tertiary-dark

#E6B131

rgba(230,177,49,1)

$tertiary-darker

#FD9827

rgba(253,152,39,1)

$pure-yellow

#FEFC9E

rgba(254,252,158,1)

$orange-dark

#9E5200

rgba(158,82,0,1)

Supporting Colors

$pure-black

#000000

rgba(0,0,0,1)

$pure-white

#FFFFFF

rgba(255,255,255,1)

$red

#EB1700

rgba(255,8,0,1)

$red-dark

#C31300

rgba(195,19,0,1)

$red-lightest

#FFF1F1

rgba(255,241,241,1)

Greys

$grey-darkest

#555555

rgba(85,85,85,1)

$grey-darker

#767676

rgba(118,118,118,1)

$grey-dark

#BBBBBB

rgba(187,187,187,1)

$grey

#CCCCCC

rgba(204,204,204,1)

$grey-light

#DDDDDD

rgba(221,221,221,1)

$grey-lighter

#E6E6E6

rgba(230,230,230,1)

$grey-lightest

#F4F4F4

rgba(244,244,244,1)

Typography

Back to Top

The primary typeface used within the eHMP application is Source Sans Pro. Merriweather is the secondary typeface currently used only on the sign in screen.

Heading levels are based on the content hierarchy and viewed holistically throughout the application. For example, heading level 1 are used for main headings such as the application name, Enterprise Health Management Platform. Heading level 2, or secondary headings are reserved for the patient name.

Modals within the application are using heading level 4. If the modal is considered a detail modal, the content within the modals are divided into sections leading with a heading level 5, and the content that follow those headings are paragraphs.

Another example are the applet headers that currently using heading level 5, and the content within those applets are either heading level 6 or paragraphs.

Heading Level 1

Regular: 20px

Heading Level 2

Regular: 18px

Heading Level 3

Bold: 16px

Heading Level 4

Bold: 14px (Mainly used for modal headings)

Heading Level 5

Bold: 12px

Heading Level 5 Alternative

Bold: 14px, All Caps, $primary-dark (Mainly used for applet headings)

Heading Level 6

Regular: 12px

This is paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Regular: 11px

Buttons

Back to Top

Buttons are actionable objects that allow the users to interact with the application in ways such as triggering a modal or submitting a form. All buttons will have the base styling of font-weight: 600, font-size: 12px, padding: 6px 12px, border-radius: 2, box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3), and line-height 1.4.

Default

Default buttons (btn-default) have the $primary-light background color and are used when less attention needs to be called to the buttons. Examples of use are the CWADF buttons in the patient information bar, the global footer buttons, and in the footer of dialogs that have a white background.

SM:

The small default button (btn-sm) is used in the footers of modals and pop-overs.

Font-size: 11px, padding: 5px 10px

 
XS:

The extra-small default button (btn-xs) is used in smaller real estates such as the patient information bar, the global footer and previous/next buttons in the modal headers.

Font-size: 13px, border-radius: 20px, font-weight: 400, padding: 0 10px

Primary

Primary buttons (btn-primary) have the $primary background color and are used when more attention needs to be drawn to the buttons. The primary buttons usually contain the primary action in a workflow. Examples of use are the sign in button on the log in page and adding new observations, actions and notes inside of the tray.

Default:

The default primary button (btn-primary) is used primarily on the login page.

Default: Background color: $primary, Text color: $pure-white
Hover/Focus: Background color: $primary-dark, Text color: $pure-white

XS:

The extra-small primary button (btn-xs) is used in smaller real estates such as the Notes sub-tray buttons.

Font-size: 13px, border-radius: 20px, font-weight: 400, padding: 0 10px

SM:

The small primary button (btn-sm) is used when a white footer or no footer is present and a primary action must be taken.

Font-size: 11px, padding: 5px 10px

LG:

The large primary button (btn-lg) is used sparingly when appropriate. One of the locations is Nationwide Search in Patient Selection.

Font-size: 14px, padding: 10px 16px

W/ Icon:

Primary button paired with font awesome icons (Mainly used in navigations).

Other Button Styles

These other button styles are used in specific areas of the application.

Button Icon:

Only using font awesome icons or custom designed icons. Button icons do not have visual text.

Patient Confirmation

The green button with large font (btn-lg) is used for patient selection. After selecting a patient, the user must select the green button confirm your selection.

Font-size: 14px, padding: 10px 16px

Default:

The danger button (btn-danger) is used in global error dialogs.

Background color: $red, Text color: $pure-white
Hover/Focus: Background color: $red-dark, Text color: $pure-white

Tray Button:

Background color: $primary, Text color: $pure-white
Hover/Focus: Background color: $primary-dark, Text color: $pure-white

Active Tray Button:

Background color: $primary-dark, Text color: $pure-white
Hover/Focus: Background color: $primary-dark, Text color: $pure-white

Badges
Badges are used to visually display the total amount of items that are grouped together. This can usually be found in accordions where there are multiple results or multiple groupings. An example of badges is within the search records results.

Back to Top
Number badge:

Background color: $primary; Text color: $pure-white

Badge w/ icon:

Paired with font awesome icon

Labels
Labels are used to indicate severity level or other types of information.

Back to Top
L*
Critical Low

Background color: $red; Text color: $pure-white

H*
Critical High

Background color: $red; Text color: $pure-white

H
Abnormal High

Background color: $tertiary-darker; Text color: $pure-black

Panel
A set of lab tests

Background color: $grey-darker; Text color: $pure-white

Modals

Back to Top

Alert Modal

Alert modals are used to interrupt the user's workflow. For example, if the user is attempting to delete a workspace, the application screen will have a blur effect and a modal will appear in the middle of the screen. The modal will provide information on the action the user is attempting to complete and will request the user to respond. The alert modal will always provide two options. One option is to move forward with the action, and the other is to cancel and return to the previous screen.

Details Modal

Details modals are used to provide the user with information about a specific record from the applet. Details modals appear in the middle of the screen after the user selects the details modal button from the applet toolbar within a row of an applet. Detail modals will have a previous and next button, which will allow the user to view the previous or next record within the applet. The previous button will be disabled if the user is currently on the first record, and similarly the next button will be disabled if the user is on the last record. The details modal will have 2 exit methods. One is at the top right of the modal appearing as an X icon, and the other is the on the bottom right of the modal appearing as text within a button titled, "Close". Each method will return the user to where they were previously in the application. Details modals are also moveable. The user is able to hover over the modal header and see that the cursor will change allowing them to select, hold, and then move the modal around if they wish to view other content simultaneously.

Growl Alerts

Back to Top

Growl alerts are used to indicate to the user that a write back has been successfully saved.

An unsuccessful save (system error) should be indicated by a modal so that it interrupts the workflow and makes the user aware of the error.

Form Elements

Back to Top

Form labels should be formatted as sentence case with the first letter of the label capitalized and the rest lowercase. The exceptions are acronyms such as SNOMED, and labels with 2 names divided by a forward slash such as "Dosage/Unit".

Form fields are methods for users to enter in information. If there is a asterisk ( * ) next to the label, it indicates the field is required and information must be properly entered. Help text for form fields are placed immediately right after the label, and if a field is required and entered improperly, an error message will appear below the input field in red. The user must correct the field before proceeding with the form submission.

Text Input

Depending on the requirements, text input usually accepts characters, such as letter or numbers.

Disabled fields appear in several instances, such as when a user is required to properly fill out the previous field before moving on, or if the user is unable to edit the data. The disabled field will have a gray background and when the user attempts to select it, an error cursor will appear.

Drop Downs and Select Boxes

Drop down menus allow the user to select options from an available list. There are different types of drop downs, such as multi-select allowing the user to select more than one option by using a combination of the mouse and keyboard, and a type ahead select, which requires the user to enter in text first in order to view the available options.

Check boxes and radio buttons

Checkboxes allow users to select more than one option. The user is able to select the box or the text itself, both will select and unselect the checkbox. The cursor will change into a pointer indicating the selectable area.

Radio buttons require the user to only select one option. The user is able to select the radio button or the text itself, both will select the radio button. The cursor will change into a pointer indicating the selectable area. In order for the user to deselect the selection is to choose another radio option within the fieldset.

Text Areas

200 of 200 characters remaining

Text areas allow the users to enter in lengthy information. Currently text areas can be found in our write back forms, with a maximum of 200 characters. If the user attempts to enter more than 200 characters, the form will not accept.

Filter inputs and search boxes

Search Box

A filter input and a search box, similarly to an input field, allows the user to enter in text and content will filter immediately below the field or require the user to press enter on the keyboard or selecting a button to view results. A user should enter in a minimum of 3 characters to be able to begin filtering.

Faux Tables

Back to Top

A faux table may appear as a regular data table by using divs to give the look and feel of a table; however, it allows the user to interact with it in complex enhanced functionality and flexibility that a regular table does not allow.

It is currently used mainly in applets. A user may sort the data by selecting each column header. A blue caret will appear next to the applet header, which allows the user to sort ascending or descending. A user may also select any row of data within the applet and trigger either an applet toolbar or a detail modal. The applet toolbar is a toolbar that displays all the actions that a user can perform for that row, such as obtaining more information that will appear in an external window, open the detail modal, selecting a quick look, which will display a summary table of the information and much more.

Date Picker

Back to Top

Dropdown Calendar

The date picker has 2 methods that allow the user to input a date. The user can either select the icon calendar, which will display a calendar. The default date will be set to today, indicated by a blue background color and white font. The user can use the top left corner arrow to move to the pervious month; similarly can use the top right corner arrow to move to the following month. If the user selects the month, all of the months within the year will display. Once the user selects the desired month, the dates for that specific month will appear. On the view where all the months are displayed, the user can also select the year if the user wishes to choose another year other than the current year. The view will display 12 years at a time, and similarly to the dates, the user can use the left and right corner arrows to move forward or backwards in years. The user can always use the Today button at the bottom of the calendar to select today’s date.

Flexible Date Picker/Acceptable Formats

The other method is for the user to directly type in the desired date, by placing their cursor within the input field. Depending on the date field, there are restrictions on what formats are acceptable. The help icon next to the label fields, when selected, displays a list of acceptable formats. This date picker is called the flexible date picker, it not only accepts dates in the standard format of MM/DD/YYYY, it will accept text such as 't' for today, or 'y' for yesterday.

Workspaces

Back to Top

Predefined Workspaces

Predefined workspaces are workspaces that are readily available in the application that cannot be deleted. The predefined workspaces are Overview, Timeline, Coversheet, Meds Review, Documents, and Summary. The Summary workspace is selected as the default workspace when a user arrives to the workspace; however, the user can select any workspace as the default through the workspace manager. These workspaces will contain preselected applets that the user also cannot customize; therefore the workspace editor icon will not appear in the workspace navigation as it does for custom workspaces.

Custom Workspaces

The user controls custom workspaces. The user can create a new workspace through the workspace manager and editor. The custom workspace allows the user to name the workspace that will appear in the workspace drop down. The user can personally select which applets to include in the workspace, along with what type of view, such as trend, summary, or expanded. Other actions such as removing applets or changing views can be controlled through the workspace editor along with resizing the applet container itself.

The applet chrome will change for user-defined workspaces. The additional icon that appears is the gear icon; when selected, the applet will list all the views that are available for that applet. The user can change the view of the applet without having to visit the workspace editor if not desired.

Workspace Manager

The workspace manager allows the user to manage all of their workspaces. Similar to the applet chrome, the workspace manager also has a set of functions at the top right hand corner. The plus icon allows users to create/add a new workspace, the filter icon will expand the filter input letting the user enter in text to filter through the workspaces listed below, and the X icon will close the workspace manager and return the user to their previous screen.

Within the workspace manager there are multiple actions that can occur. Creating a new workspace, setting the default view, copying, rearranging, removing, previewing, launching, and customizing. When a user creates a new workspace, the user should enter a name and a description for that workspace in the input field. This allows the user to easily recognize the workspace created, although the description is not required while the name of the workspace is required. The user can also add associated problems to this workspace by selecting the tag icon and using the search component. The author field will be auto populated with the user that is currently signed on to the application. Setting the desired default workspace can be simply completed by selecting the star icon next to the workspace name; however, only one workspace can be set as the default at any given time.

Duplicating the workspace is accomplished by selecting the copy icon. This will place the newly copied workspace directly below the workspace that it was copied from, instead of at the bottom of the list when a new workspace is created. The user can also rearrange the workspaces by selecting the double arrow icon and dragging the workspace tile up or down until the desired list is finalized. The user can also remove workspaces that were created accidently or no longer needed by selecting the trash can icon.

Previewing a workspace allows the user to have a sneak peak of the workspace before launching the workspace. The preview will appear in a separate modal. If the user has created the workspace, the user can launch the workspace, which at this time will close the workspace manager, or select customize if a new workspace is created, which will navigate them to the workspace editor.

Workspace Editor

The workspace editor lists all of the available applets that the user can choose from in a carousel layout. The user can select the left or right arrows of the carousel to cycle through the list of available applets. Once the user finds the desired applet, the user can simply drag that applet into the draft workspace area, indicated as the blue-bordered box. Once the user drags the applet into the blue box, the user will be presented with the available views for the particular applet, such as trend, summary, or expanded. At that point the user can select a view, or remove that applet. The user can repeat these actions until the desired workspace is finalized and then select the Accept button.

In the workspace editor footer, the user can also choose to delete this newly created workspace completely by selecting the Delete button, or return to the workspace manager to make more edits by selecting the Go To Workspace Manager button. If the user has no further edits and is ready to launch the newly created or edited workspace, the user should select the Accept button to close the workspace editor.

Applets

Back to Top

Applet Chrome

The applet chrome consists of multiple buttons on the top right hand corner. These buttons allows the user to interact with that particular applet. The common features are refresh, help, and filter. Refresh allows the user to refresh the data, help allows user to access the help content that will open in a different window, and filter will expand a filter input right underneath the applet header and chrome, as the user enters in text the data will filter below. Other applet chrome features are the expanded view (only appears if the user is viewing a trend or summary view of the applet), which allows the user to view the applet in a wider display. From the expanded view, the user will see an X icon in replace of the expanded view, which will close the expanded view and return the user to their previous screen. At times the user will see a plus icon appear in the applet chrome. The plus icon indicates that a user is able to add data to that applet, such as an allergy. When the user selects the plus icon, the write back tray will open.

Applet Filter

Applets are provided with filtering capabilities. In predefined workspaces, the filtering allows the user to narrow down the applet results with keywords entered in the filter text. As the user enters in text, the results will filter below.

On custom workspaces, the applets allow for more enhanced filtering capabilities. The filtering can be accomplished by setting multiple keywords. For example, the user opens the filter input and enters in a keyword in the add filter field. The user can repeat this action until all desired keywords are entered, which will contribute to the filtering criteria. Once the user has all of the desired keywords, the user can label this search criteria by entering a name for it in the Edit Applet Filter Name field. This will make the name for this filter visible at all times.

Quick-look Menu

The quick-look menu is triggered by selecting the applet row if there is more than one way to interact with the row of record, otherwise the detail modal will appear on select. Some of the common actions in the quick-look menu is more information, detail modal, and quicklook view.

Trend Applets (Concept)

The trend view, or concept applet, provides a baseline of objects within a domain if sufficient data is available. Trend view will also contain any visual graphs that will display the trend for that particular record.

Pill Applet

The pill applet is also considered a trend view. The difference is the layout. Instead of rows and columns, the data will appear in a pill like form allowing the user to consume information differerently.

Summary and Expanded Applets (Record)

The summary and expanded applets displays a wider range of information for the particular applet. The summary view provides a partial detailed display of objects within a domain, while the expanded view provides most detailed display of objects within a domain.

Tray/Write-backs/Sub-tray

Back to Top

Write back are forms that allow users to enter information. The write back appears within the tray with various form elements. Depending on how the user enters the tray, the user could be presented with a summary tray, which displays a list of actionable items, for example, tasks that need to be completed or drafts of write backs that were not submitted. The Observations and Actions tray has multiple write backs, which will require the user to select which write back they wish to complete from a drop down menu. Each write back contains an actionable footer, which allows the user to perform actions such as cancel, delete, or accept. The delete and cancel function will appear in a popover right above the button. It confirms the action the user is attempting and requires the user to confirm in proceeding with the action or canceling to return to the write back. Once the write back is successfully submitted, the user will see a growl alert appear for confirmation.

Tray Loader

The tray has loading indicator in many cases, such as when the user first opens the write back. Another example is when the user submits the form, or switches views. The loading animation indicates to the user that the system is working on their request and that the user should wait until the system is complete.

Sub-tray

Some trays contain a sub-tray that provides additional information or more actionable items that can be performed with the write back. For example, the notes write back contains a sub-tray. Some of the actions are allowing the user to view content written by other providers, or appending content to the note.

Write back Popover

Write back popovers occur in the write back footer when the user attempts to cancel or delete a write back. Deleting a write back workflow appears when a draft was created, while cancel is persistent in all write backs. If the user attempts to delete, the delete popover will appear above the delete button asking requiring the user to confirm to proceed with deleting, or canceling to return to the write back. Likewise, if the user attempts to cancel a write back, the cancel popover will appear also requiring the user to respond.

Write back footer buttons

Write back footer buttons always have a white button and are arranged so that forward actions are on the right side of the footer and backwards actions are on the left.

Below are some examples:

Icons

Back to Top

Action Icons (Universal)

  • Settings
  • Help
  • Open Expanded View
  • Close Expanded View
  • Add
  • Refresh
  • Filter
  • Edit
  • Close/Cancel/Dismiss
  • Remove
  • User
  • Comment
  • Delete

Action Icons (Unique)

  • Add to Stacked Graphs
  • Tag for Concept-Invoked Workspace
  • Quick Look
  • Default Workspace
  • Set to Default Workspace
  • Empty Bell: No Alerts/Notifications
  • Filled Bell: Alerts/Notifications
  • Workspace Manager
  • Broken Patient Context
  • Non-local Site
  • External Link
  • Info Icon
  • Details View
  • Patient Selection
  • Task Cannot Be Completed
  • Duplicate Workspace
  • Lab Order
  • Bulk Edit User

Form Symbols

  • Date
  • Time
  • Search
  • Open Tray
  • Close Tray
  • Table Expand
  • Table Collapse
  • Dropdown Expand
  • Dropdown Collapse
  • Drill Down

Alert/Status Symbols

  • Connection Stable | Successful
  • Warning
  • Error
  • Connection Error
  • Flagged