Saving Space and Reducing Complexity

Why Mini? | How to Make an iView "Mini" and Less Complex

Why "Mini"?

An iView is "Mini"

An iView should indeed be "mini", that is, as small as possible. Apart from size this requirement has implications for functionality, screen design and effect on other iViews as well.

Being "Mini" has positive side effects:

Fewer screen elements and fewer decorative elements reduce the complexity of the screen and help users to find relevant information faster - provided that the iView indeed offers relevant information.
Fewer screen elements allow the iView to be smaller and thus leave more room for other iViews.

See How to Make iViews "Mini" and Less Complex for tips on saving space below.

Don't Be "Selfish" - Your iView Is Not Alone

iViews that occupy half or more of the portal page do not deserve the attribute "mini." iViews have to be developed with the requirement in mind that they reside together with other iViews on a portal page. An iView that takes over most of a portal page shows "selfish" behavior - it does not take into account that users need and want to see other information as well.

How to Make iViews "Mini" and Less Complex

Here are some hints on how you can reduce screen complexity and save screen space.

Reduce Functionality

iViews should only contain basic functionality that can be evoked with quite a few pushbuttons.

Reduce Number of Screen Elements

Reduce the number of fields and table columns to the absolute necessary. Also use mechanism like filters (shuffler) to reduce the number of table rows (see Reduce Data Complexity below).

Reduce Data Complexity

Reduce the number of fields and table elements (columns, rows)
Example: Use filters (shuffler) to reduce the number of table rows
Reduce hierarchies to 2-3 levels. This makes even more sense if the number of tree elements is reduced, e.g. by filters
Use alternative presentations like charts or graphics (see below) instead of tables

Avoid Unnecessary Framing of Screen Elements

Avoid group boxes:

Use headers or text labels to describe field groups.
Do not put tables or tabstrips inside group boxes.
Do not nest group boxes.
Use white space or a vertical separator line instead to group items.

Avoid tabstrips:

Use lists of hypertext links, dropdown list boxes or buttons instead for selecting views (for more information see Selecting Views)

Avoid trees:

Use tables in conjunction with mechanisms for view selection (dropdown list box, tabstrip) or filtering (shuffler).

More Ways to Save Space...

Put labels above entry fields.
Concatenate labels with read-only fields to one label or omit the label if the meaning of the field is evident.
Avoid unnecessary white space (but use it wisely for item grouping - rely on the Law of Proximity)

Note: When rearranging fields take care that accessibility issues are observed.

Example

Figure 1: Labels above fields, concatenated labels and fields or no labels at all can help to save screen space.

Use Graphics instead of Texts and Tables

This suggestion builds on human's ability to interpret images faster than text; graphics also may save space compared to equivalent text information, if used properly.

If Using Graphics Show the Essential Information Only

Graphics may show irrelevant information, may show too much detail, or may be too large.

Too Large Because of Irrelevant Information

Graphics may be too large, because they show too much of the surrounding or context of the relevant information.

Example: If you want to show the sales in region Europe, do not show a world map; if sales in Germany are of interest, do not show a map of Europe; if sales in Bavaria are relevant, do not show a map of Germany.

Example: Photos, drawings or diagrams can often be cropped to a section without losing information; as a positive side effect, the section shown can have a larger magnification, thus showing more details.

Too Large Because of Too Much Detail

A drawing, diagram or photo needs a certain size to show details. Often, however, the details are irrelevant, and a smaller, more schematic graphic would fulfill the purpose much better.

Example: Use simple schematic drawings instead of photos or detailed graphics; e.g. a map of Germany can be very crude, if the purpose of the map is only to indicate "Germany".

Simply Too Large...

Often images are simply too large, because nobody cares about image size...

top