120 Benutzerschnitstellen

  • 25 Mär. 2018
  • 10:05

    Benutzerschnittstellen implementieren Auftrennung GUI und Code

    Um die Entwicklung und den Unterhalt eines Programms möglichst einfach zu gestalten wird die GUI- Erstellung und die Programmierung getrennt voneinander abgelegt. Für dieses Vorhaben existieren unterschiedliche Ansätze:

    Code behind

    Beim Code behind Verfahren (kommt ursprünglich von der Webtechnologie ASP.NET) werden für das XAML (.xaml) und den Code (.cs) unterschiedliche Dateien angelegt. Das Visual Studio macht während des Arbeitens die Verbindung. Im XAML können Methoden und Eigenschaften mittels Binding angesprochen werden. Im Code können XAML Elemente ebenfalls angesprochen werden, falls diese einen Namen besitzen: Dadurch dass sich GUI und Code gegenseitig referenzieren können, wird es schwierig wenn nicht gar unmöglich parallel an den beiden Teilen zu arbeiten. Die Code behind Technologie ist eher für Projekte geeignet, in denen eine Person beide Arbeiten (pro Fenster / User Control) durchführt. Die Trennung der Arbeit erfolgt also anders. (pro Schicht, pro Bereiche der Applikation)

    MVC / MVVM

    MVC ist die Abkürzung für „Model View Controller“ und stellt ein Muster (engl. Pattern) für die Erstellung von Programmen mit grafischer Oberflächen dar. (siehe Design Patterns1) 🌐 Für die Erstellung von Webseiten mittels ASP.NET gibt es die Möglichkeit MVC umzusetzen. Die Grundidee / Anforderung ist die Trennung der Darstellung und der Logik eines Objektes. Für alle anderen Applikationsarten wird bei Visual Studio das Modell MVVM verwendet:
    Es ist mit dem universellen MVC verwandt und erlaubt es ebenfalls für Objekte austauschbare Views zu erstellen. So kann das ViewModel und das Model beibehalten werden, und die Darstellung mittels unterschiedlichen View’s auf diversen Endgeräten programmiert werden. Wir werden diesen Ansatz auch aus Zeitgründen nicht weiter verfolgen.

    Code behind im Detail

    User 25 Mär. 2:00 pm
    message user image
    Für welche Fälle ist die Programmierung in der .cs Datei vorgesehen?
    Support 25 Mär. 2:05 pm
    message user image

    • Im Konstruktor

    • Code kann ausgeführt werden bevor das Fenster angezeigt wird. Bsp: Lesen und Anzeigen einer Liste von der Datenbank.


    • Ereignisse

    • Ereignisse die durch den Benutzer gestartet werden. Bsp: Knopfdruck, Auswahl eines Elements in einer Dropdown Liste...

    • Ändern der Anzeige

    • Mittels Code kann die Anzeige verändert werden. Bsp: Inhalt einer TextBox anpassen, neue Steuerelemente hinzufügen, Navigation...

    User 25 Mär. 2:10 pm
    message user image
    Was geschieht beim Öffnen eines neuen Fensters?
    Support 25 Mär. 2:15 pm
    message user image
    Bei der Anzeige eines Fensters wird zuerst die .cs Datei ausgeführt, bzw. mittels Aufruf des Konstruktors die darin enthaltene Klasse instanziiert: Dabei wird in der Methode InitializeComponent() die .xaml Datei referenziert und das Fenster mit seiner grafischen Oberfläche wird vorbereitet für die Anzeige. Eigenen Code können wir NACH der InitializeComponent Methode einfügen!
    User 25 Mär. 2:20 pm
    message user image
    Was für Events sind vorgesehen?
    Support 25 Mär. 2:25 pm
    message user image
    Die Liste der Events, welche durch den Benutzer zur Laufzeit generiert werden können ist lang. Es gibt Events, welche für alle Steuerelemente vorhanden sind (Initialized, MouseEnter, MouseLeave..) und es gibt steuerelementspezifische Events. (TextBox: TextChanged). Eine Referenz können Sie hier finden:https://msdn.microsoft.com/en-us/library/cc295158.aspx
    User 25 Mär. 2:00 pm
    message user image
    Wie füge ich einen Event hinzu?
    Support 25 Mär. 2:05 pm
    message user image
    1. Variante mittels XAML oder Visual Studio Editor Falls es sich um einen Event handelt, der zu einem XAML Element hinzugefügt wird, welches zur Entwurfszeit besteht, kann der Event ganz einfach im XAML referenziert werden oder aus der Liste des Eigenschaften/Ereignis Fensters ausgewählt werden. (Doppelklick für Standardname oder Eingabe des Methodennamens für beliebige Methodennamen) XAML: 2. Variante mittels Code Für Steuerelemente, welche zur Laufzeit hinzugefügt werden, muss zuerst eine Methode geschrieben werden, welche den Event behandelt (Handler): Die Signatur der Methode ist vorgegeben! Der Vorteil der programmierten Zuweisung der Ereignismethode ist, dass für unterschiedliche Ereignisse der gleiche Handler angegeben werden kann. Anschliessend muss der entsprechende Event des Steuerelements mit dem Handler verbunden werden. Hinzufügen eines Steuerelements zur Laufzeit und Registrierung eines Handlers:
    User 25 Mär. 2:00 pm
    message user image
    Wie können Eigenschaften eines Steuerelements angesprochen werden?
    Support 25 Mär. 2:05 pm
    message user image
    Am obigen Beispiel sehen wir bereits diese Anwendung. Von einem Steuerelement kann ganz einfach mittels Name (x:Name= ... muss im XAML angegeben werden) die Eigenschaft angesprochen werden. Achtung! Es gibt Eigenschaften, welche nur lesbar sind.

    Anwendungen in der Praxis

    Wir möchten nun eine TextBox bauen, welche beim Erhalt des Fokus (oder Anklicken) den enthaltenen Text markiert. Damit wir diese wiederverwenden können, gestalten wir diese als Benutzersteuerelement (UC). Der komplette Code steht als .zip Datei zur Verfügung. Nun wollen wir dieses UC anwenden. Es soll zur Laufzeit hinzugefügt werden zu unserem bestehenden Fenster „MainWindow“. Um es zu platzieren verwenden wir ein Grid namens „subGrid“. Diesem weisen wir zur Laufzeit die neue UC zu: Nun wird auf Knopfdruck ein neues Benutzersteuerelement angelegt und angezeigt. Dies können wir für unser Fallbeispiel sehr gut gebrauchen! Erinnern Sie sich noch an dieses UC?
  • 18 Mär. 2018
  • 10:05

    Benutzerschnittstellen implementieren Übersicht der Steuerelemente


    Grundeigenschaften von Steuerelementen (Entwurfszeit)

    Es gibt Eigenschaften, welchen allen Steuerelementen zugewiesen werden können. Diese werden typischerweise zur Entwurfszeit (beim Programmieren) definiert, können sich aber zur Laufzeit (beim Ausführen des Programms) dynamisch anpassen.

    Benutzersteuerelemente (User Control)

    Bisher haben wir alle unsere Beispiele innerhalb eines eigenen Fensters erstellt. In der Realität könnten wir so zwar eine Applikation erstellen, allerdings wäre der Komfort für den Anwender nicht sehr gross mit sich ständig öffnenden Fenstern. Wenn wir davon ausgehen, dass unsere Applikation fixe Bedienelemente hat, welche ständig sichtbar sein sollen, müssten wir so etwas haben wie ein „inneres Fenster“, in welchem wir die Inhalte einfach austauschen können. So entworfen:
    Dort wo nun der Button „Inhalt“ steht, sollten austauschbare „innere Fenster“ dargestellt werden können. Die Lösung heisst Benutzersteuerelemente

    Erstellen eines Benutzersteuerelements

    Ein Benutzersteuerelement ist fast das gleiche wie ein Fenster, mit der Ausnahme dass es keinen Rand und keinen eigenen Fensterhandler hat. (Anzeige in Taskleiste, Minimieren / Maximieren) Die Vorteile eines User Controls:
    - Wiederverwendbarkeit: Einmal definieren, mehrmals verwenden (innerhalb des gleichen Projekts, oder in anderen Projekten)
    - Verkapselung: Die komplette Logik ist im Steuerelement (Ansicht + Verhalten)
    - Wartbarkeit: Anpassungen und Verbesserungen werden für das ganze Projekt nur einmal gemacht.
    - Reduktion der Komplexität: Einzelne Fenster werden einfacher, da nicht die komplette Logik in diesem steckt, sondern Teile davon im User Control verankert sind.
    - Arbeitsaufteilung: Die Entwickler können unabhängig voneinander arbeiten Wir können Benutzersteuerelement nutzen für:
    - Komplette, eigenständige „Unterfenster“, z.B. Eingabemasken
    - Selber erstelle Kombination aus Elementen mit eigener Funktionalität Zum Beispiel ein interaktives Sternesystem für die Hotelbewertung
    - Standardisierte Ansichten für Objekte definieren Zum Beispiel eine Ansicht für Hotels, welche dann für unterschiedliche Datensätze verwendet werden kann:
    Beispiel: Erstellen eines Ein- / Ausschalters Erstellen eines neuen Projekts „AB120_04_OnOff“ vom Typ WPF Anwendung. Hinzufügen zu Projekt -> Benutzersteuerelement „OnOffButton.xaml“. Nun sehen wir ein leeres Benutzersteuerelement, es ähnelt sehr stark einem Fenster, nur dass es keinen Rahmen hat. Darin können wir wie gewohnt Container und Steuerelemente einfügen. Wir erstellen unser User Control wie folgt:
    Jetzt kommt ein neuer Teil, den wir auf dem nächsten Arbeitsblatt eingehend studieren werden! Wir fügen Programmcode zum Benutzersteuerelement hinzu: Fahren Sie im XAML auf Grid Container. Suchen Sie im Fenster „Eigenschaften“ die Ereignisse und klicken Sie auf den Blitz. Suchen Sie das Ereignis „MouseDown“ und doppelklicken Sie in die (noch) leere Textbox. Nun erscheint der „Code Behind“ Teil, in dem wir programmieren. Fügen Sie folgenden Code ein:
    Damit ist das Benutzersteuerelement fertig. Nun müssen wir es noch in einem Fenster anwenden, das ist einfach! Erstellen Sie das Projekt neu. Öffnen Sie das Startfenster „MainWindow.xaml“, im linken Fenster „Werkzeuge“ sollte nun folgendes zu sehen sein:
    Das bedeutet, dass wir unser neues Steuerelement kreiert haben und es wie ein „normales“ Steuerelement anwenden können. Ziehen Sie es auf das MainWindow und starten Sie die Applikation!
    Container mit einem Stern:

    BeispielSteuerelemente.mp4

  • 18 Mär. 2018
  • 10:05

    Benutzerschnittstellen implementieren XAML Grundlagen mit Visual Studio

    Vorgehen: Erstellen Sie ein neues Projekt vom Typ „WPF-Anwendung“ mit dem Titel „AB120_03_HelloWorld“. Es wird eine neue Projektmappe (Solution) angelegt mit diesem Namen, darin befindet sich ein Projekt mit dem gleichen Namen: In der Datei App.xaml können Sie angeben welches Fenster beim Programmstart geöffnet wird. Aktuell haben wir nur das MainWindow.xaml, also wird dieses standardmässig referenziert. Die Datei MainWindow.xaml ist also unser Startfenster, dieses wird auch gleich im Editor geöffnet. Der Editor hat 2 Ansichten: (Hier bereits mit dem Label, bei Ihnen wird das Fenster noch leer sein)
    Ein weiteres Werkzeug zur Bearbeitung von XAML Fenstern und deren Elemente ist das Eigenschaften (und Ereignisse) Fenster.
