Die ersten Schritte zur Erstellung einer App: Wireframes und Prototypen

Was sind die ersten Schritte hinter dem Design einer App? Wie legen Sie die Grundlagen, um eine effektive und einfach zu bedienende App zu erstellen? Wie werden die Geschäftsideen und -ziele des Kunden in klare visuelle Elemente übersetzt, die für den Endbenutzer strategisch und intuitiv angeordnet sind?

Im Folgenden werden wir uns einige bewährte Verfahren ansehen, die unserer Erfahrung nach, nützlich sein können, um die Panik vor dem leeren Blatt zu überwinden und das Eis bei der Entwicklung einer App von Grund auf zu brechen.

Hören Sie gut zu, stellen Sie die richtigen Fragen und lehnen Sie Perfektionismus ab

Die allgemeine Regel lautet: Machen Sie sich keine Sorgen, dass Sie beim ersten Versuch alles richtig machen, denn das ist unmöglich und lähmend. Ein guter kreativer Prozess beginnt immer damit, sich die richtigen Fragen zu stellen, nämlich:

1. Wer sind die Endnutzer?

2. Was sind die Unternehmensziele?

3. Wie kann ich Inhalte organisieren, um diese Ziele zu unterstützen?

Hören Sie Ihrem Kunden mit religiöser Aufmerksamkeit zu und versuchen Sie, ihre Ideen und Erwartungen vollständig zu verstehen, um ihnen eine visuelle Form zu geben.

In diesem Stadium beginnen Sie mit dem Skizzieren einer Sitemap, einem hierarchischen Diagramm, das die Organisation der Seiten als unmittelbaren allgemeinen Überblick über den Benutzerfluss zeigt. Verschwenden Sie vorerst nicht zu viel Zeit damit, Hypothesen zu allen möglichen Szenarien aufzustellen, und verlieren Sie sich nicht zu sehr in Details. Verwenden Sie die Sitemap nur als Ausgangspunkt.

Lassen Sie sich von anderen inspirieren

Werfen Sie einen Blick auf diejenigen, die bereits ähnliche Probleme wie Sie gelöst haben, und machen Sie sich ein Bild. Von anderen zu lernen ist immer gut und kann dir viel Zeit sparen. In diesem Zusammenhang empfehlen wir einige Plattformen, die Ihnen in dieser Designphase helfen können: behance.net, Pinterest, pttrns.com (letzteres ist nicht ganz kostenlos).

Nimm Bleistift und Papier

Es hilft uns, mit dem Zeichnen von Hand zu beginnen, weil es Ideen ermöglicht, schnell visuelle Form anzunehmen, ohne sich zu viele Gedanken über die Präzision zu machen und ohne sich in Schnickschnack und Details zu verlieren, die in dieser Phase nur Zeit verschwenden würden.

Jetzt ist es an der Zeit, die Wireframes und Low-Fidelity-Layouts des Endprodukts zu skizzieren. Das ist eine Art Entwurf, der dazu dient, dem Kunden verständlich zu machen, wie der Endbenutzer auf den Seiten der App navigieren wird. Wireframes sind schnelle, kostengünstige Screens, die erstellt werden, um Änderungen vorzunehmen, wenn Sie mehr Informationen und Kundenfeedback sammeln. Normalerweise replizieren wir die analogen Skizzen auf Adobe Xd oder Figma, um sie dem Kunden zu präsentieren. Um den Arbeitsablauf zu beschleunigen, bieten beide Plattformen die Möglichkeit, vorgefertigte Komponenten-Kits (Registerkarten, Menüs, Schaltflächen, Filter, Felder, Symbole, Textbereiche usw.) herunterzuladen.

Stellen Sie sich die Customer Journey vor und segmentieren Sie sie in viele kleine Schritte

Um zum Kern des Designs zu kommen, schlagen wir vor, dass Sie zunächst die Customer Journey hypothetisieren, d. h. die Reihe von Schritten, die ein Benutzer unternimmt, um ein bestimmtes Ziel zu erreichen. Seien Sie flexibel und denken Sie an die verschiedenen Szenarien, die passieren können; Wenn ein Benutzer beispielsweise online nach einem Produkt sucht, was ist, wenn er es nicht findet? Wie können Sie ihn zur Suche anleiten, indem Sie ihm die Dinge erleichtern? Denken Sie auch daran, dass der Fluss nicht für alle gleich ist.

