Usability Hands-on Seminar WS06-07/Designprinzipien

aus openSUSE, der freien Wissensdatenbank

Allgemeine Gestaltungsprinzipien - Visual Design

Good Gestalt (Shape)

Work with grouping the elements and use of spacing. This is a technical term of the Gestalt-psychology (part of psychology of perception and visual encoding) enfolds a lot of other terms and definitions.

Something like this

• The law of nearness: Objects standing close together belong to one unit.
• The law of symmetry: Symmetric objects and forms have a better Gestalt (shape) than a-symmetric.
• The law of similarity: Similar objects belong to one unit, even if they are spread among others.

Use white space to create "breathing room". The dialog will be easier to understand and and more comfortable to view. On the other hand, try to avoid gaps.

Siehe auch Allgemeine Psychologie I (Nähe, Geschlossenheit, guter Verlauf, ...) und ggf. goldener Schnitt, z.B. Gestaltgesetze nach Max Wertheimer

• Positive effects for user
  • Less effort to encode the display. A good Gestalt (shape) can analyzed in less time. This is not learned but natural
  • Important under an other view: A good Gestalt simulates professionalism! The user feels safe!

Spatial coding

The memory of the user referring to the location of the displayed information is (normally) very good. If he uses a program often he can point onto the virtual position of e.g. -Exit- very accurate without seeing it. This part of our memory runs automatically and uses less cognitive resources. If -Exit- will appear at an unexpected location a visual search process will be activated. And this will demand much more cognitive functions.

• Take care of this
  • Control elements are always at the same place (on the screen or in a single dialogue box)

• Positive effect for user
  • Less cognitive effort
  • Quick visual scan of the controls
  • Quick access to controls

Alignment

Alignment means to arrange the different elements on the screen on a line. The overall picture is well cheerful and clear.

• Take care of this
  • You can draw only a few alignment lines on a clear display

• Positive effects for user
  • Quick scan of all information causes less cognitive effort
  • A professional look and feel, the user feels save

Compatibility, e.g. stimulus-response-compatibility

Use arrangement and flow. It is clear to the European/American people, the Next button is placed at the right side the Back button is placed at the left side. So we learned to read a book and turn over the pages. But this must not be the fact for Japanese or Hebrew people.

• Take care of this
  • Be aware of the learned action modes. The user starts reading a dialogue in the upper left corner and is reading from left to the right side.

• Positive effects for user
  • Less effort to encode the displayed information
  • Feeling safe when using

Avoiding information overflow

In style guides often you can read 'the user can store 7 +/- 2 items in short term memory', so put the maximum of 7 or 9 items into a menu. This derivation is wrong. 'Under pressure' (= at work and not in the laboratory) we have the capacity to store 2-3 items in short term memory.

• Take care of this
  • Be aware of the limited short term capacity of the user.
  • Divide the workflow into well separated contents.
  • Create good defaults the user can edit if he want to.

• Positive effects for user
  • Less effort to encode the displayed information.
  • No feeling of excessive demand.

Use emphasis and standard visual affordance

(German: Optische Marker, Hervorhebungen)

Guide the user through the dialog. Take his attention to the dialog elements that need to be used next.

What are visual affordance elements?:

• Standards in GUI environments
• Raised items can be clicked
• Items that become highlighted when the mouse cursor passes over them can be clicked
• Recessed items cannot be clicked
• Items with a white background and a flashing vertical bar can be edited
• Items with a gray background cannot be edited
• Gray items are disabled
• Raised lines can be dragged
• Raised throttles can be drawn