Erstellen Sie perfekte Benutzerströme

Erstellen Sie perfekte Benutzerströme

Was genau ist ein Benutzerfluss? Optisch ist es ein bisschen wie eine Tanzmatte. Rechter Fuß hier. Linker Fuß da drüben. Nun bringen Sie sie zusammen, drehen Sie sich und wiederholen Sie. Ohne zu wissen, wie man tanzt, können Sie immer noch auf dieser Matte stehen und sich mit Ihren Füßen an den richtigen Stellen in der richtigen Reihenfolge bewegen. Ein Benutzerfluss ist genau das. Ein lockerer, aber koordinierter Tanz mit Ihrer Website. Es ist wichtig, dass Sie wissen, wohin ein Benutzer tritt und in welcher Reihenfolge dieser Tanz gut verläuft.

Das Durcharbeiten der Erwartungen der Benutzer und das Erstellen einer insgesamt positiven Benutzererfahrung kann eine komplizierte Mischung aus Datenpunkten, Anwendungsfällen, Drahtmodellen und Prototypen sein, um die Punkte zu verbinden, bevor das Projekt vollständig aufgebaut ist. Bei so vielen beweglichen Teilen kann es leicht passieren, dass ein Stakeholder die Vision missversteht (Sie können die Dinge mit einem Top vereinfachen Webseitenersteller ).

Im Gegensatz zu einem Entwurf, der zeigt, mit was ein Benutzer nach der Entwicklung interagieren wird, besteht die Rolle eines Benutzerflusses darin, die Grundregeln für die Darstellung der nachfolgenden Drahtmodelle und Entwürfe festzulegen. Es ist das Strategiedokument, um zu entwerfen, wie der Benutzer von Punkt zu Punkt fließt.



Möchten Sie Ihr Toolkit aktualisieren? Sehen Sie sich unsere Auswahl an Top an Web-Hosting Dienstleistungen und Cloud-Speicher Optionen.

Was Sie für einen Benutzerfluss benötigen

Erstellen Sie perfekte Benutzerflüsse: Navigation

Wenden Sie Benutzerströme an, um herauszufinden, wie die Navigation in Apps und auf Websites funktioniert

Unabhängig davon, ob Sie für eine Agentur oder direkt mit einem Kunden als Freiberufler arbeiten, ist Ihnen die Verwirrung, die mit dem Teilen früher Designs mit einem Kunden einhergeht, wahrscheinlich nicht fremd. In Ihrem Kopf verstehen Sie die Feinheiten, wie jeder Inhaltsblock in das Gesamterlebnis passt und wie herrlich es ist. Dann zeigen Sie jemand anderem oder, noch schlimmer, dem Kunden, und er versteht es nicht. Sie hängen an den falschen Details, oft weil sie noch nicht die volle Vision vor sich haben. Hier bieten sich Strategiedokumente an, die den Zweck beschreiben - wie ein Benutzerfluss -, um die Dinge in Bewegung zu halten.

Dazu benötigen Sie Folgendes:

wie man ein Pferd in Schritten zeichnet

Geschäftsziele
Warum soll jemand Ihre Website besuchen? Diese erhalten Sie in der Regel von Ihrem Ansprechpartner in einem kurzen Gespräch. Starten sie einen neuen Service, ein neues Produkt oder versuchen sie, Traffic für einen bestimmten Bereich der Site zu generieren? Je detaillierter Sie werden, desto besser. Ziele führen zu Rechenschaftspflicht von allen Seiten und kommen den Nutzern zugute.

Benutzerziele
Warum besucht tatsächlich jemand Ihre Website? Zögern Sie nicht, diese direkt vom Kunden zu übernehmen, es sei denn, sie haben dies getan Benutzertests oder eine Art datengetriebene Forschung, um dies zu unterstützen. Andernfalls erhalten Sie dieselben Geschäftsziele mit einer anderen Wendung.

