Alles, was Sie über UX-Sketching wissen müssen

Wenn Sie ernsthafte kreative Arbeit geleistet haben, sind Sie mit der kreativen Blockade nur allzu vertraut. Es fühlt sich an, als würde man gegen eine Mauer stoßen: Keine der Ideen, die Sie visualisieren können, ist gut genug oder kann im wirklichen Leben nicht funktionieren.

Für Designer ist das Gefühl nur allzu vertraut. Wie bei jedem komplizierten Problem ohne klare Lösung kann jedoch ein intelligenter Prozess den Unterschied ausmachen. Hier kommt UX-Sketching ins Spiel.

UX-Sketching ist ein entscheidender, aber oft übersehener Aspekt des User-Experience-Designs. Skizzieren ist eine sehr effiziente Art, Design zu kommunizieren, während es Designern ermöglicht, eine Vielzahl von Ideen auszuprobieren und zu iterieren, bevor sie sich für eine entscheiden.

In diesem Beitrag beabsichtige ich, alles abzudecken, was Sie über UX-Sketching wissen müssen, einschließlich der folgenden Punkte:

• Einführung in UX-Skizzen und Wireframes
• Grundlagen, Werkzeuge und Techniken des UX-Skizzierens
• Verdeutlichende Skizzen mit Notizen, Anmerkungen, Nummern
• Tipps und Tricks zum UX-Skizzieren
• Mini-Methoden zur Steigerung von Qualität und Produktivität
• Alles, was Sie über Wireflows wissen müssen
• Eine Kurzanleitung zum Skizzieren von UX-Flows

UX Skizzieren ist ein zweistufiger Prozess

Beim Design müssen viele Optionen berücksichtigt werden, was zur Auswahl und Ausführung der besten führt. Designer prüfen ihre Optionen und fahren dann mit der Ausarbeitung der Details fort, wodurch UX-Design zu einem zweistufigen Prozess wird:

• Ideengenerierung

Im ersten Schritt werden mehrere Ideen generiert, aber da sie nicht vollständig ausgeformt werden können, ist es nicht ungewöhnlich, dass einige Elemente unvollständig sind oder fehlen. Die Hauptsache ist, verschiedene Ansätze zu berücksichtigen und zu entscheiden, welcher im Kontext Ihrer Aufgabe und der verschiedenen Einschränkungen des Projekts am effizientesten ist.

• Detail und Verfeinerung hinzufügen

Schritt für Schritt einigt man sich auf ein paar erfolgsversprechende Varianten und arbeitet an der Konkretisierung, wodurch einige Ideen ungeeignet werden.

UX-Skizzen und Wireframes: Einführung und Klassifizierung

Ihre Wireframes können je nach Faktoren wie dem gewünschten Detaillierungsgrad, Farben und Stil, ob Sie sie jemandem zeigen werden usw. unterschiedlich sein.

Ich habe die folgenden Skizzentypen herausgegriffen:

• Skizze: Ideengenerierung

Es handelt sich um erste Skizzen. Untergeordnete Details werden einfach notiert. Es wird eine begrenzte Anzahl von Farben verwendet.

Ich zeichne viele grundlegende Skizzen, um das Problem aus verschiedenen Blickwinkeln zu betrachten und verschiedene Lösungen in Betracht zu ziehen. Beim Zeichnen solcher Skizzen bin ich auch bestrebt, möglichst viele Lösungsvarianten zu generieren.

Unvollständigkeiten befreien mich gerade in diesem Schritt, weshalb es so wichtig ist, sich an dieser Stelle nicht in Kleinigkeiten zu verzetteln. Mein Ziel ist es, so viele Ideen wie möglich zu generieren und die vielversprechendsten auszuwählen.

• Wireframe: Spezifikation, Detailphase

Meist wähle ich aussichtsreiche Skizzen aus und gehe die Details durch, danach wähle ich die beste Variante aus und arbeite sie detaillierter aus.

Damit sind jedoch nicht alle Details gemeint . Offensichtliche Dinge dürfen nur notiert werden. Darüber hinaus werden einige Aspekte auf dem Papier schwer zu beschreiben sein.

In diesem Schritt zeichne ich alle wichtigen Details , aber ich zeichne noch keine Drahtgitter in Balsamiq. Nachdem alles auf dem Papier fertig ist, beginne ich mit dem Zeichnen in Sketch.

