Advertisement
  1. Code
  2. Android SDK

Entwerfen, Wireframing und Prototyping einer Android-App: Teil 1

by
Read Time:15 minsLanguages:

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Wenn Sie davon träumen, das nächste große Ding in Android-Apps zu erstellen, werde ich nicht lügen: Sie haben Ihre Arbeit für Sie ausgeschnitten!

Sie müssen nur einen kurzen Blick in den Google Play Store werfen, um festzustellen, dass so gut wie jede App, an die Sie denken können, bereits erstellt wurde - normalerweise mehrmals und mit unterschiedlichem Erfolg.

In einem so wettbewerbsintensiven Markt muss Ihre App das gesamte Paket bieten - nur eine große Auswahl an Funktionen wird es nicht ändern! Ihre App muss außerdem reaktionsschnell, benutzerfreundlich, völlig frei von Fehlern sein und (so flach es auch scheinen mag) auch gut aussehen.

Wenn Sie also mitten in der Nacht mit einer brillanten Idee für eine Android-App wach werden, widerstehen Sie der Versuchung, aus dem Bett zu springen, Android Studio hochzufahren und Ihre Vision zum Leben zu erwecken. Wenn Sie Ihrer Idee gerecht werden möchten, müssen Sie sich Gedanken über das Design Ihrer Anwendung machen.

In dieser zweiteiligen Serie werde ich Ihnen zeigen, wie Sie aus einer großartigen Idee eine großartige App machen können. Sie lernen, wie Sie jeden Teil des Designs Ihrer App planen, testen und perfektionieren und so viele Probleme wie möglich ausbügeln, bevor Sie überhaupt eine einzige Codezeile schreiben.

In diesem ersten Teil werden wir uns ansehen, wie all diese großen, brennenden Fragen beantwortet werden können, die jeder Entwickler beantworten muss, wenn er ein neues Android-Projekt startet. Anschließend erstellen wir eine Liste aller Bildschirme, die wir erstellen müssen, sowie eine Bildschirmkarte, die genau zeigt, wie alle diese Bildschirme zusammenpassen.

In Teil 2 lernen Sie einige leistungsstarke, zielgerichtete Techniken kennen, darunter Wireframing und Prototyping. Am Ende von Teil 2 haben Sie einen digitalen Prototyp erstellt, den Sie auf Ihrem Android-Smartphone, -Tablet oder -Emulator installieren und testen können.

Damit Sie genau sehen, wie Sie eine Idee vom "Funken der Inspiration" zum funktionierenden digitalen Prototyp bringen, stelle ich mir vor, ich hätte eine Idee für eine Android-App, die ich erstellen und dann entwickeln möchte diese Idee während der gesamten Serie.

Da wir (angeblich) in den Sommer starten, werde ich eine App entwerfen, mit der die Leute mit all ihren Freunden den ultimativen Sommerurlaub planen und buchen können.

Wir haben also unsere Idee - was müssen wir als Erstes tun?

1. Schreiben Sie eine Produkterklärung

Ihre typische App hat viele nette Extras, aber auch eine klar definierte Hauptaufgabe. Zum Beispiel könnte unsere fertige Reise-App Social-Media-Funktionen enthalten, damit Benutzer einen Ausschnitt des fantastischen Cocktails, den sie am Strand hatten, oder der Katze, die sie vor ihrem Hotel gestreichelt haben, teilen können. Diese Funktionen sind jedoch nicht die Hauptaufgabe der App.

Ein guter Trick, um zum Kern dessen zu gelangen, worum es in Ihrer App wirklich geht, ist das Schreiben einer Produkterklärung. Dies ist ein einzelner Satz, der angibt, was Ihre App ist, was sie tut und warum es unbedingt erforderlich ist, dass der Nutzer Google Play startet und Ihre App sofort herunterlädt. Es kann hilfreich sein, sich vorzustellen, dass Sie Ihre App einem potenziellen Benutzer präsentieren und nur einen einzigen Satz haben, um Ihre Nachricht zu vermitteln.

