Teil 4 – Entwurf und Umsetzung moderner Benutzeroberflächen

Einführung in die Programmierung: Das Aussehen entscheidet
Kommentare

Die Benutzerschnittstelle ist das Gesicht einer Anwendung. Design und Orientierung an den Bedürfnissen des Benutzers sind maßgebend für den Erfolg der Software. Dabei gilt es, nicht nur zielgerichtet die Funktionalität abzubilden, sondern dem Anwender auch ein positives Erlebnis bei der Benutzung zu bieten.

Die Benutzeroberfläche (User Interface, UI) ist die einzige Berührungsstelle zwischen den Anwendern und der Software. Daher ist ihre Gestaltung sorgfältig zu planen. Das UI-Design ist dabei stark vom Zeitgeist abhängig, d. h. die Designprinzipien unterliegen einem natürlichen Verschleiß, und jede Epoche der IT hat ihre eigenen Gestaltungsmuster herausgebracht. Die Prinzipien sind technisch bedingt, teilweise sind sie aber auch Ausdruck der Anpassung des Geschmacks.

So waren zu Beginn der Computertechnologie textgebundene Benutzeroberflächen – also die Interaktion über die Befehlsebene – die einzige Möglichkeit, mit dem Rechner zu kommunizieren. Für grafische Benutzerschnittstellen gab es die dafür notwendige Hardware nicht. Eine Frage des Geschmacks ist dagegen die übliche Farbgebung von Anwendungen. Software in den späten 1990er-Jahren war oft „bunt“ und musste zeigen, welche multimedialen Fähigkeiten in der Hard- und Software stecken.

Heute setzt man auf eine konsequent schlichte Darstellung mit reduzierter Farbauswahl und einer Konzentration auf den Inhalt. Im vorliegenden Beitrag der Artikelserie (Kasten: „Artikelserie“) setzen wir uns mit den Grundlagen der UI-Gestaltung auseinander. Neben der eigentlichen technischen Umsetzung liegt ein Schwerpunkt auf der Konzeption ansprechender Benutzeroberflächen.

Artikelserie
Teil 1: Einführung: Programmentwicklung, Sprachen, Entwicklungsumgebung
Teil 2: Basics: Variablen, Datentypen, Ablaufstrukturen, Algorithmen
Teil 3: Objektorientierung: Klassen, Eigenschaften, Methoden, Ereignisse, Vererbung
Teil 4: User Interface: Design aus technischer Perspektive
Teil 5: Architektur: Anwendungsschichten und Kopplung, Model-View-Controller-Muster
Teil 6: Daten: Datenmodellierung, Datenbanken (Dateisystem, Server, Cloud)

Ein gutes und durchdachtes Konzept ist Voraussetzung dafür, dass neben den funktionalen Aspekten auch die designtechnischen Anforderungen ausreichend berücksichtigt werden. Dazu zählen etwa die folgenden Aspekte:

    • Standards: Es ist die Beachtung allgemeiner Standards geboten, damit die Anwendung State of the Art ist, d. h. dem Zeitgeist entspricht. Software, die für Windows 95 entwickelt wurde, sieht unter Windows 10 angestaubt aus. Ein Facelift ist unumgänglich.
    • Richtlinien: Richtlinien der Hersteller der Betriebssysteme sind unbedingt zu berücksichtigen. Programme unter Mac OS haben ein anderes Erscheinungsbild als Software unter Microsoft Windows. Unter Linux passt sich das Erscheinungsbild teilweise automatisiert an den jeweiligen Fenstermanager an. Besonders deutlich wird das bei der plattformübergreifenden Programmierung von Apps. Die Systeme iOS, Android und Windows Phone unterscheiden sich wesentlich im UI, deren technischer Umsetzung und der Bedienung aus Anwendersicht. Will man eine App erstellen, so ist sie für alle drei Systeme separat zu entwickeln. Dieses Vorhaben ist mit einem sehr hohen Entwicklungsaufwand verbunden. Alternative Ansätze, wie Web- oder Hybrid-Apps setzen dagegen auf allgemeine Standards wie HTML bzw. verwenden die größte gemeinsame Schnittmenge als Entwicklungsbasis. Gelegentlich fühlen sich derartige Anwendungen dann als Fremdkörper gegenüber den hauseigenen Apps an.
    • Corporate Identity: Firmen präsentieren sich nach außen durch ein einheitliches Erscheinungsbild (Corporate Design). Diese Vorgaben sind auch bei der Gestaltung von Software zu berücksichtigen.

