UX-KALENDER – 21. DEZEMBER – Userflow, das richtige Werkzeug, um in einem bereits ausgereiften Produkt an Höhe zu gewinnen.

Während einer meiner Missionen als UX/UI-Designer war ich für einen Perimeter einer bereits ausgereiften Bankanwendung verantwortlich. Ob in Bezug auf Funktionalität oder Benutzeroberfläche, die Reisen waren fortgeschritten und bereits zahlreich.

Das ausreichend reichhaltige, diversifizierte und strukturierte Systemdesign ermöglicht es, schnell neue High-Fidelity-Kurse zu prototypisieren, ohne Mid-Fi-Wireframes durchlaufen zu müssen. Die Implementierung eines Systemdesigns ermöglicht es, Entwicklungskosten zu reduzieren und die allgemeine Konsistenz des Produkts zu erhalten. Diese Einheitlichkeit hat für den Benutzer einen erheblichen Vorteil, da er sich auf vertrautem Terrain wiederfindet und visuelle Muster leicht mit Funktionalität oder einer Art der Informationsorganisation in Verbindung bringen kann.

Nur dann müssen wir als Designer (Garant der User Experience) schnell unzählige Prototypen und Bildschirme erstellen, verwalten und aktualisieren, die sehr ähnlich sind, aber auf unterschiedliche Anwendungsfälle reagieren. Das Navigieren durch die Bildschirme und laufenden Projekte wird dann zu einer echten Herausforderung.

Mein Ziel ist es, mit diesem Artikel das Werkzeug mit Ihnen zu teilen, das es mir ermöglicht hat, Ordnung in dieses Gewirr von Pfaden zu bringen und eine globale Vision aufrechtzuerhalten. Die Implementierung von Userflows gab mir die notwendige Hilfe für die Erstellung, Aktualisierung, Organisation und Kommunikation der verschiedenen Pfade innerhalb der Teams. Und so geht's...

#1 WIREFRAMES / PROTOTYPEN UND IHRE EINSCHRÄNKUNGEN

Das Erstellen von Wireframes und das Prototyping haben große und unmittelbare Vorteile. Sie ermöglichen es uns, unsere Bildschirme schnell und recht früh im Projekt zu testen. Ziel eines Prototyps ist es, konkrete Use Cases greifbar zu machen. Damit machen sie die User Experience erlebbar, sie werden zum Austauschmedium während der Testphasen.

Wenn Sie sich bereits in einem fortgeschrittenen Stadium Ihres Designsystems befinden, kann das Erstellen von High-Fidelity-Prototypen extrem schnell sein. Sie sind auch wesentliche Werkzeuge, um einen Kunden zu überzeugen, indem sie ihm erlauben, sich selbst zu projizieren.

Wie wir oben gesehen haben, spielen Prototypen eine Schlüsselrolle im User Experience Design. Sie erlauben jedoch im Moment T nur einen Screen by Screen Vision und innerhalb des durch unseren Anwendungsfall definierten Rahmens. Aus organisatorischer Sicht ist es schwierig, den Platz eines bestimmten Bildschirms inmitten des allgemeinen Arbeitsablaufs zu verstehen. Vor allem wenn wir tiefer in die Entwicklung eintauchen, das Produkt komplexer wird, merken wir, dass wir uns mit vielen Szenarien auseinandersetzen müssen, die zunächst nicht berücksichtigt werden.

Tatsächlich stellen die hergestellten Prototypen im Allgemeinen nominelle Fälle und oft den „glücklichen Weg“ dar, aber was ist mit den anderen Fällen?

Wie zum Beispiel :

  • Wie soll ich zeigen, dass eine Schaltfläche je nach Status des Benutzers auf verschiedene Bildschirme verweisen kann?
  • Soll ich diese beiden Versionen prototypisieren, um die Benutzererfahrung dieser beiden Verzweigungen zu visualisieren und zu testen?
  • Wie integriere ich Fehlerfälle wie Verbindungsabbruch, Serverproblem in meine Prototypen? Soll ich einen dedizierten Prototypen erstellen?
  • Wie kann ich die Auslöser für diese Fehlermeldungen in meinem Prototyp darstellen?
  • Soll ich Versionen nach dem Status der Benutzer erstellen (Profil gespeichert / nicht gespeichert / Eingeschrieben / Nicht eingeschrieben)?
  • Wenn der Benutzer bereits für eine Funktion registriert ist oder seinen Abonnementprozess noch nicht abgeschlossen hat, muss ich dann je nach Situation eines Benutzers bestimmte Schritte überspringen?

Die Rolle eines Designers besteht darin, all diese Fälle vorherzusehen und ergonomische Lösungen bereitzustellen. Aber all diese unterschiedlichen Fälle sind alternative Szenarien, die zusammengenommen zu sehr vielen Möglichkeiten führen können. Ist es möglich, Prototypen zu erstellen, um auf all diese Szenarien zu reagieren? Angenommen, das Produkt verfügt über ein Budget und die Zeit, die für die Deklination all dieser Bildschirme erforderlich ist, welche Probleme können die Prototypen aufwerfen?

  • Die Schwierigkeit, alle diese Bildschirmvarianten auf dem neuesten Stand zu halten, insbesondere innerhalb eines sich schnell entwickelnden Systemdesigns.
  • Die Schwierigkeit bei der Bewertung der Auswirkungen, die die Änderung eines Bildschirms auf den Rest der Kurse haben kann, die diesen Bildschirm gemeinsam haben.
  • Die Zeit, die für die Erstellung von Bildschirmen, deren Organisation und die gemeinsame Nutzung mit Entwicklern / POs aufgewendet wird.
  • Die Schwierigkeit für einen externen Sprecher, so viele Versionen zu finden.

Wir erkennen, dass die Verwendung von Prototypen als Kommunikations- und Managementinstrument nicht mehr ausreicht. Es stößt an eine gewisse Grenze, wenn wir auf alle unterschiedlichen Fälle eingehen wollen.

Die Berücksichtigung eines Makroansatzes wird es einfacher machen, sich in diesem Labyrinth von Möglichkeiten zurechtzufinden.

#2 DAS INTERESSE VON USERFLOWS

Wie wir oben gesehen haben, je komplexer ein System wird, desto schwieriger ist es, das Produkt als Ganzes durch die alleinige Verwendung von Prototypen zu verstehen/zu organisieren/zu warten. Woher kommt der Nutzen, dieses Tool mit einem Userflow zu koppeln?

Der Userflow ermöglicht es, die Bewegungen durch ein System zu veranschaulichen, er zeigt, welche Schritte der Benutzer durchlaufen muss, um sein Ziel zu erreichen. Als nächstes kommt der Detaillierungsgrad, mit dem wir die Benutzerentscheidungen und die daraus resultierenden Pfade integrieren können. Interessant ist auch die Integration der technischen Randbedingungen, die für den Produktfluss entscheidend sein können. Zum richtigen Zeitpunkt in Projekten eingesetzt, können Userflows sowohl die Geschwindigkeit der Iterationsbildung erhöhen als auch die Kommunikation innerhalb des Produktteams verbessern.

Genau wie Wireframes können Userflows mit unterschiedlichen Detaillierungsgraden dargestellt werden :

  • Je rudimentärer der Userflow ist, desto mehr konzentriert sich Ihr Ansatz auf die Schritte, die die wichtigsten Bedürfnisse und Ziele der Benutzer erfüllen. Dieser Detaillierungsgrad ist sehr interessant, da er einen Überblick über die verschiedenen Phasen und die Anzahl der Bildschirme gibt, die prototypisiert werden müssen. Dies ermöglicht es, zur globalen Funktion zurückzukehren, ohne sich mit den Details aufzuhalten.
  • Je höher der Detaillierungsgrad, desto mehr können Sie finite Elemente von Schnittstellen, technischen Elementen oder Benutzerentscheidungen integrieren. Wenn Sie diesen Detaillierungsgrad erreichen, können Sie sich einen detaillierten Überblick über die verschiedenen Zweige verschaffen, um das Ziel des Benutzers zu erreichen.

