Über unsMediaKontaktImpressum
Olena Bochkor & Dr. Veikko Krypczyk 12. März 2019

Der schnelle Entwurf zum passgenauen User Interface mit RAD Studio

Die Benutzeroberfläche einer Anwendung oder App ist das Gesicht des digitalen Produktes. Die Zeiten, in denen es "nebenbei" und während der Entwicklung gestaltet wurde, sind schon lange vorbei. Es werden Prototypen erstellt und frühzeitig erste Entwürfe mit dem Kunden abgestimmt. Gefragt sind effektive Wege zu einer kundenorientierten, modernen und ansprechenden Oberfläche. Schnelle Prototypen und Templates sind der richtige Weg. Designtools- und Entwicklungsumgebung müssen aufeinander abgestimmt werden. Wir stellen Ideen mit Hilfe von RAD Studio vor.

Sprichwörtlich ausgedrückt kann der Anwender nicht unter die Haube einer Software blicken. Das einzige, was er sieht, ist die Benutzeroberfläche (User Interface). Diese Tatsache hat dazu geführt, dass bei der Entwicklung von Software heute ein sehr großer Aufwand betrieben wird, um ansprechende Oberflächen mit einem funktionalen Mehrwert und einem zeitgemäßen Design zu erstellen. Typische Fragen dieses Vorgangs sind die Anordnung der Elemente und die Auswahl der passenden Designbausteine, wie Farben, Schriftfarben und grafische Elemente. Letztere sollen nicht nur einen frischen Look versprühen, sondern nach Möglichkeit noch in Einklang mit der Corporate Identity des betreffenden Unternehmens stehen. Nebenher sind Designrichtlinien der Hersteller und aktuelle Trends zu beachten.

Die Gestaltung des User Interface gerät damit zu einer umfassenden und anspruchsvollen Aufgabe. Die dazu notwendigenen Kenntnisse unterscheiden sich von den klassischen Aufgaben der Programmierung. Stilistische Fragen müssen beantwortet werden. Der ideale Workflow stellt stets die zu erledigende Aufgabe bzw. den zu bearbeitenden Content in den Fokus. Statt umfassender Menüs und komplexer Bedienfolgen sind selbstbeschreibende und kontextbezogene Oberflächen das Gebot der Stunde. Eine Vielzahl von Schlagwörtern, wie User Centered Design, User Experience oder Content First, beschreiben die Wichtigkeit dieses Themas. In größeren Projekten mit entsprechendem Budget beschäftigt sich ein Designer ausschließlich mit den angesprochenen Fragen und kann den Entwicklern entsprechende Vorgaben und Hilfen in Form von Vorlagen, Prototypen und grafischen Content zur Verfügung stellen.

Einen solchen Aufwand kann man nicht in jedem Fall betreiben. Oft muss es schneller gehen. Es ist ein wenig wie in der modernen Küche. Vorlagen und Komponenten werden für wiederkehrende Use Cases kombiniert und an die Bedürfnisse des Einzelfalles angepasst. Wichtige Hilfsmittel für das User-Interface-Design sind Stencils und Templates. Stencils kommen dabei in den frühen Phasen des Prototypings und den zugehörigen Werkzeugen zum Einsatz; während moderne integrierte Entwicklungsumgebungen idealerweise die Arbeit mit Templates beschleunigen und diese für den Entwickler erleichtern. Das Ziel: Die Time-to-Market soll verringert werden.

Anforderungen an das moderne User-Interface-Design

