Benutzer-oberflächen

1. Benutzer-oberflächen

2. Benutzeroberflächen-Design Traditionell: Konsole, Terminal, Vektorgrafik. Heute: Rastergrafik, integriert ins Betriebssystem XEROX PARC: STAR-Computer, Smalltalk–80  Apple Lisa, McIntosh NEU: Schreibtischmetapher, Ikone (Symbole) Leitideen: • Aufgabe zeigen statt Befehle tippen (Maus) • Auswahl statt Gedächtnis (Menüs) • Selektion = Mausklick oder Umfassungsrahmen ziehen • Möglichst wenige, orthogonale Kommandos MOVE, COPY, DELETE, UNDO, HELP, ShowProperties (Eigenschaften) • kein CREATE: Dateien (Texte, Dokumente) entstehen als Kopien; Text und Kommandos trennen: spezielle Funktionstasten als shortcuts • Modus-freie Eingabe („Don‘tmodeme in“), z.B. polnische Notation • Bildschirmaussehen = Druckversion WYSIWYG Benutzeroberflächen

3. Benutzeroberflächen-Design Beispiel Windows NT: MS Style Guides • Benutzerkontrolle (user in control) visuelle Anzeige und Kontrollmöglichkeit auch automatischer Vorgänge, keine Modes (modale Fenster!), Gefühl der Kontrolle geben. • Rückkopplung (feedback) Echo oder Reaktion auf jede Eingabe vorsehen, z.B. • Mauszeiger ändert Form • Objekt verändert Aussehen • Menüeintrag wird blass, wenn nicht wählbar • Statuszeile zeigt Fortschritte durch Balkenlänge oder Dateinamen an • Übersichtsfenster zeigt Fortschritt an (progressindicator) • Ereignisfenster (pop-upwindow) Benutzeroberflächen

4. Benutzeroberflächen-Design • Visualisierung(directness) visuelles Äquivalent der Daten und Funktionen darauf zeigen. Logik von Metaphern nutzen Beispiele • Schreibtisch mit Papierkorb, Eingangskorb, Ablage, Mappen • Bühne mit Rollen und Aktionen zur Ablaufprogrammierung Auftreten von Akteuren = paralleles Scheduling • Arbeitsbuch mit Seiten zum Programmieren durch Bilder • Pinnwand zum Austausch von Infos & Texte in Arbeitsgruppen Vorteile • Nutzer hat Informationen über Sinn und Funktion des Objekts • Protokollwissen (Interaktion) istschon da Benutzeroberflächen

5. Benutzeroberflächen-Design Beispiel Windows NT: MS Style Guides • Konsistenz (consistency): ähnliche Situationen – ähnliche Visualisierung, ähnliche Reaktionen • Nicht-auswählbares Menü ebenfalls zeigen • Daten sichern, Dokument drucken: immer mit Dateiauswahl oder immer ohne • „Selektion“ immer ein Objekt. &Gedrückter Knopf: immer ein Bereich. • Einfachheit (simplicity): „so viel Info wie nötig, so wenig wie möglich“ • Kurze Meldungen und Kommandos • Info nur zeigen, wenn nötig (progressive disclosure) : Bildauflösung, Karteikartenreiter, ... • z.B. Fehlermeldungen beim A340 : Prioritätsstufung • Ästhetik (Aesthetics) Konflikt Einfachheit, Funktionalität vs. Schönheit Benutzeroberflächen

6. z.B. Handschrifteneingabe Funktionale Struktur Implementierung GUI : z.B. ZoomWorld

7. Programmarchitektur • MVC-Modell (Model-View-Controller) Trygve Reenskaug, Smalltalk 1979 View Benutzeroberfläche Regis-trie-rung Controller Programm Programm = Zwischenschicht event Daten-Modell z.B. Datenbank Benutzeroberflächen

8. Schichtung der Benutzeroberfläche Benutzeroberfläche (view) Grafik-Basissystem für Masken, Formulare und Interaktionen GUI Programm Programm Programm Programm n 1 2 3 . . . Datenbank (model) Systemaufrufe Betriebssystemkern Für alle Programme • Gute, wohlüberlegte Benutzerschnittstellen • Einheitliche Funktionalität (Funktionstasten, Maus, Fenster, ...) Konsistenz,Wartbarkeit: 1 Programm statt 10 Benutzeroberflächen

