Overview of the User Interface

Overview of the User Interface

Before exploring the system’s specific functions and operations, it’s important first to understand some key foundational concepts and usage patterns.  These are covered in the following subsections.

Browser Based Access

The user interface can only be accessed via a web-browser, whether the system is hosted on the same computer (with or without a network connection), on a server in the same network, or over the internet, as a cloud application.  Any modern browser should be compatible, though we recommend Google Chrome and Microsoft Edge.

A browser based interface delivers multiple benefits, including:

• No special software is needed on the client device
• The system can be accessed from any device with a browser, including phones, tablets, laptops and desktops
• The user interface will adapt to the type of device being used, both in terms of screen size and methods of interaction, e.g. mouse, keyboard, touch-screen, etc.  Examples are given in later sections
• The interface can be extended to laboratory clients for patient/specimen input, label/barcode printing and online report viewing

Intuitive and Consistent Operation

To minimise acclimatisation time and effort, the interface utilises industry standard user experience techniques, and applies them consistently.  This includes the following characteristics:

• All major functions are organised hierarchically within a single, system-wide navigation bar that is visible (on the left-hand-side of the screen) on every page (except on a phone, where it is accessible via a “burger” icon at the top-left of the screen).  See later section for more details
• All record lists, be they patients, specimens, tests, users, roles, labs, etc., are displayed and accessed as “List View” pages, all of which share the same basic layout, capabilities and operations, as appropriate.  See later section for more details
• All individual records can be fully displayed (with more detailed information than is available from the corresponding List View entry) and accessed as “Record View” pages, all of which share the same basic layout, capabilities and operations, as appropriate.  See later section for more details
• Once you are familiar with the layout and capabilities of one List View type and corresponding Record View type, e.g. the Specimens List View and Record View, other List View and Record View types should already seem familiar
• The user interface can be rendered in any language as all words or phrases are stored as “tags” in a separate tag file that can be independently translated.  Furthermore, any specific word or phase can be independently customised via the user interface itself, if desired.  See <link>Add a Translation</link> for more details

Optimised for Efficient Data Entry

Various techniques have been employed to ensure that data can be entered as quickly and efficiently as possible. These include:

• Selectable actions, forms, pages and fields are only presented where relevant.  If an action is not applicable to a workflow state, or the logged-in user does not have permissions to it, it will not appear for select.  If a page in a form is rendered irrelevant by current state or a previous field entry, it will not appear.  Finally, if a field on a form page is rendered irrelevant by current state or a previous field entry, it will not appear
• Where appropriate, form fields will render Intelligent defaults based on current state and/or previous field entries.  For example, in the default specimen creation form, the Received Date field is automatically set to the current date, as in the vast majority of cases, this will be correct
• Hot-keys are available for most data entry operations, allowing data to be entered without the use of a mouse.  It is the user’s choice whether to use mouse or keyboard for navigating forms, per individual preference
• A <link>Tests</link> menu is available for direct access to direct tests and culture tests.  This can be useful in larger labs where specialist staff may be assigned to specific test types, such as microscopy or gram staining.  It allows them to filter for their work items without having to go through specimen records to find them
• Where appropriate, certain actions can be performed on multiple specimens with a single click.  Examples are specimen submission and specimen approval.  Furthermore, certain specimen forms have a Next Specimen button alongside the Save button, which saves to the current specimen and moves to the next specimen in the filtered list (within which the original action was issued)
• Status overlays are rendered when hovering over significant records such as cultures, direct tests and culture tests.  This can save having to explicitly view or edit the relevant records to see existing results

Main Navigation Menu

The main navigation menu appears on the left-hand-side of the screen and allows selection between the main functional areas of the system.  With a small number of exceptions, such as Home and Analytics, these main functional areas are represented by list-views displaying records of the type given by the option name.  For instance, selection of the Specimens option reveals the specimen list-view, a list of active specimens and associated actions.

The navigation menu is hierarchical, with some top-level selections revealing a set of sub-options.  Administration is a key example, as shown below.  Others include Tests, Reports, Quality, Coding and Configuration.

The navigation menu is also adaptive to screen-size and screen-mode.  On a standard PC browser window, in the default screen-mode, it is displayed in full, with icons and descriptive text for all options.  However, on narrower windows or on smaller devices, such as tablets, the menu is reduced in width to icons-only mode, as shown below.  This mode can also be explicitly enabled by selecting the << icon at the top of the full-width menu.  Similarly, the reduced menu can be expanded to include all option text by selecting the >> icon (also shown below).

For very narrow windows, or on a phone with typical display resolution, the navigation menu is absent by default to save space.  This is known as dynamic mode.  In such cases, a burger icon appears on the title bar. Selection of this icon reveals the full navigation menu.  See below.

The navigation menu automatically disappears again on selection of a non-expanding menu item.  Alternatively, the menu can be cleared either by selecting the << icon or by clicking outside of the menu area.

