Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 1

Prinzipien gelungenen Screen Designs- Überblick - (1)

• Nutzererwartungen und Basistest• Organizing Screen Elements Clearly and Meaningfully

– Consistency, Upper-left, Navigation

– Visually Pleasing Composition(Balance, ..., Gruppieren)

• Amount of information• Unterscheidbarkeit und Hervorhebung• Tiefeneindruck erzeugen• Information einfach und sinnvoll darstellen

– Schriftarten

– Captions und Anordnung

• Headings• Keying Procedures

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 2

• Spezialfälle(Daten-Eingabe & Modifikation; Dateneingabe von Vorlage; Read-Only)

• statistische Graphik• Diskussions-Beispiele

Prinzipien gelungenen Screen Designs- Überblick - (2)

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 3

Was Screen users wollen

• Ordentliches, sauberes Screen ohne Durcheinander• Man sieht klar, um was es geht und was zu tun ist• Die Information ist dort plaziert, wo man sie erwartet• Man sieht klar, was zusammengehört• Einfache Sprache• Es ist einfach zu erkennen, was man mit dem System machen kann• Man erkennt deutlich, welche Aktionen die Daten dauerhaft ändern

Test: Können alle Elemente des Screen durch grafische Merkmale erkannt werden, ohne Text zu lesen

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 4

Nur sinnvolle Informationen

Each screen element...• Every control• every icon• each color• alle emphasis• the screen organization• all screen animation• each message• all forms of feedback

must...• Have meaning to screen users• serve a purpose in performing tasks

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 5

Konsistenz

• Übereinstimmung mit den allgemeinen Erfahrungen - Übertragbarkeit

• Vergleichbarkeit mit bekannten Systemen• Begriffe und Metaphern aus dem gewohnten Arbeitsumfeld

Wann sind Abweichungen sinnvoll?

Test

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 6

Navigation

• Oben-links geht es los!• Navigations - Unterstützung durch

Gruppierung, Anordnung, Begrenzungslinien• Hervorhebung und Abfolgen berücksichtigen die Unterscheidung

zwischen:Wichtig, Sekundär, Unwichtig

• Sinvolle Reihenfolge für TAB-unterstützendes Navigieren

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 7

Visually Pleasing Composition

• Provide visually pleasing composition with the following qualities:– Balance

– Symmetrie

– Regularity

– Predictability

– Sequentiality

– Economy

– Unity

– Proportion

– Simplicity

– Groupings

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 8

Balance

• Create screen balance by providing an equal weight of screen elements, left and right, top and bottom

Balance Instability

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 9

Symmetry

• Create symmetrie by replicating elements left and right

Symmetrie Asymmetrie

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 10

Regularity• Create screen regularity by establishing standard and consistently

spaced horizontal and vertical alignment points

Regularity

Irregularity

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 11

Predictability• Create predictability by being consistant and following conventional

orders or arrangements

Icon Title Bar Icon Icon

Menu Bar

Control

Control

Control

Control

Control

Control

Control

Control

Control

Button ButtonButton

Predictability

Icon

Title Bar

Icon

Icon

Menu Bar

Control

Control

Control Control

Control

Control

Button

Button

Button

Spontaneity

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 12

Sequentiality

• Provide sequentiality by arranging elements to guide the eye through the screen in an obvious, logical, rhythmic, and efficient manner.

• The eye tends to be attracted to:– A brighter element before one less brigth

– Isolated elements before elements in a group

– Graphics before text

– Color before black and white

– Highly saturated colors before those less saturated

– Dark areas before light areas

– A big element before a small one

– An unusual shape before a usual one

An welches Element können Sie sich erinnern?

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 13

Proportion

• Create windows and groupings of data or text with aesthetical pleasing proportions

Square1:1

Square root of three1:1.732

Double Square1:2

Square-root of two1:1.414

Golden rectangle1:1.618

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 14

Economy• Verwendung möglichst weniger Stile; Display techniques und Farben

• Unity - Geschlossenheitdurch Ähnlichkeit der Elemente und Vermeidung zu großer Leerräume

Unity Fragmentation

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 15

Gruppierung• Provide functional groupings of associated elements• Create spatial groupings as closely as possible to five degrees of

visual angle (1.67 inches in diameter or about six to seven lines of text, 12 to 14 characters in width)

• Evenly space controls within a grouping, allowing 1/8 to 1/4 inch between each

• Gesetz der Nähe, Geschlossenheit und Gleichartigkeit konsistent kombinieren

• Incorporate line borders for:– Focusing attention on groupings or related information

– Guiding the eye through a screen

• Do not exceed three line thicknesses or two line styles on a screen, however

– use a standard hierarchy for line presentation

• Create lines consistent in height and length• Use rules and borders sparingly

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 16

Gruppenzahl berechnen

• Durchschnittsabstand der Buchstaben berechnen (Wert „1“ für direkt benachbarte, „2“ für übereinandergestellte)

• Alle Buchstaben, die paarweise nicht weiter als der doppelte Durchschnittsabstand entfernt sind, bilden eine Gruppe

************************* ** TIP GROUND 14K ** *************************

DC RESISTANCE

3500 K T - R 14 K T - G3500 K R - G

BALANCE

39 DB

DC VOLTAGE

0 V T - G0 V R - G

AC SIGNATURE

9 K T - R 14 K T - G629 K R - G

CENTRAL OFFICE

VALID LINE CKTDIAL TONE OK

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 17

Einfachheit vs. Komplexität

• Maßeinheit:– Zahl der Elemente

– horizontal alignment points

– vertical alignment points

Ziel: Reduzierung zwecks Verkürzung der durchschnittlichen Zeit für Suchaufgaben

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 18

Alignment - points

Icon Title Bar Icon Icon

Menu Bar

Control

Control

Control

Control

Control

Control

Control

Control

Control

Button ButtonButton

Predictability

Icon

Title Bar

Icon

Icon

Menu Bar

Control

Control

Control Control

Control

Control

Button

Button

Button

Spontaneity

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 19

Amount of Information

• Nicht mehr als 30% des Screens ausfüllen• lokale Dichte reduzieren

• Dichte pro Zeichen (ZDi):Zdi = aller Gewichte der Matrix, die durch ein Nachbarzeichen belegt sind

• durchschnittliche lokale Dichte des Screen in Prozent bei n Zeichen:= Zdi

n * 2,8

01222221001234454432100234567776543201235679+97653210234567776543200123445443210012222210

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 20

Sinnvolles Ordnen

• Provide an ordering of elements that:– Is logical and sequential

– Is rhythmic, guiding a person‘s eye through the display

– Encourages natural movement sequences

– Minimizes cursor and eye movement distances

• Locate the most important and most frequently used elements or controls to the top left

• Maintain a top-to-bottom, left-to-right flow• When groups of related information must be broken and displayed

on seperate screens, provide breaks at logical or natural points in the information flow

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 21

Ordnungskriterien

• Konvention• Reihenfolge der Nutzung• Häufigkeit• Funktion• Wichtigkeit• allgemein zu speziell

Thomas Herrmann

Software - Ergonomie bei interaktiven Medien

06.04.1999 22

Unterscheidbarkeit und Hervorhebung

• Elemente dürfen sich weder gegenseitig berühren oder Grenzlinien berühren oder überschreiten

• Hervorhebungdie wichtigsten Elemente betonen