Screen Layout

Screen | Screen Space and Screen Layout | Global vs. Local Structure | Placement of Screen Elements | Grouping of Screen Elements

 

Screen

Full screen

Applications should be run full screen.

Backgrounds

  • Bright background colors (no black!) hide fingerprints and reduce glare
  • Dithering or other patterned backgrounds help the eye focus on the screen image instead of reflections, even in areas where there are no icons or menu choices

Handedness

As many users are left-handed, the screen layout should be switchable between a version for right-handed users and a version for left-handed users.

Screen Reversal

The screen reversal should affect mainly the large building blocks of the screen layout. Whether the controls themselves should also be mirrored, depends on how much interaction is adversely affected by the standard layout of the control. For instance, it depends on, whether a standard control is obscured, if operated with the left hand.

 

Screen Space and Screen Layout

Touchscreens usually have a fixed size of 640*480 pixels or 800*600 pixels. As buttons have to have a minimum size and distance (see "Buttons") for secure finger operation, screen space has to be managed in a different way than on usual screens.

We propose the following procedure for the screen layout:

  1. Use a grid that divides the screen into a fixed number of cells that have a constant size (see below).
  2. In a second step identify functional groups of elements that are placed close together and organize them into functional areas. Such areas can serve for
    • data display
    • data input or selection
    • grouping of function keys (toolbars)
    • numerical or text keypad
    • status display

 

Global vs. Local Structure

Finger-Operated

  • Global structure is most important.
  • Use a simple local structure (not too detailed).

Stylus-Operated

  • Global structure is important.
  • Local structure may be more detailed, if there are no high demands on speed and accuracy.

 

Placement of Screen Elements

When you divide the screen in functional areas and place elements on the screen, observe the principle of location constancy:

  • Keep functional areas stable, e.g. use fixed areas for data display, input, buttons (especially keep the navigation buttons constant), and status display.
  • Try to follow this principle not only for functional areas, but also for the actual GUI elements.
  • However, as screen space usually is limited, you may exchange GUI elements within the fixed functional areas.

 

Grouping of Screen Elements

Use the following attributes for grouping screen elements:

  • Arrangement (flight lines, Gestalt laws (proximity, similarity, ...), white space)
  • Frames
  • Shape
  • Foreground color, background color/texture
  • Text size, text attributes

Use attributes redundantly for easier identification of groups.

Observe the Gestalt laws (proximity, similarity, ...) when you arrange and group screen elements.

Do not base grouping on color alone. Use at least enough brightness contrast, so that color blind users can distinguish the colors, too.

 

top top

Source:  Interaction Design Guide for Touchscreen Applications