🖕🏻 🏽 ⬛️ Benutzerfluss: So erstellen Sie beliebte Anwendungen und Websites 👩🏽 🎮 👨🏽‍🤝‍👨🏻

Hallo alle zusammen!

Ich bin Maxim Skvortsov, UX / UI-Designer von Omega-R, einem internationalen Unternehmen für die Entwicklung und Integration von IT-Lösungen. Ich entwerfe und visualisiere die Schnittstellen von Mobil- und Webanwendungen.

Basierend auf meiner Erfahrung auf dem Gebiet der Informationstechnologie und meiner Unternehmenskompetenz möchte ich meine Vision und meinen Ansatz für die Verwendung eines der Design-Design-Tools - User Flow - teilen. Warum wird es verwendet und warum ist es ein wertvoller Assistent für einen Designer? Wie kann der Benutzerfluss aussehen und wie wird er erstellt?

Bild

Was ist Benutzerfluss?

Situation: Sie haben eine neue Anwendung gefunden, die verspricht, genau das zu tun, was Sie wollen, und Sie drücken eifrig den Download-Button. Nach einem Moment startet die Anwendung und Sie können loslegen. Aber zuerst müssen Sie ein Konto registrieren, dann der Anwendung die Erlaubnis geben, auf Ihren Standort zuzugreifen und Ihnen Push-Benachrichtigungen zu senden. Danach müssen Sie durch das gesamte Tutorial, die Vereinbarung über die Verwendung personenbezogener Daten usw. scrollen. Die bittere Wahrheit ist, dass der Benutzer in dieser Interaktion die Anwendung mit größerer Wahrscheinlichkeit schließt und deinstalliert, unabhängig davon, wie funktional sie ist. Aus diesem Grund ist es so wichtig, den Benutzerpfad in der Anwendung mit dem Benutzerfluss zu optimieren.

Der Benutzerfluss ist eine visuelle Darstellung der Abfolge von Aktionen.dass der Benutzer durchführt , um sein Ziel zu erreichen . Es kann entweder eine bestimmte Funktion oder das gesamte Produkt abdecken.

Um eine Sequenz zu erstellen, muss eine Studie durchgeführt und drei grundlegende Fragen beantwortet werden :

Wer ist der Benutzer?
Was ist sein Zweck?
Welche Schritte sollte er unternehmen, um dies zu erreichen?

Dies sind die Hauptfragen, bei denen es manchmal schwierig sein kann, klare Antworten zu geben. Daher können unterstützende Fragen hilfreich sein:

Wofür wird der Benutzer die Anwendung verwenden?
Was motiviert den Benutzer, dieses Ziel zu erreichen?
Wie hilft Ihnen die App, Ihr Ziel zu erreichen?
Was kann einen Benutzer daran hindern, die Anwendung zu verwenden?
Welche Eigenschaften eines Produkts oder einer Dienstleistung sind für den Kunden und die Benutzer am wichtigsten? Was sind die Fragen, Zweifel und Zögern?
Welche Eigenschaften der Anwendung sind für den Benutzer am wichtigsten?
Welche Informationen benötigen Benutzer, um eine Aktion abzuschließen?
Welche Art von emotionalem Auslöser treibt sie zum Handeln?

Im Entwurfsprozess müssen immer viele Fragen auftauchen. Die Suche nach Antworten bietet die Möglichkeit, alles von allen Seiten zu betrachten. Nur in diesem Fall kann das Ergebnis ein wirklich praktisches Produkt sein.

Der Benutzerfluss ist eine Geschichte über einen Benutzer.

Mit dem Benutzerfluss können Sie die Interaktion des Benutzers und der Anwendung mit den Augen des Benutzers betrachten.

Wenn vollwertige Websites genügend Platz für Kreativität bieten, zwingt uns die Entwicklung mobiler Anwendungen immer dazu, ein Gleichgewicht zwischen Funktionalität und Benutzerfreundlichkeit zu finden. Einerseits sollten Benutzer vom Hauptbildschirm der Anwendung aus ohne viele zusätzliche Schritte problemlos auf die wichtigsten Funktionen zugreifen können, indem sie einfach auf die großen Schaltflächen klicken. Wenn wir dagegen über Anwendungen sprechen, geht es nicht nur um Schaltflächen.

Angenommen, Sie erstellen eine Anwendung für einen Musikplayer. Einerseits möchten Sie, dass der Benutzer seine Lieblingslieder mit einem Tastendruck abspielen kann. Auf der anderen Seite benötigen sie eine Möglichkeit, Lieblingssongs zu bestimmen, nach neuer Musik zu suchen (möglicherweise an mehreren Stellen), die Lautstärke zu steuern und den Equalizer anzupassen, Musik zu sortieren, die Liste zu mischen, die Biografie des Künstlers zu lesen, Einkäufe zu tätigen und alle anderen Player-Funktionen zur Hand zu haben. Der Benutzer möchte Empfehlungen und Wiedergabelisten in sozialen Netzwerken teilen und sehen, was seine Freunde hören.

Wenn der Benutzer beim Anhören der Wiedergabeliste im Online-Shop surft und beschließt, den aktuellen Titel zu überspringen, muss er den Store nicht schließen und mehrere Menüschritte durchlaufen. Der Zugriff auf diese Schaltfläche zum Überspringen sollte sich auf demselben Bildschirm befinden.

Das Erstellen der funktionalsten Anwendung ist nicht so schwierig, aber es ist viel schwieriger, alles auf die attraktivste und benutzerfreundlichste Weise zusammenzustellen. Wenn das Entwicklerunternehmen damit nicht fertig wurde und die Anwendung nicht intuitiv erstellt hat, bleibt sie in den Storys nicht beansprucht. Für den Benutzer ist es immer einfacher, eine verständlichere Anwendung herunterzuladen, als Zeit damit zu verbringen, Handbücher und Tutorials zu lesen oder endlos auf der Suche nach Bedeutung darüber zu wandern.

Designerrolle

Stellen Sie sich vor, Sie arbeiten an einem Produkt in einem Team, in dem sich Projektmanager, Backend- und Webentwickler befinden. Angenommen, es gibt sogar eine technische Aufgabe des Kunden, die ausreichend detailliert und solide geschrieben ist. Es bleibt nur zu nehmen und ein Produkt zu machen.

Was soll ein Designer tun? Nach dem erwarteten Ergebnis zu urteilen, zeichnen Sie alle erforderlichen Bildschirme, damit das Endprodukt bequem und schön ist, und geben Sie es den Entwicklern.

Im Allgemeinen ja. Aber es gibt einen Unterwasserteil eines Eisbergs. Dort sind viele Dinge versteckt, an die nur wenige denken. Wir alle lieben bequeme und intuitive Benutzeroberflächen, wir lieben es, wenn alles logisch funktioniert und das Ergebnis jeder Interaktion vorhersehbar ist. Und damit dies alles geschieht, müssen Sie jedes Detail sorgfältig ausarbeiten.

Nur dafür benötigen Sie einen Benutzerfluss - er hilft dabei, die Wege für Benutzer zu bestimmen, um das Ziel zu erreichen, positive und negative Szenarien auf dem gewählten Pfad zu berechnen, um die Ziele unserer potenziellen Benutzer zu erreichen. Es macht es möglich zu verstehen, ob alle Prozesse im Produkt eine logische Schlussfolgerung haben und effizient aufgebaut sind, so dass der Benutzer ein Minimum an Zeit benötigt, um das Ziel zu erreichen.

Wichtig: Je größer das Problem und je mehr Funktionen, desto mehr Szenarien müssen Sie durcharbeiten.

Somit hilft der Benutzerfluss dabei, einen häufigen Fehler zu vermeiden, wenn eine Liste der erforderlichen Funktionen erstellt und einfach darauf basierende Schnittstellen entworfen werden. Ein solcher Ansatz ist natürlich möglich. Dies kann jedoch zu Interaktionsszenarien mit der Benutzeroberfläche führen, die dazu führen, dass der Benutzer zu viele Schritte durchläuft, um einfache Vorgänge auszuführen.

Wert für das Produktteam

Der Benutzerfluss hilft auf oberster Ebene dabei, Szenarien mit dem Kunden zu koordinieren, damit das Produkt oder die Funktionalität funktioniert. Besonders wenn Kunden keine spezifischen und detaillierten Anforderungen haben (wenn sie selbst nicht gut verstehen, was sie wollen). In diesem Fall kann der Benutzerfluss den Kunden eine Richtung geben, und sie teilen Ihnen bereits mit, an welchen Stellen sie die Logik ändern möchten, indem sie ihr Feedback geben - entweder in Form eines Kommentars oder durch unabhängige Anpassung des aktuellen Schemas. Trotz der Tatsache, dass das Erstellen eines Benutzerflusses als komplizierter und zeitaufwändiger Prozess erscheint, hilft es, viele Fehler während der Produktentwicklung zu beseitigen. Mit seiner Hilfe, wie sie sagen, "langsam nutzen, aber schnell reiten."

Für PM ist es basierend auf dem Benutzerfluss bequem, Aufgaben für Entwickler zu starten. Es ist ziemlich offensichtlich und transparent, welche Änderungen an der aktuellen Logik vorgenommen werden müssen oder welche neuen Funktionen hinzugefügt werden.

Tester können Anwendungsfälle (Tests) und Checklisten vorbereiten, indem sie benutzerfreundliche Skripte in einem praktischen Format demonstrieren.