Das Erscheinungsbild wird auch durch die Funktionalität und die Umgebungsbedingungen beeinflusst. So haben Programme im Büroalltag andere Ansprüche an das UI als Software zur Dokumentation in einer Kfz-Werkstatt. Design und Funktionalität dürfen sich nicht wiedersprechen sondern müssen ineinandergreifen. Ein UI unterstützt die Arbeit mit der Anwendung und lässt den Benutzer vergessen, dass er gerade ein Werkzeug bedient.

Gutes Design und Qualität

Über Geschmack lässt sich bekanntlich streiten. Dennoch gibt es eine Menge Hinweise, was eine gute Anwendung ausmacht. Nach allgemeiner Auffassung ist eine Software von hoher Qualität, wenn

  1. die benötigte Funktionalität bereitgestellt wird, d. h. die geforderten Funktionen werden beispielsweise mittels Anwendungsfälle im Pflichtenheft dokumentiert.
  2. bestimmte technische und messbare Anforderungen erfüllt sind. Dazu gehören u. a. die Verarbeitungskapazität, der Datendurchsatz oder die Geschwindigkeit der Verarbeitung.

Diese Punkte sind Merkmale zur Feststellung der objektiven Qualität einer Software. Der wichtigste Aspekt ist jedoch: „Der Anwender muss die Software für gut halten“. Demnach ist also die subjektive Qualität entscheidend. Bei ihrer Beurteilung spielt die Benutzerschnittstelle eine besondere Rolle. Die Erfahrung liefert uns Hinweise, was für gut gehalten wird. Wie so oft zählt der erste Eindruck. Ein modernes und gut durchdachtes UI ist die beste Voraussetzung. Lang- und mittelfristig muss es der Anwendung gelingen, ein Benutzervertrauen aufzubauen. Dazu gehören:

  • Die Anwendung „taugt“ dazu, dass ich damit meinen Job erledigen kann.
  • Man findet Hilfe, wenn etwas unklar erscheint.
  • Daten gehen nicht verloren. Mit den Eingaben des Anwenders ist sehr sorgsam umzugehen. Ein unerwarteter Datenverlust zerstört das Vertrauen in die Arbeit mit dem Programm.
  • Die Anwendung produziert keine unerwünschten Seiteneffekte auf andere Systemelemente.
  • Der Anwender hat das Gefühl, dass bei normaler Verwendung nichts „kaputt“ geht.

Trends