9. Eingabecodes Eingaben Text • 7-Bit Code: ASCII American Standard Code for Information Interchange XX \XX 3\4 Bits Code 0 - 127 Control 8-Bit Code: ANSI mit ä,ö,ü,é,î,œ,... Nicht-Europäische Schriften? Benutzeroberflächen

10. Eingabecodes 0000H FFFFH • Windows NT: Unicode2-Byte Code Objektnamen, Pfadnamen,Text einheitlich, z.B. chinesisch Aber: Währung etc. extra pro Benutzer Unix: Extended Unix4-ByteCode (POSIX) Serieller Code Individuell gesetzte Variable in Prozessumgebung des Benutzers, evtl. abgefragt von Programmen (Stringvergleiche ss=ß, Maßeinheiten, Währung, Datumsformat) Problem: Eingabe der 4Byte-Codes Benutzeroberflächen

11. Eingabegeräte • Funktionstasten Konzeptionell Kommandos / Text trennen! (s. vi) • Zeigegeräte Maus/Trackball/Joystick besser als Funktionstasten • Grafische Tabletts direkte Eingabe von Stiftposition, Formen und Kurvenformen (Karteninformation, Unterschriftenverifikation, Biomedizin,..) • Scanner Eingabe von Fragebogenergebnissen, Textdokumenten, Bilder, Grafik • Spracheingabebenutzerfreundlich, aber….. • Störanfällig (Hintergrundgeräusch!) • nicht immer das richtige Medium (ungenau, Büroumgebung) Benutzeroberflächen

12. Ausgabe: Display/Druckformate (a) (b) • Rastergrafik vs. Vektorgrafik Pixelmenge vs. Umrandung z.B. TrueType, PostScript, .. Vorteil: Zeichnen einfacher, beliebige Größe und Formstauchung, einfacher Input, stark komprimierbar (MPEG7) Nachteile: nicht skalierbar Zeichnen dauert mit jedem Vektor länger Folgerung: Vektorgrafik = internes Format, Pixelgrafik extern für Bildschirm und Drucker Benutzeroberflächen

13. Ausgabe: Rastergrafik Nachteil: Speicherkosten, Vorteil:einheitl. Refreshzeit • Koordinatensystem Definition Bildschirmebenen Farbbeschreibung durch n Bits, z.B. n = 8 Bit: 6 Bit-Ebene + 2 Bit-Ebene HW-Controlling (Verschiebung ) einer Ebene (Sprites!) Benutzeroberflächen

14. Ausgabe: Farbkodierung • Farbwahrnehmung Zerlegung in Einzelkomponenten (Additive Farbmischung) 3 farbempfindliche Zelltypen (Zapfen) auf der Retina  3 Variablen bilden 3-dim Raum, „Farbraum“, abhängig von Gesamthelligkeit. Benutzeroberflächen

15. Ausgabe: Farbkodierung • RGB • Rot-Grün-Blau • html: #RRGGBB • Problem: Darstellungbei der Ausgabeistgeräteabhängig • Lösung: FarbprofilesRGB,… • Farbräume Zerlegung in Einzelkomponenten (Additive Farbmischung) Benutzeroberflächen

16. Ausgabe: Farbkodierung • YUV (Fernsehen, JPEG) Y = R+G+BHelligkeit (imPrinzip) U = B -YCrominanz(Farbdifferenz, geringerkodiert) V = R -Y Beispielbei Y = 0,5 Fernsehen: Y´ = 0,30 · R´ + 0,59 · G´ + 0,11 · B´ R´G´B´= -Korrektur Gehirn: R,G,B  SW, R/G, B/G-Kanäle • CMYK Cyan-Magenta-Yellow-Key(black) • SubtraktivesFarbmodellzumDrucken (Tintenstrahldrucker!) • blacknötig, um Druckzuverbessern; errechnetsichaus CMY Benutzeroberflächen