Schaut man sich einige Benutzerschnittstellen von älteren Applikationen an, dann ist die tägliche Arbeit mit diesen Werkzeugen für die Anwender eine Zumutung. Überladene Dialogfelder mit einer unendlichen Anzahl von Eingabefeldern, Beschriftungshinweise gepaart mit weniger aussagekräftigen oder überflüssigen Bezeichnern. Die Anordnung der Elemente erscheint oft willkürlich. Die Dialoge wurden immer wieder mit Hilfe von Updates erweitert, um auch Sonderfälle abdecken zu können. Heute gilt es andere Ansprüche an ein User Interface zu erfüllen. Man spricht vom sogenannten User Centered Design. Dabei handelt es sich um einen ganzheitlichen Ansatz zur Gestaltung interaktiver Systeme, u. a. eben auch von Benutzeroberflächen von Software jeglicher Art. Wesentlich geprägt wurde dieser Trend durch die Nutzung von mobilen Geräten. Kleine Bildschirme und die Verwendung in "rauer" Umgebung haben zu veränderten Anforderungen geführt. Im Fokus von User Centered Design stehen die Endanwender und deren Wünsche. "Wer bedient die spätere Software?" "Welche Erwartungen bestehen an die Nutzung?" Und noch viel wichtiger: "Welche Kernaufgabe möchte der Anwender in der aktuellen Situation erledigen?" Hilfe bietet eine intensive Auseinandersetzung mit den künftigen Anwendern der Software. Oft startet man mit einer umfassenden Nutzerforschung (User Research). In dieser Phase werden die Zielgruppen identifiziert und die möglichen Nutzungsszenarien analysiert. Abhängig vom Ergebnis werden die weiteren Maßnahmen festgelegt. Das Ziel ist es, die realen Anwender, ihre Anforderungen sowie den Nutzungskontext kennenzulernen und zu verstehen. Die gewonnenen Erkenntnisse werden später in das Grobkonzept und erste Prototypen eingearbeitet. Typische Hilfsmittel dieses Prozesses sind:

  • Personas: Man will den Nutzer kennenlernen, sein Verhalten analysieren und seine Motive verstehen. Ein Mindestmaß an persönlichen Eigenschaften zur Charakterisierung sind zu erforschen. Eine Persona beschreibt also eine individuelle Gruppierung von echten Personen aus der Zielgruppe. Sie geben dem unbekannten Nutzer ein Gesicht und damit dem Entwicklungsteam klare Vorstellungen darüber, was sie auszeichnet. Die Erstellung verläuft sehr konkret, d. h. dem Nutzer werden ein Name, ein Alter, ein Aussehen und meist auch Wünsche, Fähigkeiten, Meinungen und Hobbies zugeordnet. Ein Bild visualisiert eine Persona. Das Ziel ist es, die Bedürfnisse der Zielgruppe an die Software herauszuarbeiten und diese Erkenntnisse in konkrete Anforderungen zu übertragen.
  • Fokusgruppe: Es handelt sich um eine moderierte Gruppendiskussion mit potenziellen Nutzern. Gut geeignet für die Erhebung von Anforderungen und zum Sammeln von Nutzerfeedback in unterschiedlichen Projektphasen. Als Ergebnis bekommt man einen detaillierten Bericht mit umfangreichen Informationen.
  • Card Sorting: Das Ziel ist die Erstellung einer verständlichen Navigationsstruktur. Die Navigation soll benutzerfreundlich sein und nur die Begriffe enthalten, welche von der Zielgruppe auch verstanden werden. Den Nutzern wird es ermöglicht, anhand von Karten eine aus ihrer Sicht verständliche und sinnvolle Struktur zu entwickeln.

Das ist nur eine Auswahl aus dem heute sehr breiten Methodenspektrum, um die Wünsche der Anwender zu erforschen. Natürlich muss man nicht bei der Entwicklung einer jeden kleinen App das gesamte Spektrum der Methoden einsetzen. Es steht aber auch fest, dass bereits mit einem vertretbaren Aufwand ein deutlich besseres Ergebnis erreicht wird. Auf jeden Fall hilfreich ist das frühe Erstellen von Prototypen.

Probieren geht über Studieren