Digitale Tools bieten viel mehr kreative Freiheit als Papier und Sie können die Aufmerksamkeit leicht auf Kleinigkeiten lenken. Sie können sich beispielsweise auf „Pixel-Politur“ statt auf Design konzentrieren.

• Entwurf des visuellen Designs

Dies ist ein selten verwendeter Ansatz, aber manchmal kann er hilfreich sein. In einem frühen Stadium des Projekts werden verschiedene visuelle Lösungen in Betracht gezogen, aber es kann lange dauern, für alle digitale Skizzen zu erstellen. Deshalb zeichne ich zuerst Designskizzen auf Papier, um verschiedene Optionen zu prüfen und eine visuelle Designrichtung zu wählen.

• Aufschlüsselung der Komponenten/Elemente

Ich finde diese Technik nützlich, wenn ich bereits eine allgemeine Vorstellung habe und über eine bestimmte Seitenfunktionalität oder die integralen Bestandteile von Schnittstellenkomponenten nachdenke. Ich zeichne verschiedene Seitenelemente, gehe ins Detail und zeichne dann verschiedene mögliche Positionen der Seitenelemente.

Elemente, selbst die einfachsten, müssen einen Zustand haben; Eine Schaltfläche kann gedrückt werden und hat einen Hover-Textblock, der leer sein kann oder nicht. Je komplexer es ist, desto mehr Zustände hat es.

Erste Schritte mit den Grundlagen

• Bereiten Sie Ihre Werkzeuge vor. Finden Sie den bequemsten Platz, einen großen Tisch mit viel Platz. Nehmen Sie viel Papier und bereiten Sie einige Stifte und Marker vor.
• Sich warm laufen. Um sich vorzubereiten, empfehle ich, einige Linien, Kreise, grundlegende Vorlagen und Symbole zu zeichnen.
• Definieren Sie Ihre Ziele. Entscheide, was du zeichnen möchtest. Setzen Sie sich ein Ziel und entscheiden Sie, welche Geschichte Sie zu erzählen haben. Bestimmen Sie den gewünschten Detaillierungsgrad. Entscheiden Sie, ob Sie bereit sind, viel zu zeichnen.
• Definieren Sie Ihre Zielgruppe. Wenn Sie dies für sich selbst tun, müssen Sie sich keine Gedanken darüber machen, wie Ihre Skizze aussieht. Wenn Sie jedoch beabsichtigen, Ihre Zeichnungen einem Kunden zu zeigen, planen Sie unbedingt etwas mehr Zeit ein, um Ihrer Skizze weitere Details hinzuzufügen.
• Legen Sie einen Zeitrahmen fest. Wenn Sie sich für die Zeit entschieden haben, die Sie für das Skizzieren aufwenden möchten, sagen wir 30 Minuten, können Sie sich auf Ihre Arbeit konzentrieren.

Jetzt sind Sie fertig und können loslegen:

• Zeichne die Kanten. Zeichnen Sie die Rahmen, ein Browser- oder Telefonfenster, einen Teil der Benutzeroberfläche und so weiter.

• Fügen Sie die größten oder grundlegenden Elemente hinzu: Menü, Fußzeile, Hauptinhalt.

• Einzelheiten hinzufügen. Fügen Sie relevante Details hinzu, aber halten Sie sie in dieser Phase einfach.

• Fügen Sie Anmerkungen und Notizen hinzu. Diese sind nur erforderlich, wenn Sie die Skizzen freigeben möchten. Sie können jedoch auch nützlich sein, wenn Sie sie nur für Ihre Augen machen.

• Skizzieren Sie Alternativen. Skizzieren Sie einige schnelle Alternativen zu Ihrer Lösung.

• Wählen Sie die beste Lösung. Wählen Sie die besten Optionen.

• Fügen Sie Schatten und Abschrägung hinzu. Dies ist besonders wichtig für Sharing-Zwecke. Fügen Sie einen Schatten hinzu, um Ihre Skizze optisch ansprechend zu gestalten, was wichtig ist, wenn Sie vorhaben, sie mit Teammitgliedern und/oder Kunden zu teilen.

• Speichern Sie die Skizze. Machen Sie ein Foto oder legen Sie es in einen Ordner. Ich habe ein paar Papierablagen auf meinem Tisch für Skizzen.

• Teilen. Normalerweise verwende ich eine der folgenden Freigabemethoden:
  • Scannen Sie Skizzen über Evernote und stellen Sie anderen Teammitgliedern oder Stakeholdern einen Permalink zur Verfügung.
  • Nehmen Sie ein Foto auf und laden Sie es auf InVision hoch.
  • Laden Sie Bilder hoch und ordnen Sie sie Realtimeboard zu.
  • Oder mailen Sie einfach ein Foto.