Die allgemeinen Trends zum UI-Design lasen sich unter wenigen Stichwörtern zusammenfassen: „reduziert“, „minimalistisch“, „intuitiv“, „contentbezogen“. Diese Trends gelten übergreifend für alle Arten von Anwendungen. Für Desktopsoftware ergeben sich derzeit neue Entwicklungstrends oft durch Adaption aus dem mobilen Bereich (Kasten: „Mobile Apps setzen Trend im UI-Design“, Abb. 1). Das Design mobiler Anwendungen ist gewissermaßen der Motor. Bestes Beispiel ist Microsoft Windows 10. Das Betriebssystem ist Multi-Device fähig und passt sich an die Systemhardware an; das Gesamtdesign wirkt gestalterisch und formell reduziert und auf den Content bezogen. Trends für Desktopapplikationen sind:

  • Funktionaler Minimalismus: umfasst die Reduzierung auf wesentliche Aspekte. Während lange eine Zunahme der Komplexität stattfand, ist nunmehr genau das Gegenteil der Fall. Mehrfach verschachtelte Menüpunkte gelten als schlechte Benutzerführung. Dagegen werden kontextabhängig die entscheidenden Elemente angezeigt. Der gewonnene Platz wird dem Inhalt zur Verfügung gestellt.
  • Stilistischer Minimalismus: Statt Farbenvielfalt erfolgt eine Konzentration auf wenige Farbtöne. Wichtige Aspekte werden durch eine Akzentfarbe hervorgehoben. Die Software rückt in den Hintergrund und dient der Erfüllung ihrer Aufgabe. Der Fokus liegt klar auf dem Inhalt. Software ist kein Selbstzweck, sondern ein Werkzeug.
  • Integrierte Bedienelemente: Ein Beispiel ist die Verschmelzung des Menüs und der Symbolleisten zur so genannten Multifunktionsleiste (Ribbon Bar), eingeführt durch Microsoft Office mit Version 2007.
  • Konfigurierbares UI: Fenster und Anzeigeelemente sind frei auf dem Desktop platzierbar bzw. können an andere Elemente angedockt werden. Ein UI mit dockbaren Elementen ermöglicht eine individuelle Anpassung an Benutzerwünsche und Bildschirmauflösungen. Windows 10 ermöglicht es sehr einfach, dass Programme vorgefertigte Fensterpositionen und Größen einnehmen können.
  • Sensorische Bedienelemente: Wo immer möglich und sinnvoll erfolgt die Interaktion über Touchoberflächen. Zuerst nur in Smartphones und Tablets, werden berührungsempfindliche Displays nunmehr auch in Notebooks und externen Monitoren angewendet. Die Bedienung mit den Fingern erfordert größere Steuerelemente. Wenn möglich, wird eine haptische Benutzerinteraktion realisiert, zum Beispiel eine Gestensteuerung. Wesentliches Merkmal: Der Inhalt selbst dient als Navigationselement.
  • Multi-Device-UI: Dieses muss für die unterschiedlichsten Displaygrößen geeignet sein. Gleiche Anwendungen laufen sowohl auf einem Smartphone (ca. 4–5 Zoll) als auch auf dem stationären PC mit einem externen Monitor (bis 30 Zoll). Aus Sicht der Entwicklung bedingt es eine unbedingte Verwendung von relativen und vektorbasierten Layouts (Stichwort: Responsive Design).
Abb. 1: Beispiele für Trends und Patterns im UI-Design

Abb. 1: Beispiele für Trends und Patterns im UI-Design

Mobile Apps setzen Trends im UI-Design

Die folgenden Stichwörter nennen Designrichtlinien (Patterns) mobiler Anwendungen [1]. Einige dieser Entwicklungen schwappen auf den Desktop über und tragen somit zu einer Verschmelzung der unterschiedlichen Anwendungstypen bei.

  • Tabs: Die Registerkarten dienen als Trennung mehrerer Bildschirmseiten. Zunächst nur in Internetbrowsern verwendet, werden sie heute in allen Arten von Anwendungen eingesetzt.
  • Tabbar: Eine Tabbar enthält Symbole hinter denen sich weitere Funktionen verstecken. Die Bedienelemente sind damit leicht erreichbar, stören jedoch nicht bei der Benutzung.
  • Symbole: Der Einsatz von vielfältigen Symbolen statt textuellen Bedienelementen ermöglicht eine einfache, sprachneutrale Bedienbarkeit.
  • Carousel: Wird auch als Page View bezeichnet und erlaubt es dem Nutzer, per Flick oder Swipe zwischen den Bildschirmseiten zu wechseln.
  • Flyout-Navigation: Drei Spalten (Navigation, Überblick, Detail) erlauben es, komplexe Inhalte auch bei begrenztem Platzangebot (Smartphone) dennoch übersichtlich darzustellen.
  • Master-Detail: Die Auswahlelemente werden in einer Liste dargestellt. Bei der Anwahl eines Elements werden zusätzliche Details eingeblendet. Eine besondere Form ist die Preview-Detail-Ansicht. Hier werden Informationen bereits in der Vorschau bei Berührung des betreffenden Elements angezeigt.
  • Single-Screen: Alle Elemente werden auf einem Bildschirm angezeigt. Eine Navigation zwischen den Seiten ist nicht notwendig, ein Scrollen auf der Seite durchaus.

