Vorbereitung für die Erstellung von Website-Prozessdiagrammen: Was sollte zuerst bereitgestellt werden?

Bei der Erstellung von Website-Prozessdiagrammen öffnen viele direkt ein Designtool und beginnen zu zeichnen, nur um später festzustellen, dass Schritte fehlen, Texte nicht übereinstimmen oder der Stil uneinheitlich ist, was zu zeitraubenden Überarbeitungen führt. Wenn Sie jedoch einige Vorbereitungen im Voraus treffen, wird der spätere Prozess viel reibungsloser verlaufen. Nachfolgend finden Sie eine Checkliste mit Inhalten, die Sie vor der Erstellung vorbereiten sollten. Sie können diese als Leitfaden verwenden.

1. Zweck und Zielgruppe des Prozesses klären

Überlegen Sie zunächst, wo dieses Flussdiagramm auf der Website verwendet wird und wer es sehen wird. Zum Beispiel:

• Wenn es sich um einen Produktnutzungsprozess handelt, legen die Benutzer mehr Wert auf die Bedienschritte; das Diagramm sollte klar und einfach sein.
• Wenn es sich um einen Serviceprozess handelt, könnten die Benutzer an Zeitpunkten und Ergebnissen interessiert sein; markieren Sie die wichtigsten Schritte.
• Wenn es sich um ein Flussdiagramm für interne Teams handelt, sind detailliertere Entscheidungszweige und Ausnahmebehandlungen erforderlich.

Nachdem der Zweck geklärt ist, bestimmen Sie den visuellen Hauptstil (geschäftlich, flach oder handgezeichnet) und den Komplexitätsgrad des Diagramms, um blindes Beginnen zu vermeiden.

2. Vollständige Prozessschritte und Textgliederung erstellen

Zeichnen Sie nicht direkt, sondern schreiben Sie den Prozess zuerst in Textform auf. Empfohlen wird:

1. Startpunkt: Wo beginnt der Benutzer (z. B. Besuch einer Seite, Klicken einer Schaltfläche).
2. Wichtige Schritte: Name, Aktion oder Entscheidungsbedingung jedes Schritts.
3. Verzweigungen: Welcher Weg wird eingeschlagen, wenn eine Bedingung erfüllt ist, und welcher, wenn nicht.
4. Endpunkt: Das Ende des Prozesses (z. B. erfolgreiche Übermittlung, abgeschlossener Download).

Gleichzeitig sollten Sie für jeden Schritt eine kurze Textbeschreibung (nicht mehr als 8 Wörter) erstellen, um zu vermeiden, dass das Diagramm überladen wirkt. Nachdem die Textgliederung fertig ist, lassen Sie sie von Kollegen oder Kunden überprüfen, um sicherzustellen, dass der Prozess korrekt ist, bevor Sie mit dem Design beginnen.

3. Visuelle Referenzen und Farbschemata sammeln

Die frühzeitige Festlegung des Symbolstils und der Farbpalette verhindert häufiges Wechseln zwischen Tools auf der Suche nach Materialien. Empfohlen wird:

• Symbolbibliothek: Z. B. kostenlose, kommerziell nutzbare Materialseiten, um flache, lineare oder gefüllte Symbole herunterzuladen und einheitlich zu halten.
• Farbpalette: Basierend auf der Markenfarbe der Website oder dem Gesamtstil legen Sie Hauptfarbe, Akzentfarbe, Hintergrundfarbe und Textfarbe fest, in der Regel auf 3-4 Farben begrenzt.
• Pfeil- und Verbindungslinienstile: Gerade Linien, gebrochene Linien oder Kurven; ob die Pfeilrichtung einheitlich ist.
• Layout-Referenzen: Suchen Sie Screenshots von Flussdiagrammen ähnlicher Websites als Referenz für Layout und Schriftgröße. Achten Sie jedoch darauf, nicht zu kopieren, sondern nur die Struktur zu übernehmen.

4. Diagrammtyp und -größe festlegen

Ein Flussdiagramm muss nicht unbedingt ein vertikal angeordnetes Wireframe sein. Wählen Sie den passenden Typ basierend auf dem Inhalt:

• Lineares Flussdiagramm: Geeignet für wenige Schritte und einen unidirektionalen Prozess.
• Swimlane-Diagramm: Geeignet für Prozesse mit abteilungs- oder rollenübergreifenden Aufgaben.
• Entscheidungsbaum: Geeignet für Prozesse mit vielen Entscheidungszweigen.

Bestimmen Sie auch die Ausgabegröße des Bildes (z. B. Breite 1200 Pixel, Höhe je nach Inhalt anpassbar) und berücksichtigen Sie den Verwendungszweck auf der Website: Handelt es sich um eine Innenabbildung, eine Artikelillustration oder einen Teil eines Banners? Unterschiedliche Positionen haben unterschiedliche Anforderungen an Größe und Auflösung.

5. Werkzeuge und Vorlagen vorbereiten

Wählen Sie das passende Werkzeug basierend auf Ihren Designfähigkeiten. Wenn Sie selbst gestalten:

• Online-Tools: Canva, ProcessOn, Lucidchart usw., die vorgefertigte Vorlagen bieten, bei denen Sie nur Text und Farben anpassen müssen.
• Designsoftware: Photoshop, Illustrator oder Figma, geeignet für höhere Anpassungsanforderungen.

Wenn Sie das Design auslagern, stellen Sie dem Designer am besten eine Textgliederung und Referenzbilder zur Verfügung, damit er direkt nach Ihrem Rahmen arbeiten kann, was Kommunikationskosten spart.

6. Compliance und Urheberrechtsrisiken prüfen

Stellen Sie abschließend sicher, dass alle verwendeten Symbole, Schriftarten und Bildmaterialien kostenlos kommerziell nutzbar oder lizenziert sind. Dies ist besonders wichtig für Unternehmenswebsites, um Urheberrechtsstreitigkeiten zu vermeiden. Stellen Sie außerdem sicher, dass die Textbeschreibungen im Flussdiagramm wahrheitsgemäß und genau sind und keine fiktiven Serviceleistungen oder Effektversprechen enthalten.

Zusammenfassung

Wenn Sie vor der Erstellung eines Prozessdiagramms eine halbe Stunde für die oben genannten Vorbereitungen aufwenden, wird die Designeffizienz deutlich steigen. Denken Sie den Prozess zuerst durch, schreiben Sie ihn auf und zeichnen Sie dann – in der Regel gelingt es beim ersten Mal. Wenn Sie gerade die Serviceseiten oder das Hilfezentrum Ihrer Website aktualisieren, folgen Sie dieser Checkliste, um Nacharbeiten zu reduzieren.