• Überprüfen Sie die Skizzen und fügen Sie Notizen hinzu. Machen Sie eine Pause und kehren Sie dann eine Weile später zu Ihren Skizzen zurück. Schau sie dir noch einmal an. Macht die Skizze für Sie noch Sinn? Eine gute Skizze muss leicht nachvollziehbar sein.

Verdeutlichen von Skizzen mit zusätzlichen Elementen

Suchen oder zeichnen Sie eine geeignete Skizze und fügen Sie ihr dann die folgenden Details hinzu:

1. Titel. Manchmal ist das Hinzufügen eines Titels eine gute Option. Schreiben Sie bei Bedarf eine Beschreibung und ein Datum oben auf die Skizze. Der Titel hilft Ihnen zu verstehen, was Sie sehen und ob die Skizze relevant ist oder nicht. Dies ist besonders nützlich, wenn Sie viele Skizzen haben oder anderen zeigen möchten.

2. Anmerkungen. Anmerkungen sind Namen und Notizen, die in der Nähe eines Elements platziert werden, um seinen Inhalt oder andere Attribute zu erläutern. Sie fügen Details hinzu, die andere Elemente verdeutlichen, und sind normalerweise schwer zu zeichnen. Beispielsweise könnte es sich um den Namen des Blocks, einige Interaktionsdetails, eine Erklärung eines Bildes, einige Ideen für zukünftige Designvariationen und so weiter handeln. Sie können sich eines meiner Beispiele ansehen, um zu sehen, wie eine Anmerkungsskizze aussieht.

3. Zahlen. Nummeriere die Elemente deiner Skizze oder die Skizzen selbst. Sie können entscheiden, wie sie angeordnet werden sollen (z. B. nach Interaktionsfluss, der Reihenfolge, in der Sie sie erstellt haben usw.). Es kann auch während Diskussionen (insbesondere Remote-Diskussionen) nützlich sein, da Ihre Kollegen und Kunden in ihrem Feedback einfach auf die Skizzennummer hinweisen können und Sie verstehen, auf welche sich ihre Kommentare beziehen.

4. Pfeile. Sie können Pfeile verwenden, um Bildschirmübergänge anzuzeigen. Sie können auch verwendet werden, um verschiedene Teile von Skizzen zu verbinden, um eine Abfolge von Aktionen anzuzeigen und so weiter. Da die Bedeutung eines Pfeils variieren kann, können Sie direkt über dem Pfeil eine Beschreibung oder Erklärung hinzufügen, was der Pfeil bedeuten soll. Hier ist ein Beispiel für eine grundlegende Skizze, die einen Übergang und mehrere verschiedene Zustände zeigt.

5. Anmerkungen. Genau wie Anmerkungen werden Notizen verwendet, um Konzepte zu erklären. Notizen unterscheiden sich jedoch von Anmerkungen in ihrer Platzierung. Sie sind nicht an einem Element angebracht oder befinden sich in der Nähe des beschriebenen Elements, ähnlich wie in diesem Beispiel. Notizen können oben oder unten auf der Seite platziert werden. Sie können sogar Elemente beschreiben, die nicht im Design enthalten sind, Fragen, die Sie möglicherweise haben, allgemeine Erklärungen, nicht skizzierte Ideen und so weiter.

6. Gesten. Gesten sind im Fall des Touch-Device-Designs relevant. Das Zeichnen einer Handbewegung erfordert möglicherweise Übung. Es gibt mehrere Varianten von Gesten, die verwendet werden, um verschiedene Arten von Aktionen anzuzeigen, daher ist es besser, im Voraus zu entscheiden, wie Sie eine bestimmte Aktion bezeichnen (wenn es natürlich nicht offensichtlich ist) und das Zeichnen zu üben.

7. Feedback. Möglicherweise erhalten Sie Vorschläge zum Korrigieren oder Verbessern der Skizze, nachdem Sie sie anderen gezeigt haben oder nachdem Sie sie selbst erneut betrachtet haben. Es ist oft nützlich, solches Feedback in einer anderen Farbe zu markieren, um das Feedback von der ursprünglichen Skizze unterscheiden zu können.