Betrachtet man die UI-Trends, gehören auch die Designsprachen dazu:

  • Skeuomorphismus: Die Art und Weise der Bedienung versucht, einen vertrauten Gegenstand der realen Welt nachzuahmen, z. B. sieht eine Notizbuch-App wie ein papiergebundenes Notizbuch aus. Dieser Trend ist klar auf dem Rückzug.
  • Flat Design: Es wird bewusst auf eine Imitation der Realität verzichtet. Farben, Farbverläufe, Schatten etc. werden nur sehr sparsam verwendet (schlichte Eleganz).
  • Modern UI: Dunkler Hintergrund, helle Schrift, einfarbig gehaltene Symbole, feste Darstellungsraster, Stringenz und Übersichtlichkeit sind die Stilelemente dieses Ansatzes. Das Paradebeispiel ist das Modern UI von Windows 8.1, das sich nun in abgewandelter Form im Startmenü von Windows 10 wiederfindet.
  • Responsive Design: Die Anwendung passt sich an die Größe des Ausgabemediums an. Dabei wird nicht nur eine Skalierung angewendet, sondern Inhaltselemente werden je nach Gerät ein- oder ausgeblendet bzw. andersartig platziert.
  • Material Design: Kombination von guter Gestaltung und modernen technischen Möglichkeiten. Das Design basiert auf kartenähnlichen Flächen und dem Gestaltungsstil Flat Design, der für seinen Minimalismus bekannt ist, verwendet aber trotzdem Animationen und Schatten, um einen leichten Tiefeneffekt zu erzeugen und den Nutzer sofort erkennen zu lassen, welche Bereiche bedienbar sind.

Auf dem Weg zum UI

Einstimmiges UI gelingt nicht in einem Schritt, andererseits ist es auch kein Hexenwerk. Mit einem planvollen und schrittweisen Vorgehen wird die Behauptung, dass ein gutes Design reine Glückssache ist, wiederlegt. Natürlich hat UI-Design auch viel mit Geschmack und Begabung zu tun, dennoch können auch Anfänger nach einiger Zeit ansprechende Ergebnisse erreichen, die den Vergleich nicht zu scheuen brauchen. Die Erläuterung nachfolgender Schritte basiert auf der Umsetzung eines Ausschnitts des UIs für eine Mitgliederverwaltung (Kasten: „Mitgliederverwaltung im Fitnessstudio“).

  • Papier und Bleistift: Ganz klassisch mit Papier und Bleistift einen ersten Entwurf einer Benutzerschnittstelle, zum Beispiel den Aufbau und die Anordnung der Steuerelemente eines Dialogfeldes, zu skizzieren, ist gut. Diese Grobskizze ist natürlich nicht für eine externe Präsentation geeignet, hilft aber, den eigenen Ideen einen Rahmen zu geben. Der Vorteil ist klar: eine schnelle Umsetzung ohne technische Hilfsmittel. Das Ergebnis dieser Handskizze zeigt Abbildung 2.
  • PowerPoint und Co: Fast in die gleiche Richtung wie die Arbeit mit Papier und Bleistift geht dieses Hilfsmittel. Zu Visual Studio 2013 gehört die Vorlagensammlung PowerPoint-Storyboarding. Sie bietet die Möglichkeit, sehr schnell grobe Entwürfe für das UI zu entwickeln. Für einen ersten Eindruck ist in Abbildung 3 der Entwurf des Dialogfelds zu sehen. Die Vorlagensammlung bietet eine Auswahl an Elementen, die unmittelbar auf die Folie gezogen werden. Die Elemente und Symbole entstammen den unterschiedlichsten Bereichen des UI-Designs für die verschiedenen Windows-Plattformen. Zu beachten ist, dass keine lauffähige Anwendung, sondern vielmehr ein Entwurf des UI auf der Basis einer Präsentation entsteht. Weitere Werkzeuge sind beispielsweise: Visio (universelles Zeichenwerkzeug), OmniGraffle (Mac OS), iPhone Mockup (online, nur für iPhone) und UI Stencils (echte Schablonen, keine Software zum Zeichnen).
  • Implementierung: „Richtige“ Entwickler werden wahrscheinlich bei so viel Konzeption und Planung bereits ungeduldig. Wie gelangt man denn nun zum ersten echten Entwurf des UI? Für Windows-Desktop-Anwendungen erfolgt die Umsetzung entweder mit Windows Forms oder in Windows Presentation Foundation (WPF). Auch Windows Forms ist trotz seines schon betagten Alters noch durchaus eine Option. Es existieren alle notwendigen Elemente in der Bibliothek, und für Sonderfälle steht ein nahezu unendliches Potenzial an Steuerelementen von Drittanbietern zur Verfügung. Technisch mag Windows Forms nicht die Möglichkeiten von WPF bieten, dennoch ist das System ausgereift und ermöglich gerade für schlichte Datenbankanwendungen eine effiziente Erstellung des UI. Nach einer kurzen Einführung in WPF im kommenden Abschnitt nutzen wir es für unser Beispiel.