17. Ausgabe: Farbkodierung B R G 0000 0001 Binärzahl zu Spannungswert (x,y) 0010 0011 R 0100 D/A G 0101 215 175 240 B Konverter Pixelfarbwert (x,y) = 0101 0110 0111 Bildschirm Wiederholspeicher Farbtabelle Rastergrafik-Farbausgabeüblich24 Bit Problem:zu großer Speicherbedarfbei 24 Bit Farbe pro Pixel Lösung: Color Lookup Table CLUT, z.B. 4 Bit Farbindex pro Pixel, je Farbe 8 Bit Farbinfo  nur 1/6 Speicherbedarf für Bilder, z.B. GIF Benutzeroberflächen

18. Ausgabe: Fenstersysteme • Traditionell • Terminalstruktur: ASCII-Ein/Ausgabe • Grafikbibliothek beim Programm • Wenig BS-Aktivität Benutzeroberflächen

19. Ausgabe: Fenstersysteme Bil d schirm Anwender- Window - prozeß Manager - Editor graf. Schnittstelle und immer Pr o zeß wieder gibt Terminal es einen home> Betriebssystemkern Treiber Maus, Tastatur, Joystick, … • Heute • Virtuelle Fenster, Grafik, Menues, Tastatur/Mauseingabe. • Grafikbibliothek im Betriebssystem verankert Benutzeroberflächen

20. Ausgabe: Fenstersysteme Vorteile der Funktionsaufteilung Anwendung / Display • Zentrales, einheitliches Fenstermanagement (lookandfeel) • Gemeinsame, parallele Darstellung unabhängiger Prozesse • Sensoren verschiedener Signalquellen für Industriesteuerung • Parallele Präsentation verschiedener Programme mit verschiedenen Funktionalitäten (Wetter: Wind&Temperatur) • Dezentrale Kontrolle durch Grafik zentral zusammenfassen • Netzmonitoring: Status unabhängiger Agenten • Netzmanagement: Zentrale Softwarewartung durch zentrale Darstellung dezentraler Rechnerkonsolen • Ereignisbehandlung und Displayleistung auf verschiedene Rechnern aufteilbar Grafische HW-Aufrüstung lohnend: Multiprozessorsysteme! Benutzeroberflächen

21. z.B. Handschrifteneingabe Funktionale Struktur Implementierung GUI : z.B. ZoomWorld

22. Implementierungsfragen Sollen für Veränderungen • Fensterpixel gepuffert (Refresh) (viel Speicher, schnell) • Oder neu gezeichnet werden ? (weniger Speicher, mehr Zeit) Automatische Fensterprogrammierung – wie? User Interface Management System UIMS ! Problem-Logik (Look-and-feel): Drucken & drag-and-drop • Regelsystem getrennt von Darstellung • Verwaltung der graf. Ressourcen, • Resourcefiles Graf. Editor erzeugt Aufrufe und Parameter von fertigen graf. Objekten • Programmcode Erzeugung der Objekte durch explizite GUI (z.B. Delphi) Benutzeroberflächen

23. Fenstersysteme: Unix Dokument . . . GrafEditor • Unix: Motif in CDE Standard (Common Desktop Environment) • Linux: KDE (K Desktop Environment) Zusammenarbeit vonAnwendungen durch CORBA (Editor, Tabellenkalk., Präsentationsprogr.) XML-Format TextEditor CORBA • OSF-Motif : Vereinheitlichung der Dialogobjekte (look-and-feel) • Motif Style Guide Spezifikation • Motif Window Managermwffeel • Motif Widgetslook • Problem: pixelorientierte Fonts • Lösung: skalierbare Objekte durch NeWS (Sun) auf Postscript-Basis Benutzeroberflächen

24. Fenstersysteme: Unix Basis: X-Window- System MIT ATHENA-Projekt X-System als Nachfolger des W-Systems Client –Server KonzeptXlib-Funktionen XOpenDisplay(.) XGetWindow(.) Benutzeroberflächen

25. AJAX Asynchroneous Java And XML Klassisch: Vollständig neuer Seitentransfer +Aufbau bei Datenveränderung AJAX: Nur Transfer +Aufbau neuer Elemente Benutzeroberflächen