Sie können verschiedene Farben für verschiedene Arten von Elementen verwenden. Manchmal verwende ich Schwarz für Zeichnungen, Blau für Links, Dunkelgrün für Notizen, Rot für Titel und Feedback. Versuchen Sie, unterschiedliche Farben in Ihren Skizzen zu verwenden, aber stellen Sie sicher, dass Ihre Farbauswahl konsistent ist!

Speziellere Tipps und Tricks

1. Machen Sie sich keine Sorgen um die Qualität. Schauen Sie sich nicht die Skizzen auf Dribbble an; es geht um etwas ganz anderes . Denken Sie daran, dass der Hauptzweck von Skizzen darin besteht, Ihnen zu helfen, klarer zu denken, bessere Lösungen zu finden und Zeit zu sparen.

2. Üben. Für den Anfang können Sie versuchen, ein paar Apps zu zeichnen. Öffnen Sie eine Web- oder mobile App und versuchen Sie, den Bildschirm zu kopieren und die Elemente in den Notizen zu beschreiben. Wann immer Sie etwas Freizeit haben, üben Sie das Zeichnen grundlegender Bausteine ​​Ihrer Entwürfe. Im Allgemeinen macht Übung den Meister. Nach einer Weile wird es Teil Ihres Designer-Selbst werden.

3. Ordner kaufen. Ich arbeite oft nicht von meinem Büro aus, sondern von einem Café oder von zu Hause aus. Papierskizzen sind sehr anfällig für Beschädigungen, kaufen Sie also einen einfachen Ordner, um sie sicher und gesund aufzubewahren.

4. Nehmen Sie Werkzeuge mit, wohin Sie auch gehen. So stellen Sie sicher, dass Sie Ihre Idee jederzeit auf Papier festhalten können, da Sie sonst womöglich den Gedanken verlieren oder sich nicht detailliert genug daran erinnern können. Ich habe immer einen Notizblock, ein paar A4-Blätter und Stifte dabei.

5. Mit anderen teilen. Es ist sehr wichtig, andere Menschen einzubeziehen und mit Ihrem Team zu kommunizieren. Das Einbeziehen anderer und das Einholen ihres Feedbacks, insbesondere zu einem frühen Zeitpunkt, hilft, langfristig Zeit und Ressourcen zu sparen. Sie können auch andere ermutigen, so zu zeichnen, wie sie sich das Design vorstellen.

6. Papierfächer. Denken Sie daran, Papierablagen auf Ihrem Arbeitstisch zu platzieren. Ich habe zum Beispiel drei davon: für eingehende Aufgaben, für Skizzen und leere Blätter.

7. Experimentieren und anpassen. Meine Empfehlungen beruhen auf meiner Erfahrung. Mit der Zeit werden Sie herausfinden, was am besten zu Ihnen passt; welche Methoden, welche Abfolge von Schritten, was genau Ihr kreatives Potenzial erfüllt. Sie werden nur dorthin gelangen, wenn Sie ständig etwas Neues ausprobieren, weshalb es wichtig ist, mit verschiedenen Formaten und Stilen zu experimentieren und neue Vorlagen auszuprobieren.

8. Verwenden Sie Vorlagen. Vorlagen sparen Zeit und berücksichtigen implizit Formatbeschränkungen, sodass Sie mehr Zeit haben, sich auf das Wesentliche zu konzentrieren.

Zusätzliche Mini-Methoden zur Verbesserung Ihrer Skizzen

Dies sind nicht unbedingt Tipps und Tricks, sondern eine Sammlung von Methoden, Tools und Vorschlägen, die Ihre Produktivität steigern oder die Qualität Ihrer Skizzen verbessern sollen.

1. Erstellen Sie eine Skizzentafel. Einer der größten Vorteile der Verwendung von Stift und Papier anstelle eines digitalen Zeichenwerkzeugs besteht darin, dass Sie es tatsächlich an eine Wand kleben können. Jeder in Ihrem Team kann es sehen und daran teilnehmen (obwohl ich empfehle, Überprüfungssitzungen einzurichten).
   
   • Sie werden Ihre Skizzen selbst sehen, und das wird Ihr Denken anregen und Sie das große Ganze sehen lassen, nicht einzelne Teile, sondern das ganze System. Sie werden die Wechselwirkungen zwischen den Teilen sehen und wie sie zueinander passen.
     
   • Erstellen Sie die Skizzentafel – hängen Sie Ihre Whiteboard-Skizzen an. Wenn in Ihrem Büro kein Whiteboard vorhanden ist, können Sie Ihre Skizzen mit doppelt großem Klebeband oder Haftnotizbögen an die Wand kleben. Wenn Sie nicht an der Wand kleben möchten, können Sie stattdessen ein großes Stück Kartonpapier finden. Ich empfehle dringend, Skizzentafeln zu verwenden, da sie eines der besten Designwerkzeuge sind.