Abb. 2: Handskizze für das UI der Anwendung „Mitgliederverwaltung“

Abb. 2: Handskizze für das UI der Anwendung „Mitgliederverwaltung“

Abb. 3: Prototyp des UIs „Mitgliederverwaltung“, erstellt mit PowerPoint Story-Boarding

Abb. 3: Prototyp des UIs „Mitgliederverwaltung“, erstellt mit PowerPoint Story-Boarding

Nach diesen Schritten liegt eine verwendungsfähige Version der Benutzerschnittstelle vor. Ist sie schon fertig? Nein! Nunmehr gilt es, für sie in einem Prozess aus eigener Reflexion und Nutzerfeedback eine schrittweise Verbesserung zu erreichen.

Mitgliederverwaltung im Fitnessstudio

Es ist eine Software zur Dokumentation der Aufgaben für ein Fitnessstudio zu erstellen. Dabei sind Daten aus drei Kategorien zu verwalten:

  • Stammdaten (Name, Adresse, Kontaktdaten …)
  • Vertragsdaten (Laufzeit, Start, inkludierte Leistungen …)
  • Trainingsprogramm (Dokumentation des Trainingsfortschritts an den einzelnen Geräten und Stationen)

Um die Aufgabe zu beschränken, wird ein Entwurf des UI für den Bereich Training entworfen. Es sind folgende Daten zu verwalten: Station (Nummer, Bezeichnung, Foto), Anzahl der Übungswiederholungen, geplante Pausenzeit (in Sekunden), Angaben zur Wiederholungsgeschwindigkeit (langsam, mittel, schnell), freies Textfeld für Anmerkungen.

Ein Quicky in WPF

Unter Microsoft Windows hat sich die Gestaltung des UI mittels WPF durchgesetzt. Diese Technologie kommt auch für Apps zum Einsatz. Wir haben WPF gewählt, da Desktopanwendungen für Microsoft Windows im Businessbereich dominieren. Wir können hier keine umfassende Darstellung bieten, aber einen kompakten Einstieg. Die zwingende Logik führt zu einer schnell vertrauten Arbeitsweise, sodass man kurzfristig erste brauchbare Ergebnisse erreicht und damit eine solide Ausgangsbasis schafft.

