Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Einleitung

Sobald du eine Idee für deine Web-App hast, solltest du diese sorgfältig planen, bevor du mit dem Coden oder der Gestaltung beginnst. Das ist den meisten von euch natürlich bewusst, doch kann man diesen Punkt gar nicht genug betonen, egal ob du mit einer völlig neuen App startest oder eine bestehende anpasst. Dieser Artikel beleuchtet die grundlegenden Konzepte, die du während der Planung und Implementierungsvorbereitung im Hinterkopf behalten solltest.

Beachte, dass dies ein einfacher und allgemeiner Ablaufplan ist, der dazu erarbeitet wurde, Leute beim Start zu unterstüzten. Wenn du ein erfahrener Entwickler bist, vertraust du bei der Web-App-Entwicklung wahrscheinlich auf eigene Abläufe und Vorgehensweisen, was natürlich völlig in Ordnung ist.

Die Zielsetzung formulieren

Um anzufangen, solltest du die beabsichtigte Funktion der App und das Zielpublikum so knapp wie möglich aufschreiben. Außerdem solltest du dir über den Kontext Gedanken machen, in dem der Benutzer die App vermutlich benutzen wird. Für meine einfache Location Finder-App habe ich zwei Listen notiert:

Funktionalität

  • bestimme den Gerätestandort so genau wie möglich
  • verzeichne diese Position auf einer Google-Karte

Anwendergruppen

  • Entwickler, die etwas über Web-App- und Firefox-OS-Entwicklung lernen wollen, wahrscheinlich in einem Büro oder einem Zug
  • jemand, der herausfinden möchte wo er ist, vermutlich draußen oder unterwegs

Du solltest deine App so einfach wie möglich halten. Konzentriere dich darauf, dass sie genau eine Sache oder ein paar zusammenhängende Aufgaben erledigt. Gibt es mehrere verschiedene Anwendungsfälle, wirst du diese vielleicht auf mehrere verschiedene Apps aufteilen wollen. Da deine App eine unterschiedliche Bedienung auf verschiedenen Plattformen erfordern könnte, benötigst du eventuell getrennte Listen für Desktop- und mobile Geräte (oder sogar Tablet, TV, etc.).

Versuche als nächstes, eine benutzerfreundliche Zusammenfassung zu deiner App zu schreiben, die die Menschen dazu animiert, die App herunterzuladen und auszuprobieren. Wenn du deine Idee in einem Satz zusammenfassen kannst, eignet sie vermutlich gut für eine App! Für den Location Finder habe ich aufgeschrieben:

Location Finder bestimmt deine Position per Geolocation und zeichnet eine Karte deiner Umgebung unter Verwendung der Google-Maps-API.

Okay – für eine App, die ausschließlich auf Endanwender abzielt, hätte ich normalerweise nicht die Namen der verwendeten Technologien erwähnt, es würde vermutlich so aussehen:

Location Finder bestimmt deine Position und zeichnet eine Karte deiner Umgebung.

Aber weil die App Entwicklern beim Lernen helfen soll, habe ich mich dafür entschieden, dass diese Informationen durchaus sinnvoll sind.

Die App skizzieren

Wenn du dich für den Verwendungszweck und die Zielgruppe entschieden hast, ist es meist eine gute Idee, mit Skizzen auf Papier weiterzumachen. Skizziere grob verschiedene Bildschirmansichten, die das Aussehen der App und den Ablauf bei der Benutzung zeigen. Möglicherweise möchtest du verschiedene Skizzensätze für den Desktop, Mobilgeräte, TV usw. anfertigen, wenn es deine Funktionsliste von oben erfordert.

Füge den Skizzen auf jeden Fall Notizen über graphische Elemente, Funktionen usw. hinzu, die in den einzelnen Abschnitten benötigt werden. Das wird dir helfen, sobald du zu den Design- und Entwicklungsabschnitten gelangst, und soll sicherstellen, dass du auch bestimmt nichts vergisst. Die Funktionalität des Location Finder war denkbar einfach, so dass ich mich für nur eine Skizze entschieden habe:

Drawing of an app window, which includes a title bar containing the title Location Finder, and an install button, plus a map covering the res tof the windowFür kompliziertere Apps wirst du vermutlich mehrere Bildschirmskizzen benötigen, die den Hauptbildschirm und die verschiedenen Ansichten zeigen, die die verschiedenen Abläufe repräsentieren, wenn der Benutzer die App verwendet.

Lässt sich jedes Programm als Open Web App abbilden (oder entsprechend konvertieren)?

