Beim Sketch kann man seinen Ideen freien Lauf lassen
Auf dem Weg zur fertigen App muss man verschiedene Entwicklungsstufen überwinden. Zunächst gilt es, aus einer Idee ein Konzept zu entwickeln. Dazu beginnt man mit einer Funktionsbeschreibung. Auf der visuellen Ebene erstellt man einen Sketch, aus dem dann ein Wireframe und schliesslich ein Mockup gefertigt wird.
1. Stufe: Funktionsbeschreibung
Der Anfang einer jeden App beginnt mit einer Idee. Um aus dieser Idee eine App zu entwickeln, muss man zunächst einige Fragen beantworten: Was soll die App können? Gibt es etwa eine Registrierungspflicht mit Login-Funktion, können Nutzer ihre Daten ändern oder bestimmte Inhalte hochladen? Die Antworten auf solche und weitere Fragen fasst man in der sogenannten Funktionsbeschreibung zusammen. Hat man alle gewünschten Funktionen aufgelistet, muss anschliessend beschrieben werden, wie diese Funktionen in der App umgesetzt werden sollen.
2. Stufe: Sketch
Um sich das geplante Projekt besser vorstellen zu können, zeichnet man ein erstes grobes Bild von der künftigen App – am einfachsten mit Stift und Papier. Das Ergebnis nennt man einen Sketch oder auf Deutsch: eine Skizze. Mit einem solchen visuellen Entwurf kann man seine Vorstellungen deutlicher darstellen als mit sprachlichen Beschreibungen. Beim Sketch kann man seiner Fantasie freien Lauf lassen – noch befindet man sich in der Brainstorming-Phase. Etwaige Änderungen können auf der nächsten Stufe ohne Probleme vorgenommen werden.
Der Sketch kann mit Stift und Papier angefertigt werden
3. Stufe: Wireframe
Nun verfeinert man den Sketch auf dem Computer. Die einzelnen Elemente werden in Schwarz, Weiss oder Grau-Tönen dargestellt – für Bilder und Fliesstext werden Platzhalter meist in Kästchen-Form verwendet. Man nennt diese sehr einfach gezeichnete Orientierungs-Struktur Wireframe, was wörtlich übersetzt soviel wie Drahtgitter heisst. Auf dieser dritten Stufe der App-Entwicklung legt man sich allgemein fest, welche Art Anwendungsinhalte und Bedienelemente auf dem Start-Bildschirm und den jeweiligen Unter-Bildschirmen dargestellt werden sollen. Elemente wie Logo oder Navigationsmenü werden bereits genau positioniert. Zur Erstellung von Wireframes kann man verschiedene Software-Tools nutzen.
Bedienelemente einer App
Es gibt verschiedene Elemente, die zur Bedienung einer App eingesetzt werden können. Hier ein paar Beispiele:
Schaltflächen: Klickt man eine Schaltfläche an, wird eine bestimmte Funktion ausgeführt. Das kann das Öffnen eines neuen Fensters sein, es kann aber auch zum Beispiel das Abspielen eines Videos bedeuten oder die Eingabe eines Zeichens. Ein Like-Button ist nichts anderes als eine Schaltfläche, die die Funktion hat, ein positives Feedback zu einem Beitrag zu geben.
Tab-Menü: Wenn genügend Platz vorhanden ist, etwa bei Desktop-Apps, kann man den Nutzern sogenannte Tab-Menüs zur Verfügung stellen, um unter verschiedenen Kategorien eine auszuwählen. Die jeweiligen Schaltflächen, die neben- oder übereinander angesiedelt sind, nennt man auch Reiter.
Dropdown-Menü: Da es auf mobilen Geräten wenig Platz gibt, werden bei mobilen Apps meist Dropdown-Menüs verwendet. Die dem Nutzer zur Verfügung stehenden Schaltflächen werden ausgeklappt, sobald man auf die Menü-Schaltfläche klickt. Oftmals wird das Menü mit drei Querstrichen symbolisiert.
Slider: Ein Slider ist ein Element, in dem zum Beispiel Fotos der Reihe nach angezeigt werden. In der Standardeinstellung schiebt jedes neue Foto das vorherige Foto zur Seite. Eine andere Einstellungsmöglichkeit ist die Überblendung.
Eingabefelder: Möchte man den Nutzern anbieten, Inhalte in der App zu suchen, kann man ein Suchfeld verbauen, in das bestimmte Begriffe eingegeben werden können. Daneben sind auch andere Eingabefelder denkbar – zum Beispiel ein Kontaktformular.
Chats: Viele Apps bieten die Möglichkeit an, dass Nutzer untereinander chatten. Ein Chat besteht aus mehreren Bedienelementen wie Schaltflächen und Eingabefeldern.
Bei der Erstellung von Wireframes sollte man bereits darauf achten, dass die App übersichtlich strukturiert ist. Menüs sollten zum Beispiel nicht aus zu vielen Kategorien bestehen.
Man unterscheidet statische und dynamische Wireframes. Bei einem statischen Wireframe wird jeder Bildschirm (jede Seite) einzeln durchstrukturiert. Dynamische Wireframes bestehen aus vielen Bildschirmen, die über Links unter den Schaltflächen miteinander verbunden sind. Bei diesen klickbaren Wireframes – auch click-dummies genannt – können noch keine App-Funktionen getestet werden; allerdings sind erste Navigations-Tests möglich, mit denen man die Bedien-Freundlichkeit der App prüfen kann.
Wireframes eignen sich sehr gut für den Ideen-Austausch zwischen Entwickler und Auftraggeber. Es lohnt sich, ein bisschen mehr Zeit für die Erstellung von Wireframes zu investieren. Die verschiedenen Nutzungsszenarien der App sollten sorgfältig durchdacht werden. In den Wireframes hat man noch die Möglichkeit, ohne grossen Aufwand inhaltliche Änderungen vorzunehmen. Später wird das schwieriger und damit teurer. Bei der Fertigstellung des Wireframes sollte also jeder Bildschirm und jede Schaltfläche sitzen.
4. Stufe: Mockup
Die Wireframes nimmt man zur Grundlage, um ein Modell der App zu bauen. In der Fachsprache bezeichnet man diese Modelle mit dem englischen Begriff «Mockup», was wörtlich übersetzt «Attrappe» heisst. Im Ergebnis sehen die Mockups aus wie Screenshots der zukünftigen App-Seiten. Kennzeichnend für diese Ebene ist die sogenannte high fidelity, also die hohe Wiedergabetreue. Anders als bei den Wireframes, bei denen man nur die Bedien-Elemente und Inhalts-Flächen auf ihren zukünftigen Positionen platziert, werden beim Mockup zusätzlich bereits Layout-Elemente wie etwa Hintergrund-Farben und angepasste Schriftgrössen verwendet, um sich ein Bild vom endgültigen Design der App machen zu können. Auch Fotos und Texte (zur Not Blindtexte: lorem ipsum) werden zur besseren Anschaulichkeit bereits eingefügt. Wer sich unsicher ist, welches Design einem möglichen Investor oder anderem Partner am besten gefällt, sollte Mockups mit unterschiedlichen Designs entwickeln lassen. So können alle Projekt-Beteiligten an der Auswahl des App-Designs teilhaben.
"Von der Skizze zum Mockup"
Beim Mockup kann man sich auch überlegen, wie das grafische Feedback aussehen soll, wenn ein Nutzer zum Beispiel eine bestimmte Schaltfläche anklickt. Auch Ladezeiten sollten als solche angezeigt werden, da der Nutzer ansonsten den Eindruck erhält, die App sei abgestürzt. Des Weiteren sollte man darauf achten, dass die Abstände zwischen einzelnen Buttons gross genug sind; sonst kommt es zu Frustrationen bei den Anwendern, wenn diese nicht das gewünschte Feld treffen. Strukturell wird in der Mockup-Phase in der Regel nichts mehr geändert. Allenfalls werden einzelne Elemente verschoben, um visuelle Anpassungen vorzunehmen.
Für die Anfertigung von Mockups kann man auf Grafikprogramme wie Gimp oder Photoshop zurückgreifen. Es gibt aber auch speziell für Mockups entwickelte Software.
Die Mockups werden zunächst für eine bestimmte Bildschirmauflösung angefertigt. Der Kunde entscheidet, ob mit der mobilen App oder – falls überhaupt geplant – mit der Desktop-App begonnen wird. Wenn alles passt, werden die Mockups für die übrigen Auflösungen und Anwendungsbereiche erstellt. Sollte die Projektidee noch in Bewegung sein, kann man auch später noch Änderungen am Mockup vornehmen. Allerdings steigt der Aufwand, umso länger man abwartet.
Nach der Erstellung des Mockups folgt die Entwicklung eines Prototypen. Je nach Aufwand unterscheidet man flache und tiefe Prototypen. Bei letzteren sind bereits einige Funktionen der App vorhanden, wodurch Nutzungsszenarien simuliert werden können. Der Unterschied zur finalen App besteht häufig darin, dass es noch keine Verbindung zwischen Front-End und Back-End gibt, weshalb die Funktionalität der App noch nicht abschliessend geprüft werden kann.