WPF basiert auf einer vollständigen Vektororientierung. Die grafischen Möglichkeiten sind bezüglich Formen und Farben sehr vielfältig. Mittels einer eigenen XML-basierten Beschreibungssprache (XAML) erfolgt die Definition. Dadurch wird eine vollständige Trennung von Programmcode und UI-Definition ermöglicht. Gewissermaßen fest eingebaut ist das relative Layout. Es stehen unterschiedliche Container zur Auswahl (Tabelle 1). Da die Anwendungen auf Geräten mit heterogenen Anzeigen laufen, ist eine relative Positionierung der Elemente alternativlos.

Ein Layoutcontainer dient dazu, alle Steuerelement eines Fensters aufzunehmen. Die Basisklasse aller Layoutcontainer ist die Klasse Panel. Eine wichtige Eigenschaft ist Children, die die Elemente innerhalb eines solchen Containers beherbergt. Die Positionierung der Elemente wird nicht explizit festgelegt, sondern ergibt sich automatisiert. Die Eigenschaften Width und Height sind zwar für die meisten Elemente vorhanden, sollten jedoch nur wenig verwendet werden (z. B. bei Buttons).

Die Größe eines Elements ergibt sich vielmehr aus dessen Inhalt in Kombination mit dem umgebenden Container. Die Entwicklung des UI selbst kann in Visual Studio mithilfe des integrierten Designers erfolgen (Abb. 4). WPF bringt eine sehr große Auswahl an Steuerelementen mit, um ein ansprechendes und modernes UI zu gestalten. Die Erweiterung der Palette um eigene bzw. fremde Controls ist möglich.

Abb. 4: Der UI-Designer von Visual Studio für WPF ist inzwischen ausgereift

Abb. 4: Der UI-Designer von Visual Studio für WPF ist inzwischen ausgereift

 

Layoutcontainer Beschreibung
Canvas Der Canvas-Layout-Container erlaubt die Positionierung der Elemente mithilfe exakter Angaben zu den Koordinaten (x,y-Werte). Das Canvas stellt dazu für jedes eingebettete Element die Eigenschaften Left, Right, Top und Bottom zur Verfügung. Da sich die Größe eines Elements aus ihnen selbst ergibt, ist nur jeweils die Angabe von Left oder Right und Top oder Bottom sinnvoll. Es handelt sich um ein absolutes Layout und ist nach Möglichkeit zu vermeiden.
DockPanel Verwendet man das DockPanel so kann für die anzuordnenden Steuerelemente die Docking-Position angegeben werden. Zur Auswahl stehen: Top, Buttom, Left und Right. Das zuletzt eingefügte Control füllt den verbliebenen Platz im Fenster vollständig aus. Dieses Verhalten ist als Standard voreingestellt; man kann es mit der Angabe LastChildFill=“False“ deaktivieren. Elemente mit gleicher Ausrichtung werden gestapelt. Die Reihenfolge der Definition bestimmt die Dominanz der Elemente.
Grid Die Anordnung der Steuerelemente erfolgt in Form einer Tabelle. Dazu sind die Anzahl der Zeilen und Spalten festzulegen. Nach dem Schlüsselwort <Grid> erfolgt die Definition der Spalten und Zeilen. Bei der Deklaration der Steuerelemente wird dann auf die Struktur des Grids Bezug genommen, d. h. es werden die gewünschte Spalte und Zeile angegeben, in der das Element platziert werden soll. Die zugehörigen Eigenschaften lauten Grid.Column und Grid.Row; sie können bei jedem Element, das innerhalb von <Grid>…</Grid> definiert wurde, gesetzt werden.
StackPanel Die Steuerelemente werden nebeneinander oder untereinander angeordnet. Die Richtung wird über die Eigenschaft Orientation festgelegt. Ein automatisches Umbrechen auf die nächste Zeile bzw. Spalte findet nicht statt. Reicht die Größe des Fensters nicht aus, um alle Elemente anzuzeigen, sind „überlappende“ Komponenten nicht sichtbar. Die Größe einer Komponente richtet sich an der Größe des StackPanels aus, sofern für ein Element explizit nichts anderes festgelegt wurde.
WrapPanel Eine Eigenschaft des StackPanel ist, dass „überstehende“ Elemente nicht angezeigt werden. Anders beim WrapPanel: Passt kein weiteres Element an das Ende einer Zeile bzw. Spalte, so wird die Anordnung in der nächsten Zeile bzw. Spalte fortgesetzt. Standardmäßig bestimmt jedes Steuerelement seine Größe selbst nach dessen Inhalt – bei einem Button also anhand des Texts der Schaltfläche. Um jedoch ein ausgeglichenes Erscheinungsbild zu bekommen, kann die Größe aller Elemente mithilfe von ItemHeight und ItemWidth gesetzt werden.
UniformGrid Die Darstellung erfolgt innerhalb einer Tabelle, wobei jede Zelle die gleiche Größe aufweist. Es ist möglich, die Zahl der Zeilen und Spalten festzulegen, ansonsten wird die Tabellenstruktur aus der Zahl der Elemente bestimmt. Beispielsweise bietet sich dieses Layout an, wenn sich die Zahl der Steuerelemente erst zur Laufzeit ergibt, also dann, wenn Teile des UI aus den laufenden Daten zu generieren sind.
TabPanel Auf oberster Ebene fügt man ein <TabPanel>…</TabPanel> ein. Das Steuerelement für die Verwaltung der Registerkarten heißt TabControl. Die einzelnen Registerkarten werden innerhalb von TabItems organisiert.