Nach langem Überlegen habe ich mich für die folgende Produktaussage entschieden:

Eine App, die die Planung und Buchung der ultimativen Sommerferien stressfrei macht.

Es ist wichtig, dass Sie diese Produktaussage nie aus den Augen verlieren. Sie können sie daher auf einen Post-It-Zettel kritzeln und über Ihren Schreibtisch kleben.

You may want to scribble your product statement on a post it noteYou may want to scribble your product statement on a post it noteYou may want to scribble your product statement on a post it note

2. Identifizieren Sie Ihre Zielgruppe

Die nächste große Frage, die Sie beantworten müssen, lautet: Für wen baue ich dieses Ding genau?

Hoffentlich haben Sie bereits eine ungefähre Vorstellung davon, welche Art von Person Ihre App verwenden möchte. Um jedoch die besten Ergebnisse zu erzielen, müssen Sie Ihre App für eine ganz bestimmte Zielgruppe entwerfen. Das alte Sprichwort ist wahr: Versuchen Sie, alle zufrieden zu stellen, und Sie werden am Ende niemandem gefallen.

Wen Sie ansprechen möchten, sollte jeden Teil Ihrer App beeinflussen - von den Funktionen, die Sie einschließen, über das Erscheinungsbild Ihrer Benutzeroberfläche bis hin zum Ton des Textes Ihrer Anwendung. Deshalb ist es wichtig, dass Sie Ihre Zielgruppe so früh wie möglich im Designprozess identifizieren.

Ich habe bereits eine ungefähre Vorstellung davon, wen ich anspreche: junge Erwachsene im Alter von 18 bis 25 Jahren, die entweder in der Sommerpause vom College oder der Universität sind, ein volles Lückenjahr absolvieren oder ein letztes Abenteuer planen, bevor es Zeit ist, sich umzusehen für diesen ersten Vollzeitjob. Dies ist ein guter Anfang, aber wir können genauer werden!

Ein einfacher, aber effektiver Trick, um Ihr Publikum zu erreichen, besteht darin, eine Benutzerpersönlichkeit zu erstellen.

Eine Benutzerpersönlichkeit ist ein einzelner Benutzer, der die Art von Person verkörpert, auf die Sie abzielen. Welche Eigenschaften hätte diese Person? Obwohl die genauen Eigenschaften je nach Art der App variieren, können Sie zunächst die folgenden Fragen beantworten:

  • Wie alt ist Ihre Benutzerpersönlichkeit? Dies kann ein genaues Alter oder eine Altersgruppe sein, z. B. Personen über 60 oder junge Erwachsene.
  • Wo leben sie? Dies kann ein bestimmtes Land oder eine bestimmte Stadt oder eine Art Ort sein, z. B. am Meer oder in der Großstadt.
  • Haben sie Kinder?
  • Was sind ihre Hobbys?
  • Haben sie einen Job? Und wenn ja, was ist das?
  • Befinden sie sich derzeit in der Ausbildung?
  • Was ist ihre Lieblingsanwendung?
  • Was ist ihre am wenigsten bevorzugte Art der Anwendung?
  • Welche Faktoren motivieren sie, eine App herunterzuladen?
  • Zahlen sie jemals für mobile Apps?
  • Wie erfahren sind sie mit mobilen Apps? Sind sie ein Power User oder ein Anfänger?
  • Wie erfahren sind sie mit Technologie im Allgemeinen?

