HCI-09-GUI-Entwurf - schmiedecke.info

TFH Berlin
HCI-10 GUI-Entwurf
‣ Grundregeln des GUI-Entwurfs
BHT Berlin
© Ilse Schmiedecke 2014

Die umfassende Sammlung konstruktiver Regeln
TFH Berlin
• Herausgegeben vom der US-
Gesundheitsbehörde "Health and
Human Services (HSS)"
• Erarbeitet zusammen mit der Univ.
Maryland, Ben Shneiderman
• E-Book zur Webseite
http://guidelines.usability.gov,
• dort frei herunterladbar.
• 18 Praxis-Kapitel:
– Design Process and Evaluation
– Optimizing the User Experience
– Accessibility
– The Home Page
– Page Layout
– Navigation
– Scrolling and Paging
– Headings, Titles and Lables
– etc
. (c) schmiedecke 13 HCI-1-Einführung
2

Grundregeln des GUI-Entwurfs
TFH Berlin
• Gleichförmigkeit der Gestaltung
• Sichtbarkeit des Systemzustands
• Affordanz der Bedienelemente
• Nicht-Modalität
• Minimalistisches Design
• Strukturiertheit
– Strukturierung durch visuelle Grundparameter
– Symmetrie, bekannte Strukturen, Gitter und Raster
– Semantische Struktur
• Einheitliche Semiotik
• Offener Text
© schmiedecke 14 MCK 3

Gleichförmigkeit der Gestaltung
TFH Berlin
• Einheitliche "Kultur" der Oberflächen
– Gliederung, Raster und Positionierung
– Farbschema
– Größe und Gestaltung der Bedienelemente
– Größe und Gestaltung der Icons
– Bedeutung der Bedienelemente und Icons
– …
… eigentlich selbstverständlich…
© schmiedecke 14 MCK 4

Gleichförmigkeit – Umsetzung
TFH Berlin
– gleiche Interaktion hat gleiche Bedeutung
• in verschiedenen Programmen und Programmteilen
– einheitliche Feedbackgestaltung, etwa
• Selektion: Highlighting
• Aktivierung: Farbwechsel
• Bewegen: Start und Ziel visualisieren
– In GUI-Anwendungen
• einheitliche Icons / Funktionstasten
• einheitliche Maushandhabung (z.B. Einfach- oder Doppelklick)
• einheitliche Tastenkürzel
( äußere Konsistenz)
– In innovativen Interfaces
• einheitliche Gesten und Bewegungen
• einheitlicher Übergang zwischen realem und virtuellem Objekt
© schmiedecke 14 HCI 5

Sichtbarkeit und Affordanz
TFH Berlin
• Viele Computerspiele beziehen ihren Reiz daraus, dass der Spieler die
richtige Aktion in einer Situation rät.
– ein Handbuch mit Erläuterungen wäre kontraproduktiv ;)
• Anwender wollen nicht spielen und nicht raten!
• Sichtbarkeit:
– der Systemzustand und die verfügbaren Operationen
sind sichtbar (oder systematisch auffindbar)
– nicht verfügbare Operationen sind unsichtbar
– der Navigationszustand ist sichtbar
© schmiedecke 14 HCI 6

Affordanz
TFH Berlin
• Affordanz:
– allein durch die Formsprache wird klar, welches Bedienelement wie zu
benutzen ist.
• Übung:
– Gestalten Sie ein affordantes Steuerelement für Hebebühnen:
– Bewegung in allen 3 Dimensionen!
© schmiedecke 14 MCK 7

Modi-Vermeidung
TFH Berlin
• Ein Modus ist eine Einstellung
– die die Bedeutung von Kommandos verändert
– die explizit eingestellt und (zumeist) explizit aufgehoben wird.
– Erfordert die Umstellung eine andauernde
Betätigung, so spricht man von
semi-modal oder quasi-modal
• Modi "sparen" Bedienelemente
– trendy, aber nicht benutzerfreundlich...
• Modi sind fehlerträchtig!
– bis hin zu Flugzeugabstürzen...
– Quasi-Modi sind besser
– Zur Vermeidung
Status auffällig visualisieren!
Hier wurde die Caps-Lock-Taste
entfernt, um Fehler zu vermeiden
© schmiedecke 14 HCI 8