Tabelle 1: Wichtige Layoutcontainer für WPF

Das Layout für unser Beispiel (Mitgliederverwaltung) haben wir in WPF realisiert. Listing 1 zeigt einen Ausschnitt aus dem Quellcode, Abbildung 5 das Ergebnis. Den kompletten Quellcode dazu können Sie als Visual-Studio-Projekt von der Seite des Verlags herunterladen.

Listing 1: Ausschnitt aus dem Quellcode (XAML) des 041UI der Mitgliederverwaltung

<Window

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

...

Title="Mitglieder" Height="600" Width="800" WindowState="Maximized" >

<Grid >

<TabControl Background="#FFF0F0F0" x:Name="tabControl" >

<TabItem Header="Stammdaten">

<Grid />

</TabItem>

<TabItem Header="Trainingsprogramm">

<Grid >

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="3*"/>

</Grid.ColumnDefinitions>

<Image VerticalAlignment="Top" Source="geraet.png" Width="250" Height="250" Margin="20"/>

<StackPanel Grid.Column="1" Margin="30" Grid.ColumnSpan="2" >

<StackPanel Margin="20" Height="30" Orientation="Horizontal">

<Label Width="150" FontSize="14" Content="Wiederholungen"/>

<ComboBox Margin="15,0" Width="250" IsEditable="True"/>

</StackPanel>

<StackPanel Margin="20" Height="30" Orientation="Horizontal">

<Label Width="150" FontSize="14" Content="Pause (sec)"/>

<ComboBox Margin="15,0" Width="250" IsEditable="True"/>

</StackPanel>

<StackPanel Margin="20" Height="30" Orientation="Horizontal">

<Label Width="150" FontSize="14" Content="Geschwindigkeit"/>

<ComboBox Margin="15,0" Width="250" Text="schnell" SelectedIndex="0">

<ListBoxItem Content="schnell"/>

<ListBoxItem Content="mittel"/>

<ListBoxItem Content="langsam"/>

</ComboBox>

</StackPanel>

<StackPanel Margin="20" Height="350" Orientation="Horizontal">

<Label Width="150" FontSize="14" Content="Anmerkungen"/>

<TextBox Margin="15,0" Width="400" Height="300" Background="LightGray" TextWrapping="Wrap"/>

</StackPanel>

</StackPanel>

</Grid>

</TabItem>

<TabItem Header="Vertrag">

<Grid />

</TabItem>

</TabControl>

</Grid>

</Window>


Abb. 5: UI-Entwurf in Visual Studio auf der Basis von WPF

