Prinzipien gelungenen Screen Designs - Überblick - (1)

Präsentation zum Thema: "Prinzipien gelungenen Screen Designs - Überblick - (1)"—  Präsentation transkript:

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

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

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

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

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

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

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

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

9 Symmetry Create symmetrie by replicating elements left and right
Asymmetrie

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

11 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

12 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?

13 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

14 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

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

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 K * 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

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

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

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

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

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

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