Erstellen wir eine Benutzerpersönlichkeit für unsere Reise-App. Um die besten Ergebnisse zu erzielen, ist es hilfreich, sich Ihre Persona als echte Person vorzustellen. Vielleicht möchten Sie Ihrer Benutzerpersönlichkeit sogar einen Namen geben, und genau das werde ich tun: Treffen Sie Sasha!

  • Sie ist 20.
  • Sie ist Studentin in der Sommerpause.
  • Sie lebt im Sommer bei ihren Eltern, wird aber zu Beginn des akademischen Jahres in die Studentenwohnheime zurückkehren.
  • Sie ist Single ohne Kinder.
  • Sie hat keinen Job, daher ist ihr Studentendarlehen ihre einzige Einnahmequelle.
  • Als jemand, der mit sozialen Medien aufgewachsen ist, sind ihre Lieblings-Apps alles, was es ihr ermöglicht, Fotos und Statusaktualisierungen mit ihren Freunden, ihrer Familie und dem World Wide Web im Allgemeinen zu teilen.
  • Sie ist ein Profi mit Technologie, insbesondere mobilen Apps.

Da es in meiner App ausschließlich um die Organisation eines Urlaubs geht, muss ich auch Sashas Erfahrungen im Zusammenhang mit Reisen definieren. Ist mein "typischer" Benutzer wahrscheinlich weit gereist? Waren sie schon einmal für die Planung ihrer eigenen Ferien verantwortlich oder ist das alles neu für sie?

Ich werde meiner Benutzerpersönlichkeit die folgenden Merkmale hinzufügen:

  • Sasha war mehrere Male im Ausland, aber immer nur mit ihrer Familie.
  • Dies ist das erste Mal, dass sie ihren eigenen Urlaub plant.
  • Sasha kann ziemlich gut organisiert sein, wenn sie möchte, aber da dies das erste Mal ist, dass sie einen Urlaub plant und bucht, würde sie sich auf jeden Fall über eine helfende Hand freuen!

Anwendungsfälle

Jetzt haben wir also das Wer, aber was ist mit dem Wann? Unter welchen Umständen könnte sich Sasha gezwungen fühlen, ihr Handy herauszuholen und unsere App zu starten?

Hier sind einige, die mir in den Sinn kommen:

  • Sasha ist mit Freunden von der Universität zusammen und es ist unvermeidlich, dass sich das Gespräch darauf bezieht, wie viel Spaß sie im Sommer haben werden. Jeder ist übermäßig aufgeregt, und bevor Sie es wissen, hat Sasha unsere App geöffnet, und sie und ihre Freunde planen eifrig, was mit Sicherheit die Reise ihres Lebens sein wird.
  • Sasha ist gerade in den Gruppenchat gekommen, den sie und ihre Freunde in ihrer bevorzugten Instant Messaging-App verlassen haben, und sie sieht, dass - endlich! - jeder ein Ziel vereinbart hat. Aufgeregt startet Sasha unsere App und beginnt, nach lustigen Aktivitäten in diesem Bereich zu suchen.
  • Sasha ist frustriert. Sie und ihre Freunde scheinen stundenlang darüber zu reden, wie großartig ihre Reise sein wird, kommen aber nie dazu, etwas zu buchen. Jemand muss das Kommando übernehmen, und es sieht so aus, als müsste diese Person sie sein. Das einzige Problem ist, dass sie so etwas noch nie arrangiert hat. Was sie braucht, ist eine Art App, die die Planung und Buchung der perfekten Sommerferien stressfrei macht.

3. Erstellen Sie eine Funktionsliste

Es ist Zeit, Spaß zu haben: Lassen Sie Ihrer Fantasie freien Lauf und schreiben Sie alle Funktionen auf, die Sie in Ihre App aufnehmen würden, wenn Sie unendlich viel Zeit, Geld und eine ganze Armee von Entwicklern hätten, die bereit und bereit wären, Ihnen zu helfen. Machen Sie sich vorerst keine Gedanken darüber, ob diese Funktionen praktisch sind. Stellen Sie sich dies als Ihre ultimative Funktionsliste vor.

Wenn Sie nach Inspiration suchen, besuchen Sie den Google Play Store und laden Sie einige Beispiele für Android-Anwendungen herunter, die ähnliche Inhalte abdecken oder dieselbe Zielgruppe wie Ihre Anwendung haben.

Verbringen Sie einige Zeit damit, diese Apps zu erkunden, und notieren Sie sich, was die App gut macht und welche Bereiche Sie verbessern könnten.
 

