User Interface
From TAPASWiki
Contents |
User Interface Introduction
TAPAS is taking a patient centric approach to the UI. As TAPAS is a system that is expected to only be used for a subset of activities and patients in a practice, it is felt that the user needs to get to the work as quickly as possible and that work being patient care. This is, perhaps, different than an EMR where an EMR will take a scheduling centric approach to the UI.
The basic metaphor is one of charts (illustrated as tabs across the top of the screen). These charts are for various clinical activities or items, for example:
- Patients - each patient has a chart or tab.
- Workspace - a place for a user to get a quick view of items about themselves - messages, account settings, etc.
Within each tab, the screen is broken into several consistent areas or zones (see below). Depending on the tab, the zones contain different information (but should work in a consistent manner).
Below the menu bar, as the user moves down the screen, the screen becomes more specific (from a list of patients, to a patient, to a section of the patient's medical summary, to an element in that summary).
On the desktop client, a user can have multiple patient charts open and active an any given time. This will enhance workflow as GPs often leave a chart unfinished when interupted by a phone call or needing to see the next patient. This non-modal approach to the UI, above a "patient" level, reflects the flow of work in the office more accurately. In the current iteration, a single task can be performed on a patient at a time (ie the User Interface is modal within the patient level). It is felt that for simplicity for the user that this is reasonable. NOTE: on the PDA the system is entirely modal - you can only have one patient open at a time.
To improve usability and increase the eye contact between the doctor and patient during an encounter, all major actions will have standard quick keys to allow for rapid and consistent navigation in TAPAS.
UI Screen Design
Below is a mock up of the various areas of the screen for the desktop application. Descriptions follow below.
Menu Bar
The Menu Bar will provide access to a the major sections of the program as well as global activities such log in / log out. Context sensitive menus are possible for the various charts in TAPAS. These will be added only to a specific menu branch.
Button Bar
The Button Bar will contain global activities for the user. These will include:
- Login/Logout
- Cut/Copy/Paste
- User defined links (e.g. to web pages)
The main button bar will not contain items that are specific to a chart (as those pertain to everything under the focus tabs). Everything in the button bar will be available from the menu bar.
The button bar can be toggled by the user.
Focus Tabs
The Focus Tabs will contain all the open "charts" that the user is working on.
Fixed to the left hand side will be a tab to the users personal workspace My Workspace, which will always be open. To the right of that will be any patient summaries that are currently active.
NOTE: it is possible to have more than one patient chart open at a time. By default, if you try and leave a patient chart open you will get a reminder that asks if you would like to Save and Close, Cancel and Close, or Leave Open the current chart. This should be changeable in the user preferences.
Search Bar
The search bar is available from all screens - it provides quick access to the a patient's summary from anywhere in the program. The user is able to jump to a new patient summary "chart" without losing their current place by searching and moving to the new chart.
Tab Header
The Tab Header area of the screen is used to show elements that need to be viewable for the entire chart.
For patient charts, this will include patient demographics (name, age, DOB, health number, address and any allergies)
Function Tabs
The Function Tabs allow the user to quickly navigate to subsections of the current "chart", be it a patient chart of a My Workspace chart.
The four areas below the Function Tabs will pontentially vary, depending on which tab is selected.
Display Pane (Optional)
The Display Pane will vary depending on the tab selected. It is meant to contain information related to that tab. Most elements in TAPAS consist of lists: lists of allergies, medications, medical diagnoses, messages, etc. It is in this pane that these will be shown. This area will allow the user to see the total content for a section. For example:
- if the medical summary is shown, it will show all sections and list all current elements in each section compactly for the user to quickly scan through.
- For medications it will show all current medications. The user will be able to filter on expired medications, discontinued medications, or only current medications and see each medication in more detail.
NOTE: for some areas where there are no lists (eg demographics for a patient will consist of a single set of demographics) the view area would not be seen and the user would work directly with the action pane.
Action Pane (Optional)
The Action Pane is the edit area and can be made available if editing is required for a given level Function Tab.
It can be fed individual elements from other areas of the screen and is the area where the user is able to create new elements. Typically, a user will select an item from the Display Pane list and the details will appear, in editable form in the Action Pane. From there a user can modify them and save.
Side Bars
The Side Bars are areas that contain additional information that is important to keep on the screen in the chart while doing other activities.
For example, in the patient charts the two side bars will contain:
- Patient specific Alerts and Reminders (some manual and some generated by EGADSS)
- Scratch Pad - an idea taken from GnuMed. A page where the user can simply put in a bit of temporary free text about the patient that doesn't have anywhere else to go.
NOTE: This space also provides an area that can be covered during specific activities. For example, this is a suitable space to show a search list when searching for a patient.
Status Bar
The Status Bar at the bottom of the screen can house some additional data for the user. communication with the server, for example can be shown here. Also, other user elements such as number of unread messages will be shown here on every page.
Some Conventions
There are some key UI conventions that will be used in the first version of TAPAS. These include:
Collapsible Lists
In the Display Pane only a limited amount of information can be displayed about a element without the user being cognitively over loaded and unable to access the needed information. When searching through a summary, the physician may only need a overview of a section but may need to drill into an element in more detail.
To provide this functionality, we are adopting a combination of UI approaches:
- The elements in the Display pane can be "expanded" to view more details. For example a medical history list may only contain start date, the diagnosis and the start of a user comment. Expanding the item will show you the end date and the full comment.
- The Action Pane will show more details during the edit process
- The audit trail of any item can be accessed to see how the element has changed over time. This may be important to view as there could be key information recorded previously.
Tapear Colour Schemes
Colour will be used to show some specific states of section items. Colours will be selected to avoid red-green colours. The elements are listed below. NOTE: the colour examples in the table are NOT representative - this wiki can only show a limited number of colours.
| Colour | Location | Description |
| BLACK on White | All Lists | Normal Text, not selected, item last edited by the current user. This is the default view of all text. |
| Black on Pale Blue | All Lists | Highlighted List Elements - Note this colour should be the same as the blue in the edit box for list elements (e.g. changing the name of a problem). |
| Blue on White | All Patient Screens, Msg Screen, Alerts, Referrals | Will indicate elements of the summary that were last updated/edited by a user OTHER than the current user. This is important as the system is a conceived as a shared system. This quickly allows the current user to see what data may have changed on a patient and is particularly important to a family doctor of a patient who may see what colleagues have added or changed. |
| Blue on Pale Blue | All Patient Screens, Msg Screen, Alerts, Referrals | Selected element that has been last edited by other user. |
| Medication Screen | ||
| Black on PALE Yellow | Prescription | Expired Medications, not selected. Expired medications are medications whose prescription is no longer expected to be active (e.g. a patient had a 7 day course of antibiotics 3 weeks ago). |
| Black on Bright Yellow | Prescription | Expired Medications, Selected |
| Black on light pink | Prescription | D/C Medications, Not Selected. Discontinued medications are medications that were actively discontinued by the clinician. These are noted as different from the expired medications as there is typically a reason the medication was discontinued (e.g. intolerance, ineffective, allergy, resistance, etc)
|
| Black on Orange Red | Prescription | D/C Medications, Selected. |
| Alerts and Allergies Side Panel | ||
| Bold Red on White | Allergy Side Panel | Allergies on the Side Panel. Note: Allergies in the function panel will act like all other tabs. |
| Red on White | Alert Side Panel | Alerts on the Side Panel. Note: Alerts in the function panel will act like all other tabs. |
| Messaging Screen | ||
| Black on White | Message Screen | Regular, read messages are listed like normal text. |
| Bold black on white | Message Screen | Unread Urgent Messages are bold and black. |
| Red on White | Message Screen | Urgent Messages are coloured Red. |
| Bold Red on White | Message Screen | Unread Urgent Messages are bold and red. |
Desktop Mockups
We are in the process of developing the UI. Here are several mock up screens for the desktop application – they are a combination of the JAVA application superimposed with Windows GUI widets to approximate the functionality.
Please bear with us as the UI elements do not completely match up in the mock-ups, even beyond the obvious juxtaposition of JAVA Swung and Windows GUI.
Problem List
The problem list shows the general screen layout as described above.
The Active Medical Problems screen acts as a fairly representative screen for most patient summary sections, with the display pane on the top and the action pane on the bottom.
Secure Messaging
This screen shows the secure messaging interface. It sits inside the users "workspace" - a place where users can look at the application from their view instead of a patient centric view. This model is consistent with the general screen design.
There are still some things to be worked out - including:
- Should the collapsible list show the message body? These are meant to be short messages, not long books.
- If the message body gets shown in the lower half (which is also consistent with our model), should the reply / fwd buttons be there?
- Under New Message should we show the list of all users or just the users that are getting the message and have a pop-up that provides an interface to add users to the list?
Prescriptions
The Prescription System is likely the most complex screen in the while design. Here we've show it with "everything on" to get a complicated sense of how busy the screen will be.
Depending on the patient’s medication profile this is screen is more or less busy, obviously. The act of prescription is one of the more complex tasks in the summary and that complicates this screen. NOTE: Work with clinicians has been ongoing to work on this screen to make it flow for them.
The pending list is important. The user should be able to write multiple prescriptions (or refills) in one pass and print them on a single page as they do on paper today.