Fast jede Webseite oder jedes Programm lässt sich als App umsetzen, so lange du an den Rat denkst, den wir oben bereits gegeben haben: halte es vor allem einfach. Ist eine App besonders kompliziert (so wie eine Textverarbeitung oder eine große e-Commerce-Plattform), wird sie nicht unter allen Umständen funktionieren. Deshalb musst du dir über verschiedene Bedienmechanismen z.B. für mobile Geräte oder Tablets Gedanken machen. eBays Desktop-orientierte Webseite zeigt zum Beispiel Werbung und bietet verschiedene Suchmöglichkeiten sowie eine Menge anderer Features. Die mobile Version der Seite hingegen blendet die meisten dieser Funktionen sowie die Werbung aus und präsentiert nur die wichtigsten Funktionen oben in der Ansicht und minimiert die benötigte Tipparbeit.

screenshot of the ebay desktop site containing lots of adverts and controls                     screenshot of the ebay mobile site, with a much simpler interface than the desktop version

Google Docs ist ein anderes interessantes Beispiel. Die Desktop-Seite bietet ein voll funktionsfähige Textverarbeitung, aber das wäre ein Albtraum auf einer mobilen Webseite. Daher lässt dich die mobile Version über ein simples Interface einfach nur deine Dokumente lesen.

The google docs desktop site, which looks like a standard word processor                     The google docs mobile site, which is more of a document reader than a word processor

In diesem Stadium solltest du darüber nachdenken, wie sich die verschiedenen Versionen präsentieren sollen. In den meisten Situationen kannst du Media Queries verwenden, um das Layout und die Funktionalität deines Projekts für verschiedene Browser zu optimieren. Wenn du jedoch mit der Aufgabe betraut wirst, die Mobile-App-Version einer schwerfälligen, älteren Desktop-Website für Unternehmen zu erstellen – oder wenn sich die Desktop- und mobilen Anwendungen als extrem unterschiedlich erweisen –, denk daran, dass es einfacher sein könnte, eine separate Mobile/Tablet-Site oder App zu erstellen.

Anmerkung: Wenn du ein radikal anderes Desktop- und Mobil-Erlebnis bereitstellst, solltest du deinen Benutzern eine Möglichkeit bieten, zwischen den beiden zu wechseln – nicht einfach davon ausgehen, dass du grundsätzluch weißt, was das Beste für alle ist.

Denke über die benötigten Technologien nach

Manch einer würden diesen Schritt dem obigen Bereich der Zielsetzung unterordnen, aber oft ist es besser, Funktionalität und Layout getrennt von der verwendeten Technik zu btrachten. Die Funktionalität sollte ganz allein aus der Richtung betrachtet werden, was das Beste für die Benutzer ist, anstatt dem Projekt eine Technologie überzustülpen, nur weil es sich um das jüngste, angesagteste, hübscheste Spielzeug handelt. In der Regel ist der einfachste Ansatz auch der beste.

Solche Überlegungen diskutieren wir ausführlicher im Bereich Developing Web Apps, aber grundsätzlich solltest du dir über die Hauptfunktion/Anforderungen deiner App Gedanken machen – und mit welchen Technologien sich diese am besten umsetzen lassen. Zu den Fragen, die du dir stellen solltest, gehören beispielsweise:

  • Benötigst du lokalen Speicherplatz? Benötigt deine Anwendung fortlaufend Daten, verwendet man normalerweise eine Server-seitige Sprache und Datenbank. Willst du die Daten auch offline/auf einem Gerät nutzen, wirst du die Daten auch mit einer Client-seitigen Speichermethode wie IndexedDB or localStorage ablegen müssen.
  • Willst du Medien abspielen oder bearbeiten? Dann wirst du wahrscheinlich HTML5-Funktionen wie <canvas>, <video> oder <audio> benötigen.
  • Möchtest du Informationen von dem Gerät oder seiner Umgebung erhalten? Dann benötigst du eine der vielen verfügbaren Geräte-APIs, so wie Battery Status API, Proximity API oder Device Orientation API.

Tests planen