Finally, the navigation menu can also be put into dynamic mode for any screen size or device by enabling full-screen mode.  This is achieved by selecting the full-screen mode icon at the top-right of the screen, just under the title bar, as shown below.

A reduce-screen icon will replace the full-screen icon, allowing the user to exit full-screen mode.

List Views

A list-view is a standard screen for displaying and manipulating a list of records of the same type.  For example, the specimen list-view screen contains a list of specimen records and associated actions, while the patient list-view screen contains a list of patients and associated actions.  While list-views may differ in their specific actions and the attributes displayed per column, the overall layout, capabilities and mechanics are aligned across all record types to minimize acclimatisation.  The common aspects of list-views are detailed in the following sub-sections with reference to the example image below of a typical specimen list-view.

Title and Description

The list-view title appears at the top of the screen, with a short description immediately below it.

Action Row

Between the description and the filter bar lies the action row, on which one or more labelled action icons may be displayed from the left-hand-side outwards.  The word may is used here because the presence of labelled actions on this row depends on two factors:

1. Global actions that are independent of any specific record in the list will always be displayed on this row, provided the current user has permissions.  For example, the Add Specimen action will permanently appear on the Specimen list-view action row as it is always possible to add a new specimen; the ability to add a new specimen is independent of any existing specimens
2. If a record row has been selected (as in the above image), all actions available for that record are displayed on the action row, in addition to the record row itself.  For example, if a specimen record in the specimen list-view is selected (as shown), the View action will appear in the action row, to the right of Add Specimen.  If, as in the example shown, the number of record specific actions exceeds the space available, an overflow icon (...) will appear.  Selecting this icon button will reveal all remaining actions

On the right-hand-side of the action row (as shown in the above image), three more icons are displayed, from left to right: Filter, Grid View and Full Screen.  These are described as follows:

• The Filter action toggles the filter bar and filter presets (see below) on and off to save space
• The Grid View action switches the record display mode from Table View (the default) to Grid View and vice-versa (see Record List section for a description of these two modes)
• The Full Screen action toggles full-screen mode on and off.  In full-screen mode, the menu bar is in dynamic mode (hidden by default; revealed temporarily by selecting the burger icon button) and the screen title and description are hidden.  The filter bar and presets (see next sections) are separately disabled by the Filter action toggle (see above)

Filter Bar

The filter bar, when not hidden, sits between the action row and the record list, as can be seen in the above image, and provides options for filtering the records displayed based on record attributes.  On the far left, there is usually a keyword search box.  The system will search existing records for a full or partial match against any text typed (or scanned) into this field, then subsequently reduce the list of displayed records to those that have matching attributes.

On the far right-hand-side of the filter bar, is a Clear action, depicted by an “X” icon.  Selecting this option will clear all existing filters such that the full record list will be immediately displayed.

To the left of the Clear action is the Refresh action, depicted by a circular arrow icon.  Selecting this option will update the list based on all current filter settings.  While in most cases, filter changes are immediate, there are a few exceptions.

To the left of the Refresh action are the record specific filters that will vary with record type.  For instance, as can be seen in the specimen list-view example above, there are specimen specific filters for: Received Date, State, Type and Tag.  By contrast, the patient list-view includes filters for: Age, Location and Gender.  In most cases, selecting from one of these filters will result in an immediate change to the displayed records.

Filter Presets

If one or more filter presets have been configured, they are displayed in the filter presets section, immediately below the filter bar.  Each preset is represented by a labeled button.  Selecting a filter preset collectively sets one or more of the filter options in the filter bar to stored values.  Once a preset has been activated, the preset button takes a darker shade.  Selecting it again will deactivate the preset, returning the button to its initial shade and restoring all filter options to their previous state (before the preset was activated).  If an individual filter option is modified after a preset has been activated, the preset button will also return to its lighter shade indicating that the filter bar no longer accurately reflects the values stored for the preset.

Record List

At the heart of every list-view screen is the list of records, consisting of a row per record and a column per displayed attribute.  While the attributes differ with record-type, certain capabilities and characteristics are common.

All attribute columns have a heading describing the attribute.  Selecting a column heading results in the entire list being sorted based on this attribute; in ascending order first (as denoted by an up-arrow icon), and in descending order if the heading is selected a second time (as denoted by a down-arrow icon).  Columns can also be resized with a drag and drop action, though such changes do not persist on return to the same screen.  Nevertheless, if the default column width is insufficient to display a particularly long value in the list, hovering over the cell results in an overlay displaying the full text.

In the first or second column of each row, available actions are displayed as icon buttons with help text available if hovered over.  Where more than three actions are available, the icon buttons typically represent the most commonly required actions, with additional actions available via an overflow icon button (“...”).  Selecting the overflow option displays the full set of actions in both name and icon.