Einstiegspunkte und Benutzertypen
Wo landen Benutzer gerade, basierend auf den Daten? Landen Benutzer normalerweise in einem Blog-Beitrag? Auf einem Portfolio-Stück oder einem vorgestellten Produkt? Noch wichtiger ist, wie kommen sie dorthin? Wenn der organische Verkehr hauptsächlich zum Blog führt, können diese Benutzer zwischen sekundären oder tertiären Seiten wechseln, anders als jemand, der von einer verweisenden Website, sozialen Medien oder einer E-Mail-Kampagne hereinkommt. Möglicherweise müssen Sie sie anders zuordnen, um den Ablauf richtig darzustellen.

Yellow Brick Roads (YBRs)
Was ist der ideale Weg für Benutzer, um zwischen Seiten zu wechseln, um sowohl die Geschäfts- als auch die Benutzerziele zu erreichen? Um sie vom Einstiegspunkt zum ergebnisorientierten Ziel zu bringen? In welche Randfälle können Benutzer fließen, wenn Benutzer nichtlinear fließen? Wenn Ihr YBR beispielsweise eine Blogpost-Zielseite ist, die zu einer Service-Seite und dann zur Kontaktseite durchklickt, wo können einige Benutzer verloren gehen? Kommen einige Benutzer auf die About-Seite? Wohin gehen sie von dort? Zeichnen Sie diese Randfälle auf und wie sie von Ihren idealen Szenarien abweichen.

Erstellen Sie perfekte Benutzerflüsse: Lo-Fi-Drahtmodell

Ein Lo-Fi-Drahtmodell ist nützlich, um eine ungefähre Vorstellung davon zu bekommen, wie eine Seite funktioniert

Sie können die letzten beiden Punkte mit Google Analytics und der Benutzer-Explorer-Funktion für einzelne Benutzerflusspfade oder im Abschnitt Benutzerfluss extrahieren, um eine 10.000-Fuß-Ansicht der Trendpfade für alle Benutzer auf der Website anzuzeigen. Beide sind es wert, sich damit vertraut zu machen (siehe oben) Tools in Google Analytics-Post ).

Denken Sie an die Tanzmatte. Wo platzieren Benutzer ihre Füße zuerst (Zielseite)? Wohin geht jeder Fuß als nächstes (Seite zwei, drei, vier usw.)? Zeigen Sie dies in einem Flussdiagramm für jeden Benutzertyp oder jedes Ziel.

Es gibt viele Plugins, Frameworks oder Softwarelösungen, mit denen Diagramme erstellt werden können. Schauen wir uns an, was das Ergebnis in einem Benutzerfluss sein sollte.

  • Einfach zu teilen und zu drucken. Dies mag wie ein Kinderspiel erscheinen, aber Sie wären überrascht, wie oft Leute Ausdrucke für Diagramme mitbringen, die nicht lesbar sind. Wenn zu viele Schritte oder zu viel Text vorhanden sind, um eindeutig auf einen 8,5 x 11 Zoll großen Ausdruck zu passen, sind die Dinge zu kompliziert.
  • Überbrücken Sie die Kommunikationslücke zwischen Kunden, Stakeholdern, Designern und Entwicklern. Flows zeigen, wie ein Benutzer zwischen den Seiten navigiert und mit ihnen interagiert. Dies ist wichtig, um allen einen Rahmen zu geben, in dem sie ihr künftiges Verständnis vereinheitlichen können.
  • Zeigen Sie die Pfade zu jedem vorrangigen Geschäfts- und Kundenziel, gemeinsame Einstiegspfade und einen optimierten YBR-Pfad auf, der verpasste Möglichkeiten für wichtige Inhalte bietet. Aus Gründen der Klarheit geschieht dies nicht in einem einzigen Fluss. Dies sind mehrere eigenständige Flows.