2. Verwenden Sie ein Whiteboard. Ein Whiteboard ist ein großartiges Zeichenwerkzeug. Es hat eine Reihe von Vorteilen:
   • Es ist kooperativ und es ist einfach, andere Teammitglieder in die Diskussion und auch in die Zeichnung einzubeziehen. Auch wenn ihre Ideen nicht gut passen, werden Sie ihre Denkweise verstehen und es wird Ihnen helfen, auf der gleichen Seite zu stehen.
     
   • Markierungen lassen Sie sich nicht auf Details konzentrieren, Sie müssen an die allgemeinen Dinge denken. Skizzen sind offen für Interpretationen.
     
   • Ein Whiteboard ist leicht zu reinigen und zu korrigieren.
     
   • Es gibt viel Platz und Sie können den gesamten Systemfluss leicht durchdenken.
     
   • Sie können Skizzen, Ausdrucke und Referenzmaterialien mit Magneten befestigen.

3. Prototypen. Erstellen Sie einen anklickbaren Prototyp, um Ihr Design zu bewerten. Versuchen Sie, Feedback zu einigen Elementen zu erhalten. Dies funktioniert besonders gut, wenn Sie Vorlagen verwenden – Ihre Skizzen haben die gleiche Größe. Offensichtlich ist es viel einfacher, Skizzen in derselben Größe zu zeichnen, wenn Sie eine Vorlage verwenden. Ich werde versuchen, es noch einfacher zu machen, indem ich Ihnen einige Vorlagen zur Verfügung stelle, die Sie herunterladen und verwenden können: Mobile, Browser Multi-Window, Browser Scroll, Personas.

   

4. Verwenden Sie Ihren Drucker und Scanner. Zeichnen Sie das Gerüst von Hand (Sie können ein Lineal verwenden, um genauer zu zeichnen), scannen Sie es dann einfach mit einem Scanner oder einer mobilen App und drucken Sie es aus. Sie können Ihre Vorlage vor dem Drucken im Bildeditor bearbeiten. Sie können unnötige Details entfernen oder einige Elemente duplizieren. Sie können auch eine vorgefertigte Site-Seite, Fotos und andere beschreibende Elemente drucken. Sie können die Ausschnitte in Ihre Skizze einfügen.

5. Verwenden Sie Evernote zum Scannen. Evernote ist ein großartiges Designtool. Sie können Ihre Skizzen darin aufbewahren und teilen, Sie können Themen erstellen und Tags verwenden, um Ihre Skizzen zu organisieren. Besonders beeindruckend sind die Fähigkeiten des „Scanner“-Modus. Sie legen Ihre Skizze davor und es „scannt“ sie, sodass Sie die Kopie der Skizze erhalten. Dann kannst du deine Kollegen zu Evernote einladen und ihnen deinen Notizlink geben. Da es eine mobile App für Tablets und Telefone gibt, haben Sie Ihre Skizzen immer zur Hand.

6. Hybrides Skizzieren. Um Ihren Skizzen etwas Lebendigkeit und Realismus zu verleihen, können Sie sie mit Fotos kombinieren. Das bedeutet, dass Sie ein Foto machen und dann eine Geschichte mit Schnittstellenelementen darauf zeichnen müssen. Dies kann Ihnen auch dabei helfen, einige Interaktionsprobleme und -details zu erkennen.

7. Verfolgung der realen Welt. Wenn Sie ein Storyboard erstellen, ein Erlebnis in einem bestimmten Kontext veranschaulichen müssen (z. B. eine Person, die an einer Bushaltestelle ein Smartphone benutzt), müssen Sie Darstellungen von Personen, Orten und verschiedenen Objekten aus dem wirklichen Leben einfügen. Diese können schwierig zu zeichnen sein, besonders wenn Sie nicht über Zeichenfähigkeiten verfügen, aber hier ist ein einfacher Tipp: Machen Sie ein Foto des Objekts oder der Situation und erhalten Sie dann die wichtigsten Objektkonturen mit einem Bildbearbeitungsprogramm. Die resultierende Kontur können Sie anschließend in Ihren Skizzen verwenden. Wenn Sie ein Tablet und einen Stift haben, ist es natürlich noch einfacher.

