Home | Lehre | Videos | Texte | Vorträge | Software | Person | Impressum, Datenschutzerklärung |
Windows: Status Bar (Statusleiste, mit Unterabteilungen)
Windows: Tool Bar (Werkzeugleiste, mit Funktionsicons)
Menüs pro Fenster (außer Mac)
Standard-Menüs (Inhalt+Anordnung): Datei, Bearbeiten, Ansicht,
Extras, Fenster, Hilfe ("?").
"Beenden" in Menü "Datei" (unlogisch, aber Standard und damit
"intuitiv")
Untermenüs, Problem: zu groß oder Ausklappen zur falschen
Seite (Photoshop: Hilfe/Über Plug-ins)
Checkmarks (Ansicht-Menü, z.B. WordPad)
keine Befehle in Menüleiste (Beispielbild)
keine Menüs in Tool Bar (Beispiel: Internet Explorer)
Formulierung (meist Verb-Infinitiv als Menüname, Substantiv als
Eintrag, angehängtes "..." für Dialog)
Shortcuts (Tastaturkürzel)
Eigenwillig: vertikale Menüs in Microsoft Office (Beispielbild). Schaffen aber oben Platz für mehr Text!
nichtverfügbare Funktionen grau (Beispiel: Photoshop ohne Bild)
genauso in Tool Bar (meist nicht beachtet)
kurze Mauswege und spezialisierte Menüs:
Kontextmenüs
Sternmenüs (z.B. 3ds max und Maya)
Mischform mit Werkzeugen und Arbeitsfläche: Extrahieren-Funktion in Photoshop
minimale Art von Dialogbox: Message Box mit Fehlermeldung, Hinweis oder
kurzer Frage (Ja, Nein, Abbrechen)
je nach Typ passendes Icon (Windows: rotes X, Ausrufezeichen auf gelbem
Grund)
Beispiele: Photoshop beim Malen auf ausgeblendete Ebene
Beispiel: Internet Explorer nach erfolgloser Suche auf der Seite
(Fehler)meldungen/Bestätigungen -- ein Thema für sich
Sprache des Benutzers verwenden, nicht zu viel/zu oft (Beispielbild),
nicht zu wenig/zu selten, die richtige Information geben, Hilfestellung
Message Boxen sind typischer Fall modaler Dialoge (von "Modus"; sie
zwingen in einen bestimmten Modus).
Modaler Dialog muss vor Weiterarbeiten geschlossen werden. Alternative:
transparenter Dialog (Apple Aqua), durch den man durchklicken kann
Beispiel für modal: Öffnen, Fläche füllen in Photoshop
Beispiel für nichtmodal: Werkzeugspitzen, Ebenen in Photoshop
Nichtmodale Dialoge sind wesentlich schwerer zu programmieren: Quasi-Nebenläufigkeit.
Gestaltung von Dialogen gemäß Arbeitsfolge: von links oben
nach rechts unten in Spalten oder Zeilen.
"OK" wäre rechts unten logisch, ist aber bei Microsoft nicht unbedingt
da. (Beispielbild)
"OK"-Knopf besser mit Funktion statt "OK" beschriften: Drucken, Speichern,
... (Verb im Infinitiv)
Beispiel: Suchen-Funktion von Windows. (Nebenbei ein Problem: Startet
"Durchsuchen" die Suche?)
Dialoge besser mit Leerraum statt mit Linien gliedern (Beispiel: Optionen
von Dev-C++)
Gruppen von Teilfunktionen/Arbeitsschritten
sauber ausrichten, damit visuell ruhig
Cancel/Abbrechen-Schaltfläche, Shortcut: Esc
Standardknopf (umrahmt) mit Return-Taste auslösen
in Windows Tastaturbedienung weitergehend: Tab Order, mit Tablatortaste
und Cursortasten durch die Bedienelemente laufen
Beispiele: Systemsteuerung (korrekt), Beispielbild mit unlogischer
Folge
Tabs (Karteikartenreiter)
Dialoge mit Karteikarten: logisch aufteilen, nicht nach Platz
Kommandoknöpfe, die allgemein sind, neben Karteikarten setzen
(Beispiel: Windows-Suche)
natürlich kann man auch Karteikarten auf Karteikarten setzen
... (Beispielbild)
Option Buttons (Radio Buttons) und Check Boxes
gruppieren, untereinander anordnen, Knöpfe links von Beschriftung
(z.B. falsch bei Softimage XSI)
Optionen meist in Rahmen mit Titel, das wichtigste/häufigste nach
oben
Gruppe aus zwei Option Buttons ist unsinnig, statt dessen eine einzige
Check Box nehmen.
Was sich gegenseitig ausschließt, verlang Option Buttons statt
Check Box.
Beispiel: verborgene Windows-Optionen
Beispiel: männlich/weiblich per Check Boxen?
Beispiele: Zeichenformat in Word und in Star Office
keine Aktionen (z.B. "alles auswählen") auf Checkboxen
Eine der Optionen von Radio Buttons muss immer ausgewählt sein:
Meist ist eine Option "nichts" nötig. (Beispielbild)
zu viele Punkte oder Inhalt variabel: Liste statt Option Buttons (Einfachauswahl)
oder Check Boxes (Mehrfachauswahl)
Beispiel in WordPad: Format/Schriftart
grafisch ausgefeilt: Internet Explorer Extra/Internetoptionen/Erweitert
Windows-Sonderform: Combo-Box = Auswahl aus Liste oder Eingabe,
z.B. Zeichensatz-Wahl in Word Pad
Textfelder für statische Texte und für Texteingabe/Ausgabe
(vertieft, hell), Beispiel in WordPad: Format/Absatz
Länge an Inhalt anpassen (Postleitzahl, Adresse), nicht zu kurz,
nicht zu viele verschiedene Breiten
Beschriftungen linksbündig auf der linken Seite von Eingabefeldern,
Doppelpunkt (WordPad: Format/Absatz)
mehr in Richtung Regler: Spin Boxes. Beispiel: Uhrzeit einstellen
Regler, die man ziehen kann (und umgekehrt per Programm verstellen
kann)
Scrollbalken sind auch von diesem Typ!
Verborgene Regler: Photoshop
Regler mit Raster (aber nur für numerische Eingaben!), Beispiel:
Windows-Bildschirmgröße
Tabellen zur Ein- und Ausgabe
vergleichbare Größen untereinander nicht nebeneinander,
damit dichter zusammen, also Spalten = Kategorien, Zeilen = Einzelstücke
Baumansicht zum Zusammenklappen, siehe Windows Explorer, aber auch für Voreinstellungen etc.
Windows-Historie am Rand: VisualBasic sah eigene Controls (Steuerelemente)
vor (VBX). Daraus wurden dann die OLE-Steuerelemente (OCX) und schließlich
die ActiveX-Controls. Mischung aus Steuerelemente und zusammengesetzen
Dokumenten. Extremfall: komplette Tabellenkalkulation als Steuerelement.
Ähnlich: Java Beans. Gestorben: OpenDoc.
Beispiel in WordPad: Einfügen/Objekt/Bitmap
"Fokus": An welches Fenster geht die Tastatureingabe? (Text, Shortcuts) Unter X Window hat meist das Fenster unter dem Mauszeiger den Fokus.
Zwischenablage
Daten ggf. in mehreren Formaten bereitstellen (Beispiel: Inhalte einfügen
in WordPad)
Alternative für große Objekte: Daten anbieten und erst bei
Bedarf liefern (großes Photoshop-Bild nach WordPad: erst beim Einfügen
Fehler)
Shortcuts für Zwischenablage (Strg-X, -C, -V) müssen auch
in Dialogfenstern funktionieren!
Drag&Drop ähnlich wie Zwischenablage
Problem "Modus": Man erkennt nicht schnell, dass man in einer besonderen
Betriebsart ist, z.B. Maskierungsmodus in Photoshop.
In Animationssoftware z.B. dicker roter Balken bei Aufnahme (Beispielbild).
Hilfe-Funktion (Selbstbeschreibungsfähigkeit: Bildschirmarbeitsverordnung!)
kontextsensitiv: Taste F1 (Windows) oder eigene Schaltfläche im
Dialogfenster (z.B. Internet Explorer) oder automatisches Mitlaufen wie
StarOffice oder ...
Hilfe braucht Suchfunktion, Hyperlinks, Rückwärts-Funktion
Tooltips (z.B. WordPad)
Agenten (Karl Klammer)
Wizards (Assistenten)
in Assisistenten und allgemeinen Dialogen den Fortschritt zeigen: noch
so viel, Sie sind hier.
Beispiel: Bezahlvorgang bei Amazon
Responsivität (schnelle Rückmeldung an den Nutzer): versenkende Knöpfe, Sanduhr, Fortschrittsbalken (z.B. Photoshop), am besten mit Zeitschätzung statt Prozentangabe (Dateikopieren unter Windows)
Mauswerkzeuge
tear-off (Abreißmenüs)
kontextabhängiger Mauszeiger (z.B. über Windows-Fensterrahmen)
I18N = Internationalization.
nicht nur übersetzen: Sortierreihenfolge, Datumsformat, Adressenformat
(Beispielbild), Icons (z.B. Briefkasten) etc.
P13N = Personalization (Bildschirmarbeitsverordnung!), Gestaltung der Oberfläche (z.B. Cinema 4D)
Intelligenz
Einstellungen merken
Most Recently Used (MRU), bei Dateien, Suchfunktionen etc.
Beim ersten Benutzen einer Funktion die Hilfe anzeigen?
Selten benutzte Menüeinträge ausblenden? Nein!