Hier sind einige der Funktionen, die ich notiert habe:

  • Die Möglichkeit, alles zu buchen, was der Benutzer jemals für seine Reise benötigen könnte, von Flug-, Zug- und Bustickets über Hotelreservierungen bis hin zu verschiedenen anderen Dingen wie der Reservierung eines Tisches in diesem lokalen Restaurant, das auf TripAdvisor besonders gute Bewertungen bietet.
  • Lesen Sie die Bewertungen anderer Benutzer und veröffentlichen Sie Ihre eigenen Bewertungen.
  • Der Benutzer definiert sein Budget im Voraus und die App filtert anschließend alle Vorschläge basierend auf diesem Budget.
  • Seien Sie spontan! Die Planung eines Urlaubs soll Spaß machen. Warum also nicht alles dem Schicksal überlassen, indem Sie eine virtuelle Stecknadel in eine virtuelle Karte stecken?
  • Okay, die Planung eines Urlaubs soll Spaß machen, aber es kann auch harte Arbeit sein - insbesondere, wenn dies die erste Reise ist, die Sie jemals gebucht haben. Unsere App sollte eine Checkliste mit allem enthalten, was der Benutzer buchen und arrangieren muss, um den perfekten Urlaub zu planen.
  • Funktionen für soziale Medien, sodass Benutzer alle ihre Freunde und Familienmitglieder neidisch machen können, indem sie Fotos und Statusaktualisierungen darüber veröffentlichen, wie viel Spaß sie im Urlaub haben.
  • Ein Reisetagebuch für Benutzer, die mehr als nur einfache Fotos und Statusaktualisierungen freigeben möchten.
  • Da meine Zielgruppe junge Erwachsene sind, ist dies möglicherweise das erste Mal, dass viele von ihnen für die Buchung ihres eigenen Urlaubs verantwortlich sind. Sie schätzen möglicherweise einige allgemeine Ratschläge, die sich an den erstmaligen Reisenden richten, z. B. die Beantragung eines Reisepasses oder die Art von Dingen, die Sie in Ihrem Handgepäck tragen können und nicht.
  • Ein Countdown, mit dem Benutzer die Wochen, Tage, Stunden und Minuten bis zum Feiertag verfolgen können.

Jetzt ist es Zeit für einen Reality-Check: Es gibt keine Möglichkeit, alle seine Ideen in einer einzigen App zusammenzufassen. Selbst wenn alle Ihre Ideen vernünftig und gut durchdacht sind und Ihre Zielgruppe ansprechen würden, wäre es für Sie als Entwickler ein Albtraum, alles außer dem Spülbecken in eine App zu werfen, und würde wahrscheinlich zu einer schrecklichen Benutzererfahrung führen.

Stellen Sie sich vor, Sie starten zum ersten Mal eine App und werden sofort mit einem riesigen, komplizierten Menü mit einer Menge Optionen konfrontiert. Auswahl ist eine gute Sache, aber zu viel Auswahl wird nur verwirrend! Da Sie Ihre Benutzer als letztes verwirren möchten, müssen wir unsere Liste der ultimativen Funktionen auf das Wesentliche reduzieren.

Wie entscheiden wir also, welche Funktionen leben und welche Funktionen sterben?

Bei der ersten Version sollten Sie sich auf Funktionen konzentrieren, die für die Bereitstellung der Kernfunktionen Ihrer App unerlässlich sind. Und denken Sie daran, dass eine Funktion, die es nicht in Version 1.0 schafft, nicht bedeutet, dass sie nicht in ein nachfolgendes Update aufgenommen wird. Wenn Sie in Ihrer Liste auf eine Funktion stoßen, die Potenzial hat, aber für die Erfüllung der Hauptaufgabe Ihrer App nicht unbedingt erforderlich ist, notieren Sie sie sich als eine Funktion, die es wert ist, erneut besucht zu werden, sobald Sie die Grundlagen Ihrer App verstanden haben.

