The document provides guidelines for user interface design conventions in a clinical software system, including: - Buttons should be primary or secondary, with primary buttons emphasizing the most common actions. Secondary buttons are for less frequent actions. - Dates should generally be displayed in a relative format like "May 15, 2017" unless it is a birthdate. Exact dates include both date and time. - Required fields are indicated with an asterisk. The system checks for and alerts the user about incomplete required fields. - Other conventions cover colors, fields, messages, popovers, tabs, text formatting, and more. The guidelines aim to provide consistency across applications.

1. 5/9/2017 Proposed Conventions - Clinical - Confluence Live System
https://confluence.meditech.com/display/CLIN/Proposed+Conventions 1/14
Created by Andrew Shipe, last modified by Angela Mueller on May 05, 2017
Clinical /… / 6.x WONC
Proposed Conventions
Buttons
Design Considerations
Which Button Should I
Use?
Style
Programmer Notes
Color
Date and Time
Design Considerations
Relative Date
Exact Date/Time
Programmer Notes
Fields
Design Considerations
What field should I
use?
Required Fields
Date Field
Free Text Field
Multiple Field
Selection Group Field
(aka Quick Pick
Buttons)
Type Ahead Lookup
Field
Styles
Programmer Notes
Creating New Fields
Using a Field
Removing a Field
Icon
Message
Design Considerations
Standard Messages
Message Types
Custom Message
Popovers
Design Considerations
Programmer Notes
Size
Table/List
Tabs
Design Considerations
Style
Inline Buttons
Programmer Notes
Creating new tab sets
Using a tab set
Removing a tab set
Child tab sets
Text
General Rules
Styles
Wrap Text
Truncate Text
Username
Buttons
Design Considerations
Which Button Should I Use?
Primary Buttons
A primary button presents the most common action(s) to a user with a large, easy to read
target. Primary buttons are best thought of in terms of the 80/20 rule: What 20% of available
actions are used 80% of the time? These actions should be emphasized with primary buttons.
Not sure which button to use? When in doubt, start with a secondary button and switch to a
primary button if suggested by usability testing or customer feedback.
Secondary Buttons
A secondary button presents occasionally used actions to users without distracting from
primary actions or workflows. Secondary buttons are great for features used for complex
situations or to concisely present the system status and allow changes. Secondary buttons
represent a middle ground between primary buttons and popovers. Actions taken more
frequently likely deserve to be primary buttons and less frequently used actions could live
under a menu button.
Style
Color, Size, and Text conventions are documented in their respective sections
Programmer Notes
MisWebStdTools.Button.WE contains panels for button styles. These panels use the stack
value to determine their content, allowing the application to define its own OnClick logic. To
use, simply provide the panel a stack value through ComponentValue.
Color
Other than differences between applications, the system should use color to convey
information in a consistent manner to the users. The following guidelines help ensure
consistency.
Refer to Text for font colors. This table lists fill and border colors.
Name Border Fill Notes
Primary Button #808080 #f5f5f5
Secondary Button #808080 Transparent
Field (enabled) #808080 #ffffff
Field (disabled) #808080 #ebebe4
Workload ­ Dark accent #b2dcab: Use in
Workload as the
border for
accordions or the
routine "titlebar"
Button Arguments Expand source

2. 5/9/2017 Proposed Conventions - Clinical - Confluence Live System
https://confluence.meditech.com/display/CLIN/Proposed+Conventions 2/14
Name Border Fill Notes
Workload ­ Light #def0db: Use in
Workload as the fill
for accordions
Highlight/focus/selected #d8fed3 Use to indicate an
item is selected
Popover Highlight/focus #e1f5fe Use to indicate the
mouse is hovering
over an item
Navigation bar #000000
Tab (enabled) #000000
Tab (selected) Application
chooses:
Accent
underline
color
Background
color
Text color
Table/List striping #f5f5f5
Date and Time
Design Considerations
Relative Date
Always display dates in this format unless the date is the patient’s birth date
When displaying a relative date, display the Exact Date and Time in a Tool Tip (see
Exact Date and Time convention below)
A Relative Date means
If the date is today's date, display "Today"
If the date is any date in the past or any date in the future, display "[Abbreviated
Month] DD, YYYY" (see details below for specifics about Month, Days, and
Years.
Abbreviated Month
Abbreviate months per this list: Jan, Feb, Mar, Apr, May, Jun, Jul,
Aug, Sep, Oct, Nov, Dec
Date
Do not display leading zeros in DD (e.g. The 7th day of the month
displays as 7 and not 07)
Years
Do not display current year (e.g. display 2015 but not 2017)
Always use 4 digit year (YYYY)
Exact Date/Time
Only to be used in Tool Tip
16px font
same border style as any other choice dropdown
Uses both the Datestamp and Timestamp conventions displayed together as
MM/DD/YYYY HH:MM
Separate the stamps with two spaces
Do not backfill a default time for a date­type data element
Datestamp
Use MM/DD/YYYY format

3. 5/9/2017 https://sites.google.com/a/meditech.com/mpm-m-at-web-design-conventions/home/conventions/design-conve?tmpl=%2Fsystem%2Fapp%2Ftemplates%2Fprint…
https://sites.google.com/a/meditech.com/mpm-m-at-web-design-conventions/home/conventions/design-conve?tmpl=%2Fsystem%2Fapp%2Ftemplates%2Fprint%2… 43/58
If pending edits exist when a user triggers a refresh, the system presents the standard
Save/Discard Confirmation message.
The Save and Discard options take the appropriate action and refresh the screen
Dismiss the message to return to the screen without a refresh
The following refresh conventions are specific to the Task List.
Upon a refresh, maintain the details in the content area according to the following rules
If the item remains in the list, maintain selection
If the item disappears from the list, reset the list so that no item is selected
Refresh when a user processes a task in such a way that it removes the task from the list,
such as closing the task.
The following refresh conventions are specific to Condition Management
Queuing a medication refreshes the list of pertinent medications
Queuing an order refreshes all result items associated to the queued procedure
Required Field
Required fields display an asterisk in the label
An asterisk (*) displays in the reserved space to the left of the label. There is no space
inserted between the asterisk and the first character of the label.
If a data field is unconditionally required, the asterisk displays prior to entering a value
at the control field. The asterisk remains after a response is entered.
In the case of a conditional required field, the asterisk displays after a response to the
key field has been entered. The asterisk associated with a conditional required field
may be turned on or off 'on the fly' if the key field is edited or deleted.
When the system checks and finds incomplete required fields
The asterisk changes to red plain text
The system adds the required message to the field label
The required message is red text
For top­aligned labels, (Required) appears to the right of the label
For right­aligned labels, (Required) appears below the label
The system automatically scrolls to the first required field so that it is in view for the user
If the required field is not available flat on the screen, the system opens the screen that
contains the required field
For example, the system displays the Submit overlay when the user clicks Close on a
Task and items exist in the queue
Routine Name Bar
The Routine Name bar identifies the routine, providing the user with context about what data and
features they can expect.
The Routine Name bar contains a single label. A Routine Name bar can be divided into tabs.
Rounded corners on top
Never can be expanded or collapsed
Example: Task List (Single Routine)