Wireflow: Darstellung des Systemflusses und der Verzweigung

Der Drahtfluss ist im Wesentlichen eine Sequenz des Systemflusses, Bildschirm für Bildschirm, mit Verzweigungen und Entscheidungspunkten. Wir sollten berücksichtigen, wie ein Benutzer seine Aufgabe angeht, wie er sich von Bildschirm zu Bildschirm bewegt und wie er das Produkt im Laufe der Zeit insgesamt erlebt.

Wireflow, oder was Sie zeichnen und wie es verbunden ist, könnte nach den folgenden Ansätzen organisiert werden:

• Reihenfolge. Eine Sequenz ist eine gerade Reise, Bildschirm für Bildschirm. Es kann auch eine Geschichte mit Entscheidungspunkten sein; Sie zeigen nicht nur die Reise, sondern auch Entscheidungspunkte und verschiedene Wege, die der Benutzer wählen kann. Sie können die Struktur der Bildschirminteraktion anzeigen.
• Statusänderungen. Stellen Sie verschiedene Bildschirmzustände einiger Elemente und die Bedingungen oder Aktionen dar, die die Übergänge zwischen diesen Zuständen verursachen.
• Bildschirm vs. Bildschirmelemente. Sie können ganze Bildschirme zeichnen oder Mikrointeraktionen und Interaktionen berücksichtigen.
• Plattformen. Sie können eine Plattformerfahrung oder mehrere Plattformen in Betracht ziehen.
• Zielfernrohr. Werden Sie einen Teil der User Journey oder die gesamte Journey abbilden? Eine Benutzerinteraktion mit dem System oder die Interaktionen mehrerer Benutzer?

Generell versuche ich je nach Organisation und praktischem Einsatz folgende Wireflow-Typen zu definieren:

1. Abbildung des Gesamtflusses und des High-Level-Flusses. Skizzieren Sie umgehend die Bildschirmverschiebungen und zeichnen Sie die allgemeine Reise Ihrer Produktnutzung. Hier können Sie Kontext einfügen und optional Benutzerinteraktionen anzeigen. Zum Beispiel ist ein E-Commerce-Shopping-Service eine ziemlich lange Reise, die viele Schritte umfassen kann: wie der Benutzer den Shop gefunden hat, welche Schritte er durchlaufen hat, um das Produkt zu bestellen, wie er bezahlt hat und so weiter.

2. Bildschirmfluss. Diese konzentriert sich auf einen bestimmten funktionalen Fluss durch das System. Das kann eine kleine gerade Abfolge von Bildschirmen sein oder eine Reise mit Verzweigungen. Zum Beispiel ein Benutzer, der einige Fotos oder ein Video hochlädt.

3. Navigationsschema. Zeichnen Sie Ihren Bildschirm und die darin enthaltenen Optionen. Dies soll nicht die Reise abbilden. Dieser Schritt enthält Informationen, die die Optionen zeigen, die ein Benutzer auswählen kann, die Wegbeschreibungen, die Benutzer haben, und verschiedene App-Teile. Normalerweise erstelle ich zu Beginn eines Projekts ein Navigationsschema. Es dient dazu zu verstehen, wie die Navigation aufgebaut sein soll (welche Punkte sollen enthalten sein, wie viele Ebenen sind nötig).

4. Bildschirmzustände. Zeichnen Sie die Bildschirm- oder Elementzustände (ein Beispiel könnte ein Datei-Upload-Dialog sein). In diesem Fall hat der Bildschirm beispielsweise folgende Zustände:

   • Leer
   • Ein Benutzer zieht die Datei in den aktiven Bereich
   • Die Datei wird hochgeladen
   • Die Datei wird hochgeladen
   • Es gibt einen Fehler

UX-Flow skizzieren: Eine Kurzanleitung

Der Wireflow-Designprozess ähnelt dem Wireframe-Prozess. Viele Schritte sind ähnlich oder identisch, aber es gibt einige wichtige Unterschiede:

Definieren Sie, was Sie zeichnen müssen. Entscheiden Sie genau, was Sie zeichnen möchten (z. B. die allgemeine Geschichte oder ein Fragment Ihres Entwurfs). Möchten Sie verschiedene Optionen generieren oder die Details einer Reise durchdenken? Entscheide, ob du deine Skizzen jemand anderem zeigen willst oder nicht.

