Table of Contents

User Interface Layout Best Practices

In order to present the user with a consistent user interface (UI) certain guidelines or best practices should be followed. The guidelines presented here are intended for the back office (manager) applications. Layout for public-facing screens (such as eCommerce) are typically installationcustomer-specific, defined and may will have separate different guidelines.

Navigation

OFBiz navigation is separated into four main categories, and some screens may have others. Navigation links should appear only for targets that the user has permission to access.

...

This section contains links for frequently used business and end-user oriented applications. Links to less frequently used and more technical applications are kept in secondary navigation. The main navigation area should indicate which application is currently selected.

...

This section contains the application's title, plus links to screens functional areas within the application. Application navigation should indicate which screen area is currently selectedactive.

Application

...

Area Tabs

This section contains links to sub tasks within an application task. It typically appears as a tab bar in the Main Content Area. Sub navigation should indicate which sub task or screen is currently selected.

Main Content Area

consists of tabs that split up a single area of an application into multiple screens that all fit together and are generally parameterized with the same parameter or set of parameters (for example the productId for all of the Product and related tabs). The tabs should include only the screens that are a part of the set of screens for the area. Links to screens that are not part of the set of screens for the area should be included in the links below the tab bar.

Guidelines for Main Screen Areas

Main Screen Area

The Main Screen Area is the area inside the decorator that changes for each area of an application. In other words it does not include the masthead or footer, or side-bars if the application has them.

This area of the screen is focused around whatever task or process the user is performingThe main content area contains a particular task. Putting multiple tasks in the main content area is discouraged, because it leads to a complicated and difficult to understand screen. If multiple tasks are used in a single screen, they should be separated clearly separated.

Generally speaking, the main content screen area should contain the following items, going from top to bottom:

1. Optional sub navigation application area tab bar (mentioned above).
2. Page title, using the h1 page-title style. The page title displayed in the main content area should match the title bar title. This makes a strong connection between screens and , bookmarks and browser history.
3. Optional related task screen buttons, in the button bar style (external links outside of a certain set of screens). For instance, a Find screen might have a "Create New" button here.
4. The task main form or other interaction area.

Many screens will fall into a few general categories, and those categories are detailed below.

Create or Add Screens

Generally speaking, create Create or add screens should contain the following items, going from top to bottom:

1. Optional sub navigation application area tab bar.
2. Page title, using the h1 page-title style.
3. Data entry form, including a Save button.

Avoid having unnecessary controls on the screen. For instance, a create screen should not contain a "Create New" button on it - that would be redundant.

In some cases, screens with a create screens form also contain a list of created existing items. That type of screen is discouraged, but if it is used If that pattern is used, the item data entry screen form should be above the existing item list. In addition, the item data entry screen should be collapsible and initially collapsed.

...

If the new item form area is not collapsible then it should be below the list of existing items.

Find Screens

Find

...

Generally speaking, find screens should contain the following items, going from top to bottom:

1. Optional sub navigation application area tab bar.
2. Page title, using the h1 page-title style.
3. Optional related task buttons, in the button bar style. For instance, a "Create New" button.
4. Optional Search Options data entry form. The form should be collapsible, and collapsed when a find has been done and there are results for it.
5. List of found items - the search results.

Using the FindScreenDecorator is recommended - it will insure facilitate correct layout and it will reduce reduces screen widget code.

The initial display of search results is controlled by the widget.defaultNoConditionFind property in the widget.properties file. That setting should be respected and not overridden in screen widget codeIf a specific behavior is desired regardless of that setting the noConditionFind should be set in the screen actions.

Terminology

New, Add

When something new is being created, UI artifacts (menu items, page titles) should be identified with the term New. When something is being added to something else, UI artifacts should be identified with the term Add. There is a subtle difference between the two terms, and choosing the correct one is important. An example:

You can create a new Party, and you can create a new Party Role Type. To connect the two, the terms used need additional information: New Party Role or Add Party Role to Party. A developer might prefer the first term - because a new PartyRole value is being created, and a user might prefer the second term - because a role is being added to a party.