Uint

Front 1

Externes Design
vs
Internes Design

Back 1

Benutzersicht: Look and feel

Entwicklersicht: Implementierung, Architektur, Codeaufteilung, Patterns, etc.

Front 2

Conceptual Model
vs
Action & Presentation Language

Back 2

Vorstellung im Kopf des Benutzers

das sichtbare UI

Front 3

ISO 9241-11 und Quesenbery
(Usability Kriterien)

Back 3

Effektivität: Benutzer können ihre Ziele erreichen
Effizienz: Benutzer erreichen Ziele mit angemessenem Aufwand
Zufriedenheit: Benutzer werden in ihrer Zufriedenheit nicht beeinträchtigt

Front 4

UI Design Prozess (Usability Kompakt)

Back 4

Analyse
Modellieren
Spezifikation
Evaluation
Realisierung

Front 5

UI Design Prozess (Usability Kompakt)
--> Analyse

Back 5

Aktivität: Benutzer beobachten
Aktivität: Workshops

Front 6

UI Design Prozess (Usability Kompakt)
--> Modellieren

Back 6

Ergebnis: Personas
Ergebnis: Szenarios
Ergebnis: Low-FiGUI Design

Front 7

UI Design Prozess (Usability Kompakt)
--> Spezifikation

Back 7

Ergebnis: UseCases, Feature List
Ergebnis: Requirements Document
Ergebnis: Detail External Design

Front 8

UI Design Prozess (Usability Kompakt)
--> Realisierung

Back 8

Ergebnis: Internal Design

Front 9

component listener

Back 9

reagiert auf Änderung der Grösse, Position oder Sichtbarkeit der Komponente

Front 10

focus listener

Back 10

reagiert wenn die Komponente den Fokus bekommt oder verliert

Front 11

key listener

Back 11

reagiert wenn ein key input kommt (aber nur falls die Komponente den Fokus hat)

Front 12

mouse listener

Back 12

reagiert auf Mausklicks, Cursor der sich über der Komponente befindet oder sie verlässt

Front 13

mouse-motion listener

Back 13

reagiert sobald der Cursor innerhalb der Komponente die Position ändert

Front 14

mouse-wheel listener

Back 14

reagiert sobald das mouse-wheel gedreht wird

Front 15

hierarchy listener

Back 15

Listens for changes to a component's containment hierarchy of changed events.

Front 16

hierarchy bounds listener

Back 16

Listens for changes to a component's containment hierarchy of moved and resized events.

Front 17

Layout-Regeln nach Galitz

Back 17