Ihre Benutzerpersönlichkeit und Anwendungsfälle sollten auch eine Rolle bei der Bestimmung der Funktionen spielen, die Sie in Version 1.0 (und in nachfolgenden Versionen) enthalten. Welche Funktionen sprechen Sasha am wahrscheinlichsten an?

Nach dem erneuten Lesen der Benutzerpersönlichkeit, der Anwendungsfälle und der Produktaussage habe ich mich für die folgenden Funktionen entschieden:

  • Buchung von Reise und Unterkunft. Dies ist ein absolutes Muss - wenn Sasha nicht mindestens einen Transport und einen Schlafplatz arrangiert, geht sie nirgendwo hin.
  • Budget festlegen. Sasha finanziert die gesamte Reise mit dem Rest ihres Studentendarlehens, daher hat die Festlegung eines Budgets für unsere geldbewusste Studentin oberste Priorität.
  • Einen virtuellen Stift in eine virtuelle Karte stecken. Sasha ist eine junge Studentin, die mit all ihren Freunden ein Sommerabenteuer buchen möchte. Der Gedanke, etwas Verrücktes und Spontanes zu tun, könnte sie also ansprechen. Erinnern Sie sich auch an unseren Anwendungsfall, in dem Sasha mit ihren Freunden rumhängt und sich alle gegenseitig darüber aufregen, wie viel Spaß sie diesen Sommer haben werden? Dies ist die perfekte Gelegenheit für Sasha, den Ball wirklich ins Rollen zu bringen, indem sie unsere App hochfährt und einen virtuellen Stift in eine virtuelle Karte steckt.
  • Eine Checkliste. Da dies das erste Mal ist, dass Sasha an der Planung ihres eigenen Urlaubs beteiligt ist, würde eine klare Checkliste das Ganze viel weniger einschüchternd machen.

Unsere Liste enthält weitere Funktionen, die Sasha gefallen würden, z. B. die Möglichkeit, Fotos von ihrer Reise zu veröffentlichen, da wir bereits wissen, dass Sasha ein Fan aller sozialen Medien ist. In dieser ersten Version werde ich die Dinge jedoch einfach halten und mich weiterhin auf das Hauptziel der App konzentrieren. Sobald Sie die Kernfunktionalität Ihrer App bereitgestellt und Ihre Produktaussage erfüllt haben, können Sie Ihre Aufmerksamkeit auf all die netten zusätzlichen Extras lenken.

4. Skizzieren Sie den Fluss auf hoher Ebene

Die nächste Aufgabe besteht darin, über die Bildschirme nachzudenken, die Sie erstellen müssen, um diese Liste der Funktionen bereitzustellen. Nehmen Sie also ein Stück Papier und einen Stift oder Bleistift. Skizzieren Sie einige grobe Flussdiagramme der Routen, die Ihre Benutzer möglicherweise durch Ihre App nehmen, um Kernaufgaben zu erledigen.

Für meine Reise-App sind die Hauptaufgaben:

  1. Eine Reise buchen.
  2. Überprüfen von Details zu Reisen, die der Benutzer bereits geplant hat.

Normalerweise stellen Sie Bildschirme mit Formen dar und drücken die Navigation mit Linien oder Pfeilen aus.

Example of a quick flowchartExample of a quick flowchartExample of a quick flowchart

Diese Übung soll Sie hauptsächlich dazu bringen, über die verschiedenen Bildschirme nachzudenken, die Sie erstellen müssen, um die Funktionen bereitzustellen, die Sie aus Ihrer Liste der ultimativen Funktionen ausgewählt haben. Verbringen Sie nicht zu viel Zeit mit Ihrem Flussdiagramm, da Sie diesen Fluss beim Erstellen Ihrer Bildschirmkarte verfeinern werden.

5. Erstellen Sie eine Bildschirmliste

Erstellen Sie dann eine Liste aller Bildschirme, die Sie basierend auf Ihrem Flussdiagramm erstellen müssen.

