Application Design:General
From KDE-HIG_Wiki
Spatial coding
General
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. In the window of the application or in a single dialogue box.
Examples for transfer
- The buttons [Back] or [Next] should always have the same location.
- Also the caption of the dialogue has always the same location.
- The last consequence: even if you change the screen resolution - leave the dialogue elements on the same place.
- A new element should never relocate an old one. Do not hide an control element if you think the user will no more need it, set it's status to deactivated.
Positive effects for users
- Less cognitive effort
- Quick visual scan of the controls
- Quick access to controls
Illustration
- (Work in progress - 2005/11/11)
Alignment
General
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.
Examples for transfer
- Example: The left side of the caption of your dialogue, the first words in the text lines an the left side of the first button below the text are lying on one vertical line
- All text entry fields are left- and right-justified. The field description on the left side is left-justified
Positive effects for user
- Quick scan of all information causes less cognitive effort
- A professional look and feel, the user feels save
Illustration
- (Work in progress - 2005/11/11)
Good Gestalt (Shape) – Grouping of dialog elements and use of spacing
General
This is a technical term of the Gestalt-psychology (part of psychology of perception and visual encoding) and includes a lot of other terms and definitions. E.g. ...
- 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 like in the following example.
Take care of this
- Choose the 'right distance' between the displayed objects. Use white space!
- Group the dialog elements to sections
- Take care of the golden section
- Use symmetry
Examples for transfer
- Shift single dialogue boxes from the middle of the screen a little bit up
- Group information with similar content by using frames
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!
Illustration
- (Work in progress - 2005/11/11)
Compatibility, e.g. stimulus-response-compatibility
General
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.
Examples for transfer
- Back and Next buttons are placed correct for western culture group.
Positive effects for user
- Less effort to encode the displayed information
- Feeling safe when using
Illustration
- (Work in progress - 2005/11/11)