Balance: Unausgewogen / Ausgewogen (z.B linke Spalte höher als rechte)
Symmetrie: Unsymmetrisch / Symmetrisch
Regelmässig: Unregelmässig / Regelmässig (Durcheinander vs. Geordnet)
Vorhersehbar: Unvorhersehbar / Vorsehbar
Sequenzialität: das Auge führen (oben

Front 18

UI-Controls für Auswahl-Aufgaben
--> Einzelauswahl

Back 18

Bestes: Radio Buttons
bei wenig Platz: DropDown/Pop-Up List Box

Front 19

UI-Controls für Auswahl-Aufgaben
--> Mehrfachauswahl

Back 19

Bestes: Checkboxen
bei wenig Platz: Multiple-Selection List

Front 20

UI-Controls für Auswahl-Aufgaben
--> Offene Einfachwahl

Back 20

Bestes: Radio Buttons mit "Andere"
bei wenig Platz: Combobox

Front 21

UI-Controls für Auswahl-Aufgaben
--> Wert in einem Bereich setzen

Back 21

Bestes: Spin Button
bei wenig Platz: Textbox

Front 22

3 Schichten Modell

Back 22

Presentation: User Interface
Domain: Model
Persistence: Datenhaltung

Front 23

Nielsen Regeln zur Heuristischen Evaluation

Back 23

Sichtbarkeit des Systemstatus
Enger Bezug zw. System und realer Welt
Nutzerkontrolle und Freiheit
Konsistenz & Konformität mit Standards
Fehler-Vorbeugung
Sichtbarkeit statt sich-erinnern-müssen
Flexibilität und Nutzungseffizienz
Ästhetik und minimalistischer Aufbau
Nutzern helfen Fehler zu bemerken und zu beheben
Hilfe und Dokumentation

Front 24

Nielsen Kriterien
--> Sichtbarkeit des System-Status

Back 24

In welchem Bereich befinden wir uns?
Wait Cursor, Button/Menu enable/disable, Progressbar, CRUD

Front 25

Nielsen Kriterien
--> Enger Bezug zwischen System und realer Welt

Back 25

Entwickler- und Benutzer-Vokabular unterschiedlich

Front 26

Nielsen Kriterien
--> Nutzerkontrolle und Freiheit

Back 26

Sichtbare Informationen können auch (am Ort) verändert werden, Abbrechen (auch mit „falschen“ Daten), Speichern (auch mit „falschen“ Daten?), Undo, keine überstrenge Validierung
(zB nur Postleitzahlen mit 4 Zahlen zulassen)

Front 27

Nielsen Kriterien
--> Konsistenz & Konformität mit Standards

Back 27

Operationen und Informationen verschwinden nicht (resize), Sinnlose Operationen disabled, Formate vorgeben (Field Help), Selektieren statt Eingeben (z.B. Datum), aber Achtung bei sehr langen Listen

Front 28

Nielsen Kriterien
--> Sichtbarkeit als Sich-erinnern-Müssen

Back 28

Menüs statt Kommandos, Neutippen von Informationen verhindern

Front 29

Nielsen Kriterien
--> Flexibilität und Nutzungseffizienz

Back 29

Mauswege minimieren mit Menüs, Shortcuts, Buttons, Popups, keine unnötige Navigation (z.B. Suchanfrage und Resultat in verschiedenen Fenstern)

Front 30

Nielsen Kriterien
--> Ästhetik und minimalistischer Aufbau

Back 30

Aufgabenorientiert Informationen zeigen/verteilen (nicht alles im gleichen Screen), Benutzern beim Ordnung halten helfen (nicht gleiches Objekt mehrfach)

Front 31

Nielsen Kriterien
--> Nutzern helfen, Fehler zu bemerken, zu diagnostizieren und zu beheben

Back 31

Undo statt Dialoge, Validierung mit Field Help (real time validierung)

Front 32

Nielsen Kriterien
--> Hilfe und Dokumentation

Back 32

Verweis auf Benutzerhandbuch/Hilfe

Front 33

Typen von GUI Benutzer Aktionen

Back 33

Navigation
Objekt-Gruppen Operationen & Selektion
Objekt-Operationen
Anwendungs-Operationen(Anwendung als Objekt)
Datenhaltung / Import / Export

Front 34

Typen von GUI Benutzer Aktionen
--> Navigation

Back 34

Zur „richtigen“ Ansicht gelangen
Zur richtigen Objekt-Gruppe gelangen

Front 35

Typen von GUI Benutzer Aktionen
--> Objekt-Gruppen Operationen & Selektion

Back 35

Objekte Erstellen, Löschen, Sortieren, Filtern (CRUD) Objekt(e) selektieren

Front 36

Typen von GUI Benutzer Aktionen
--> Objekt-Operationen

Back 36

Eigenschaften ansehen & verändern
Undo

Front 37

Typen von GUI Benutzer Aktionen
--> Anwendungs-Operationen(Anwendung als Objekt)

Back 37

Einstellungen ändern
Hilfe

Front 38

Typen von GUI Benutzer Aktionen
--> Datenhaltung / Import / Export

Back 38

Physiches Speichern
Drucken
Versenden (z.B. via Mail, Message)

Front 39

GUI Controls zur Aktionsauslösung

Back 39

Menüs
Context-Menüs (JPopupMenu)
Buttons
Toolbars
Pop-Ups

Front 40

"Action" in Swing

Back 40

Operationen als Objekte Kapseln
Vorteil: Wiederverwendbarkeit (enable/disable, Validierung, Benennung, etc. nur einmal machen)
--> Action Implementiert immer "ActionListener"

Front 41

Begrifferklärung: Mnemonics

Back 41

Aktivierung durch Alt + Key (Hierachisch), angezeigt durch underline

Front 42

Begrifferklärung: Accellerators

Back 42

Direkte Aktivierung (z.B. "ctrl & x" für ausschneiden, "ctrl & c" für kopieren, "ctrl & v" für einfügen)

Front 43

Begrifferklärung: Default Button

Back 43

Aktivierung mit Return (z.B. Enter drücken statt OK-Button) --> Default Button --> einer pro Frame, speziell markiert

Front 44

Begrifferklärung: Input Map

Back 44

Für jede Komponente kann mittels Input Maps eine Abbildung zwischen Tastaturbefehl und Aktion festgelegt werden (nicht angezeigt im UI).
--> Jede Komponente hat zwei Tabellen:
InputMap: Abbildung von Tastaturbefehl auf Aktionsnamen.
ActionMap: Abbildung von Aktionsnamen auf Aktionen.
component.getInputMap().put(KeyStroke.getKeyStroke("F2"), „doSomething"); component.getActionMap().put("doSomething", anAction); //anAction: javax.swing.Action

Front 45

Drag & Drop erlauben

Back 45

setDragEnabled für Komponente auf true setzen
--> textField.setDragEnabled(true);

Front 46

JTables: TableModel

Back 46

informiert die JTable über notwendige Updates mittels Aufruf von fireTableRowsUpdated/Deleted/Inserted/Changed

Front 47

JTables: SelectionModel

Back 47

bedient ListSelectionChangedListener
Modus kann eingestellt werden (SingleSelection, MultiSelection, etc)

Front 48

JTables: RowSorter(mit Filter)

Back 48

Tables können mit RowSorter sortiert werden (Dreiecklein beim TableHeader in jeder Spalte)
table.setAutoCreateRowSorter(true) oder
sorter = new TableRowSorter<BaseTableModel<Order>>(tableOrdersModel); tableOrders.setRowSorter(sorter);

Front 49

Checkbox (true, false) in JTable

Back 49

Cellrenderer auf Spalte, getColumnClass überschreiben und Boolean.class zurück geben

Front 50

Schneiderman: 8 Golden Rules

Back 50

Strebe nach Konsistenz
Ermögliche es häufigen Nutzern, Abkürzungen zu benutzen
Biete informative Rückmeldungen
Entwerfe abgeschlossene Dialoge
Biete einfache Fehlerbehandlung
Erlaube einfache Umkehrung von Aktionen
Unterstütze interne und lokale Kontrolle
Verringere Abfragen des Kurzzeitgedächtnisses

Front 51

Schneiderman: 8 Golden Rules
--> Strebe nach Konsistenz

Back 51

Interne und externe Konsistenz

Front 52

Schneiderman: 8 Golden Rules
--> Ermögliche es häufigen Nutzern, Abkürzungen zu benutzen

Back 52

Experten und Anfänger unterstützen (Mnemonics, Accelerators)
Universal Usability

Front 53

Schneiderman: 8 Golden Rules
--> Biete informative Rückmeldungen

Back 53

Feedback über laufende Funktionen oder den Systemstatus

Front 54

Schneiderman: 8 Golden Rules
--> Entwerfe abgeschlossene Dialoge

Back 54

Klar machen wann eine Funktion/Befehlskette abgeschlossen ist

Front 55

Schneiderman: 8 Golden Rules
--> Biete einfache Fehlerbehandlung

Back 55

Informationen zur Fehlersituation
Auswege

Front 56

Schneiderman: 8 Golden Rules
--> Erlaube einfache Umkehrung von Aktionen

Back 56

Undo-Funktion

Front 57

Schneiderman: 8 Golden Rules
--> Unterstütze interne und lokale Kontrolle

Back 57

Benutzer fühlt sich in Kontrolle

Front 58

Schneiderman: 8 Golden Rules
--> Verringere Abfragen des Kurzzeitgedächtnisses

Back 58

Anzeigen statt Abfragen