As mentioned earlier, for smaller client devices, such as tables or phones, a Grid View option is available wherein each record is displayed as a rectangular “card” instead of a row.  These cards will automatically tessellate based on the screen area available, typically reducing to one card wide on a phone screen (see below).  All the same information and options are available on each card as are available on a row in Table View mode.  Selecting the Grid View icon button (top-right of the screen) toggles the display between Grid View and Table View modes, with the default being Table View.

<SEDRI-LIMS Card View.PNG>

If an alert has been activated for a given specimen, an alert icon is displayed against the specimen on the left-hand-side in the colour configured for the specific alert.  See <link>Configure an Alert</link> for details.

Record Views

A record-view is a standard screen for displaying all attributes and actions associated with a single record.  For instance, a specimen record-view contains attributes and actions associated with an individual specimen.  Again, while precise details vary across record types, the overall layout, capabilities and mechanics are aligned across all record types.  A typical record-view is shown below.

The common aspects of record-views are detailed in the following sub-sections and can be identified in the above example.

Record Type and Back Button

The type of record is displayed at the top of the screen, to the right of a back-arrow icon that takes the user back to the list-view screen.  On the right-hand-side of this top row are previous and next icons that allow the user to move to the previous or next record in the list-view (subject to any filters applied).

Action Row

Immediately below the record name is the action row.  This contains labelled icons for all actions that can be performed by the current user (based on role), on the current record, in the current state (where state is a factor).

General Attributes

Underneath the action row is the general attributes section with the heading <record-type> Details, e.g. Specimen Details in the case of the specimen record-view.  This section contains all viewable attributes associated with the record in scope.  Most of these will have been entered by the user or administrator on record creation, but some, e.g. Accession Number and State in the case of a specimen record, may have been assigned by the system.

Embedded Lists

Below the general attributes section, there may be zero or more embedded lists of sub-records that are specific to the record type being displayed.  These are like mini list-views and may have general actions, e.g. Add <record-type>, and/or actions associated with each row in the list.  The first of these per-row actions is typically a View action, which will take the user into the record-view of the sub-record.  A key example is the culture embedded-list-view in the specimen record-view.  Individual cultures can be viewed and manipulated by selecting icon buttons associated with each culture row.

Footer Buttons

At the bottom of the record-view are three further buttons:

• Exit - this returns the user to the record list-view, same as the back-arrow icon at the top and the Escape hotkey (see next section)
• Previous <record-name> - this moves the user back to the previous record in the filtered list-view, if there is one, same as the previous icon at the top and the Ctrl + Left Arrow hotkey (see next section)
• Next <record-name> - this moves the user to the next record in the filtered list-view, if there is one, same as the next icon at the top and the Ctrl + Right Arrow hotkey (see next section)

Hotkeys

Hotkeys are keyboard shortcuts that support user interface navigation and selection. They serve as efficient alternatives to mouse-based actions, enabling faster interaction or simply catering to user preference.  In addition to the standard browser keyboard shortcuts, such as Tab/Shift + Tab, for moving between controls (such as buttons or fields), and Enter for registering field selections or entries, the following, application-specific, hotkeys are available:

Ctrl + Left Arrow:

In a record-view, Ctrl + Left Arrow moves to the previous record in the current list-view, with the current list-view filter settings.  For example, if a specimen record was entered from a specimen list filtered for Pending Arrival state, Ctrl + Left Arrow would move to the previous specimen in the list of specimens that are in the Pending Arrival state, if present.

In a multi-page form, Ctrl + Left Arrow executes a Cancel or Back button action.  Cancel is issued if the user is viewing the first page of the form or Back if there are previous pages.

Ctrl + Right Arrow:

In a record-view, Ctrl + Right Arrow moves to the next record in the current list-view, with the current list-view filter settings.  For example, if a specimen record was entered from a specimen list filtered for Pending Arrival state, Ctrl + Right Arrow would move to the next specimen in the list of specimens that are in the Pending Arrival state, if present.

In a multi-page form, Ctrl + Right Arrow executes a Next button action, if present.  If the current page is the last page of the form and the Finish button is displayed in place of Next, Ctrl + Right Arrow will have no action.  This is to prevent a user from accidentally submitting a form after a series of next page actions.  Use Ctrl + Enter instead to submit or save the form.

Ctrl + Enter:

On a single page form, or the final page of a multi-page form, Ctrl + Enter saves or submits the form.

Escape:

In a record-view, Escape exits the view and takes the user back to the screen from which the record-view was selected.  For example, if viewing a culture record-view, Escape would return the user to the specimen record-view for the associated specimen.  Selecting Escape from the specimen record-view would return the user to the specimen list-view.

In a form, Escape exits the form from any page.  This is equivalent to selecting the Cancel button in a single page form or on the first page of a multi-page form.  For interim or final pages of a multi-page form, there is no mouse equivalent.

Ctrl + Backspace:

In a list-view, Ctrl + Backspace triggers a list refresh.  It is equivalent to selecting the refresh icon at the end of the filter bar.