Einfachheit -
Minimalistisches Design
TFH Berlin
• Je einfacher ein GUI,
• desto
– einladender
– zugänglicher
– verstehbarer
– unmittelbarer
– brauchbarer
wirkt es auf den
Benutzer
© schmiedecke 14 HCI 9

Je einfacher, desto benutzerfreundlicher
TFH Berlin
• Alternative GUIs
für ein PC-Fax
© schmiedecke 14 MCK 10

Minimalistisches Design
TFH Berlin
Minimalismus ist eine Kunstform:
"Minimalismus ist das Streben nach der Essenz der Dinge, nicht
nach dem Aussehen" (M. Vignelli)
© schmiedecke 14 MCK 11

Minimalismus im Grafikdesign
TFH Berlin
• geringe Anzahl an Gestaltungselementen
• wenige, ausgewählte Schriften
• Großzügiger Einsatz von Weißraum
• Wenig Farben, Farbgebung meist Weiß, Schwarz oder
Grautöne, mit einer Signalfarbe als „Eye-Catcher"
• Anordnung der Elemente nach dem Rasterprinzip
• Weitgehender Verzicht auf Fotos
• Verzicht auf Effekte wie Dreidimensionalität oder
Farbverläufe
© schmiedecke 14 MCK 12

Minimalismus in der Interaktion
TFH Berlin
• Optische Gliederung in logische / benennbare Bereiche
• Verzicht auf reine Dekoration
• Reduktion der unmittelbaren Interaktion auf das
Wesentliche
– Auslagerung von erweiterten und Sonderfunktionen
– Multifunktionale Bedienelemente (Caption, Borderaktionen)
• Kontextabhängige Interaktion
– Nur das Machbare ist sichtbar
• Vermeidung von Alternativen
– nur eine Interaktionsalternative ist unmittelbar sichtbar / erkennbar
• Reduktion des Textanteils
– Symbolsprache, wo möglich
– Text abrufbar
© schmiedecke 14 MCK 13

TFH Berlin
Minimalistisch
- RhythmBox
- itunes
- WindowsMediaPlayer
© schmiedecke 14 MCK 14

Flat Design vs. Skeuomorphismus
TFH Berlin
• Skeuomorphismus: Imitation realer Objekte ( Metaphern)
• Minimalismus: Vollständiger Verzicht auf Dekoration
Grafik und Diskussion :
http://www.jansemler.de/interface/skeuomorphismus-oder-minimalistisches-design/
© schmiedecke 14 MCK 15

Einfachheit -
Minimalistisches Design
TFH Berlin
Gegenbeispiel:
• Microsoft Bob
– Versuch, den Desktop benutzerfreundlicher zu gestalten
• Fehler
– zu viel Deko
– Ablenkung statt Führung
– schlechte Affordanz
– Bedienelemente nicht von
Deko zu unterscheiden
© schmiedecke 14 HCI 16

Strukturiertheit:
Strukturierung durch visuelle Grundparameter
Grundparameter:
• Größe, Kontrast, Proportion
– stärkster unmittelbarer Eindruck
– gezielt sinntragend oder –unterstützend einsetzen
• Einsatzziele:
– Unterscheidung / Wichtigket
– Visuelle Schichtung
– Fokus – Interesse (u. evtl. Emotionen) wecken
– Benutzerblick führen
• Überprüfen mit "Blinzeltest" (oder Brille abnehmen )
TFH Berlin
© schmiedecke 14 HCI 17

Einsatz visueller Grundparameter
TFH Berlin
Techniken:
• Schichten bilden:
– Gruppen mit max 7 Elementen bilden (Chunking)
– Gruppen nach Wichtigkeit, Fokus, etc. einstufen
– Visuelle Grundparameter nutzen, um die Einstufung zu visualisieren
Es entstehen Wahrnehmungsschichten
• Unterscheidung schärfen
– z.B. durch weitere Gemeinsamkeit in Gruppen oder gruppenübergreifend
(Farbspektrum)
– ggf. Merkmale hervorheben (z.B. Rechteck – Quadrat)
• Vorder- und Hintergrund abstimmen
– Platzierung
– Farbgebung
– Rahmen, Linien
© schmiedecke 14 HCI 18

