/
Patient Chart: Summary Page vs1.0.0 | design description for developers

Patient Chart: Summary Page vs1.0.0 | design description for developers

Oct 07, 2019
5 min

Purpose

The purpose of this version 1 design is to replicate functionality found in the existing OpenMRS API and reference application.

The designs for each summary card will be redone with time.

 

Files

Key Files

Figma: Patient Chart vs 1.0.0

 

Tables that link the UX elements to the OpenMRS Database

Patient Chart vs1.0 | UX & Database Link

 

Interactive Files

Mobile

Tablet

Desktop

 

 

Images 

Images may be out of date. Please see Figma - and in particular Figma Master / Figma for Developers file for official version.

Mobile

 

Tablet

 

Desktop

Responsive Design

  • As the user expands the Workspace on the right (e.g. hidden, 1/4, 1/2, 3/4, full screen) the panels automatically reshuffle themselves to accommodate the remaining space.

 

Usability Testing

Outline for Patient chart user testing: projects:Patient Chart vs 2

 

UX Info Hierarchy

Note: the mockups show the order of History, Documentation, Profile. When coding the system, please place Documentation first, and History as second.

 

  1. Documentation

    1. Vitals

    2. Growth

    3. Visits

    4. Notes

  2. History

    1. Conditions

    2. Allergies

  3. Profile

    1. Demographics

    2. Identifiers

    3. Contact & Address

    4. Relationships

 

UX Descriptions

Headers

Global Navigation Bar

  • Top left "Home" returns the user to the home section where they are able to access further parts of the app (such as the patients, lists, reports, etc)

  • Top right displays the user's ID login name with a dropdown arrow. Here the user can log-out.

  • Middle displays the OpenMRS logo. In future, perhaps can be configured so that this is the Organization's Logo

  • On mobile and tablet scroll this bar hides

  • Note how the height of this bar is different ono desktop

Patient Banner

  • The patient banner on mobile just has the patient name

  • On tablet / desktop it includes other values.

  • The number of values included in the banner depends on how wide it is, if it doesn't fit, I gets cut off (e.g. on tablet)

  • There is 32 px spacing between each item in the patient banner

  • Note how the height of this bar is different ono desktop

Breadcrumb Navigation Bar

  • Series of breadcrumbs expand as users move deeper into the patient chart tree.

  • On mobile there is no spacing between the text and the breadcrumb arrow divider

  • On tablet / desktop there is 4px spacing on either side of the breadcrumbs arrow divider

  • Notice how the text of the active page is slightly different than other breadcrumbs - both in color and font weight, but also in character spacing (0.5)

  • Design details in OpenMRS Design System / Molecules / Breadcrumbs (link here)

 

Cards

The content area consists of multiple cards & headings. These cards are all Level 1 - meaning the highest level of data summary.

Each card has 16px of padding within it.  No outline.

 

Chart Content Area

History Level 1

  • Shows the complete list of active conditions

Allergies Level 1

  • Shows the complete list of active allergies

 

  • In future other panels will be added to the History section, such as Chronic conditions, or Medications,

 

Vitals Level 1

  • This widget will be re-designed in the near future. It is overly simplified at the moment.

  • Displays the vitals from the last set of recorded vitals.

  • If the date recorded corresponds to the current date the text: "Today" is displayed.

  • If the last set of recorded vitals is from a precious date, the word "Past Date" is displayed instead of the word Today.

  • If a vital is not part of the last bundle of vitals, that field displays "–"

 

Growth Level 1

  • Displays the last recorded values for weight, height

  • BMI is calculated and displayed to one decimal point

  • the date of the most recent data field change is displayed in the date field

Visits Level 1

  • Show last 3 visits

Notes Level 1

  • Shows the notes from the previous two encounters

  • Include the clinician's name after the not name is displayed.

  • Cut off lines that are too long.

 

Demographics Level 1

  • This mirrors the way the ref app currently displays much of this

Identifiers Level 1

  • Display 3

  • List the preferred ID first

Contact & Address Level 1

  • Please mirror the database

  • ? Is a phone number available in the OpenMRS Data Model? The ref app captures one..

Relationships Level 1

  • Please display all recorded relationships here

Questions

Is there a mobile number in the data model?

 

 

 

Related content