Screen Design Standards

PURPOSE

With adherence to these standards, both the user community and support staff will receive the following benefits:

· Improve user satisfaction.

· Facilitate training.

Anatomy of a Screen

· This screen displays many of the features described in this document.

Screen Literals

· General Consistency

· Capitalize the first letter of the first word and all major words. All other letters are in lower case.

· The screen title group is the only one with a type T literal on a screen.

· Use fly-by- help for step-by-step instructions, instead of on-screen instructions (unless the instructions are on a help screen).

· Example: “Press OK to send…”

· Do not use underscore characters to make ruled lines.

· Avoid slashes. Rethink the literal so that slashes are not needed.

· xe “Screen Titles”Screen Titles

· Do not use the word “Screen” in the screen title.

· When more than one screen is required to complete a process, append the text – (Screen # of #) to indicate the user’s current location in the process.

Example: Patient Registration (Screen 2 of 3)

· Field Literals

· Use a colon at the end of the field literal.

· Use normal font.

· Left justify literals for the fields that are part of a group

· List Screens

xe "Screen Literal Standards: Consistency issues"

· Delete references to numbers where they are used for selection of a line.

· Example: Some screens have instructions e.g. “Enter Order Detail #”.

· Don’t abbreviate column headings if possible.

· Abbreviations XE "Abbreviations" t " See Field Naming Conventions"

· Abbreviations of single words should be initial caps and then lowercase.

Example: Service = ‘Srvc’ Provider = ‘Prov’

· Abbreviations of several words should be all caps

Example: Middle Initial = MI.

· Don’t use periods in abbreviations unless absolutely necessary to avoid confusion.

Screen Example

· The following illustration (figure 1.2) is a visual example of standards described below.

· Screen flow and layout

· Buttons

· Groups and group frames

· Field placement and literals

Sample EHR Data Entry Screen 2

Navigation Within a Screen XE "Navigation within a Screen"

· Identify the user group: are they primarily mouse or keyboard users?

· Place the most important data or function at the top left.

· The logical workflow should be from the top left of the screen to bottom right.

· Provide command buttons (or scrollbars) that are appropriate on each screen: Save or Save and Continue, OK, Back or Cancel or Close, Next, previous, Right, Left

Buttons

· Button Size

xe " Buttons: Button size"

· Try to make every button the same width in a button group.

· If buttons on any one screen have literals of widely varied lengths, use no more than 2 suitable button widths.

· When buttons are stacked vertically, align them and ensure that they are all the same width.

· Button Positionxe " Buttons: Button position"

· Horizontal spacing: Allow 2 columns spacing between buttons, where space permits.

· Vertical spacing: Allow 1 row of vertical space between buttons.

· List and table related buttons: align with the lower left of their frame.

· Group buttons: align with the lower right of their group.

· Buttons That Affect the Entire Screenxe "Groups:Navigation Buttons"

· Locate in the lower right-hand corner of all screens other than Help screens.

· Button Labels

· Typical button labels appear as Save or Save and Continue, OK, Back, Cancel and Close as the standard. If a more descriptive or appropriate label exists, use it (e.g. Print Census).

· See figure 1.3 on page 10.

· When clicking a button will result in the display of a new screen or popup, add four (4) periods after the literal so that the three (3) period ellipses will display on the button label.

Button Naming Conventions

Label	Action
	Makes changes and closes the pop-up window.
	Does not make changes and closes the pop-up window.
	Closes the pop-up window when changes can’t be made or canceled.
	Resets to defaults and leaves pop-up window open.
	Makes changes and leaves pop-up window open.
	Opens online help.
	Sends data to the database and proceeds to the next screen in the series.
	Retreat! Drop everything and head back to previous screen.

Figure 1.3 Button Naming Conventions

Pop-up and Help Screen Navigation

xe "Popup and Help screens"

· Center navigation buttons in the lowest row of the Pop-up or Help screen.

· Read-only pop-up screens should be dismissed with a Close button. Position this button in the lower-right corner of the pop-up screen.

· Help screens include a centered Close button and Previous and Next button if needed. Place these buttons on the lowest row in the center of the screen.

Data Fieldsxe "Fields"

· Left alignxe "Fields: Alignment" data entry fields by the left edge of their entry boxes and not by their literal labels. .

· If two or more fields are placed above a longer field, right justify the right edge of the last text box with the right edge of the long box below it.

· Every entry field should have field help.

Date and Time Fields

· Date Fields

· Format for nine characters (31Dec1999).

· Exception – If a date field is only for entering the current date and not retrieving past data, then a 5-character date field may be used.

· Time Fields

· Format to display in military time.

Verification Tables, Checkboxes, and Option Buttons

· xe "Verification Tables, Checkboxes, and Option Buttons" Fields With Verification Tables

· An arrow to the right of the field will be used to identify VTs. xe "Verification Tables, Checkboxes, and Option Buttons: Fields with VTs"

· To accommodate the arrow, allow 2 columns of empty space to the right of the field.

· Consider replacing a VT that contains just “Yes” and “No” with a single checkbox.

· Use of Option Buttons (Radio Buttons)

· Screen area permitting, consider using an Option Button instead of a VT.

Chart Tabs

· User-Tracking Chart Tabs

· Improve screen-to-screen consistency.

· Should be considered for all command screens, especially for user groups that only use a limited number of screens.

· All clinical users (including Physician screens) will have the following core group of chart tabs starting on the left side:

· Other Chart Tabs

· To prevent confusion, chart tabs should only be added to screens that are used by only one user group (e.g. Reception screen) or require unique navigation or filtering.

· Hierarchical Levels

· If needed, limit to 2 levels (i.e. a total of 2 menus)

· Chart Tab Fonts

· Use upper and lower case to improve readability and decrease the overall width of the chart tabs.

· Standardized Names

· See figure 1.3 on page 12 for a list of standardized chart tab names and the commands they are linked to.

Sample EHR Data Entry Screen � SEQ Sample_EHR_Data_Entry_Screen * ARABIC �1�

Chart Tabs –

Hierarchical

Title Bar

Tool Bar

Screen Title