Definieren Sie, welche Keyframes und Übergänge Sie in Ihre Zeichnung aufnehmen sollten. Wenn Sie alle Bildschirme und Verschiebungen hinzufügen, wird Ihr Drahtfluss sehr lang und komplex. Überlegen Sie, welche Schlüsselbildschirme Sie zeigen sollten, um die Essenz der Interaktion zu vermitteln, die Ihnen hilft, Ihre Aufgabe zu erfüllen. Dasselbe gilt für Bildschirmverschiebungen. Sie müssen auswählen, welche Verschiebungen nützlicher sind, um Ihre Idee auszudrücken. Sehen Sie sich dieses Beispiel als Referenz an.

Definieren Sie den Startpunkt. Was wird der Ausgangspunkt Ihrer Reise sein? Sie können mit dem Einstiegspunkt beginnen, dh dem Beginn der Reise, zum Beispiel, was ein Benutzer sieht, wenn er sich in Ihre App einloggt. Alternativ können Sie am Mittelpunkt oder mit den interessantesten/schwierigsten/wichtigsten Bildschirmen oder Prozessschritten beginnen. Oder Sie beginnen am Ende mit dem Endergebnis, das ein Benutzer erzielt hat, und beschreiben die Schritte, die der Benutzer unternommen hat, um zu diesem Punkt zu gelangen.

Entscheide, was als nächstes kommt. Entscheiden Sie nach dem Zeichnen der Startschritte, wie es weitergeht, indem Sie die folgenden Fragen beantworten:

• In welche Richtung führt dieser Schritt die Benutzer?
• Welchen Weg sollen sie gehen?
• Was müssen sie tun, um dorthin zu gelangen?

Skizzieren Sie Alternativrouten, Zugänge. Denken Sie über alternative Möglichkeiten nach, wie der Benutzer zu jedem Schritt gelangen kann:

• Was passiert, wenn die Internetverbindung des Benutzers ausfällt?
• Welche anderen Möglichkeiten haben sie?
• Was kann bei einem Benutzer- oder App-Fehler schief gehen, was passiert?
• Was passiert, wenn der Benutzer die App in diesem Schritt schließt?
• Wo wird der Benutzer beim nächsten Start der App anfangen?

Denken Sie über alternative Strömungen nach. Analysieren Sie den Verlauf, entwerfen Sie einen alternativen Ablauf und skizzieren Sie ihn.

Fügen Sie Anmerkungen, Notizen und Details hinzu. Fügen Sie die erläuternden Elemente hinzu, die nicht offensichtliche Details verdeutlichen.

Speichern. Erstellen Sie eine digitale Kopie der Skizze.

Teilen. Teilen Sie die Skizze (z. B. über Evernote oder InVision).

Wichtige Tipps und Tricks zum Skizzieren von UX-Flows

Entwerfen Sie zuerst einen Wireflow. Wenn Sie über eine ziemlich lange Reise nachdenken, machen Sie am besten eine kurze Skizze, um zu verstehen, wie viel Platz Sie brauchen, und um wichtige Schritte oder Details nicht zu verpassen. Es wäre schwierig, sie nachträglich in die Papierskizze einzufügen.

Erstellen Sie keine riesige Karte mit zu vielen Details. Papierskizzen haben keine Rückgängig -Schaltfläche, daher ist es schwierig, Änderungen vorzunehmen. Sie können die Details zu genau zeichnen und dies wird Ihre Vorstellungskraft von der Generierung verschiedener High-Level-Varianten ablenken. Anstatt ein riesiges Schema zu erstellen, das das gesamte System veranschaulichen würde, konzentrieren Sie sich auf die wichtigsten Skripte und versuchen Sie, jedem Skript eine eigene Seite zu widmen.

Schneiden Sie unnötige Details ab und kombinieren Sie verschiedene Detaillierungsstufen. Es ist nicht notwendig, alle Interaktionsbeschreibungen zu zeichnen, versuchen Sie also, nur die Schlüsselelemente Ihrer Reise zu verwenden. Während Sie eine riesige Interaktionskarte zeichnen, müssen Sie nicht jeden einzelnen Bildschirm im Detail ausarbeiten. Einige Bildschirme könnten einfach durch mehrere Quadrate dargestellt werden, und andere Schlüsselbildschirme könnten detailliert ausgearbeitet werden.