Sinn und Zweck von Prototypen ist es, kritische Aspekte eines Produktes – hier einer Software – möglichst frühzeitig zu erkennen bzw. zu beseitigen. Die Anforderungen der Anwender und mögliche Realisierungsoptionen können auf diese Weise in frühen Phasen der Entwicklung abgeglichen werden. Fehler im Entwurf, falsche Denkansätze oder Missverständnisse können auf diese Weise schnell erkannt und korrigiert werden. Man unterscheidet zwischen evolutionären und experimentellen Prototypen. Bei den evolutionären Prototypen wird Funktionalität schrittweise auf- und ausgebaut. Experimentelles Prototyping probiert verschiedene Optionen zur Umsetzung aus und vergleicht deren Ergebnisse miteinander. Es gibt mehrere Möglichkeiten zum Erstellen eines Softwareprototyps. Einfachste Ansätze basieren auf Papier und Bleistift, welche lediglich rudimentäre Aspekte des späteren User Interfaces präsentieren. Über Zwischenstufen können Muster erstellt werden, welche sich kaum vom finalen Produkt unterscheiden. Die Fragen lauten: "Welches ist der richtige Ansatz?" und "Wie hoch darf der Aufwand beim Erstellen des Prototyps sein?" Es ist wichtig für die Effizienz, beim Prototyping den passenden Realitätsgrad zu bestimmen. Manchmal reicht eine Skizze und an anderer Stelle kann nur ein Prototyp mit Funktionalität eine Vorstellung davon geben, wie sich die Anwendung später anfühlen könnte.

Wichtig: Prototyping soll den späteren Design- und Entwicklungsprozess unterstützen und keine zusätzliche Arbeit verursachen. Welche Werkzeuge werden eingesetzt? Zum einem kann man universelle Grafikprogramme – wie Sketch, Illustrator oder Photoshop – verwenden. Ebenso gibt es spezielle Tools für das Erstellen von Prototypen, z. B. Balsamiq.

Keine Brüche zwischen Entwurf und Implementierung

Der gesamte Erstellungsprozess des User Interface sollte trotz der vielen Optionen weitgehend standardisiert werden. Es sollten nach Möglichkeit zwischen den einzelnen Arbeitsschritten keine "Brüche" existieren. Das Ziel ist es, die Zusammenarbeit von Designern und Entwicklern zu optimieren. Der Entwickler sollte am Ende einen Prototyp als Entwurf bekommen, welchen er auch tatsächlich für die Zielplattform und mit dem ausgewählten Werkzeug realisieren kann. Nicht alle Komponenten für ein User Interface stehen auf allen Systemen zur Verfügung. Die Mitarbeiter des Entwurfs (Designer) und die Entwickler des User Interface müssen sich also im Vorfeld intensiv austauschen, d. h. bereits während des Entwurfs muss bekannt sein, welche Optionen in welcher Form tatsächlich umsetzbar sind.

Beispielhaft wird ein Auszug aus dem Entwurf und der Umsetzung einer Benutzeroberfläche für eine mobile App vorgestellt. Als integrierte Entwicklungsumgebung kommt RAD Studio zum Einsatz [1]. Mit Hilfe von RAD Studio können geräteübergreifende Anwendungen, d. h. auch Apps für die mobilen Plattformen iOS und Android, erstellt werden. Das User Interface wird letztendlich durch den Entwickler auf der Basis der geräteübergreifenden Grafikbibliothek FireMonkey vollständig im grafischen Designer der Entwicklungsumgebung realisiert. Für den vorgelagerten Entwurf stehen Symbole und Vektorgrafiken im Stil von FireMonkey zur Verfügung. Dazu hat der Hersteller die Komponenten im Vektorformat erstellt. Diese Komponenten werden in Sketch- und Illustrator-Symbole, Photoshop-Smart-Vector-Objekte und SVGs umgewandelt, so dass Designer schnell und einfach User Interface-Modelle und Prototypen für Anwendungen erstellen können. Symbole und Smart Vector-Objekte sind nach den Namenskonventionen von FireMonkey benannt. So verwenden Designer und Entwickler die gleiche Komponenten-Terminologie und Fehler aufgrund von Fehlkommunikation werden reduziert. Die ganze Palette der Komponenten für den Entwurf des User Interface kann man herunterladen [2].

