User Interface Refactor - Functional Design

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

1. Alternating row color text, when appropriate
2. Visible column borders
3. Consistent header/data alignment
4. Empty columns have '--' or 'na' which is barely visible
5. Will appear inside the frame, instead of popup or other tab/window
6. If columns are sortable, a ascending/descending sortkey will be visible; also verbiage indicating sortability
7. When there is no data, a message indicates that there is no data
8. [Refresh] -> [Apply] (renamed button)
9. Shrink report title
10. Add clinic information headers, selection/range info, date run and page counts to all reports.
11. 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)

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

• Convert heavyweight popups into jquery modals wherever possible

1. use modal ajax pattern from here: http://fancybox.net
2. 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:

1. Search page will have no required fields; New will have required fields
2. Search will avoid having the 'Add' buttons on certain fields; these will only be rendered when entering New patient
3. 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:

1. text: "Page x of y"
2. 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

1. when clicked, the label turns back into a dropdown
2. 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

1. 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

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

• List Prescriptions page:

1. links -> buttons; positioned at bottom of list
2. add select all/deselect all; link to bottom of list if list > 5 items
3. 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:

1. replace expanding checkbox with jquery tabbed menu.
2. 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.

1. This combined panel needs a new name
2. 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:

1. Edit / view could be combined (edit is so much like the view mode anyway)
2. Tabbify sections (COPAY, etc.)
3. [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