This is a dump of the initial design walk through and many of these items are resolved in various different and better ways now. Updates to the page will happen as I get them caught up. Comments should be reserved until you see the demo of the current version. -Tony - www.mi-squared.com 21:40, 15 December 2009 (UTC)

General Guidelines

Don't display empty pages with nothing in it; indicate that there is no data, and invite an action
Report guidelines

Alternating row color text, when appropriate
Visible column borders
Consistent header/data alignment
Empty columns have '--' or 'na' which is barely visible
Will appear inside the frame, instead of popup or other tab/window
If columns are sortable, a ascending/descending sortkey will be visible; also verbiage indicating sortability
When there is no data, a message indicates that there is no data
[Refresh] -> [Apply] (renamed button)
Shrink report title
Add clinic information headers, selection/range info, date run and page counts to all reports.
All reports should have display, print and export to csv options

Replace all expanding checkbox-type things with a jquery tabbed menu (See http://trevordavis.net/blog/tutorial/jquery-tabbed-navigation)

reduces scrolling
allows action buttons (save; search; cancel) to stay within page

Convert heavyweight popups into jquery modals wherever possible

use modal ajax pattern from here: http://fancybox.net
must figure out a way for modals to communicate back to parent

Wherever possible, all buttons in the system are to be rendered as pure (or almost pure) css buttons.

Code Specific

As an example the includes were added to demographics.php to support Ajax

   <link rel="stylesheet" type="text/css" href="../../../library/js/fancybox/jquery.fancybox-1.2.6.css" media="screen" />
   <script type="text/javascript" src="../../../library/js/jquery.1.3.2.js"></script>
   <script type="text/javascript" src="../../../library/js/common.js"></script>
   <script type="text/javascript" src="../../../library/js/fancybox/jquery.fancybox-1.2.6.js"></script>

And this code is used support expand and collapse of views

   function toggle( target, div ) {
      $mode = $(target).find(".indicator").text();
      if ( $mode == "collapse" ) {
          $(target).find(".indicator").text( "expand" );
          $(div).hide();
      } else {
          $(target).find(".indicator").text( "collapse" );
          $(div).show();
      }

DIFF -U dump of demographics.php - This is a full diff of the demographics page supporting TAB views and the integration of the Patent Notes and the Summary page in one frame as well as modal windows for appointments and css styling.

Work Flow

Patient/Client -> Management -> New/Search

Replace expanding checkbox with jquery tabbed menu.
Break this up into separate New and Search pages, which will largely the same rendering code. Differences between the two:

Search page will have no required fields; New will have required fields
Search will avoid having the 'Add' buttons on certain fields; these will only be rendered when entering New patient
Search will no longer produce a popup, instead it will display search results fullscreen (takes over form) or use modal

Search Results

Use real button instead of [Help]
Help appears in a modal instead of new page
Apply report column formatting treatment search results
Pagintor changes:

text: "Page x of y"
if time, add page selector dropdown (so you don't have to scroll through 400 pages)

Prior to save, tabs with required fields will be starred.
On save, tabs which have fields will be colored red, indicating an error.
Error messages will be enumerated at the top of the page, along with an instructive message.

Patient/Client -> Management -> Current

Add large page title (Non-clinical Charting?), and current patient's name, so it stands out
Use tabbed layout to render 'Who', 'Contact', 'Choices', etc. so you are not instantly blasted with so much data
More -> Edit button; action buttons placed near patient's name so its easier to associate those actions with the patient
Convert archaic New / Edit appointment popups to modals

Patient/Client -> Management -> Summary

Appears to be a page linked to mostly clinical information.
Add a page title. Not sure what this should be (Clinical Summary?)
All (More) links converted to buttons
On Edit mode, Medical Problems, Medications, Surgeries, and Immunizations don't seem to have titles.
When there are no Prescriptions, Surgeries, and the like, each header should state 'None'.
Patient Notes in Edit mode has a different title, needs to be the same
Headers for Medical Problems, Medications, Surgeries, and Immunizations are links. Prescription is not. This needs to be made consistent.

==atient/Client -> Visits -> New Visit==
[Add Issue] Button needs to go near the 'issues' section title, instead of being right next to the [save] button. The links here need to become buttons
Add issue should become a modal popup, instead of javascript

Patient/Client -> Visits -> New Visit -> Add/Edit Issue

Should be a reusable modal
The title selector should be invisible unless you click on a chooser button to make it visible. Also title selector should be a dropdown, not scrolling widget
Changing the type should wipe out all fields

Patient/Client -> Visits -> Current

Format the boundaries between forms, and columns in general (hard to see whats what with all the undifferentiated space)
Add collapse/expand navigation to individual reports, with option to expand all, collapse all
Remove User column, and put the user below the form name + "Created by <user>"
Add view printable form for this encounter only, directly from page
Add explicit 'edit' button per form, its irritating to click on blank space and accidently enter the edit more for a form
Add instruction text and better overall UI treatment of the right hand new form selector (its not really clear that's what that does).
(Individual forms discussed later)

Patient/Client -> Visits -> List

Apply standard report column formatting, which includes subtle alternate row coloring
Why is this page a different color (grey)?
When there is no data for a column, a barely visible '--', or 'none' should be displayed
In billing view, [Add] links should be real buttons (may need to reimplement this as ajax rather than inline frame)

Patient/Client -> Visits -> Transact -> Add Transaction

Add page header
Replace expanding checkbox with jquery tabbed menu.
[Save Transaction] link -> real button
Add [Cancel] button which leads back to Transact
If transaction type is changed, display a label w/ the actual Transaction type, with a button change it

when clicked, the label turns back into a dropdown
A cancel button will restore the label

Patient/Client -> Visits -> Chart Tracker

Should not load in a popup, rather it should take over the rest of the screen
When a chart status is loaded, options for [Lookup new patient] and [Done] should be provided

On [lookup new patient], the screen should reload with just the search field again

Patient/Client -> Rx

Page needs structural reorganization: seems a little crazy to have the action links on the left side by itself

Get rid of vertical frame division
Add overall page title, and place [List] and [Add] buttons next to it per convention

List Prescriptions page:

links -> buttons; positioned at bottom of list
add select all/deselect all; link to bottom of list if list > 5 items
apply report column treatment to list

Add Prescription page: Drug lookup needs to be modal
Why is the color scheme here grey instead of blue?

Patient/Client -> Medical Record -> Patient History/Lifestyle

Tabbify the various sections (General, Family History, etc.)
Titles should be aligned top, not bottom
(More) link -> Edit
In edit mode:

replace expanding checkbox with jquery tabbed menu.
Column headers should not be positioned ontop of data, instead of next to it

Patient/Client -> Medical Record -> Issues

Standardize the buttons to be like the rest of the system
Tabbify the various issue groupings
Within an issue group, apply standard report format
Make related encounter buttons links, and opens 'Issues and Encounters ...' in the full window, instead of popup
Back button makes no sense most of the time, make it an explicit 'to demographics page' link.

Patient/Client -> Medical Record -> Issues and Encounters

Should be in its own window
Make it follow styling of rest of the site
Add issue should produce a modal
I have no freaking clue what this thing does. Serious usability issue here.
Cancel brings it back to the Issues page.

Patient/Client -> Medical Record -> Immunize

Improve form formatting to match other data entry forms
The data entry form has too many fields to live directly above the list; maybe put the fields into a

modal accessible via 'add a vaccine' button

Apply standard list/report treatment to vaccine list

Patient/Client -> Medical Record -> Documents

Various formatting changes: background, need title

Patient/Client -> Medical Record -> Notes

When in Edit mode, it has a different title, needs to be the same
When there are no notes, indicate there are none, instead of just an empty screen. Invite user to add a note.
(More) link -> Add Note button or something like that.
Consider merging "edit" and "view" modes. Adding a new note would cause a modal to appear with the fields.
When viewing note list, apply standard list/report treatment to notes list, includes changing the filter (which should likely be a dropdown).

Patient/Client -> Medical Record -> Report

General cleanup of the layout so the checkboxes don't seem like they're 'floating'
Individual subsections should have select all/unselect toggles

Fees -> Fee Sheet

Apply standard list/report treatment to fee list
Generally confusing data entry experience. Add explanation as to what selection does, confirmation?

Fees -> Charges

Move entire Prescriptions section out; has nothing to do with charges, which seems to be focused primarily on building up a receipt
Consider collapsing the Coding and ICD9/CPT4/HCPCS/Copay/Other panel into one to remove one panel.

This combined panel needs a new name
When you choose ICD9, CPT4, etc. the search widget + its results are rendered in the same panel; because there are only two panels, there is more real estate for showing search rest
- Same for superbill

Regarding Billing panel:

Edit / view could be combined (edit is so much like the view mode anyway)
Tabbify sections (COPAY, etc.)
[Receipt] should be real button

Fees -> Checkout

Apply standard list/report treatment to list; remove unecessary read-only textfield treatment for amount
TBD

Fees -> Billing

Real buttons
To: defaults to today
Better organize the options

User Interface Refactor - Functional Design

Contents