Tobias Feldherr
1. Juli 2018

App Design Prozess – Von der Raupe zum Schmetterling

App Design Prozess

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.

E-Book App-Design

E-Book: App Design

In diesem E-Book lernen Sie die Grundlagen des App-Designs und erfahren, wie Prinzipien, Heuristiken und Methoden dabei helfen, Ihre App einzigartig zu machen.

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.

Tobias Feldherr

Tobias Feldherr

Als Management & Technologieberater im Bereich Mobility verbinde ich tiefgehende fachliche Expertise mit langjährigem Projektleitungs-Know-How. Diese Kombination liefert mir die Grundlage, meine Kunden-Projekte zum Erfolg zu führen. Gerne unterstütze ich Sie bei den Themen mobile Infrastrukturen und App-Entwicklung mit SAPUI5 oder Low-Code.

Sie haben Fragen? Kontaktieren Sie mich!



Das könnte Sie auch interessieren

Schon Leonardo da Vinci, als Genie seiner Kunst hat verstanden, dass Ästhetik und Funktionalität keine Gegensätze sein müssen, sondern einander brauchen. Beides stellen wir Ihnen als Grundlagen für erfolgreiches App […]

weiterlesen

Der Begriff des Design Thinking „steht für eine Arbeitsweise, die die menschlichen Bedürfnisse, aber auch die technische Umsetzbarkeit und die Wirtschaftlichkeit vereint und zusammenführt.“ Das aus der Schnittmenge generierte Wissen […]

weiterlesen

Die Worte "Design Thinking" tauchen in dem Umfeld mobiler Projekte und SAP Fiori Projekten immer häufiger auf. Viele wissen, wie die einzelnen Phasen des Design Thinking verknüpft sind und was […]

weiterlesen

Schreiben Sie einen Kommentar

Bitte füllen Sie alle mit * gekennzeichneten Felder aus. Ihre E-Mail Adresse wird nicht veröffentlicht.





Kontaktieren Sie uns!
Sophie Weber
Sophie Weber Kundenservice