Ein weiterer Punkt, der in der Regel als offensichtlich gilt aber oft übersehen wird, ist das Testing. Du solltest so früh und so oft wie möglich testen, denn das frühzeitige Erkennen grundlegender Fehler kann im weiteren Verlauf des Projekts, wenn bereits viel Entwicklungsarbeit investiert wurde, viel Zeit und Geld sparen. Ein allgemeiner Testing-Plan sieht wie folgt aus:

  • Hast du Zielsetzung und -gruppe aufgeschrieben, teile deine Notizen mit einigen Kollegen, Freunden und Familienmitgliedern. Klingt die App von außen betrachtet nach einer guten oder einer lächerlichen Idee? Muss sie nur etwas nachjustiert oder moderat ausgeweitet werden?
  • Hole auch Feedback zu deinen Skizzen ein. Fehlt etwas Offensichtliches? Würde etwas anderes die Nutzererfahrung deutlich verbessern?
  • Im nächsten Schritt ist es oft eine gute Idee, einen funktionierenden Prototyp zu erstellen, der es erlaubt, Schlüsselfunktionen und Interaktionen zu testen. Suche dir einige echte Anwender außerhalb des Entwicklungsteams, um die Interaktionen zu testen und schau, wie sie damit klargekommen sind. Kannst du dir ein professionelles Benutzertest-Szenario nicht leisten, mach dir nichts daraus – eine Auswahl an Freunden und Familienmtgliedern ist fast genauso gut, sofern du passende Tests entwickelst und die richtigen Fragen stellst.
  • Während du mit der App-Entwicklung beschäftigt bist, wiederhole die Benutzertests so oft, wie es sinnvoll erscheint. Sobald du mit der richtigen App arbeitest, teste sie auf so vielen Browsern und Geräten wie möglich, beginnend mit den primär adressierten Zielsystemen und von dort aus weiter nach außen vortastend. Überlege dir, wie ein akzeptables Nutzererlebnis in jedem Browser und auf jedem Gerät aissieht, und teste nicht nur die normale Verwendung – schau dir an, wie eine App unter Stress arbeitet und betrachte auch Grenzfälle wie böswillige Dateneingaben und wirklich alte Browser.
  • Näherst du dich dem Ende des Projekts, setze eine Reihe rigoroser QA Testings auf, um auch noch die letzten schwerwiegenden Fehler auszumerzen; also diejenigen, die dich dann zu Fall bringen, wenn du es am wenigsten erwartest.

Fazit: Woran man denken sollte

Hoffentlich har die dieser Artikel das meiste von dem mitgegeben, was du vor dem Erstellen einer erfolgreichen Open Web App bedenken solltest. Die folgende Liste fasst alles zusammen.

Was ist die Zielsetzung deiner App?

Erstelle eine Liste an Aufgaben, eine Idee für deine App und überlege, welche Art von Benutzer du ansprechen möchtest, dann schreibe eine Zielsetzung: Definiere wenn möglich den Zweck und den wichtigsten Benutzer in einem Satz. Beispiel: Ein Wunschlisten-Editor für Menschen, die nicht impulsiv drauflos kaufen.

Fokussiere dich auf einen Haupt-Anwendungsfall

Es ist möglich, dass sich nicht alle von dir aufgelisteten Aufgaben mit der formulierten Zielsetzung abbilden lassen. Das ist in Ordnung, denn überragende Apps machen oft nur eine Sache, aber die besonders gut. Macht deine App zu viele Sachen, dann überlege dir, die Funktionalität auf mehrere Apps aufzuteilen.

Wie werden Menschen deine App benutzen?

Du hast nun Haupt-Anwendungsfall, Zielpublikum und Schlüsselfunktionen identifiziert. Dein Hauptszenario sollte auch die Umwelt der Nutzer betrachten, in der die App verwendet wird. For example, a young mom with her baby at daycare might use your app to note a nice stroller (potential multi-tasking, pausing and continuing the task later). A different user might plan her next laptop purchase at home, in an armchair, without interruptions.

Konzentriere dich auf wenige Schlüsselfunktionen

Wirf einen weiteren Blick auf deine Task-Liste. Filtere die Liste mit Blick auf die Zielsetzung. Decken sich die Aufgaben nicht mit dem Hauptzweck, entferne sie aus deiner App. Beschreibe jede Kernaufgabe als Funktion und frage dich: Ist die Funktion wirklich notwendig? Oder ist sie nur ein Nice-to-Have, das nicht vom adressierten Nutzer benötigt wird, um die definierte Aufgabenstellung zu erfüllen? Sei ehrlich zu dir selbst. Wenn du nur noch auf eine kurze Liste an Funktionen kommst, bist du auf dem richtigen Weg. Erinnere dich: die besten Apps machen nur eine Sache besonders gut. Apps scheitern oft nicht an zu wenigen Funktionen, sondern an zu vielen.

Skizziere deine App

Sobald du einige Schlüsselinteraktionen erdacht hast, wandle diese Schritte in Ansichten um. Du kannst den Anwendungsfluss skizzieren, das heißt, wie sich Benutzer von einem Screen auf den anderen hangeln, um eine Aufgabe erfolgreich abzuschließen. Denke an die Funktionalität deiner App und positioniere die User-Interface-Elemente, die zu den wichtigsten Interaktionen gehören, an den prominentesten Plätzen. Behalte dabei im Blick, wie die Ansichten auf dem Desktop verglichen mit Tablet/Mobilgerät aussehen.

Benötigte Technologien

Schau dir die Funktionsliste an und mache dir Notizen, welche Technologien du vermutlich nutzen wird, um die Anforderungen zu erfüllen.

Testing-Plan

Erweitere deinen Projektplan um einen angemessenen Testing-Plan, um kostspielige, unliebsame Überraschungen zu einem späteren Zeitpunlt der Implementierungsphase zu vermeiden.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: Pilskultur, Dschubba, GerhardStingl, Marc0
Zuletzt aktualisiert von: Pilskultur,