Hier ist meine Bildschirmliste sowie eine kurze Übersicht darüber, was ich in jeden Bildschirm aufnehmen möchte:

  • Startbildschirm. Dieser Bildschirm enthält ein Menü aller Reisen, die der Benutzer bereits über unsere App geplant hat. Der Benutzer kann auf ein beliebiges Element in diesem Menü tippen, um die Checkliste für diese bestimmte Reise anzuzeigen. Alternativ können sie dem Plan ein neues Abenteuer geben! Verknüpfen Sie einen Hahn.
  • Karte. Dieser Bildschirm enthält eine Karte und eine virtuelle PIN. Der Benutzer kann auf einen Abschnitt der Karte tippen oder, wenn er sich spontan fühlt, die virtuelle Stecknadel greifen, die Augen schließen und alles dem Schicksal überlassen.
  • Wählen Sie eine Stadt aus. Sobald der Benutzer das Land ausgewählt hat, das er besuchen möchte, schlägt dieser Bildschirm einige Städte vor, in denen er möglicherweise bleiben möchte. Dieser Bildschirm enthält auch einen Schieberegler, mit dem der Benutzer der App mitteilen kann, mit welchem Budget er arbeitet.
  • Checkliste. Dieser Bildschirm enthält eine Checkliste, die der Benutzer durcharbeiten kann. Durch Tippen auf ein Element in dieser Liste wird ein Bildschirm geöffnet, in dem der Benutzer diese Aufgabe ausführen kann, einschließlich:
  • Transport buchen.
  • Ein Hotel buchen.

6. Erstellen Sie eine Screen Map

Jetzt ist es an der Zeit, unser Flussdiagramm und unsere Bildschirmliste zu einer Bildschirmkarte zu kombinieren, die die Navigationsbeziehung zwischen all diesen Bildschirmen ausdrückt.

Beginnen Sie mit dem ersten Bildschirm, den der Benutzer beim Starten Ihrer App sieht, und arbeiten Sie nach außen.

A screen map of our travel appA screen map of our travel appA screen map of our travel app

Es ist nie zu früh, nach Möglichkeiten zur Verbesserung der Benutzererfahrung zu suchen. Nehmen Sie sich also nach dem Erstellen Ihrer Bildschirmkarte einen Moment Zeit, um sie kritisch zu betrachten. Ein Faktor, der einen großen Einfluss auf die Benutzererfahrung hat, ist die Anzahl der Bildschirme, auf denen der Benutzer navigieren muss, um die Kernaufgaben der App zu erledigen.

Im Allgemeinen ist die Benutzererfahrung umso besser, je weniger Schritte erforderlich sind. Diese Karte ist die perfekte Gelegenheit, um Orte zu identifizieren, an denen Sie die Anzahl der Bildschirme reduzieren können, die der Benutzer zum Navigieren benötigt. Dies kann das Entfernen von Bildschirmen, das Kombinieren von Bildschirmen, das Neuordnen von Bildschirmen oder das Identifizieren von Stellen umfassen, an denen es sinnvoll wäre, eine Navigationsverknüpfung hinzuzufügen, damit der Benutzer direkt von Bildschirm A zu Bildschirm E springen kann.

Abschluss

Bisher haben wir einige wichtige Entscheidungen bezüglich der App getroffen, die wir erstellen werden, einschließlich der Frage, wer unsere Zielgruppe ist und welche Funktionen wir in Version 1.0 aufnehmen werden (wobei einige Funktionen für nachfolgende Versionen übrig bleiben). Wir haben auch eine Liste aller Bildschirme erstellt, die wir entwerfen müssen, und skizziert, wie diese Bildschirme in unserer fertigen App angeordnet werden sollen.

Zu diesem Zeitpunkt haben wir unsere App alle geplant, wenn auch auf sehr hohem Niveau. In Teil 2 werde ich tiefer gehen und die einzelnen Bildschirme entwerfen, aus denen diese Bildschirmkarte besteht, bevor ich diese Bildschirme durch Erstellen eines digitalen Prototyps auf die Probe stelle.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.