26. Fenstersysteme: Unix X-Window: Konzept undfunktionale Elemente Benutzeroberflächen

27. Fenstersysteme: Unix Resultierende Baumstruktur Grundfenster mit Unterfenstern X-Window Fensterkonzept:Fensterhierarchie Benutzeroberflächen

28. Fenstersysteme: Unix X Window Implementierung:X-toolkit und Dialogobjekte widgets Toolkit-Aufgaben zentrales Management und Koordination Erzeugung und Löschen von widgets Veränderung zur Laufzeit (Fenstermanager) Verwaltung der Ein/Ausgabe, Eingabeecho, ... Kommunikation der Applikationen (Fenstern) Verwaltung des zentralen clipboard-Puffers Benutzeroberflächen

29. Fenstersysteme: Unix Widget-Hierarchie: einfache widgets XmPrimitives XmScrollBar XmLabel XmText XmToggleButton XmCascadeButton XmPushButton X Window Dialogobjekte (widgets) • Simulierte Knöpfe z.B. XmPushButton • Rollbalken XmScrollBar • Textfläche XmText • Grafikfläche XmDrawingArea • Dateiauswahlfenster XmFileSelectionBox Benutzeroberflächen

30. Fenstersysteme: Unix parent widget XmMessageBox XmMessageBox enthält en t hält WARNUNG ! XmLabel XmPushButton OK XmPushButton XmLabel child widget Zusammengesetzte widgets: Container widget(root: shell widget) Benutzeroberflächen

31. Fenstersysteme: Ereignisbehandlung • Grundstruktur Window manager InitProcess() LOOP waitForEvent(Mausklick,Tastatur, AusgabeDesBenutzerprogramms,..) executeNecessaryProcedures; END (*LOOP*) Benutzeroberflächen

32. Fenstersysteme: Unix X Window-Ereignisbehandlung • Zentrale Schleife XtMainLoop() • Empfängerhierarchie für Ereignisse durch Fensterhierarchie • Letzer Empfänger: shellwidget bzw. rootwindow • Grabbingfür Ereignisse von Nachbarfenstern gleicher Hierarchie • Aktionsprozeduren als Callback-Routinen XtCallBack() • Event handlerbenutzt Tabellenverteilung der Aktionsprozeduren Benutzeroberflächen

33. Fenstersysteme: Windows NT Fensterrahmen Ikon Rollbalken Dateiauswahl fester Text dialo gbox Textein - gabefeld Knöpfe Hintergrund - textur Konzept der Benutzeroberfläche Benutzeroberflächen

34. Fenstersysteme: Windows NT Konzept der Multidokumentenschnittstelle parent window childwindow Zerteilung in Unterfenster (panes) möglich mit split box, split bar Benutzeroberflächen

35. Fenstersysteme: Windows NT Grafik Device InterfacePunkte, Linien Kreise, Fenster, Rollbalken, ... Schneller durch attributecaching(Obj.-cache), batching (API-cache) GDI Konsole GDI GDI32.dll BS-Aufrufe Kernel32.dll Fenster-manager User32.dll Konsole Graphic Device Graphic Device Fenstermanager User32.dll Interface Interface BS-Aufrufe Kernel32.dll · · · GDD GDD GDI32.dll Systemaufrufe Systemaufrufe • Kein Multi-User-System  kein Displayserver integriert im Kern ab NT 4.0 User Process Win32 API Fenstermanager look-and-feel Fensteroperationen, Displaylistenverwaltung (refresh), Eingabezuordnung, Ausgabe, clipboard Benutzeroberflächen

36. z.B. Handschrifteneingabe Funktionale Struktur Implementierung GUI : z.B. ZoomWorld

37. Handschrifteingabe Vorteile • leichtere Eingabe von Texten • einfache Texteingabe auch bei sehr kleinen Geräten, z.B. Handy/PDA • biometrische Authentifizierung beim Login • biometrische Authentifizierung im Betrieb • Probleme • Zusatzsoftware erforderlich für Authentifizierung • Zusatzsoftware nötig für Handschrifterkennung • Authentifizierung und Erkennung sind nicht 100% korrekt Benutzeroberflächen