Abb. 5: UI-Entwurf in Visual Studio auf der Basis von WPF

Fazit, Hausaufgabe und Ausblick

Die Gestaltung des UI will wohl überlegt und geplant werden. Die Zeiten, in denen es gewissermaßen nebenbei entworfen erledigt wurde, sind vorbei. Die Gestaltung ist ein eigenständiger Vorgang im Entwicklungsprozess. Erfolgreiche Anwendungen werden von Designern erstellt, die sich genau mit den Anforderungen der Software und noch wichtiger mit den Kundenwünschen beschäftigen. Dabei wird deren Arbeit durch Empfehlungen, Richtlinien und Werkzeuge unterstützt. Wie in den vorangegangenen Beiträgen empfehlen wir wiederum, zu üben. Lösen Sie dazu die Aufgabe (Kasten: „Hausaufgabe: Entwerfen wie die Profis“). Einen Lösungsvorschlag finden Sie unter hier. In der nächsten Ausgabe beschäftigen wir uns vertiefend mit der Architektur von Software.

Hausaufgabe: Entwerfen wie die Profis

Im Rahmen der folgenden Übungsaufgabe sollen Sie den Designprozess durchlaufen. Dazu dient folgendes Szenario: Digitalkameras erzeugen mit ihren hohen Auflösungen sehr große Bilddateien, teilweise über 10 MB/Datei. Um ein paar Schnappschüsse schnell per E-Mail zu versenden, sind erhebliche Reduzierungen in der Dateigröße vorzunehmen.

Man könnte eine Bildbearbeitung starten und jedes Foto einzeln in Auflösung und Qualität anpassen. Zu aufwändig, mit der Folge, dass man die Fotos dann gegebenenfalls doch nicht versendet. Also muss ein Programm her, das alle Fotos eines Ordners in einem Rutsch konvertiert. Dabei ist nur der Grad der Skalierung und der Umfang der Qualitätsreduktion vorzugeben. Auszuwählen sind die Ordner für die Quell- und Zieldateien. Ebenso müssen Buttons für Start und Abbrechen platziert werden.

Der Vorgang kann bei einer großen Anzahl von Dateien und bei entsprechender Dateigröße einige Zeit in Anspruch nehmen, daher ist ein Fortschrittsbalken hilfreich. Es ist eine Desktopanwendung zu erstellen. Entwerfen Sie dazu das UI. Gehen Sie dabei gemäß der folgenden Schritte vor:

  1. Handskizze: Erstellen Sie eine Handskizze zu Ihrer individuellen Idee der Benutzeroberfläche
  2. Prototyp: Auf Basis der Handskizze entwerfen Sie einen Prototyp zum UI der Software. Dabei empfiehlt es sich, mehrere Werkzeuge für das Prototyping zu probieren.
  3. Umsetzung: Entscheiden Sie sich für eine Technologie (Windows Forms, WPF) und erstellen Sie die endgültige Form des Formulars.
  4. Reflexion: Überprüfen Sie das Ergebnis kritisch. Wurden alle funktional notwendigen Elemente in einer sinnvollen Anordnung untergebracht? Ist die Gestaltung (Icons, Farben, Hintergrund, Schriftgröße, Abstände) gut gewählt? Eine mehrfache Überarbeitung des UI ist zu empfehlen.
  5. Feedback: Holen Sie Feedback künftiger Benutzer ein. Dazu erklären Sie nur, was die Software leisten soll. Sagen Sie nicht, wie sie zu bedienen ist. Beobachten Sie den Anwender beim Versuch, mit dem Programm umzugehen. Kommt er nicht sofort damit zurecht, liegt es am UI, und es ist zu überarbeiten.

Links & Literatur

[1] Franke, Florian; Ippen, Johannes: „Apps mit HTML5, CSS3 und Java Script“, Rheinwerk Computing, 2015

Entwickler Magazin

Entwickler Magazin abonnierenDieser Artikel ist im Entwickler Magazin erschienen.

Natürlich können Sie das Entwickler Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -