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 Labeled	All Fields are Required

Required Fields are Labeled	All Fields are Required
Any form field must have a required label	If all form fields are required, then no label is needed
'	Open

Disabled Action Buttons

Button Enabled	Button Disabled

Button Enabled	Button 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.
Open

Error Message Placement

On Field	Near Form Action	At Top Element

On Field	Near Form Action	At Top Element
Error messages are left on the actual form field element	Error messages are shown near the bottom towards where the form action was made.	UI messages are illustrated at the top of a form element.
Open	Open

Progressively Displayed Forms

Form Fields Disabled	Form Fields Hidden

Form Fields Disabled	Form 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
Open Add equipment inventory	Open 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 Table	Table as List

List Formatted as Table	Table as List
Open	Open

Titles

Subheading within block	Heading disconnected	Actionable

Subheading within block	Heading disconnected	Actionable
Open VIMS - IVD Form

Sub-List-Headings

Green	Gray

Green	Gray
	Open VIMS - Product Configuration

Table Width

Sized to Fit Data	Sized to Fit Screen	Horizontal Scroll

Sized to Fit Data	Sized to Fit Screen	Horizontal Scroll
Open	Open Convert to Order Screen	Open

Click-able Areas

Full Area Clickable	Single Link	Actions Column

Full Area Clickable	Single Link	Actions Column
Open Approve Requisitions	Open VIMS - Active Monthly Reporting	eLMIS Package Information

Zebra Stripes

Empty States

In Table	Replaces Table

In Table	Replaces Table
Open	Open

Editing Lists and Tables

Adding New Entries

Seperate Page	Inline

Seperate Page	Inline
Open Open	Open Open

Displaying Errors

VIMS - Vaccine		Open

Searching and Filtering Lists

Search Boxes

Horizontal or Vertical

Horizontal	Vertical

Horizontal	Vertical
Open 3.0 Beta - Init Rnr	Open

Submit Button vs Implicit

Open	Open