Mit dem Buy-In von Stakeholdern können Sie diese Benutzerflussdokumente verwenden, um die Designer zu informieren, die Drahtmodelle erstellen, um sicherzustellen, dass sie den Kernstrategien für die Benutzererfahrung folgen. Sie können wie eine Checkliste behandelt werden, um zu überprüfen, ob das Projekt die Ziele bei jedem Schritt erreicht.

generieren New York 2019

Erfahren Sie mehr über UX und mehr unter generate New York 2019. Klicken Sie auf das Bild, um Ihr Ticket zu buchen

Erweitern Sie Benutzerflüsse in Drahtgitter

Erstellen Sie perfekte Benutzerflüsse: Randfälle

Ordnen Sie Randfälle zu und überlegen Sie, wie sie von Ihren idealen Szenarien abweichen

Die meisten von uns haben Erfahrung mit Drahtgittern in irgendeiner Form. Wireframes werden verwendet, um die Strategie hinter a darzustellen Website-Layout . Manchmal werden sie an Entwickler übergeben, um mit dem Aufbau der Infrastruktur zu beginnen. Sie sind die Blaupause für das Haus. Sie helfen den Stakeholdern, das „Warum“ der Strategie zu verstehen, ohne sich auf Details wie Schriftarten, Farben oder Inhalte einzulassen.

Oft springt jemand, der für die Benutzererfahrung oder das Design eines Projekts verantwortlich ist, direkt in das Drahtmodell, weil er sein eigenes mentales Modell eines Benutzerflusses erstellt. Das Problem dabei ist, dass sie das Risiko eingehen, Strategien zu verinnerlichen, unvorhergesehene Vorurteile anzuwenden, alte Ideen wiederzuverwenden und möglicherweise zu einem Engpass zwischen dem Design und der Kommunikation des Designs werden. Klare Kommunikation ist von größter Bedeutung.

wie man Skalen in Photoshop malt

Benutzerströme tragen zur Minderung dieser Risiken bei, da sie die strukturierte Kommunikation weitergeben. Es wird eine Ebene von Kontrollpunkten hinzugefügt.

Beim Wireframing gibt es verschiedene Ebenen der visuellen Wiedergabetreue. Einige bevorzugen Wireframes mit Vorlagen mit niedriger Wiedergabetreue, die sie einfügen können, um die allgemeine Informationsarchitektur einer bestimmten Seite darzustellen. Andere bevorzugen High-Fidelity-Drahtgitter, bei denen es sich um sehr viele Designs handelt, jedoch ohne die richtige Schriftart, Kopie, Farbe und Bildsprache. Es ist wichtig, dass Sie Ihr Publikum kennen und wissen, was Sie wann verwenden sollen. Wenn Sie aus Benutzerströmen heraus arbeiten, sollten Sie realistischerweise in ein Drahtmodell mit höherer Wiedergabetreue wechseln, das sich dann leichter zu einem Prototyp entwickeln lässt.

Es ist eine gute Idee, mit Papier, Whiteboard oder einem Tablet-Skizzierwerkzeug zu beginnen

Es ist eine gute Idee, mit Papier, Whiteboard oder einem Tablet-Skizzierwerkzeug zu beginnen. Auf diese Weise können Sie sich auf die schnelle Ideenfindung für mögliche Lösungen für Problembereiche konzentrieren und den Benutzer auf dem idealen Weg halten.

Zu Beginn benötigen Sie eine Liste jeder Seite, die Sie entwerfen und in die Website einbauen möchten: Startseite, Info, Serviceliste usw. Diese Liste dient als Checkliste, um sicherzustellen, dass Sie nichts verpassen. Beginnen Sie mit groben Skizzen für jede dieser Skizzen, basierend auf den Zielen, die Sie zuvor aufgedeckt haben.

Wohin geht die Navigation? Wie werden Sie die Geschäftsziele auf der Homepage vermitteln? Folgen Sie einem 12-Spalten-Raster, um die Struktur mit einer bestimmten demografischen Gruppe schneller zu verstehen, oder handelt es sich um eine fortschrittlichere interaktive Site, die etwas mehr Ausdrucksfreiheit ausstrahlen kann? Hier bestimmen Sie den besten Weg, um die Ziele zu erreichen und auf einer starken Basis aufzubauen.

