Geschätzter Zeitaufwand: 1-2 Stunden. Ich empfehle, diese Übung mit den wichtigsten Interessengruppen durchzuführen.
Beginnen wir mit der Prämisse, dass Sie mit der Erstellung einer mobilen App beauftragt wurden. Die erste Frage, die Sie sich stellen sollten, lautet: „Welches Problem löse ich und für wen löse ich es?“ Die Antworten auf diese komplexe Frage bilden die Grundlage für Ihr Design, denn sie liefern Erkenntnisse, die sich auf die Merkmale und Funktionen Ihres Designs auswirken können. Diese Antworten werden Ihnen sicherlich auch dabei helfen, zu entscheiden, was das MVP (Minimum Viable Product) für Ihren Entwurf sein wird.
Sie können zum Beispiel viele Funktionen auf der Produkt-Roadmap haben, aber Sie müssen sich nur auf die wesentlichen Funktionen konzentrieren, um die erste Version der App erfolgreich zu starten. Sie können mit der Frage beginnen: „Welche Funktionen müssen wir schaffen, damit unsere Zielgruppe ihr Ziel/ihre Aufgabe erreichen kann?“
Um diese Frage zu beantworten, können Sie einen Benutzerfluss auf der Grundlage des „glücklichen Weges“ Ihres Hauptbenutzers erstellen (Sie können sich später auf alle Randfälle konzentrieren). Ich empfehle ein Whiteboard, auf dem Sie zunächst alle wichtigen Schritte des Benutzers aufschreiben. Sobald Sie diese Schlüsselschritte aufgeschrieben haben, können Sie damit beginnen, High-Level-Skizzen dieser Schritte zu erstellen. Auf diese Weise können Sie feststellen, welche Möglichkeiten der Benutzer bei jedem Schritt benötigt, und den Umfang des Projekts in Grenzen halten.
Hinweis: Versuchen Sie, sich selbst davon abzuhalten, Skizzen anzufertigen, ohne den Benutzerfluss vorher aufzuschreiben. Unser Geist kann sehr kreativ werden und vom Weg abkommen, wenn wir sofort mit dem Skizzieren beginnen.
So kann diese Übung aussehen, nachdem Sie Ihren Benutzerfluss aufgeschrieben und grobe Skizzen darunter erstellt haben. Denken Sie daran, es muss nicht schön sein, aber es sollte Ihre Ideen ausreichend vermitteln, damit Sie zum nächsten Schritt, den digitalen Wireframes, übergehen können.
Beispiel 1
Beispiel 2
Beispiel 3
Schritt zwei: Low-fidelity digital wireframes
Geschätzter Zeitaufwand: 2-3 Tage, je nach Umfang des MVP.
Sobald Sie Ihre MVP-Wireflows ausgearbeitet haben, besteht der nächste Schritt darin, etwas detailliertere Wireframes zu erstellen. Sie können einen Papierprototyp erstellen oder direkt zu digitalen Wireframes übergehen (wenn es schnell gehen muss, gehe ich in der Regel zu digitalen Wireframes über).
Hinweis: Wenn Sie mit einer etablierten Marke arbeiten, können Sie möglicherweise Komponenten aus einem bestehenden Designsystem verwenden und direkt zu High-Fidelity, Schritt 3, übergehen.
Ich empfehle die Erstellung von Zeichenflächen für die wichtigsten Bildschirme, die Sie bei Ihrer Skizzenübung entdeckt haben. Die Anzahl der benötigten Bildschirme wird sich erhöhen, wenn Sie sich durch den Wireframing-Prozess von Skizzen über Low-Fidelity-Wireframes zu High-Fidelity-Wireframes bewegen.
Für die digitalen Wireframes mit geringer Wiedergabetreue verwenden Sie das Design-Tool Ihrer Wahl, um einfache Formen zu erstellen und einfache Schriftarten zu verwenden, um Ihre Wireframes zu erstellen. Es gibt auch viele UI-Kits, die diesen Prozess beschleunigen und Low-Fidelity-Designs erstellen können, die optisch etwas ansprechender sind. Ich empfehle außerdem die Verwendung einer mittleren Zeichenflächengröße, die für die meisten Handy-Bildschirmgrößen geeignet ist. Wenn Sie die Daten Ihrer Zielgruppe haben und wissen, welche Handygröße von ihr überwiegend verwendet wird, dann verwenden Sie diese Bildschirmgröße.
Ich verwende eine Artboard-Größe von 875 x 667 Pixel, wenn ich Adobe XD verwende (oder ein anderes Design-Tool, da die meisten voreingestellte Größen eingebaut haben), da dies der „Mittelweg“ der Bildschirmgrößen ist (insbesondere für das iPhone). Ich finde, dass diese Größe gut für iPhone 8 und iPhone X funktioniert, und ich finde, dass dies auch für Android gut funktioniert.
Hier ist ein Beispiel für Low-Fidelity-Screens in Aktion:
Nachdem Sie Ihre Low-Fidelity-Screens erstellt, Ihre Entwürfe mit Nutzern getestet und die Zustimmung der Stakeholder erhalten haben, sind Sie nun bereit, die High-Fidelity-Screens zu erstellen.
Schritt drei: High-Fidelity-Digital Wireframes
Geschätzter Zeitaufwand: 1+ Wochen. Dies hängt davon ab, ob Sie bereits über ein Designsystem verfügen oder ob Sie es von Grund auf neu erstellen. Dieser Schritt dauert auch deshalb länger, weil wahrscheinlich mehr Bildschirme hinzugefügt werden als in der Low-Fidelity-Phase.
In diesem Schritt erwachen Ihre Entwürfe zum Leben! Es ist auch die Phase, in der Ihre Entwürfe wirklich beginnen, wie eine funktionierende mobile Anwendung auszusehen, die Sie als Prototyp entwickeln, testen, iterieren, genehmigen und schließlich an das Entwicklungsteam übergeben können.
Berücksichtigungen:
- Wenn das Produkt, an dem Sie arbeiten, bereits eine etablierte Marke hat, werden Sie höchstwahrscheinlich Farben, Symbole und Schriftarten aus den Markenrichtlinien übernehmen.
- Wenn das Produkt, an dem Sie arbeiten, noch kein vollständig etabliertes Marken-Look-and-Feel hat, können Sie ein UI-Kit finden und verwenden, um Ihren Designprozess zu beschleunigen.
Die nächste Überlegung ist, mit welchen Bildschirmen Sie beginnen? Sie können beginnen mit:
- Schlüsselbildschirmen für jeden Abschnitt Ihrer Hauptnavigation, oder;
- Schlüsselbildschirme für den Benutzer, oder;
- Priorisieren Sie die Bildschirme, die Sie entwerfen, basierend auf der Reihenfolge des Entwicklungszeitplans (damit beginne ich in der Regel, damit ich in einer agilen Methode arbeiten kann, wobei ich sicherstelle, dass die Bildschirme zur Übergabe bereit sind, wenn das Entwicklungsteam sie braucht).
In diesem Beispiel werde ich den Prozess der Verwendung eines etablierten UI-Kits in Adobe XD zeigen. Ich beginne mit der Benutzeranmeldung und der Profilerstellung, da die Entwicklungsteams, mit denen ich zusammengearbeitet habe, in der Regel mit der Benutzerverwaltung beginnen.
Das von mir gewählte UI-Kit verfügt bereits über eine etablierte Farbpalette, Zeichenstile und gemeinsame UI-Elemente (auch Komponenten genannt), die kopiert und in die Wireframes eingefügt werden können.
Hinweis: Ich empfehle, alle Elemente, die Sie wiederverwenden möchten, frühzeitig in Komponenten (oder Symbole) zu verwandeln. Auf diese Weise können Sie, wenn Sie den Rückwärtspfeil von einem Pfeil “ ← “ in eine Karotte „<“ ändern müssen, diesen über die Masterkomponente ändern und ihn in allen Wireframes aktualisieren, anstatt die Bearbeitung auf jedem Bildschirm, der aktualisiert werden muss, zu kopieren und einzufügen.
Beispiel für Farben, Zeichenstile und Komponenten:
Um den Prozess zu beginnen, würde ich mit dem Aufbau der Onboarding-, Anmelde- und Benutzerprofil-Bildschirme beginnen:
Als Nächstes würde ich mit dem Aufbau der globalen Navigationselemente beginnen:
Danach würde ich damit beginnen, High-Fidelity-Drähte für alle Benutzerströme der App zu erstellen, beginnend mit priorisierten Strömen basierend auf der Übergabe an die Entwicklung (oder für alle Elemente, die noch Benutzertests benötigen).
Ich empfehle die Erstellung separater Designdateien für jeden der wichtigsten Benutzerströme, damit Sie bei der Arbeit mit einer agilen Methode leicht Prototypen erstellen und mit der Entwicklung teilen können (z. B. eine Datei für die Benutzeranmeldung und die Kontoerstellung, eine Datei für die Nachrichtenübermittlung, eine Datei für die Suchfunktion usw.).
Wenn die Designs genehmigt und an die Entwicklung übergeben werden, empfehle ich die Erstellung einer Masterdatei mit allen Bildschirmen und Master-Komponenten. Bei der Arbeit in Teams empfehle ich in der Regel, dass eine Person für die Masterdatei verantwortlich ist, um Verwirrung zu vermeiden. Auf diese Weise weiß jedes Teammitglied, dass es auf die genehmigte Masterdatei zurückgreift, wenn es neue Funktionen und Abläufe für die Anwendung erstellt.
Hier sehen Sie zum Beispiel eine Masterdatei für eines meiner Projekte aus der Vogelperspektive. Beachten Sie, dass ich die Bildschirme nach Benutzerfluss und Entwicklungspriorität gruppiert und geordnet habe. Ich werde diese Masterdatei weiter ergänzen, wenn ich die nächste Abfolge von Benutzerabläufen erstelle.
Einige Leitprinzipien für die Erstellung besserer mobiler Anwendungen
Nachdem Sie nun wissen, wie Sie mit dem Wireframing Ihrer digitalen Erlebnisse beginnen können, ist es an der Zeit, Ihren Designansatz zu verbessern. Wenn Sie eine Anwendung für mobile Geräte mit Betriebssystemen wie iOS und Android entwickeln, müssen Sie einige wichtige Aspekte beachten. Im Folgenden finden Sie einige allgemeine Tipps (und ein paar persönliche Meinungen) zur Gestaltung von mobilen Apps und wie Sie weniger Zeit mit der Gestaltung für die einzelnen Gerätetypen auf dem Markt verbringen müssen. Wenn Sie nach weiteren Inspirationen suchen, können Sie sich auch diese Wireframe-Beispiele für Websites und mobile Apps ansehen.
Ich bin der festen Überzeugung, dass ein Design so allgegenwärtig wie möglich sein sollte. Wann immer möglich, empfehle ich daher ein betriebssystemunabhängiges Design. Hier ist der Grund dafür:
- Wenn ein Benutzer von einem Android-Telefon zu einem iPhone wechselt, sollte er nicht zwei verschiedene Wege lernen müssen, um eine App zu benutzen, die dieselbe Aufgabe löst. Die Lösung sollte immer noch dieselbe sein. Ich weiß, dass es Unterschiede bei den Gesten und gerätespezifischen Möglichkeiten geben kann, aber ich bin der Meinung, dass eine App unabhängig vom Betriebssystem die gleiche Benutzeroberfläche und den gleichen Benutzerfluss bieten sollte. Und wichtige Funktionen sollten nicht zu tief in Kontextmenüs versteckt sein; das ist einfach schlechte UX.
- Es ist teuer, zwei (oder mehr) völlig unterschiedliche Erlebnisse zu entwerfen, zu entwickeln und zu pflegen (vor allem, wenn das Erlebnis unabhängig von der Plattform dasselbe sein könnte).
- Wenn man die unterschiedlichen Erlebnisse entwirft und pflegt, können die Erlebnisse anfangen, sehr unterschiedlich zu werden. Das kann der Marke schaden und die Verfolgung und Umsetzung von Feedback und Funktionen erschweren.
Wie kann man also allgegenwärtige Designs erstellen und geräteunabhängig sein? So mache ich es:
- Behandle meine mobilen Designs so, als ob ich für das mobile Web entwerfen würde. Meine Designs sind responsive, weil es unendlich viele Bildschirmgrößen und Pixeldichten gibt (die sich so schnell ändern, wie die Unternehmen sie entwickeln können). Als Designer haben wir nicht die Zeit, für jede Pixeldichte zu entwerfen, und ich glaube nicht, dass meine Kunden für diese Zeit bezahlen wollen. Daher verwende ich eine Zeichenflächenbreite von 375, was für die meisten modernen iPhone-Modelle und Android funktioniert.
- Ich gehe mit der seltsamen Bildschirmform des iPhone X und iPhone 11 um, indem ich dem Entwicklungsteam sage, dass es die Hintergrundfarbe der Kopfzeile einfach nach oben verlängern soll.
- Ich habe das Glück, mehrere verschiedene Telefontypen in meiner Reichweite zu haben, so dass ich meine Designs über die XD Mobile App per USB testen kann. Das ist hilfreich, denn so kann ich die Schriftgröße, die Berührungspunkte der Benutzeroberfläche und die Sichtbarkeit des Bildschirminhalts testen, wenn die Tastatur hochgeklappt ist. Ich kann auch die „Faltlinie“ testen und sicherstellen, dass wichtige Inhalte, wie CTAs und wichtige Inhalte, sichtbar bleiben und nicht am unteren Rand des Bildschirms verschwinden.
- Ich versuche, nur Gesten zu verwenden, die universell einsetzbar sind, z. B. Tippen, Streichen, Drücken und Halten. Ich denke, wir sollten uns auf die beste Benutzererfahrung konzentrieren können, unabhängig vom Betriebssystem.
- Ich verwende SVGs für alle Symbole und Logos, damit sie auf jeder Bildschirmauflösung gut aussehen.
- Ich verwende Navigations- und Menüstrukturen, die universell und nicht zu betriebssystemspezifisch sind.
Die einzige Zeit, in der ich Wireframes entwerfen muss, die gerätespezifisch sind, ist, wenn ich Prototypen erstelle und eine native Gerätefunktion aufrufe, wie die Kamera. Selbst das kann von Telefon zu Telefon und Betriebssystem variieren.
Die meisten meiner Kunden beginnen mit iOS. Wir testen und validieren das Design, und wenn es auf dem richtigen Weg ist, dann entwickeln wir für Android. Und wissen Sie was? Wir versuchen, die Benutzeroberfläche oder die Benutzerabläufe überhaupt nicht zu ändern. Stattdessen konzentrieren wir uns auf das Branding, das Erscheinungsbild, die Features und Funktionen sowie die Benutzerführung. Es geht um das Wichtigste: das zentrale Nutzererlebnis.