Probieren Sie verschiedene Papierformate aus. Probieren Sie verschiedene Papierformate aus, A3 oder A5. Die Papierblattgröße wird Sie einschränken und Ihren Prozess auf unterschiedliche Weise beeinflussen. Ein kleines Papierblatt lässt Sie nicht viele Bildschirme oder Details hinzufügen, aber es kann Ihnen helfen, sich auf die Hauptideen zu konzentrieren. Mit einem großen Blatt Papier können Sie eine riesige Reise, viele Details und zusätzliche Notizen zeichnen. Alternativ können Sie eine Reihe kleiner Reisen darauf platzieren.

Auch Haftnotizen können helfen. Sie können auch versuchen, Haftnotizen zu verwenden. Sie können separate Bildschirme oder einige Fußnoten darauf zeichnen, oder Sie können zusätzliche Zustände der Elemente Ihrer Skizze zeichnen. Ihr Vorteil ist, dass sie leicht ausgetauscht werden können, Sie können die Note auch einfach woanders verschieben. Falls sich beispielsweise der Fluss geändert hat, können Sie einfach die Reihenfolge Ihrer Haftnotizen ändern.

Verwenden Sie Vorlagen. Versuchen Sie, Vorlagen zu verwenden. Sie sparen Zeit und ermöglichen es Ihnen, klickbarere, qualitativ hochwertigere Prototypen zu erstellen.

Versuchen Sie es mit einem Whiteboard. Ein Whiteboard hat eine Reihe von Vorteilen. Es wird immer beliebter, weil es Ihnen ermöglicht, eine riesige Reise mit vielen Zweigen zu zeichnen. Sie können viele Anwendungskomponenten auf Papier zeichnen und dann einfach mit Magneten am Whiteboard befestigen und so mit auf die Reise nehmen.

Skizzieren eines Schattens. Schatten können Ihnen helfen, wichtige Elemente zu markieren, und sie verleihen Ihrer Skizze visuelle Attraktivität. Ich verwende drei verschiedene Arten von Schatten:

• Linien, die der Lichtrichtung folgen – das sieht nicht immer schön aus, aber Sie können die Graduierung verwenden und die Objekte auf unterschiedliche „Höhen“ heben.
• Umrandung eines Teils mit einer dunkleren Farbe (nur die Unterseite oder die untere und rechte Seite)
• Verwenden des Pro-Markers (oder seines Äquivalents in der App, die Sie zum Zeichnen verwenden)

Komponenten zeichnen. Ein Einwand wie „Ich kann nicht so gut zeichnen“ kann Ihre Initiative ersticken. Es ist tatsächlich einfacher, als es sich anhört. Selbst die komplexesten Skizzen bestehen im Allgemeinen aus einer Reihe von Grundblöcken, wie in diesem Beispiel. Wenn Sie einen Punkt, eine Linie, ein Dreieck, ein Quadrat und einen Kreis zeichnen können, haben Sie die wesentlichen Bausteine, die Sie benötigen, um alles für Ihre Skizze zu zeichnen.

Alles zusammenfügen. Die Grundelemente, Schaltflächen, Optionsfelder und Dropdowns bestehen aus Grundelementen. Nachdem Sie gelernt haben, diese Elemente zu zeichnen, können Sie sie kombinieren und komplexe Blöcke und Komponenten zeichnen.

Einpacken

Das Ziel dieses Beitrags war es nicht, den ultimativen, für alle geeigneten Leitfaden zum UX-Skizzieren oder Skizzieren im Allgemeinen zu erstellen, da Designer unterschiedliche Bedürfnisse und persönliche Vorlieben haben.

Wie Sie sehen können, ist dies eine Menge zu decken. Designer verwenden eine Vielzahl von Tools, Techniken und Ansätzen, um UX-Skizzen zu erstellen, und das ist ziemlich subjektiv. Bestimmte Techniken können für verschiedene Personen, die an verschiedenen Projekten arbeiten, funktionieren oder nicht. Wenn Sie gerade erst anfangen, sollten Sie unbedingt experimentieren. Ständiges Üben und Experimentieren wird Ihnen helfen, herauszufinden, was für Sie funktioniert.

Es liegt an Ihnen, Tipps und Techniken auszuwählen, die am besten zu Ihrem Projekt und Ihrem Designansatz passen. Hast du weitere Skizziertipps für andere UXer? Fühlen Sie sich frei, sie im Kommentarbereich zu teilen.

• • •

Weiterführende Literatur im Toptal Design Blog:

• eCommerce UX – Best Practices im Überblick (mit Infografik)
• Die Bedeutung von Human-Centered Design im Produktdesign
• Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
• Heuristische Prinzipien für mobile Schnittstellen
• Antizipatorisches Design: Wie man magische Benutzererlebnisse schafft