Der Benutzerfluss ist für das Team sehr nützlich, insbesondere wenn die Zusammensetzung des Teams groß genug ist - Sie müssen die Arbeitslogik nicht separat erläutern. Somit bezieht der Benutzerfluss den Kunden in den Entwurfsprozess ein, motiviert das Team, lenkt alle Arbeitsprozesse in eine einzige Richtung, da jedes Teammitglied das Bild als Ganzes sieht.

Kunden-Wert

Ein Benutzer ist fast immer derjenige, der ein Produkt oder eine Dienstleistung kauft oder nutzt oder möglicherweise dazu bereit ist. Wie komfortabel dieser Prozess aufgebaut ist, hängt von seiner Benutzerbindung ab. Unabhängig davon, wie er ein Produkt oder eine Dienstleistung kauft - im Büro, telefonisch, mit einem Spezialisten, der das Haus besucht, über die Baustelle, über die Anwendung - sollte der Weg zum Erwerb und zur Nutzung so einfach wie möglich sein.

Bei Websites und mobilen Anwendungen ist der Benutzerfluss die Art und Weise, wie der Benutzer durch Inhalte (Text, Bilder, Audio, Video) navigiert. Der Benutzerfluss umfasst die Priorisierung von Inhaltsanforderungen, Navigationsbarrieren und das Finden der schnellsten und schmerzlosesten Routen zur Zielaktion. Im Wesentlichen ist der Benutzerfluss direkt mit dem Conversion-Trichter verbunden, und das IT-Unternehmen, das den Benutzerfluss verwendet, entwickelt automatisch einen effektiven Conversion-Trichter oder optimiert einen vorhandenen Trichter.

Das Ergebnis der Unterstützung, die ihm dank des Benutzerflusses bei der Erreichung des im Design enthaltenen Ziels gewährt wurde, ist ein glücklicher und interessierter Benutzer. Ein glücklicher und interessierter Benutzer bedeutet mehr Zeit in der Anwendung oder auf der Website, niedrigere Absprungraten, höhere Conversion-Raten und eine verbesserte Benutzererfahrung.

Somit wirkt sich der Benutzerfluss direkt auf den Erfolg der Website oder mobilen Anwendung und den Gewinn des Kunden aus. Der Benutzer wird zum Zentrum des Designs, und dies stimmt vollständig mit dem Prinzip der Kundenorientierung auf das Geschäft überein.

Wie sieht es aus?

Ich habe noch nie einen klar definierten Standard gesehen, nach dem die Gestaltung des Benutzerflusses erfolgt. Die Darstellung des Benutzerflusses kann unterschiedlich sein und hängt davon ab, wie gründlich alles ausgearbeitet werden muss. Es ist wichtig, dass Sie Ihr Ziel als Designer erreichen, damit der Kunde und das Produktteam verstehen, wie der Benutzer Zugriff auf eine bestimmte Funktion erhält, wo er sich befindet und wie er arbeitet.

Der Benutzerfluss kann wie folgt dargestellt werden:

Aufgabenablauf
Drahtfluss (Lo-Fi)
Bildschirmfluss (HiFi)

Schauen wir uns jeden an und sehen, wie sie aussehen können. Als Beispiel nehmen wir den Online-Shop für Haushaltsgeräte. Definieren Sie den Benutzer, sein Ziel und die Schritte, um das Ziel zu erreichen.

Lassen Sie unsere Benutzerin eine junge Mutter sein, deren Ziel es ist, eine multifunktionale Küchenmaschine zu kaufen. Ein Szenario in der Reihenfolge der Schritte kann folgendermaßen aussehen:

Öffnen Sie die Website des Geschäfts.
Geben Sie die Suche "Küchenmaschine" ein.
Vergleichen Sie mehrere Produkte aus Suchergebnissen
Legen Sie das gewünschte Produkt in den Warenkorb.
Einen Kauf tätigen;
bezahlen;
Schließen Sie die Site.

Aufgabenablauf

Der Aufgabenfluss ist eine einfache Darstellung dessen, was der Benutzer bei jedem Schritt tut, um ein Ziel oder eine Aufgabe zu erreichen. Dies ist im Wesentlichen ein klassisches Flussdiagramm, das diese Sequenz definiert.

Bild

Dieses Schema spiegelt keine Konventionen und andere Probleme wider, die angegangen werden müssen. Und was passiert, wenn in den Suchergebnissen nichts gefunden wurde? Und was passiert, wenn die Zahlung nicht erfolgreich ist? Hier werden nur allgemeine Schritte vorgestellt, die viele Aktionen umfassen können: Beispielsweise kann die Suche mit vielen Filtern erweitert werden, der Zahlungspfad hängt von der Auswahl des Zahlungswerkzeugs ab usw.

