Wireframes, Mockups oder Prototyp?

Wir erhalten immer wieder Anfragen für eine App-Entwicklung in der Art:

Ich möchte bei Ihnen eine App entwickeln lassen, was kostet das?”

Um das beantworten zu können benötigen wir in der Regel ein gutes App-Konzept. Mit nur einer App-Idee im Kopf kann man nämlich noch keine App entwickeln, geschweige denn einen Kostenvoranschlag abgeben. Erstellen Sie daher zuerst ein gutes App-Konzept um zu veranschaulichen was Ihre App-Nutzer später wie, wo und wann sehen werden. Zu einem guten App-Konzept gehören Wireframes, Mockups oder manchmal sogar ein Prototyp.

Was ist ein Wireframe?

Ein Wireframe ist eine grobe Darstellung eines Designs. Deutlich gezeigt werden sollten:

  • die Hauptinhaltsgruppen (was?)
  • die Struktur der Informationen (wo?)
  • eine Beschreibung und grundlegende Visualisierung der Interaktion zwischen Benutzer und Schnittstelle (wie?)

Wireframes sind nicht nur bedeutungslose Gruppen von grauen Kästen, obwohl sie genau so aussehen können. Betrachten Sie sie als das Rückgrat Ihres Designs und denken Sie daran, dass Wireframes eine Darstellung aller wichtigen Teile des Endprodukts enthalten sollten.

Die Erstellung von Wireframes geschieht in der Regel schnell. Die meiste Zeit wird mit der Teamkommunikation und dem Gedankenaustausch verbracht.

Die Visualisierung sollte optisch ansprechend sein, aber dennoch stark vereinfacht. Schwarz-grau-weiß sind die typischen Farben, die Sie verwenden können (Man kann blau hinzufügen, um Links abzubilden).

Wenn die Vorbereitung zu zeitaufwendig ist (z.B. Auswahl der Icons, Hochladen von Bildern), müssen Sie diese vereinfacht darstellen (z.B. durch Platzhalter – gekreuzte Rechtecke für Bilder, plus eine entsprechende Beschreibung). Wir bezeichnen Wireframes eher als Low-Fidelity Deliverables (Lo-Fi).

Ein gut gestalteter Wireframe kommuniziert Design auf eine klare Weise und gibt den Weg für das gesamte Team vor.

Wann Sie Wireframes verwenden sollten

Wireframes werden typischerweise als Darstellung eines Projektes verwendet. Es handelt sich um statische und fixe Interaktionen mit einem Interface zu einem bestimmten Zeitpunkt. Sie werden durch Text begleitet (von kurzen Hinweisen zur Erläuterung der Interaktionen bis hin zu komplexen technischen Dokumentationen).

Wireframe der App "Better Ears"
Ausschnitt des Wireframe der App “Better Ears”

Sie können aber auch in einer weniger formellen Art und Weise verwendet werden. Da sie schnell und einfach in der Anfertigung sind, dienen sie als klare Skizzen für die Team-Kommunikation. Wenn Entwickler fragen, wie etwas gemacht werden soll – kann ein Wireframe klare Antworten liefern.

Ein Prototyp ist eine Simulation der Interaktion zwischen dem Benutzer und der Schnittstelle. Es sieht vielleicht nicht genau wie das Endprodukt aus, sollte aber sehr ähnlich sein (es ist definitiv kein gräuliches, skizzenhaftes Ding). Simulieren Sie Interaktionen mit Sorgfalt, so dass es eine große Ähnlichkeit mit der endgültigen Anwendung gibt.

Was ist ein Mockup?

Ein Mockup ist eine mittlere bis hochauflösende, statische Darstellung des Designs. Sehr oft ist ein Mockup ein Entwurf für ein visuelles Design oder sogar das eigentliche UI-Design. Ein gut erstelltes Mockup:

  • stellt die Struktur von Informationen dar, visualisiert den Inhalt und demonstriert die Grundfunktionalitäten statisch.
  • motiviert die Beteiligten, die visuelle Seite des Projekts tatsächlich zu überprüfen.
Mockup der App "Better Ears"
Ausschnitt des Mockup der App “Better Ears”

Wann man ein Mockup verwenden sollte.

Verwenden Sie Mockups, wenn aus den Wireframes nicht klar hervorgeht wie das UI genau auszusehen hat bzw. einige Elemente im Wireframe nur durch Text dargestellt sind. Ebenso sollten Mockups erstellt werden, wenn es sich um eine grafisch ansprechende App handelt. Sind hingegen alle UI Elemente und Einzelheiten im Wireframe enthalten und kennt sich der Entwickler mit den Design-Guidelines des jeweiligen Betriebssystem aus, kann man auf Mockups verzichten.

Was ist ein Prototyp?

Ein Prototyp ist eine mittel- bis hochgenaue Darstellung des Endprodukts, die die Interaktion der Benutzeroberfläche simuliert. Es sollte dem Benutzer erlauben:

  • Inhalte und Interaktionen mit der Oberfläche kennen zu lernen.
  • die wesentlichen Interaktionen ähnlich dem Endprodukt zu testen.

Wann sollte man einen Prototyp verwenden?

Prototypen bringen ihr volles Potenzial im Praxistest zum Einsatz. Ein Prototyp ist ein hervorragendes Mittel, um die Benutzerfreundlichkeit der Oberfläche zu überprüfen, bevor die Entwicklung tatsächlich beginnt.

Prototypen sind in der Regel nicht die beste Dokumentation, da sie den “Leser” zwingen die Oberfläche zu verstehen. Auf der anderen Seite ist ein Prototyp die ansprechendste Form der Design-Dokumentation, da die Oberfläche greifbar und unkompliziert ist.

Beachten Sie, dass Prototyping eher teuer und zeitaufwändig ist. Es macht daher Sinn Prototypen zu erstellen, die sie in der Entwicklung wiederverwenden können. Das bedeutet zwar, dass man etwas programmieren muss oder ein entsprechendes Tool, wie z.B. appdoo nutzt, aber es ist besonders effektiv in relativ einfachen Projekten.

Richtig gemacht und kombiniert mit Benutzertests kann sich das Prototyping von selbst amortisieren.

Wir als erfahrene Full-Service-App-Agentur, unterstützen Sie natürlich auch bei der Erstellung eines App-Konzepts mit Wireframes, Mockups oder einem Prototyp. Kontaktieren Sie uns einfach und erzählen uns von Ihrer App-Idee.