MISSION MOBILE » App Entwicklung » App Design & App Konzepte
App Design Prozess – Von der Raupe zum Schmetterling
Bevor mit der Entwicklung einer App begonnen wird, geht das Design hauptsächlich durch drei Phasen, dem sogenannten App Design Prozess. Dieser Prozess erlaubt dem Team (und manchmal einigen ausgewählten Usern) die Oberfläche und die Struktur der App zu testen, bevor diese nun endgültig nach den Vorlagen entwickelt wird. Idealerweise können so noch Verständigungsprobleme aus dem Weg geräumt werden, während die Änderungen nur den Teil des Designs umfassen und nicht dem ganzen Aufbau während der Entwicklung.
App Design Prozess: Die drei Phasen
Aber jene drei Phasen werden schnell aufgrund der Ähnlichkeiten verwechselt, wodurch es zunehmend zu Verständnisproblemen kommt. Damit möchte ich nun aufräumen:
Wireframes
Wireframes sind üblicherweise ziemlich ungenau und bilden nur das Grundgerüst einer App ab. So wird z.B. Content mit grauen Boxen bzw. Platzhaltern ersetzt. Das Ziel eines Wireframes ist es, aufzuzeigen, wo welcher Inhalt in einer App zu finden sein wird. Somit sollte ein gutes Wireframe folgende Fragen beantworten:
• Wie ist der Inhalt positioniert?
• Wie sind die Informationen strukturiert?
• Basis UI-Komponenten: Wo sollen Logos, Menus und andere Buttons positioniert werden?
Der Zweck des Wireframes ist es, die beste Struktur der Oberfläche in vielen kleinen Iterationen mit den verschiedenen Stakeholdern herauszufinden. Dies passiert am besten in dieser Phase, da hier noch Änderungen mit sehr wenig Aufwand vorgenommen werden können. Das Wireframe ist außerdem der Ausgangspunkt für die folgenden Phasen während des App Design Prozesses.
Durchsuchen Sie unsere App-Galerie hier nach Wireframe –>
Mockup
Das Mockup ist eine genauere Darstellung einer noch zu entwickelnden Oberfläche, als das Wireframe. Mockups enthalten bereits Bilder und Texte, welche allerdings nur statisch hinterlegt sind. So kriegt man schon einen ersten Eindruck vom Aussehen und den Funktionalitäten der fertigen App (auch wenn diese noch nicht implementiert sind).
Nachdem das Wireframe die grobe Struktur der App definiert hat, fügt das Mockup nun grafische Details hinzu: Mit den erweiterten Details besteht nun die Möglichkeit, die Stakeholder der App mit ins Boot zu holen, um zum Mockup Feedback zu geben.
Durchsuchen Sie unsere App-Galerie hier nach Mock-Up –>
Prototypen
Die Fertigstellung eines Prototypen kennzeichnet das Ende des App Design Prozesses. Während es beim Wireframe und beim Mockup nur um Grafische Details ging, kann nun mit dem Prototypen die Funktion wirklich erlebt werden. So ist es möglich, dass der User:
• den aktuellen Content erleben kann,
• mit der UI auf die gleiche Weise interagieren kann, wie bei der finalen App,
• und Usability-Probleme erkennen und Lösungen dafür vorschlagen kann, die im weiteren Entwicklungsprozess umgesetzt werden können.
Prototypen können unterschiedlich genau konzeptioniert werden. Hier ist die Herausforderung, den richtigen Detailgrad zu finden. Sehr detaillierte Prototypen geben Ihnen einen sehr detaillierten Eindruck von der App, sind dementsprechend aber zeitintensiver. Bei weniger detaillierten Prototypen können Sie schneller testen und Feedback geben.
Bei größeren App-Entwicklungen/App-Design-Projekten entstehen meist mehrere Prototypen, bei denen von einem wenig detaillierten zu einem sehr hoch detaillierten Prototypen iteriert wird.
Auf diesem Wege können Sie sowohl wenig als auch hoch detaillierte Prototypen nutzen. Sie können zum einen schnell Feedback geben, bekommen zum anderen aber auch einen immer besseren Eindruck von der zu entwickelnden App selbst. Der sehr detaillierte Prototyp ist der letzte Schritt vor der final entwickelten App. Dieser sollte bereits das gleiche Look & Feel wie die finale App mitbringen.
Fazit
Sollten Sie Fragen und Anregungen zu dem Thema des App Designs haben, stehe ich Ihnen mit meiner Hilfe und Antwort gerne jederzeit zur Verfügung.