Um ein Diagramm zu erstellen, können Sie die Liste der erforderlichen und ausreichenden Elemente aus den im Bild gezeigten klassischen Blockdiagrammen verwenden oder den BPMN- Standard verwenden - Es richtet sich sowohl an technische Spezialisten als auch an Geschäftsanwender.

Bild

Drahtfluss (Lo-Fi)

Der Drahtfluss ist eine Kombination aus einem Flussdiagramm und Drahtgittern. Wireframe ist eine detaillierte Skizze des Bildschirmdesigns, deren Schwerpunkt nicht auf der visuellen Komponente liegt, sondern auf der Position der Elemente, der Struktur und dem Inhalt des Bildschirms.

Im Drahtfluss werden anstelle von Flussdiagrammelementen schematische Bildschirmlayouts dargestellt, mit denen der Benutzer auf dem Weg zum Erreichen des Ziels interagiert. Sie müssen sich nicht auf die visuellen Details konzentrieren und jede Schaltfläche und jedes Symbol zeichnen. Am häufigsten liegt der Schwerpunkt auf den Navigationselementen bei der Gestaltung jeder einzelnen Seite.

Drahtflüsse sind besonders nützlich beim Erstellen von mobilen Bildschirmen: Die relativ kleinen Größen von mobilen Bildschirmen können leicht verwendet werden, um abstraktere Elemente von Flussdiagrammen zu ersetzen. Drahtströme eignen sich gut zur Bildung und Verfeinerung technischer Spezifikationen, sind jedoch für die Testphase kaum geeignet.

Ein Beispiel für ein solches Schema:

Bild

Bildschirmfluss (HiFi)

Hier geht es um aufwendige Bildschirme, die sowohl für Benutzer als auch für Entwickler verständlich sind. In der Regel liegt der Schwerpunkt auf Navigationselementen und einigen Verhaltensnuancen. Es kann als Regulierungsdokument verwendet werden, um das Design von Layouts zu genehmigen.

Der Bildschirmfluss kann im Wesentlichen als Prototyp bezeichnet werden, wenn Sie ihm Interaktivität hinzufügen. Das Merkmal ist eine hohe Genauigkeit oder eine perfekte Pixelanpassung: Es berücksichtigt die physische Größe des Bildschirms und zeigt alle visuellen und typografischen Details des Produkts an. Bildschirmflusselemente sind tatsächlich Bildschirmlayouts einer fertigen Anwendung.

Der Kunde der Anwendung ist möglicherweise angenehm überrascht von der Geschwindigkeit der Entwicklung, wenn Sie ihm den Bildschirmfluss zeigen, und denkt möglicherweise, dass die Entwicklung kurz vor dem Abschluss steht. In der Regel informieren wir den Kunden im Voraus darüber, dass sich hinter dem Bildschirmfluss kein Code befindet. Das Vorhandensein des Bildschirmflusses gibt dem Kunden jedoch die Garantie, dass auf eine gut vorbereitete Benutzeroberfläche und Benutzeroberfläche ein ebenso perfekter Code folgt.

Beispiel für den Bildschirmfluss: Im

Bild

Folgenden finden Sie ein Beispiel dafür, wie eine Mischung aus klassischen Flussdiagrammen, schematischen Bildern und endgültigen Layouts im Aggregat aussehen könnte.

Bild

Wie Sie wissen, ist der aufwändigste Bildschirmablauf der zeitaufwändigste. Es sieht aus wie eine funktionierende Anwendung und ist bereit für interaktives Prototyping, Testen, neue Iterationen, Genehmigung und Übertragung an Entwickler. Es gibt viele Automatisierungstools für das Design von Benutzerflussteams, darunter Overflow, Miro, Flowmapp und andere.

Der Benutzerfluss, der das gesamte Produkt abdeckt, den Prozess seiner Erstellung systematisiert und strukturiert, das Produktteam maximal an den Bedürfnissen des Benutzers und seinem gemeinsamen Verständnis ausrichtet, ermöglicht es Ihnen, durch Analyse von Benutzerszenarien ein äußerst verständliches und intuitives Produkt zu erstellen. All dies beschleunigt nicht nur die Entwicklungsgeschwindigkeit erheblich, sondern vertieft auch die Interaktion mit dem Kunden. Der Benutzerfluss lässt ein IT-Unternehmen immer über die Geschäftsanforderungen des Kunden nachdenken, um eine Anwendung effizienter und erfolgreicher zu erstellen, als dies innerhalb des zugewiesenen Budgets und der zugewiesenen Zeit ohne Verwendung des Benutzerflusses möglich ist.

Benutzerfluss: So erstellen Sie beliebte Anwendungen und Websites