Apps selbst gestalten |
Von der Idee zur App |
Apps selbst gestalten |
Die Ideenfindung
Bevor Sie sich mit der Erstellung einer App beschäftigen, sollte zunächst das Problem, welches es mit Hilfe einer App zu lösen gilt, klar sein. Was heißt das konkret?
Erstellen Sie für sich und Ihr Team ein plausibles Szenario. Dieses sollte Ihr Problem so genau wie möglich beschreiben und die typischen W-Fragen beantworten. Dabei ist es wichtig, dass Sie keine Suggestionen verwenden, um den nachfolgenden Ideenfindungsprozess nicht zu manipulieren.
Ziel des Szenarios soll es sein, zukünftig mitwirkende Personen abzuholen, sodass diese ein klares Bild von der Situation und der Herausforderung bekommen. Das schafft Transparenz und gibt jedem Mitwirkenden die gleichen Inforationen.
Nutzer und Anforderungen
Aufbauend auf dem vorliegenden Szenario gilt es nun die Nutzergruppen und Anforderungen zu identifizieren. Für einen solchen nutzerzentrierten Entwicklungsprozess gibt es verschiedene Methoden – wie nachfolgend aufgelistet. Dabei eigenen sich die hervorgehobenen besonders gut.
- Aufgabenanalyse
- Beobachtung
- Interview
- Kontextanalyse
- Fokusgruppe
- Lösungssuche
- Dokumentenanalyse
- Nutzungsszenario
- Personas
User Experience (UX)
Die sogenannte User Experience oder auch Nutzererfahrung stellt einen wesentlichen Teil bei der Gestaltung einer App dar. Sie beschreibt alle Erfahrungen, Gefühle und Erlebnisse, die ein Nutzer bei der Anwendung der App erfährt. Es ist daher wichtig, die UX von Anfang an immer wieder zu hinterfragen und sich bewusst Gedanken darüber zu machen, wie der Nutzer mit der App interagieren soll.
User Interface (UI)
Im Gegensatz zur UX beschäftigt sich das User Interface, also die (grafische) Benutzeroberfläche, mit der visuellen Gestaltung der Elemente (Buttons, Schriftart, Farben, etc.) sowie der App selbst. Dabei ist wichtig, die Erkenntnisse und Vorhaben der UX in das UI zu überführen. Man kann auch sagen: „Form follows Function“ oder: Ein schönes Design, tolle Farben und Formen nützen nichts, wenn die Funktionalität frustriert und der Nutzer sich nicht zurechtfindet oder im schlimmsten Fall den Mehrwert gar nicht erkennt. Denn das hätte zur Folge, dass das Ziel der App nicht erreicht wird und der gesamte Entwicklungsaufwand hinfällig wird.
UX/UI in Kombination
Um das zu vermeiden ist es daher wichtig beide Teile für eine erfolgreiche Nutzeroberfläche und Appgestaltung zu berücksichtigen – und zwar in Kombination. Ausführliche Hinweise dazu finden Sie bspw. in den folgenden DIN-Vorschriften:
- DIN EN ISO 9241 – Ergonomische Anforderungen für Bürotätigkeiten mit Bildschirmgeräten
- DIN EN ISO 9241-210 – Benutzerorientierte Gestaltung von interaktiven Systemen
- DIN EN ISO 9241-110 – Dialogregeln
- DIN EN ISO 14915 – Software-Ergonomie für Multimedia-Benutzungsschnittstellen
- DIN EN 894 – Ergonomische Anforderungen an die Gestaltung von Anzeigen und Stellteilen
Mockup Erstellung
Mit Hinblick auf die Kombination aus UX und UI geht es nun an die Erstellung Ihres ersten Mockups. Ein Mockup ist die grafische Realisierung Ihrer App mit Hilfe geeigneter Software wie z. B. Adobe XD oder Figma. Beides sind Werkzeuge speziell für die Erstellung von Softwareoberflächen. Alternativ funktioniert dies auch mit Powerpoint, jedoch ist es empfehlenswert, sich in eines der beiden erst genannten Werkzeuge einzuarbeiten. Diese sind kostenlos und üblicher Standard der Branche. Mit Hilfe dieser Tools können Sie ohne Programmierkenntnisse bereits einfache Funktionalitäten und Abfolgen Ihrer App realisieren und so ein erstes Nutzererlebnis präsentieren sowie bewerten lassen. Weiterhin erstellen Sie damit ein gemeinsames Verständnis für die App, was speziell für die Kommunikation zwischen Design und Programmierung enorm wichtig ist. Mit Hilfe des erstellten Mockups erfolgt die Programmierung wesentlich einfacher und zielführender.
Der App-Prototyp
Durch das nun erstellte grafische Mockup kann ein erster App-Prototyp programmiert werden. Für den Einstieg in die Appentwicklung empfiehlt sich die Kombination aus HTML, CSS und Javascript. Diese Kombination kennt man bereits aus dem Webdesign. Durch heutige Technologien und Hilfsmittel stellen Webseiten oftmals keinen allzu großen Unterschied mehr zu „nativen Apps“ dar. Der wesentliche Unterschied ist die Programmiersprache spezieller Betriebssystem wie das von Apple, Android oder Windows. Durch die Software Cordova und Electron lassen sich jedoch Ihre in den obigen Sprachen erstellten Webapps in die jeweiligen Softwareumgebungen konvertieren. Natürlich gibt es noch unzählige andere Programmiersprachen und Möglichkeiten eine App zu programmieren. Die besagte Kombination jedoch ist sehr einsteigerfreundlich und für einen Großteil der Anwendungsfälle ausreichend.
Bewertung
Nachdem Sie nun wissen, wie Sie ihre erste App erfolgreich realisieren können ist es noch wichtig, diese auch stätig zu verbessern. Um Verbesserungen erst zu ermöglichen, ist es unerlässlich, vergleichbare Auswertungen zu generieren. Auch hierfür gibt es geeignete Methoden, wie Sie Ihre App bewerten lassen können. Dabei wird zwischen expertenzentrierten und nutzerzentrierten Evaluationsverfahren unterschieden. Wie diese im Detail aussehen und angewendet werden finden Sie ausführlich in unseren Nachgelesen „Von der Idee zur App“
Produkte gestalten! , Usability & Design
Von der Idee zur App
Wir erklären, wie aus einer Idee eine App entstehen kann. Dabei gehen wir auf Gestaltungsrichtlinien ein und zeigen beispielhaft den Entstehungsprozess auf.
Zusammenfassung
In diesem „Erzähl mal“ haben Sie einen kurzen Überblick über das grundsätzliche Vorgehen zur Gestaltung einer App erhalten. Natürlich kann man den gesamten Prozess nicht in dieser Kürze detailliert betrachten – jedoch sollte es Ihnen ein Gefühl dafür vermitteln, wo Sie anfangen können und welche Fehler es zu vermeiden gilt. Besuchen Sie gerne auch unsere Workshops zu diesem Thema oder schauen Sie in das dazugehörige „Nachgelesen“ rein, um mehr zu erfahren.
Wir unterstützen Sie bei der Digitalisierung
Schreiben Sie uns: projekte@betrieb-machen.de
Mittelstand-Digital ist ein Förderschwerpunkt des Bundesministeriums für Wirtschaft und Energie (BMWi) Weitere Informationen unter www.mittelstand-digital.de |