Es zeigt alle Eigenschaften des im Designer ausgewählten Elements an. (Hier: Fenster, engl. Window) Da die meisten Elemente sehr viele Eigenschaften besitzen, sind diese in Kategorien eingeteilt. Am Anfang haben Sie noch keine grosse Erfahrung aber mit der Zeit (üben üben..) gewinnen Sie im Eigenschaften – Dschungel auch den Durchblick! Praxistipp: Im Eigenschaften Fenster können Sie sich immer orientieren. Wenn Sie beim Programmieren (XAML oder C#) etwas nicht finden, suchen Sie im Eigenschaften Fenster danach und übernehmen dann den generierten Code. Spielen Sie mit den folgenden Eigenschaften des Fensters: • Title 
 • Topmost 
 • WindowStartupLocation 
 • Cursor 
Beobachten Sie unbedingt die Änderungen im XAML Fenster!
 Starten Sie nach den Anpassungen das Programm jeweils mit F5 


    Elementhierarchie und Positionierung von Elementen

    Bei der Darstellung von Programmen unter WPF ist das Fenster immer das oberste Element einer Hierarchie. Das Fenster hat eine vorgegebene (Start-) Grösse und kann sogar eine vordefinierte Anfangsposition haben. Jedes Fenster beinhaltet mehrere Steuerelemente (Label, Button, Textbox usw.). Diese sind für den Benutzer möglichste logisch angeordnet. Um diese Elemente im Fenster zu platzieren, werden sogenannte Container benötigt. Diese Container bieten unterschiedliche Layouts an, welche die Platzierung weiterer Elemente vereinfachen. Selbstverständlich können in einem Container weitere Container angeordnet werden, um komplexere Logiken darzustellen. Wieso Container?
Eine Anwendung kann auf unterschiedlichen Bildschirmen (Geräten!) verwendet werden. Dadurch kann beim Programmieren nicht vorhergesagt werden wie gross ein Fenster beim Anwender dargestellt werden wird. (Vielleicht arbeitet ein Anwender gerne mit mehreren Fenstern nebeneinander...) Um das Verhalten bei Grössenänderungen optimal definieren zu können, werden Container mit unterschiedlichem Verhalten bereitgestellt. Was der Benutzer effektiv beim Arbeiten verwendet, sind die Controls. Dazu gehören Label, Button, Bilder, Register (TabControl) usw. aber auch geometrische Formen könnten dargestellt werden. Je nach Bedarf muss der richtige Container gewählt werden. Für die Beispiele sind jeweils Knöpfe (Buttons) in die einzelnen Positionen eingefügt. Bei Knöpfen sieht man am besten den Effekt, da diese durch einen Rand abgeschlossen sind. Canvas: Canvas bietet die Grundlegende Funktion eines Zeichenbrettes. Jedes Element muss mittels Koordinaten positioniert werden. (Sonst wird es oben rechts angezeigt) Die Child-Elemente (hier Buttons) geben an von wo (Left, Right, Top, Bottom) aus sie mit welchem Wert positioniert werden.
    WrapPanel: Das WrapPanel reiht ein Element an das nächste, bis der Platz aufgebraucht ist, dann springt es auf eine neue Zeile. Der nicht benutzte Platz (hinter dem Button1) bleibt frei. Standardmässig werden die Child-Elemente horizontal hintereinander gereiht. Es kann aber auch untereinander stapeln. <WrapPanel Orientation="Vertical">
    StackPanel: Das StackPanel reiht auch die Elemente hinter- bzw. untereinander an. Dabei wird aber jeweils das Child-Element auf die maximal möglichen Ausmasse gestreched.
    DockPanel: Das Dock Panel erlaubt die Anordnung der Elemente nach Rändern. Jedes Child-Element gibt an, an welchem Rand es sich befindet. Es können mehrere Element am gleichen Rand gebunden werden. Der / die Child Elemente ohne Angabe eines Randes werden im Zentrum platziert.
    Grid: Ein Grid Container bietet die Funktionen einer Tabelle an. Es werden Spalten (Row) und Zeilen (Column) definiert. Die Child-Elemente werden den Zellen zugeordnet und nehmen den kompletten Platz der Zelle ein.
    ViewBox: Die ViewBox ist kein eigenständiger Container, sondern sie wird verwendet, damit darin platzierte Child-Elemente die maximale Grösse des Parent-Elements übernehmen können. Für diese Grössenanpassung gibt es unterschiedliche Füllvarianten:

    Mögliche Grössenangaben

    In den obigen Beispielen wurden absolute Grössenangaben (Bsp: Width=100) verwendet. Was bedeuten diese? Wenn keine Einheit angegeben wird, werden die Zahlen in Pixeln gerechnet. Es gibt folgende gültige Einheiten:

    • px

    • Pixel (Standard) Geräteunabhängige Einheit. „px“ kann auch weggelassen werden.


    • in

    • Inches 1 Inch = 96 Pixel

    • cm

    • Zentimeter 1 cm = 96/2.54 Pixel

    • pt

    • Point 1 pt = 96/72 Pixel

    Bei Grössenänderungen am Fenster zur Laufzeit oder noch nicht bekannten Child-Elementen, reichen absolute Angaben nicht aus. In diesem Fall kann mit dem Stern gearbeitet werden.
    Container mit einem Stern:
    Wir sehen beim linken Fenster, dass der Button nicht komplett dargestellt werden kann. Für den Fall, dass das die Grösse Child-Element noch nicht bekannt ist kann anstelle des Sterns die Option „Auto“ verwendet werden. Dann richtet sich die Grösse des Containers (Parent-Element) nach dem Child- Element:
    Container mit Option „Auto“:

    Ränder definieren

    Alle bisherigen Elemente haben das Parent-Element jeweils voll ausgefüllt:
    - Der Container hat das Window voll ausgefüllt
    - Die Buttons haben den zugewiesenen Platz im Container voll ausgefüllt
    Für die schönere Darstellung sollte es möglich sein, einen Abstand zwischen den Elementen definieren zu können. Dies wird mit der Eigenschaft Margin realisiert. Diese Eigenschaft beherrschen alle Container und Steuerelemente!

    Panels in WPF.mp4

  • 18 Mär. 2018
  • 10:05

    Benutzerschnittstellen implementieren Grundsätze der Dialoggestaltung, die 7 Grundsätze

    Die ISO 9241 Norm umschreibt die Ergonomie der Mensch-System Interaktion und umfasst sehr viele Gebiete der Hard- und Software. Der Teil 110 befasst sich mit der Dialoggestaltung, also mit Software, welche direkt mit dem Benutzer interagiert. Es gibt noch andere Teile (12 – 17, 129, 143 usw.), welche an dieser Stelle nicht behandelt werden, obwohl sie auch die Ergonomie von Benutzerschnittstellen betreffen.
    Konstruktoren sind spezielle „Methoden“, welche zur Initialisierung von Objekten aufgerufen werden. Wie alle Methoden, können auch Konstruktoren Parameter haben, über welche beim Aufruf Werte mitegegben werden können. Das wird hier ausgenützt, um die Instanzvariablen der Objekte bei der Erzeugung mit den gewünschten Werten initialisieren zu können.

    Grundsatz

    Beispiele

     

    Aufgabenangemessen- heit

    .    Automatisierte Abläufe entlasten den User, z. B. voreingestellte Startparameter


    .    Voreinstellungen sind zielführend und nachvollziehbar, z. B. die Position des Maus-Cursors

    .    Dialogwege und Fenster bilden die Schritte der Aufgabe genau ab. 


    .    Relevante Infos wie Ansprechpartner und Mail-Kontaktadressen sind 
leicht zu finden.

    .    Mühsames Ausfüllen irrelevanter Formularfelder wird vermieden.


    Steuerbarkeit

    .    Abfolge und Tiefe der angebotenen Information sind beeinflussbar 


    .    Ergebnisse von Abfragen lassen sich sortieren und filtern. 


    .    Bedienschritte mehrstufiger Eingabeprozesse lassen sich rückgängig 
machen („Undo-Funktion“) und ohne wieder ganz von vorn starten zu 
müssen.

    .    Übergroße Grafiken erscheinen zunächst als anklickbare Thumbnails 
(Vorschaubilder).

     

    Erwartungskonformität

    .    WYSIWYG-Prinzip beachten (What You See Is What You Get) 


    .    Schaltflächen und Menüeinträge reagieren auf vorhersehbare Weise und 
sind innerhalb des Dokuments / der Website optisch und funktionell 
konsistent.

    .    Unterstreichung von Wörtern bedeutet stets, dass es sich um einen 
anklickbaren Link handelt.

    .    Unternehmenslogos sind mit Links zur Unternehmenshomepage 
hinterlegt. 


    .    Tastatureingaben funktionieren analog zu gängigen 
Textverarbeitungsprogrammen.

    .    Für Klickbuttons, Schaltflächen Kontrollkästchen usw. sind Default- 
Einstellungen festgelegt, die dem häufigsten oder Normalablauf 
entsprechen und den User klar führen.

    .    Bedien- und Steuerfunktionen entsprechen den zu erwarteten Vorerfahrungen der User.


    Selbstbeschreibungs- fähigkeit

     

    •       Linkziele sind für den User ersichtlich.

    •       Sicherheitsabfragen schützen vor folgenschweren Fehlbedienungen, z.
B. vor Löschvorgängen

    •       Datenbankanfragen geben Feedback.

    •       Bedienhinweise reagieren kontextspezifisch.

    •       Wartezeiten werden visualisiert und erläutert.

    Individualisierbarkeit

    .    Der User kann Anzeigeformate (z. B. Fenstergrößen) und Ausgabeformate (z. B. von Grafiken oder Downloads) den eigenen Bedürfnissen und Vorliben anpassen.

    .    Strukturelemente auf Startseiten sind individuell einstellbar, z. B. mit der lokalen Wetterprognose oder regionalen Veranstaltungstipps.

    .    Funktionale Elemente wie Menüs, Funktionstasten, Symbolleisten lassen sich konfigurieren und für jeden Nutzer speichern.


    .    Newsletter sind themenspezifisch konfigurierbar.

    Lernförderlichkeit

    .    Der User wird zum Verstehen der Dokumentationsstruktur und der Nutzungsoptionen angeleitet.

    .    Der Aufbau komplexer Websites lässt sich mit einer Sitemap anschaulich erfassen.

    .    Bedienschritte erfolgen nach einem klaren und nachvollziehbaren Prinzip.

    .    Für mehrstufige Eingabevorgänge wie Buchungen oder Bestellungen gibt es eine Option zum unverbindlichen Testen.

    .    Für komplexe Sachverhalte werden bewährte Lernelemente wie FAQ- Listen (Antworten auf häufig gestellte Fragen) oder ,,Guides Tours,, genutzt.

    Fehlertoleranz

    •   Eingabefehler des Users führen nicht zu Programmabstürzen.

    •   Formulareingaben werden auf Plausibilität geprüft.

    •   Fehlermeldungen sind in verständlicher Sprache verfasst.

    •   Für alle Eingaben und Steuerfunktionen gibt es Korrektur oder Rückgängig-Optionen

    •   Der User kann sein Ziel erreichen, auch wenn er Fehler macht, z. B. Tippfehler in einer Suchfunktion oder andere fehlerhafte Eingaben.

    Planung einer Benutzerschnittstelle (Prototyping)

    Wird eine neue Applikation nach Kundenwünschen erstellt, beginn das Projektteam mit der Planungsphase. In dieser Phase sollen möglichst alle Anforderungen bekannt sein, um: • Die Machbarkeit abzuklären • Den Aufwand abschätzen zu können, welcher den Preis und den frühsten Fertigstellungszeitpunkt definiert • Zu verhindern, dass mitten im Projekt Anpassungen der Anforderungen geschehen. Bei der Planung kommen unterschiedliche Werkzeuge zum Einsatz. Oft werden aus Kundensicht sogenannte Epics erstellt, welche dann in User Stories genauer definiert werden. Dies dient der Planung der gesamten Applikation. Zur einfacheren Darstellung wird dabei UML (unified modelling language) eingesetzt. Auch auf der Ebene Benutzerschnittstelle kann bereits früh angefangen werden mit der Planung. Die schnellste Art bedient sich vereinfachter Darstellungen, sogenannter Prototypen. Die Idee eines Prototyps ist, dass es sich lediglich auf die Darstellung der Applikation beschränkt. Es wird nichts programmiert! Wir unterscheiden: • Wireframes • Mockups

  • 18 Mär. 2018
  • 10:05

    Benutzerschnittstellen implementieren Aufbau eines Programms

    Ab einer gewissen „Grösse“ eines Programms macht es Sinn, dieses in Schichten aufzuteilen. Das am meisten verwendete Modell ist das Dreischichtenmodell:
    Schicht Aufgaben Datenform
    View: Präsentationsschicht Darstellungsschicht •Benutzerinteraktion
    •Darstellen von Daten jeglicher Art
    •Eingaben verarbeiten
    •Benutzereingabe
    •Dateien(Bild,Text usw.)
    •Steuerelemente
    Controller: Geschäftslogik Applikationsschicht •Berechnungen
    •Prozesse abbilden
    •Daten abfragen
    •Mehrbenutzerbetrieb sicherstellen
    •Objekte
    Model: Datenzugriffsschicht Persistenzschicht •Speichern der Anwendungsdaten in „langlebiger“ Form
    •Datensätze in Tabellen
    •Objekte in strukturierten Dateien (XML)
    Jede Schicht stellt der benachbarten Schicht eine Schnittstelle bereit. Diese werden API genannt (Application Programming Interface). Die Schichten dürfen nur mit der jeweils benachbarten Schicht kommunizieren, um das Programm stabil, wartbar und übersichtlich zu gestalten. Der Vorteil der Schichten besteht darin, dass diese unabhängig voneinander programmiert und getestet werden können.

    Erstellungszyklus einer Applikation

    Ein grosser Vorteil der Auftrennung in Schichten ist der, dass die einzelnen Schichten unabhängig voneinander getestet werden können. (Das Thema „Testing“ wird später im Modul noch eingehend behandelt) 1. Phase (Planung) Kunde, technische Leitung, Entwickler und Tester erstellen ein Konzept der Applikation. Typischerweise werden dabei Anwendungsfälle („Use Cases“) erstellt und nicht funktionale Anforderungen definiert (Performance, Security usw.) Die API aller Schichten wird spezifiziert, damit die Entwicklung in der 2. Phase (Umsetzung) unabhängig voneinander durchgeführt werden kann. In dieser Phase werden wenn möglich bereits Tests durchlaufen 3. Phase (Gesamttests) Die gesamte Applikation wird getestet und dem Kunden zur Beurteilung vorgelegt. Dies erfolgt in regelmässigen Zeitabständen
    Darstellungsschicht M120 Applikationschicht M411 Persistenzschicht M151
    •Ergonomie
    •Benutzerinteraktion
    •Fenster und Dialog programmierung
    •Algorithmen für Berechnungen
    •Iterationen und Rekursionen
    •Objektorientierte Programmierung
    •Datenbankdesign und Erstellung
    •Abfrage und Manipulationssprache SQL
  • 18 Mär. 2018
  • 10:05

    Benutzerschnittstellen implementieren Ergonomie

    Der Begriff der Ergonomie wird wie folgt definiert:Ziel der Ergonomie ist es, die Arbeitsbedingungen, den Arbeitsablauf, die Anordnung der zu greifenden Gegenstände (Werkstück, Werkzeug, Halbzeug) räumlich und zeitlich optimiert anzuordnen sowie die Arbeitsgeräte für eine Aufgabe so zu optimieren, dass das Arbeitsergebnis (qualitativ und wirtschaftlich) optimal wird und die arbeitenden Menschen möglichst wenig ermüden oder gar geschädigt werden, auch wenn sie die Arbeit über Jahre hinweg ausüben. Ein besonderes Augenmerk liegt dabei auf der Benutzerfreundlichkeit, also der Verbesserung des Arbeitsplatzes, der Arbeitsorganisation und heute meist der Mensch-Maschine-Schnittstelle.Definition von 1857 Wojciech Jastrzębowski „Gliederung der Ergonomie“, Quelle Wikipedia

    Wir sind umgeben von Benutzerschnittstellen, ohne dass wird es merken.
    Im täglichen Umgang haben wir uns daran gewöhnt technische Geräte zu bedienen, ohne zuvor eine Anleitung gelesen oder einen Kurs besucht zu haben.
    Die Eingabeschnittstelle eines Fahrstuhls kommt mit Pfeilen (hoch, runter, Tür auf, Tür zu) Nummern (Stockwerk) und eine Alarmknopf aus. Diese Schnittstelle ist auf ein Minimum reduziert und bedient sich einer einheitlichen, sprachneutralen Symbolik. Für die Ausgabe reicht eine Anzeige der Nummer (Stockwerk) sowie ein Licht pro Knopf, welches signalisiert „Knopfdruck registriert“. Luxuriöse Modelle erzeugen zudem ein angenehmes Geräusch, um die Ankunft im gewünschten Stockwerk akustisch zu signalisieren.

    Je simpler eine Benutzerschnittstelle konstruiert ist, desto einfacher ist es sie zu benutzen.

    Wir werden diesen Begriff anwenden bei der Gestaltung derjenigen Teile eines Programms, welche mit dem Menschen in Interaktion stehen. Interaktion bedeutet Informationsaustausch in beide Richtungen:

    Ein Programm gibt Signale ab, die vom Menschen aufgenommen werden (Output)Diese können optischer (Texte, Bilder, Animationen) oder akustischer (Töne) Natur sein.

    Der Benutzer1 nimmt Einfluss auf das Programm, indem er Eingaben mittels Tastatur oder Maus durchführt.Die Möglichkeit der Spracheingabe wird in diesem Modul nicht berücksichtigt.

    Die Forschung zu diesem Thema beschäftigt sich mit:

    -Wahrnehmung und Informationsverarbeitung des Menschen

    -Einschränkungen der kognitiven Fähigkeiten des Menschen (Bsp: Wie viele Informationen kann man sich merken kurz- oder langfristig merken)

    -Visuelle Wahrnehmung (Aufmerksamkeit, Farbendeutung, Strukturen...)

    -Multimediale Stützung der Wahrnehmung

    Grundsätzlich sollte unser Anspruch sein, dass die Programme (Maschine) sich dem Menschen anpassen müssen und nicht umgekehrt. Dabei fällt uns als Gestalter dieser Programme eine bedeutende Rolle zu!Der Entwicklungsressourcen an einem Programm sollte nicht nur auf die Datenbank- und Ablauflogik verteilt werden. Ein Grossteil der Entwicklung sollte für Planung, Umsetzung und Testen der Benutzerschnittstelle aufgewendet werden.

    Kate Sexton:Heuristics 10 Rules to Better Usability

  • 18 Mär. 2018
  • 10:05

    Benutzerschnittstellen implementieren Allgmeine fragen?

    User 23 Jan 2:00 pm
    message user image
    Wo kommen Benutzerschnittstellen überall vor?
    Support 23 Jan 2:05 pm
    message user image
    Windows, Linux, Word, Excel, Games, Buchhaltungsprogramm, Webseite, Billetautomat am Bahnhof, Geldautomat, Smartphone, Drucker mit Display, Smart-TV, Cockpit eines Flugzeugs usw. Eigentlich sind auch Ausdrucke eine Benutzerschnittstelle ohne Interaktion
    User 23 Jan 2:10 pm
    message user image
    Wie plane ich eine Benutzerschnittstelle?
    Support 23 Jan 2:15 pm
    message user image
    Definieren des Umfangs der Inhalte (Name, Vorname usw) Definieren des Mengengerüsts der Inhalte (3-4 Auswahlmöglichkeiten oder 1000) Definieren der Zusammenhänge der Daten (Fremdschlüssel in der Datenbank erlauben „Sprünge“ im Programm) Kenntnisse Endbenutzer (Präferenz Maus- oder Tastatursteuerung, Knöpfe/Menus/Rechte Maus usw.) Definieren der Prozesse/Abläufe (Masken vs Wizards, zurückspringen (Undo) möglich, Wartezeiten anzeigen Prototyping mittels Mockups, Wireframes oder „echtem“ GUI, Animierter Prototyp
    User 23 Jan 2:20 pm
    message user image
    Welche Technologien gibt es für die Umsetzung einer Benutzerschnittstelle?
    Support 23 Jan 2:25 pm
    message user image
    Windows Forms, Windows Presentation Foundation (WPF) Java SWT, Java Swing Linux GTK, Linux QT Web klassisch (HTML, CSS), Web animiert (Flash, Silverlight)
    User 23 Jan 2:00 pm
    message user image
    Was sind die Qualitätsmerkmale einer Benutzerschnittstelle?
    Support 23 Jan 2:05 pm
    message user image
    Intuitive, einfache Bedienung (was bedeutet das?), Übersichtlichkeit, erlaubt keine Fehleingaben, einheitliches Aussehen, richtige Wahl der Elemente (Bsp: Checkbox/Radiobutton), kein langes Scrollen (Listen, Dropdown), keine Ermüdung durch falsche Farbwahl, Grösse an jeweiligen Bildschirm anpassbar, keine versteckten Informationen, wo nötig grafische Elemente zur besseren Orientierung, kurze Reaktionszeit, Drag & Drop Möglichkeit wenn sinnvoll, Hilfestellung (bei Bedarf oder bei Mouseover), Mehrsprachigkeit, usw.