In der Praxis können dann die in Abb. 1 gezeigten Schritte zu einem schnellen, brauchbaren und diskussionswürdigen User Interface führen.

Später zeigen wir die Schritte anhand der Gestaltung des Login-Screens für eine Fitness-App:

  1. Ergebnisse der Nutzerforschung:
    - Anmeldung an der App durch Nutzername und Passwort
    - Möglichkeit der Anmeldung durch soziale Netzwerke, hier Facebook und Google als Identitätsprovider
    - Link zum Generieren eines neuen Accounts
    - Design: Angepasster Hintergrund im Stil des Themas der App
    - Zusammenfassung zum Beispiel in Form einer Persona
  2. Prototyp (Grobentwurf), zum Beispiel Handskizze:
    - ein erster Entwurf des Prototyps kann mit Hilfe einer Handskizze umgesetzt werden
    - es entsteht ein Eindruck vom späteren Aussehen
    - die wenig zeitaufwändige Umsetzung ist der Vorteil
  3. Prototyp in Designwerkzeug:
    - mit Hilfe der Symbole und Grafiken wird ein Prototyp des späteren Login-Screens mit den konkreten Symbolen erstellt
    - als Diskussionsbasis für die technische Umsetzung
    - Änderungswünsche können in verbesserten Prototyp eingearbeitet werden
    - Designer gibt Informationen über Komponenten und Designentscheidungen, wie Farbcodes und Schriftarten an Entwickler weiter
  4. Technische Umsetzung des User Interface:
    - zum Beispiel RAD Studio und der Grafikbibliothek FireMonkey ohne Code im grafischen Designer
    - Verwendung eines relativen Layouts erlaubt eine korrekte Positionierung der Komponenten auf den unterschiedlichen Geräten
    - vorgefertigte Standardkomponenten beschleunigen den Entwicklungsprozess

Diese Schritte sollte man durchlaufen. Der vermeintliche Mehraufwand im Entwurf führt zu einem deutlich reduzierten Revisionsbedarf bei der tatsächlichen Umsetzung. Das Ergebnis dieses Prozesses ist in Abb. 2 kurz skizziert. Ausgangsbasis ist die erstellte Persona für einen typischen (künftigen) Nutzer der App.

Im zweiten Schritt gilt es die wesentlichen Screens zu skizzieren. Handskizzen müssen keinen Preis für Design gewinnen. Hier geht es in der Tat darum, alle wichtigen Funktionen zu nennen. Das Design und Layout ist Aufgabe der nächsten Schritte.

Es folgt die erste Version des Prototyps. Installieren Sie dazu zum Beispiel die Desktop Version von Balsamiq [3]. Dann importieren Sie die o. g. Symbolbibliothek für FireMonkey-Steuerelemente. Die passenden Symbole haben Sie dann in Balsamiq zur Auswahl (s. Abb. 3). Aktiviert ist zum Beispiel ein Button. In RAD Studio wird dieser als TButton bezeichnet. Im Designtool Balsamiq haben wir die gleiche Bezeichnung. Designer haben damit die gleichen Komponenten wie die Entwickler zur Verfügung. Es entsteht damit ein umsetzbarer Prototyp des User Interfaces. Abb. 4 zeigt den Wireframe des Login-Screens.

Dieser ist Ausgangspunkt für die Diskussion zwischen allen Beteiligten. Folgende Fragen müssen jetzt vorläufig beantwortet werden:

  • Haben wir funktional alle Elemente berücksichtigt und sind auch keine überflüssigen Elemente vorhanden?
  • Ist das Layout stimmig?
  • Welche grafischen Elemente sollen aufgenommen werden, zum Beispiel Hintergrundbilder, Icons usw.
  • Schriftgrößen und Schriftarten
  • Festlegung der farblichen Komponenten