Hier sind einige der wichtigsten Vorteile der Verwendung von Userflow :

  • Der Vorteil, dieses Medium von Beginn des Entwurfs an zu verwenden, besteht darin, die Routen makroskopisch „abbilden“ zu können, vor allem aber, sie entsprechend ändern zu können. Es ist auch interessant, Ihren Userflow als lebendiges und sich entwickelndes Arbeitsinstrument zu sehen. Sie geht Hand in Hand mit technischen Beschränkungen, Geschäftsentwicklungen und Benutzeranforderungen.
  • Umgekehrt ist es schwierig, bestimmte Bildschirme ohne die Unterstützung dieses Tools zu entwickeln, da wir nicht erkennen, welche Auswirkungen dies auf andere Anwendungsfälle haben kann, die diesen Bildschirm gemeinsam haben. Wenn Sie es verwenden, können Sie die Auswirkungen auf einen Blick sehen und damit alle Bildschirme, die wahrscheinlich betroffen sind. Dadurch ist es beispielsweise möglich, diesen Bildschirm unter Berücksichtigung aller möglichen Szenarien zu entwickeln, wodurch Doppelspurigkeiten vermieden und Entwicklungskosten reduziert werden. Weicht die Nutzung andererseits zu stark von den Erwartungen des Benutzers oder der Geschäftsanforderungen ab, kann abgewichen und in voller Kenntnis der Fakten eine neue Version erstellt werden.
  • Bei einem Prototypen ist es schwierig, die technischen Einschränkungen zu integrieren, die sich sehr stark auf die endgültige Benutzererfahrung auswirken können: Wartezeit / Serveraufrufe / Sicherheitsüberprüfungen. Die Zuordnung dieser Art von Informationen kann bereits gute Hinweise darauf geben, wo möglicherweise Fehler oder Verzögerungen auftreten können. So ist es beispielsweise möglich, den User mit „Shimmerings“ warten zu lassen oder Fehlerfälle mit kontextuellen, humorvollen oder leicht emotionalen Botschaften aufzubereiten.
  • Dies ermöglicht es auch, die verschiedenen Kurse den verschiedenen Gesprächspartnern des Projekts in Makroform vorzustellen. Beispielsweise ist es für das Datenteam von Vorteil, diese Art der Darstellung zu haben. Dadurch kann er die unterschiedlichen Branchen und Nutzerentscheidungen visualisieren und den „Tagging Plan“ entsprechend weiterentwickeln.

#3 Beispieltool:

In diesem Teil möchte ich Ihnen das kollaborative Userflow-Erstellungstool vorstellen, das ich besonders schätze: Whimsical.

Am meisten :

  • Der Einstieg ist extrem einfach, selbst für jemanden, der noch nie mit ähnlichen Tools gearbeitet hat.
  • Es ist sehr einfach, einen bestehenden „komplexen“ Userflow zu ändern, ohne alles rückgängig zu machen und zu viel Zeit damit zu verbringen.
  • Die Anpassungsmöglichkeiten sind nicht sehr zahlreich, aber einfach, ästhetisch und gut gemacht, um alle Hauptanforderungen zu erfüllen, ohne sich in Komplexität zu verlieren.
  • Möchten Sie den Arbeits- und Kommunikationsprozess zwischen Entwicklern und Ihrem Designteam erleichtern? Sie können dieses kollaborative Tool nutzen, das es mehreren Personen ermöglicht, gleichzeitig an derselben Datei zu arbeiten. Sie können bestimmte Elemente des Dokuments kommentieren und Mitarbeiter markieren.
  • Mit diesem Tool können Sie auch Links und Bilder (wie Schnittstellen zu Userflows) integrieren. Es ist jedoch bedauerlich, dass dies nicht möglich ist.
  • Diese Software integriert auch andere Tools, die nicht Gegenstand dieses Artikels sind, aber echte Werte bleiben (Mindmap, Sticky Notes, Wireframe).
  • Der Preis ist angemessen: Kostenlos für Rezensenten und 10€/Monat für Redakteure.

Das Mindeste :

  • Schade, dass wir keine Vorschauen der Zeichenflächen von Invision, Sketch oder Figma haben können, die die automatische Aktualisierung eines echten Wireflow ermöglichen würden.
  • Die kostenlose Version bietet nur einen gemeinsamen Arbeitsplan.

 

Bis morgen für neue Überraschungen in unserem UX-Republic Adventskalender!

 

Clemens Guillot, UX-UI-Designer @UX-Republic

 

 

 

Tolles Wimmelbildspiel!
Ein verstecktes Wort hat sich in den Text eingeschlichen, hat aber nichts damit zu tun. Doch dieses Wort ist uns wichtig. Wenn Sie ihn am Tag der Veröffentlichung finden und diesen Artikel zuerst mit dem Hashtag #CalendrierUXRepublic und dem versteckten Wort auf Twitter posten, gewinnen Sie ein Set UX-Cards oder ein Set Zoning Cards. Achtung, man kann nur einmal gewinnen... dann muss man anderen eine Chance geben 😉!