Einsatz visueller Grundparameter
TFH Berlin
Schichten:
1. Kopfzeile
Inhalt
(Fußzeile)
2. Text
Grafik
3. Überschrift
Punkteliste
4. Normal
Hervorgehoben
© schmiedecke 14 HCI 19

Unterstützung der Strukturwahrnehmung
TFH Berlin
• Interpretation setzt verstehbare Struktur voraus
• Techniken der visuellen Strukturierung
– Symmetrie
– Ausrichtung (an einer Linie oder einem Gitter)
– Optischer Ausgleich (scheinbar kleinere Formen vergrößern)
– Lücken und Freiräume
– Hintergrund kann die Struktur oder Teilaspekte unterstreichen
© schmiedecke 14 HCI 20

Unterstützung der Strukturwahrnehmung
TFH Berlin
Bekannte Struktur –
wird erkannt
Kommentarbereich anders
farbig
Zweiteilung dominiert
Add-Remove
visuell-intuitiv unterstützt
Hinzugefügte Objekte
auf derselben Seite wie
die Bilddarstellung
des Servers
© schmiedecke 14 HCI 21

Fluchtlinien und Gitter
TFH Berlin
• Strukturelle Klarheit: Zahl der Fluchtlinien klein halten
• Aber Balance ist noch wichtiger!
© schmiedecke 14 MCK 22

Semantische Struktur und Regelmaß
TFH Berlin
• Programme und Daten sind strukturiert
– typischerweise modular oder hierarchsich
– logische Struktur bestimmen
– Visuelle Struktur der logischen Struktur anpassen
– Besonders typisch bei Informationssystemen (Datenbankstruktur)
• Struktur auf das GUI übertragen
– Anordnung in einem Gitter
– Feldgröße sorgsam festlegen:
• Informationsgehalt
• Selektierbarkeit
– Hauptlinien fensterübergreifend wiederholen
© schmiedecke 14 HCI 23

Einheitliche Semiotik
Sprache der Sinnbilder
TFH Berlin
• Icons
• mit Links hinterlegte Bilder
• Navigationssymbole
• Techniken:
– Auswahl der Gestaltungsform
(Strichzeichnung, Farbgrafik, Foto)
– Abstraktion (in mehreren Zyklen)
– Schärfung (Charakteristika hervorheben)
– Vereinheitlichung aller beteiligten Sinnbilder:
Farbgebung, Strickstärke, Gesamteindruck, "Blinzeleindruck"
© schmiedecke 14 HCI 24

Harmonische Farbgestaltung
TFH Berlin
Funktionaler Farbeinsatz:
– Corporate Design
– Sinntragende Farbzuweisungen
– Standard-Deutungen
– Gruppierungen
Dekorativer Farbeinsatz
– Gestaltung von Form und Farbe
– Bezug Hintergrund – Vordergrund
Harmonische Farbgestaltung:
– Nur Teilbereich des Spektrums nutzen
– Kontrast und Sättigung zur Farbunabhängikeit nutzen
(Erkennbarkeit auch bei Umsetzung in Grautöne)
© schmiedecke 14 HCI 25

Offener Text
TFH Berlin
Text hat 2 Funktionen
• Beschriftung
– Öffnung durch Kürze
– soll mit einer Blickspanne erfasst und erkannt werden
• Textblock
– muss zeilenweise gelesen und gedeutet werden
– Öffnung durch Gliederung, Hervorhebung, Kürzung
– Vollständige Anzeige evtl. erst auf Anforderung (mehr...)
• Lesbarkeit
– am Bildschirm serifenlose Schrift, da gerastert dargestellt
(bei hochauflösenden TFT-Bildschirmen nicht mehr so wichtig)
– Hervorhebungen vor allem durch Farbe
– hinreichender Schwarzanteil (bei Positivdarstellung)
– Hinreichende Schriftgröße
© schmiedecke 14 HCI 26

Text
TFH Berlin
Was wird
betrachtet, was
übersprungen
© schmiedecke 14 HCI 27

Text
TFH Berlin
© schmiedecke 14 MCK 28

TFH Berlin
Soviel zu den Designrichtlinien
Wir schauen uns jetzt noch im Einzelnen an, wie
man Information gut erfassbar darstellt.
© schmiedecke 14 MCK 29