Beginnen Sie, ohne Farben oder Details zu zeichnen. Versuchen Sie, sich einige grundlegende und redundante Elemente vorzustellen, die für die Navigation (Fußzeile / Kopfzeile) erforderlich sind, und verfeinern Sie sie dann und fügen Sie Elemente hinzu. Priorisieren Sie wichtige Aufgaben für den Benutzer und für das Geschäft des Kunden (Zielumwandlung).

Wählen Sie aus und hören Sie sich das Feedback an

Gestalten Sie den Prozess so kooperativ wie möglich. Teilen Sie Ihr Projekt mit einem Team von Personen und fügen Sie Anmerkungen hinzu. Stellen Sie sich den Fluss des Benutzers vor, platzieren Sie beschreibende Titel auf den Bildschirmen und erklären Sie, was passiert. Erstellen Sie einen klaren Schritt-für-Schritt-Trichter und zeichnen Sie Pfeile, um die Logik hinter den Übergängen sofort darzustellen. Wenn Sie möchten, fügen Sie die Gesten hinzu (oder erklären Sie sie).

Das Feedback des Teams, ob positiv oder negativ, ist unerlässlich, um die Arbeit voranzutreiben, ohne festzustecken und sich optimal zu entwickeln. Nehmen Sie es niemals persönlich und seien Sie immer bereit, Ihre anfänglichen Annahmen zu ändern, wenn Ihnen bessere präsentiert werden.

Versuchen Sie gleichzeitig zu verstehen, welche Kommentare Sie in die Irre führen können (sie sind unvermeidlich) und lassen Sie sie in Ruhe. Abschließend empfehlen wir Ihnen, Rückmeldungen zu beachten, die derzeit nicht relevant sind, aber in einer späteren Entwicklungsphase relevant werden könnten.

Die Struktur: Gitter, Säulen, Module und Ränder

Ein Haus steht, wenn es ein solides Fundament hat. Dasselbe gilt für eine App. Die Anordnung der Elemente, die die Benutzeroberfläche bevölkern, ihre Größe, Abmessungen und Abstände sind nicht zufällig. Um nicht das lästige Gefühl von Elementen zu vermitteln, die chaotisch im Raum schweben, ist es notwendig, ein Raster aufzubauen, also eine Struktur, die hilft, die Inhalte einheitlich zu organisieren. Der Aufbau einer soliden Grundlage erfordert einige anfängliche Zeitinvestitionen, aber es wird viel dazu beitragen, die Elemente Ihrer Schnittstellen konsistent zu entwickeln und zu ordnen.

Zunächst einmal ist es wichtig, eine Basiseinheit festzulegen, also ein Anfangsmaß, von dem die anderen Maße Vielfache sind. 8 px ist beispielsweise ein gut skalierbares Maß (die meisten Maße sind durch 8 teilbar und 8 ist durch sich selbst teilbar). Alle Elemente der Benutzeroberfläche sollten als Inkrement der Basiseinheit gemessen werden, und die gleiche Regel sollte für negative Leerzeichen und Zeilenabstände gelten. Dies trägt dazu bei, die visuelle Solidität, Ausgewogenheit und Konsistenz zu erhalten.

Ein weiteres grundlegendes Element für die Organisation des Raums sind die Spalten oder die vertikalen Raumblöcke, die von links nach rechts auf dem Bildschirm verlaufen. Die Anzahl variiert je nach Art des Projekts (Web oder Mobile). Für Mobilgeräte verwenden wir normalerweise 12 (teilbar durch 2,3,4,6, erleichtert das Zeichnen für Responsive). Wir behalten die Leerräume zwischen den Spalten bei 16 px (ein Vielfaches von 8 px, das wir als Basiseinheit festgelegt haben). Wir versuchen, die Vielfache-Regel auch für die Außenkanten des Rahmens einzuhalten.

Zeichnen Sie für den Benutzer

Leichter gesagt als getan: Sie müssen das Produkt für den Endverbraucher einfach und angenehm zu bedienen machen. Ein Produkt in seiner Anwendung selbsterklärend zu machen, also Komplexes einfach zu machen, ist einer der schwierigsten Aspekte des Jobs. Hier kommen die Fähigkeiten in der Benutzererfahrung und Benutzeroberfläche ins Spiel, eine riesige Welt, die eine separate Diskussion verdient. Generell empfehlen wir, wiedererkennbare Komponenten zu erstellen und sie konsistent über Bildschirme hinweg zu verwenden. Wiederholung schafft ein Gefühl der Vertrautheit für das Auge des Benutzers und führt ihn leichter zu den richtigen Aktionen.