thomas herrmann software - ergonomie bei interaktiven medien 06.04.1999 1 prinzipien gelungenen...
TRANSCRIPT
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