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

Prinzipien gelungenen Screen Designs - Überblick - (2) Spezialfälle (Daten-Eingabe & Modifikation; Dateneingabe von Vorlage; Read-Only) statistische Graphik Diskussions-Beispiele

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

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

Konsistenz Übereinstimmung mit den allgemeinen Erfahrungen - Übertragbarkeit Vergleichbarkeit mit bekannten Systemen Begriffe und Metaphern aus dem gewohnten Arbeitsumfeld  Wann sind Abweichungen sinnvoll? Test

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

Visually Pleasing Composition Provide visually pleasing composition with the following qualities: Balance Symmetrie Regularity Predictability Sequentiality Economy Unity Proportion Simplicity Groupings

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

Symmetry Create symmetrie by replicating elements left and right Asymmetrie

Regularity Create screen regularity by establishing standard and consistently spaced horizontal and vertical alignment points Regularity Irregularity

Predictability Create predictability by being consistant and following conventional orders or arrangements Icon Title Bar Menu Bar Control Button Predictability Icon Title Bar Menu Bar Control Button Spontaneity

An welches Element können Sie sich erinnern? 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?

Proportion Create windows and groupings of data or text with aesthetical pleasing proportions Square 1:1 Square root of three 1:1.732 Square-root of two 1:1.414 Double Square 1:2 Golden rectangle 1:1.618

Economy Verwendung möglichst weniger Stile; Display techniques und Farben Unity - Geschlossenheit durch Ähnlichkeit der Elemente und Vermeidung zu großer Leerräume Unity Fragmentation

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

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 - G 3500 K R - G DC VOLTAGE 0 V T - G 0 V R - G AC SIGNATURE 9 K T - R 14 K T - G 629 K R - G BALANCE 39 DB CENTRAL OFFICE VALID LINE CKT DIAL TONE OK

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

Alignment - points Predictability Spontaneity Icon Title Bar Menu Bar Control Button Predictability Icon Title Bar Menu Bar Control Button Spontaneity

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 012222210 0123445443210 023456777654320 1235679+9765321

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

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

Unterscheidbarkeit und Hervorhebung Elemente dürfen sich weder gegenseitig berühren oder Grenzlinien berühren oder überschreiten Hervorhebung die wichtigsten Elemente betonen