Erstellen Sie perfekte Benutzerflüsse: Wireframes

Benutzerflussdokumente können die Erstellung von Drahtgittern wie in diesem Beispiel für Sullair unterstützen

Wenn diese groben Skizzen fertig sind, wählen Sie einen Ihrer Benutzerabläufe aus. Wenn der ideale Pfad beispielsweise eine Blogpost-Zielseite ist, auf die der Benutzer zu einer Serviceseite und dann zur Kontaktseite klickt, testen Sie dies mit Ihren Wireframes. Sehen Sie sich die Zielseite Ihres Blogposts an: Wie würde ein Benutzer die Serviceseite basierend auf Ihrer Struktur finden? Ist das klar? Ist es wirklich eine Priorität im Layout dieser Seite oder ist es nur ein weiterer Link, der in der Seitenleiste, Fußzeile oder Navigation versteckt ist?

Der Benutzerfluss wird zum Prüfer Ihrer Arbeit, zum unvoreingenommenen Faktenprüfer Ihrer Drahtgitter. Noch besser ist, wenn Sie einem Kunden zeigen können, dass Sie alle Punkte verbunden haben, die er als Priorität erachtet hat, werden sie bei jedem Schritt sehr zufrieden mit der Arbeit. Es erinnert sie daran, warum sie Sie beauftragt haben, dies überhaupt zu tun. Es ist eine Erleichterung und sie werden sich wahrscheinlich in Ihren gesamten Prozess einleben.

Wenn Sie nicht nachweisen, dass Sie eine Lösung für diese Ziele oder eine Möglichkeit zur Linderung der vorhandenen Schwachstellen bereitgestellt haben, hängt jede Phase Ihres Projekts stark vom Vertrauen ab. Selbst mit den Besten von uns kann das nur so weit führen, bis Kommentare wie 'Warum haben wir das nicht verstanden?' schleich dich in deine Gespräche ein. Je später diese auftauchen, desto teurer ist die Reparatur. Je öfter sie auftauchen, desto mehr schwindet das Vertrauen. Deshalb ist es so wichtig, einem solchen Prozess zu folgen und Entscheidungen mit Daten und Fokus zu unterstützen.

Interaktive Prototypen

Erstellen Sie perfekte Benutzerflüsse: Pfade

Zeigen Sie die Pfade zu jedem vorrangigen Geschäfts- und Kundenziel auf

Nachdem Sie die Wireframe-Implementierung mit Benutzerabläufen validiert haben, ist es Zeit, sie in interaktive Prototypen umzuwandeln. Hierbei handelt es sich im Grunde genommen um anklickbare statische Bilddateien, mit denen Sie zu einer anderen Bilddatei springen können, um den Eindruck einer Navigation auf einer Website zu erwecken. Diese sind nicht nur für Kunden großartig, sondern es ist auch sehr wichtig sicherzustellen, dass Ihre Entwickler und Designer auf derselben Seite sind. Diese großartige Layout-Idee kann tatsächlich 100 Stunden Entwicklungszeit hinzufügen und außerhalb des Anwendungsbereichs liegen. Dies startet diese Gespräche, bevor Zeit verschwendet wird.

Sie oder Ihr Designteam haben möglicherweise eine sehr klare Vorstellung davon, wie sich diese Drahtgitter in den kommenden Wochen entwickeln werden. Vielleicht nehmen Sie die Drahtgitter sogar in ein vollständiges Design und Prototyping auf. Das ist nicht ungewöhnlich. Ein Problem besteht jedoch weiterhin. Diese subtilen Schwebezustände und Mikrointeraktionen, die eine intuitive Benutzererfahrung unterstützen, sind im Kopf eines Menschen verborgen. Ein Stakeholder sieht diese Vision noch nicht, aber Prototypen können helfen.

