ergo online
Arbeit im Büro gesund gestalten

Grundwissen
Fluchtlinien und Abstände

Autor: Wolfgang Schneider

Übersicht

  • Die ergonomische Gestaltung von Masken erfordert optimale visuelle Platzierung und die Ausrichtung aller Elemente an Fluchtlinien.
  • Es sollten möglichst wenige Fluchtlinien vorhanden sein.
  • Abstände zwischen verschiedenen Bildelementen sollten konsistent einer definierten Logik folgen.

In einer ergonomisch gestalteten Bildschirmmaske sind die Bildschirmelemente an wenigen Fluchtlinien ausgerichtet. Dadurch wird die Komplexität für das Auge verringert. Das Auge kann sich bei der Suche nach Informationen an optischen Strukturlinien orientieren und findet dadurch die gewünschte Information leichter.

Fluchtlinien und Alignierung

Für die Gestaltung von Masken ist folgendes besonders wichtig:  
  • Reduzierung von Fluchtlinien und die
  • Alignierung der Bildschirmelemente (Ausrichtung).   

Reduzierung von Fluchtlinien bedeutet Kanten und Seiten von Elementen aneinander auszurichten. Dies erreicht man u.a. in dem man diese aligniert. 

 
Bild 1: Viele Fluchtlinien, wenig Alignierung (modifzierter Screenshot)

Im obigen Beispiel sind unnötig viele vertikale Fluchtlinien vorhanden. Durch Alignierung läßt sich deren Anzahl reduzieren, was eine übersichtlichere und geordneter wirkende Darstellung hervorruft (nächstes Beispiel). Eine ungeordnete Darstellung regt das Auge zu unbewußter Aktivität an und stellt damit eine unnötige Belastung dar.

Bei der vertikalen Alignierung richtet man sich in den meisten Fällen nach der linken Kante der Elemente (linksbündig).

 
Bild 2: Wenige Fluchtlinien, verbesserte Alignierung nach Modifizierung  

Bei den horizontalen Fluchtlinien ist ebenfalls auf Alignierung zu achten. Dabei können die Texte nach ihren Kanten ausgerichtet werden. In Bild 3 ist dies nicht gelungen, in Bild 4 wurde die Anordnung verbessert:
 
Bild 3: Horizontale Fluchtlinien (modifzierter Screenshot) 
 
Bild 4: Horizontale Alignierung (modifzierter Screenshot)

Abstände

Abstände sind wichtig, damit...

  • fachlich zusammengehörige Informationen und Steuerelemente auch visuell als zusammenstehend wahrgenommen werden können und
  • ein einheitliches visuelles Bild beim Betrachter entstehen kann.

Im Prinzip kann eine Vielzahl an horizontalen und vertikalen Abständen zwischen Elementen für das Gesamtbild berücksichtigt werden:

Bild 5: Als Beispiel für wichtige Abstände dient der modifzierte Standard-Drucken-Dialog aus Artikel "Gruppierung von Informationen - Informationsdarstellung und fachliche Gestaltung Teil I".

Kurze Erläuterung der Abstände des Beispiels:

Abstände 1 und 2:

Diese Abstände dienen der Informationsplatzierung innerhalb eines Fensters. Sie sind wichtig, um den Platz in einem Fenster optimal auszunutzen. Ein zu geringer Abstand ist nachteilig.

Abstände 3 bis 5:

Auch diese Abstände dienen der Informationsplatzierung innerhalb eines gruppierenden Elements, hier ein Reiter mit seinen Elementen. Es könnte aber auch eine Group box sein. Ein zu geringer Abstand ist auch hier nicht vorteilhaft.

Abstände 6 bis 8:

Diese Abstände beziehen sich auf Elemente und deren Texte/ Labels. Zwei Dinge sind hier wichtig: 1. Strikte Konsistenz über alle Elemente, und 2. Zugehörigkeit hervorheben. Letzteres besagt, dass der Abstand zwischen zusammengehörigen Elementen etwa maxmimal halb so groß sein sollte, als zu nicht zusammengehörenden Elementen. Hier sollte der Abstand dann mindestens doppelt so groß sein (Faustregel).

Abstand 9:

Dass die Abstände zwischen Gruppen von Informationen oder nicht zusammengehörigen Elementen mindestens doppelt so groß sein sollten, sieht man an diesem Abstand. Die visuelle Gruppenbildung wird hier eindeutig erzeugt.

Abstand 10:

Dieser Abstand bezieht sich auf gruppierende Elemente. Im Prinzip gleich groß wie Abstand 3.

Abstände 11 und 12:

Auch der Abstand von Text innerhalb eines Elements zu seinen Rändern ist wichtig. Auch hier gilt, zu wenig ist nicht gut und Konsistenz ist alles.

Abstände 13, 14 und 17:

Dies sind spezielle Abstände zwischen Schaltflächen bzw. zu anderen Elementen. Eine Vereinheitlichung ist hier interessant vor allem vor dem Aspekt, durch visuelle Abstände Gruppen von Schaltflächen zu erzeugen.

Abstände 15 und 16:

Was für alle anderen Elemente gilt, in denen Text angezeigt wird, gilt auch für Schaltflächen, der Abstand zwischen Text und Rand. Allerdings kann man sich hier auf eine Zentrierung mit variablen Abständen bei einer vertikalen Gruppe von Schaltflächen festlegen, so dass Fluchtlinien reduziert werden.

In dieser Art können natürlich noch viel mehr Abstände berücksichtigt werden. So lässt sich ein einheitliches Bild erzeugen, das hilft, durch Gewöhnung Informationen optisch besser zu erkennen und die Anwendung leichter zu bedienen.

 

HINWEIS:
Dieser Artikel soll beispielhaft darstellen, welche ergonomischen Maßnahmen in einer bestimmten Gestaltungskategorie berücksichtigt werden können. Natürlich gibt es noch viel mehr ergonomische Aspekte! Häufig werden diese aber vom Hersteller oder Arbeitgeber nicht richtig eingestuft oder erkannt. Deswegen ist es unbedingt erforderlich, bei einzelnen ergonomischen Problemen einen Usability-Experten hinzuzuziehen, um die Benutzbarkeit insgesamt einschätzen zu lassen. Zusätzlich sollte auf die Qualität ergonomischer Maßnahmen und auf eine fachliche Ausbildung (z. B. ein Psychologiestudium mit Schwerpunkt Ergonomie) derjenigen Personen geachtet werden, die ergonomisch aktiv sind. So reicht es z. B. nicht aus, als Entwickler ein Seminar zu besuchen oder ein Buch mit ergonomischem Zusatzwissen zu kaufen.
 

Der Servicebereich

Rechtsquellen und Normen

Gesetze und Verordnungen
  • Bildschirmarbeitsverordnung (BildscharV),  Anhang, Nr. 20 - 22

Normen:
  • DIN EN ISO 9241:  Ergonomie der Mensch-System-Interaktion (früher: Ergonomische Anforderungen für Bürotätigkeiten mit Bildschirmgeräten)
    • Teil 12: Informationsdarstellung 
    • Teil 13: Benutzerführung

Literatur

Verwandte Themen

 

Letzte Änderung: 29.4.2010

Logo Ergo Online
© 2016 Beratungsstelle für Technologiefolgen und Qualifizierung (BTQ Kassel)

Rechtsquellen
  • DIN EN ISO 9241


mehr

Verwandte Themen 
Inhaltsverzeichnis
Bezug des Regelwerks