TFH Berlin MCK 10 Interaktionsdesign Grundregeln des GUIEntwurfs

TFH Berlin MCK - 10 - Interaktionsdesign Ø Grundregeln des GUI-Entwurfs Ø Anordnung von Bedienelementen BHT Berlin © Ilse Schmiedecke 2010

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 – Unterstützung der Strukturwahrnehmung – Semantische Struktur und Regelmaß § Einheitliche Semiotik § Offener Text © schmiedecke 10 MCK 2

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 § Affordanz: – allein durch die Formsprache wird klar, welches Bedienelement wie zu benutzen ist. © schmiedecke 08 HCI 3

Modi-Vermeidung TFH Berlin § Ein Modus ist eine Einstellung – 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! © schmiedecke 08 Hier wurde die Caps-Lock-Taste entfernt, um Fehler zu vermeiden HCI 4

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

Einfachheit - Minimalistisches Design TFH Berlin Techniken § Reduktion – Beschränkung auf das Wesentliche – Gestaltung, nicht Dekoration § Ordnung – Regelmäßige, erkannbare Anordnungsstruktur – möglichst übergreifend gültig § Wirksamkeit der Bedienelemente – Wo möglich, mehrere Aktionen zu einem übergeordneten Bedienelement zusammen fassen – Beispiel: Kopfbalken (Caption) des Fensters • Titel, Fensteroperationen, Handgriff zum Verschieben © schmiedecke 08 HCI 6

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 08 HCI 7

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

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 08 HCI 9

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

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 08 HCI 11

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

Fluchtlinien und Gitter TFH Berlin § Zahl der Fluchtlinien klein halten strukturelle Klarheit © schmiedecke 10 MCK 13

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 08 HCI 14

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 08 HCI 15

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 08 HCI 16

Text TFH Berlin Was wird betrachtet, was übersprungen? © schmiedecke 08 HCI 17

Anordnung der Bedienelemente (auch Controls oder Widgets) TFH Berlin § Grundsatz der Strukturiertheit § Grundregeln aus ISO 9241 -12: – – – – Klarheit Unterscheidbarkeit Kompaktheit Konsistenz Erkennbarkeit Lesbarkeit Verständlichkeit § Einige spezielle Regeln für bestimmte Bedienelemente: © schmiedecke 10 MCK 18

Radiobuttons und Checkboxen TFH Berlin § Text hinter dem Element – kein Hyperlink! § Anordnung vertikal – ggf. als Tabelle § Vorauswahl – Radiobutton: immer – Checkbox: wo sinnvoll © schmiedecke 10 MCK 19

Dropdownlisten und Auswahllisten TFH Berlin § Anzahl der Elemente – Drop-down-Liste: max 15 – Auswahlliste: scrollbar, flexibel § Vorauswahl – entweder Vorauswahl – oder Eingabefeld (v. a. Auswahllisten) § Mehrfachauswahl – vermeiden! § Verwendung – Drop-down eher Befehle oder Navigation – Auswahlliste eher Datenauswahl © schmiedecke 10 MCK 20

Eingabefelder TFH Berlin § § Linksbündig Beschriftung Linksbündig über dem Feld lang genug! mehrzeilige Eingabe -felder immer groß genug! © schmiedecke 10 MCK 21

Knöpfe ("Schaltflächen") TFH Berlin § Möglichst vorbelegt § wiederkehrende Knöpfe an gleichbleibender Position § Feedback der Interaktion "drücken" § Wechselknöpfe (Toggle Buttons) eindeutig beschriften! © schmiedecke 10 MCK 22

Strukturblöcke TFH Berlin § § Inhaltlich zusammengehöriger Bereich einer GUI Wiederkehrende Hauptstrukturierung Optisch begrenzt und hervorgehoben innere Struktur s. GUI vgl. "Portlets" © schmiedecke 10 MCK 23