Erst wenn der Prototyp auf Akzeptanz gestoßen ist, beginnen wir mit der technischen Umsetzung, in diesem Fall in RAD Studio. Das Ergebnis sehen Sie in Abb. 5.

Das gesamte User Interface konnte mit Hilfe des grafischen Designers der Entwicklungsumgebung RAD Studio gestaltet werden. Das Layout wurde mit relativen Containern und Positionsangaben erstellt und kann somit ohne Probleme auf unterschiedlichen Geräten angezeigt werden. Die Struktur des Layouts folgt einem streng hierarchischen Aufbau, wie die Strukturansicht aus RAD Studio beweist (s. Abb. 6).

Mit Templates die Arbeit beschleunigen und auf standarisierte Qualität setzen

Auch beim UI-Entwurf und -Design gilt es, das Rad nicht immer wieder neu zu erfinden. Haben Sie unbedingt ein waches Auge für gelungene Entwürfe von Benutzerschnittstellen. Was kann man sich abschauen? Haben Sie ein cool gestaltetes Formular gesehen, dann machen Sie einen Screenshoot und legen Sie sich einen Katalog für gute Entwürfe an. Hier gilt: Viel hilft viel. Nur wenn Sie aus einem großen Fundus aus Optionen schöpfen können, werden Sie schnell einen guten Entwurf eines User Interface hinbekommen. Im konkreten Anwendungsfall können Sie dann das passende Muster auswählen und an die eigenen Bedürfnisse anpassen. Viele Use Cases wiederholen sich, zum Beispiel: Login, Benutzerregistrierung, Adressdatenerfassung, Rücksetzen von Benutzerdaten, Auswahl von Zahlungsoptionen usw. Hier lohnt es sich im Laufe der Zeit sowohl einen Katalog an gelungenen Entwürfen für Prototyping-Tools, als auch technische Umsetzungen parat zu haben. Drittanbieter stellen Templates für alle erdenklichen Systeme kostenfrei und kostenpflichtig zur Auswahl. Für RAD Studio und FireMonkey gibt es zum Beispiel einen Satz von Templates für die Gestaltung eines generischen Login Screens [4]. Nach Einbindung in die Entwicklungsumgebung über den internen Paketmanager GetIt steht eine Auswahl an alternativen Entwürfen bereit. Die Anpassung an die eigenen Vorstellungen geht dann deutlich schneller von der Hand als die vollständige Eigenentwicklung.

Fazit

Das User Interface einer App muss heute nicht nur funktional alle Anforderungen erfüllen, sondern auch gefallen. Das führt zu einem größeren Auswand, insbesondere im Entwurf und zu einem größeren Abstimmungsbedarf zwischen den Beteiligten. Mit passenden Symbolbibliotheken gelingt ein durchgängiger Prozess vom Entwurf des Interfaces bis zur endgültigen Umsetzung. Sind Design- und Entwicklungswerkzeuge aufeinander abgestimmt, kommt es zu keinen Brüchen. RAD Studio bietet zum Beispiel eine umfassende Unterstützung des User-Interface-Entwurfs. Ein solcher Entwurf kann dann in kurzer Zeit mit Hilfe des grafischen Designers realisiert werden. Weder während des Entwurfs noch in der Umsetzung muss mit Code gearbeitet werden. Ebenso hilfreich sind Templates, um für standardisierte Use Cases auf bewährte Lösungen zurückgreifen zu können.

Autoren

Olena Bochkor

Der Arbeitsschwerpunkt von Olena Bochkor ist der Entwurf und das Design moderner und kundengerechter Benutzeroberflächen.
>> Weiterlesen

Dr. Veikko Krypczyk

Dr. Veikko Krypczyk arbeitet u. a. als Softwareentwickler, Fachautor und Dozent. Über die Firma LARInet gibt er darüber hinaus sein Wissen in Schulungen zu aktuellen Fragestellungen der IT weiter.
>> Weiterlesen
Bücher des Autors:

Das könnte Sie auch interessieren
botMessage_toctoc_comments_9210