Ähnlich wie beim Wireframing können Prototypen in verschiedenen Wiedergabetreuen geliefert werden. Beim Weiß; Wir haben benutzt InVision seit Jahren aufgrund der Einfachheit, gemeinsam nutzbare Prototypen zu erstellen, die sich auf die Benutzerpfade zwischen Seiten und wichtigen Interaktionen oder Überlagerungen konzentrieren. Fügen Sie vorhandene Bilder ein und zeichnen Sie Hotspots über Links. Durch das Erstellen von Interaktionen mit niedriger Wiedergabetreue können Sie einen Prototyp je nach Komplexität innerhalb einer Stunde freigeben.

Erstellen Sie perfekte Benutzerströme: HiFi-Drahtmodelle

Bringen Sie die HiFi-Drahtmodelle heraus, wenn Sie einen detaillierten Einblick in den Inhalt erhalten möchten

Andere schlagen möglicherweise vor, zu verwenden Adobe XD Dies ist weitaus robuster bei der Präsentation interaktiver Elemente eines Designs über Seitenübergänge hinaus. Es ist so, als hätten Sie die Creative Suite von Adobe kombiniert ( Hier erhalten Sie Adobe Creative Cloud ) mit InVision als Einzelprodukt. Sie können Ihre Drahtgitter, vollständigen Designkonzepte und Prototypen auf einen Schlag erstellen, wenn Sie ausreichend organisiert sind. Der wichtige Teil ist das Verbinden der Seiten, um eine Erfahrung zu schaffen, durch die jemand klicken und die Vision verstehen kann.

Es ist wichtig, Erwartungen zu setzen

Kennen Sie wieder Ihr Publikum. Selbst bei einfachen Click-throughs in InVision verwechseln einige Clients diese mit einer integrierten Website. Es ist wichtig, Erwartungen zu setzen. Kommunizieren Sie genau, was Sie einem Kunden mit dem Prototyp zeigen, und, was noch wichtiger ist, welche Art von Feedback Sie in dieser Phase suchen. Suchen Sie nach Feedback zum Fluss zwischen diesen Schlüsselseiten im Benutzerfluss? Suchen Sie Feedback zu den Seitenübergangsanimationen im Prototyp? Der Inhalt, der in die Räume passt und woher er kommt? Kommunizieren Sie das. Es wird Ihnen helfen, sehr schnell als Profi zu wachsen, und die Qualität Ihrer Arbeit wird exponentiell steigen.

Sie können den Erfolg dieses Prozesses beurteilen, indem Sie die Überprüfung des Prototyps auf einer wichtigen Zielseite wie dem Blog von früher beginnen. Bitten Sie jemanden in der Überprüfung des Stakeholder-Teams, sich zu einer bestimmten Seite des Prototyps durchzuklicken und zu sehen, welche Wege sie einschlagen. Selbst in Randfällen, in denen der Benutzer einen anderen Pfad einschlägt, sollten Benutzer in der Lage sein, die Schlüsselseiten zu finden, die ein Geschäftsziel widerspiegeln, da sie nicht linear unterwegs sind. Ihre Arbeit muss dafür verantwortlich sein.

wie man einen Hund mit dem Wort Hund zeichnet

Ihre Fähigkeit, das kritische Denken und die Umsetzung hinter wichtigen Entscheidungen zu demonstrieren sowie zu zeigen, wie Sie oder Ihr Team Ihre Ziele in eine intuitive Erfahrung umgewandelt haben, ist entscheidend. Auf diese Weise können Sie Perspektiven neu definieren, sich von kurzfristigen Trends entfernen und Unterstützung von den ansonsten lautesten Personen im Raum erhalten. Strategie bei jedem Schritt.

Dieser Artikel wurde ursprünglich in Ausgabe 315 von veröffentlicht Netz , das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. Kaufen Sie hier die Ausgabe 315 oder Abonnieren Sie hier .

Zum Thema passende Artikel: