UI Inventory

A user interface (UI) inventory is a method of identifying and collecting variations of user interface layouts and control groupings. From the collected patterns we hope to inform an effective standardization of design elements and language. It's important to note that we are comparing the elements that make up product features, not the features' specific functionality. To learn more about this technique, see this article by Brad Frost.

This UI Inventory focuses on all OpenLMIS implementations from 3.0 Beta, V2, eLMIS, VIMS, SELV, and includes examples from each system. This report doesn't look at the overall UI-consistency between versions and modules — only examples are pulled to denote different patterns. From observations while compiling the report, inconsistency is more common between modules within a single version rather than between OpenLMIS versions. 

Sections Covered

Forms

These are simple data entry and configuration forms. Below are the main areas where variation occurs in OpenLMIS.

Required Field Labels

Required Fields are LabeledAll Fields are Required
Any form field must have a required labelIf all form fields are required, then no label is needed

'


Disabled Action Buttons

Button EnabledButton Disabled
When an action button is enabled it allows a user to click the button and then receive error messages afterwards. This is most similar to how a traditional web forms works.

Only when all required information is entered is a user allowed to press an action button. This technique was popularized with AngularJS.

Its worth noting that for longer forms, this is considered bad for usability.


Error Message Placement

On FieldNear Form ActionAt Top Element
Error messages are left on the actual form field elementError messages are shown near the bottom towards where the form action was made.UI messages are illustrated at the top of a form element.

Progressively Displayed Forms

Form Fields DisabledForm Fields Hidden
In some forms, all form fields are displayed when the form is display — but additional options are disabled until a data state enables them

Some form fields are hidden until a data state makes these items displayed on the screen

Add equipment inventory

Equipment - Add Equipment Page

Lists and Tables

In OpenLMIS a common convention is to represent most items as tabular data, even though the table might consist of one primary column, and a column for supporting actions. Since these representations are confounded, they are being analyzed together.

Lists vs Tables

List Formatted as TableTable as List



Titles

Subheading within blockHeading disconnectedActionable



VIMS - IVD Form

Sub-List-Headings

GreenGray


VIMS - Product Configuration

Table Width

Sized to Fit DataSized to Fit ScreenHorizontal Scroll



Convert to Order Screen


Click-able Areas

Full Area ClickableSingle LinkActions Column



Approve Requisitions

VIMS - Active Monthly Reporting

eLMIS Package Information


Zebra Stripes

No Zebra StripesZebra Stripes



Empty States

In TableReplaces Table



Editing Lists and Tables

Adding New Entries

Seperate PageInline




Displaying Errors







VIMS - Vaccine


Searching and Filtering Lists

Search Boxes

Search area implicitSearch Area Raised


Horizontal or Vertical

HorizontalVertical


3.0 Beta - Init Rnr


Submit Button vs Implicit






OpenLMIS: the global initiative for powerful LMIS software