38. Logon mit Unterschrift Konzept Windows NT: GINA(Graphical Interface for Network Authentication) Signature Recognition-Modul Systemdienste DLL WinLogon.exe Benutzeroberflächen

39. Windows NT: Logon-Ablauf WlxLoggedOutSAS WlxNegotiate() WlxInitialize() Bootet Rechner SAS (ctrl-alt-del) Winlogon.exe GINA.dll Gibt Benutzername und Passwort oder Unterschrift ein Fragt nach Login -Informationen Authentisierung erfolgt Anmeldung erfolgt Benutzer Benutzeroberflächen

40. Autorenerkennung • schreibbegleitenden Authentifizierung durch Ausnutzung des Schreiberverhaltens • Beispiel-Anwendung: • Tablet PC bei Arztvisite • Arzt kann Stammdaten lesen und Therapiedaten ändern, Schwester nicht. • Schwester kann Stammdaten schreiben und Therapiedaten lesen • Keine umständlichen wechselseitigen Logins Benutzeroberflächen

41. Implementierung Client-Server-Architektur Server mit Autoren-Erkenner Stiftdaten Bewertung Named Pipe Client Visitenformular Benutzeroberflächen

42. Zentrale Bibliothek: Was ist „Ink“? Pen API gibt x,y-Koord. an ink ink API macht daraus Striche ink API gruppiert die Striche & gibt sie zum Erkenner Reco API erkennt die Striche und gibt sie aus Benutzeroberflächen

43. Windows NT: Ink APIs Benutzeroberflächen

44. Windows NT-Schichtenmodell „Ink“ Applikationen system call Betriebssystem Maus Nachrichten InkCollector (Objekt) Datenfluss Pen Nachrichten Beides Treiber Digitizer (Signaleingabe) Benutzeroberflächen

45. Windows NT ink-Datenfluss kernel mode User mode Benutzeroberflächen

46. z.B. Handschrifteneingabe Funktionale Struktur Implementierung GUI : z.B. ZoomWorld

47. Motivation • Fensterorientierte Benutzeroberflächen sind Standard. Aber: Computerumgang noch zu schwierig. • Gesucht: Neueintuitive Benutzeroberfläche, die für den Computerlaien leichter zu verstehen ist und mit dem der Experte ebenso gut arbeiten kann. • ZoomWorld versucht, durch Nutzung eines Zoom-Metaphereine intuitivere Benutzeroberfläche zu konzipieren Benutzeroberflächen

48. Anforderungen - Spezifikation Anforderungen an eine Metapher Funktionalität einer Benutzeroberfläche, z.B. MS-Explorer • Datei Neu Neu anlegen (z.B. Verzeichnis), Verknüpfung, Löschen … • Datei bearbeiten Rückgängig, Ausschneiden, Kopieren, Markieren … • Datei-Favoriten verwalten • Verzeichnisansicht Ansicht Dateiliste, Optionen (Dateitypen ausfiltern) • Verzeichniswechsel Zurück/Vorwärts, Übergeordneter Ordner • Programme starten • Umschalten zwischen laufenden Anwendungen • Systemsteuerung Einstellungen vonDrucker, Netzwerk… • Systemprogramme Datenträgertools wie Formatieren, Scandisk u.a. • Start-Einstellungen Autostart-Ordner Benutzeroberflächen

49. Einführung ZoomWorld x Zoom y Schwarzes-Brett-Metapher University of Maryland • Idee: Bildschirm = Ausschnitt aus einem großen, schwarzen Brett aus Millionen von Pixeln = Arbeitsfläche, auf der wir alles vorfinden • Durch „Auszoomen“ größere Übersichten möglich • auch Bearbeitung kleinster Felder möglich (Zooming) • Entspricht „2.5-dimensionaler“ virtueller Realität (2 Dimensionen + Zooming) Benutzeroberflächen

50. ZoomWorld Bildschirmebene (Startebene Arbeitsplatz) Benutzerebene • Arbeitsplatzkonzept - Überblick Herauszoomen Benutzeroberflächen