Personal tools

User Interface Refactor

From OpenEMR Project Wiki

Revision as of 20:06, 1 April 2014 by Tony McCormick (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Sponsored by OpenEMR Support, LLC, Development effort by Medical Information Integration, LLC and Visolve

  • Project started November 15, 2009
  • Target completion end of December 2009 for first iteration and integration pass
  • Working from Tip with weekly integrations into our base,

Gory, ie: technical details can found at User Interface Refactor - Functional Design

The information below is the basic mission. As the prototyping advances.


Remove the multi-frame aspect of the UI, such that the left-hand nav is replaced by an enhanced top nav userbar, and all screens load at the bottom of the screen in a single iframe (instead of a top and bottom frame).

This cleanup step will greatly simplify the user experience, which now has the added burden of figuring out where load a menu selection (top? bottom?) and to having to resize.

The top-menu userbar will constitute primarily of drop-down, cascading menus, which will be designed to be easily extended (ideally driven by a configuration file of some type); a minimal 'current patient' widget, which when hovered over or clicked produces a DIV popup (not window popup!) with more details; a search widget which when typed in produces a DIV popup with search options (Any, Filter, etc.); and the currently logged in user + log out button.


All non-custom pages will be standardized as much as possible:

  • Sort out what should be buttons, and what should be links; all buttons generated using CSS, and using the same mechanisms site wide
  • General font styling to make every page consistent.
  • Consistent treatment of column/tabular data (such as lists of things and reports)
  • Elimination of heavy-weight javascript popups in favor of lightbox-style in-page modals
  • Reduction of the need for scrolling using tabbed menu treatments
  • Refactor of pages where javascript, php, css, and html are too tightly coupled (for ease of styling)
  • Re-write of select pages as time permits

Examples of Main Demograhics layout


Examples of Report Launch layout



This is work at the root of usability issues in OpenEMR -- there aren't any wizards in to guide users through their typical workflows. To this end, we will:

  • Identify the typical workflows used by most organizations
  • Create a wizard API which must be implemented by pages wishing to participate in the wizard
  • Workflows will make use of breadcrumbs and next/back user paradigm whereever possible
  • Implement a standard set of workflows

This work is dependent on some degree of overall site look/feel refactoring, as well as a general re-tooling of the navigation structure of the site.