Digital
Information
Design.

Icon Digital Information Design white Designsensor AG

Site Map und Flowchart

Sitemap und Flowchart – die Landkarten Ihres digitalen Produkts.

Die Site Map visualisiert die komplette Architektur des digitalen Produkts. Sie bildet die Hierarchie der Inhalte ab und zeigt die Navigations- und Menüpunkte des zukünftigen digitalen Produkts.

Teilen macht Freude

Mittels der Site Map die Struktur visualisieren

Interface Design Sitemap
Interface Design Sitemap

Die Site Map ist ein sehr praktisches Hilfsmittel bei (seitenbasierten) Anwendungen, da sie mehr können als nur die Struktur abbilden.

  • Die Site Map bildet die Hierarchie der einzelnen Seiten/Views ab und zeigt die künftige Navigation mit den Menüpunkten.
  • Sie visualisiert die Anzahl und Art der einzelnen Seitentypen/Views.
  • Abgeschlossene Bereiche (z.B. welcher Bereich ist erst nach dem Login verfügbar) können einfach dargestellt werden.
  • Sie definieren, wo Inhalte und einzelne Seiten/Views liegen und wie sie verlinkt sind.
  • Ausserdem können Site Maps den Projektstatus abbilden und zeigen, welche Seiten in welcher Ausarbeitungsstufe umgesetzt sind.

Vorgehen

Die Basis für die Site Map lässt sich mit der Designmethode Card Sorting erarbeiten.

Design Methode Card Sorting
Tipp

Mit Site Maps können auch einfache zeitliche Abläufe visualisieren werden. Komplexere Abläufe und komplette Prozesse mit mehreren Entscheidungsschritten werden mittels Prozessflussdiagrammen modelliert.

Mittels Flowchart / Task Flow den Prozess visualisieren

Interaction Design Designmethode Fowchart

Flowchart bedeutet frei «Flussdiagramm» oder auch «Programmablaufplan». Mit einem Flowchart wird der «Fluss» eines Prozesses visualisiert.

Solche Diagramme sind dazu da, «Wenn-Dann»-Kausalitäten zu verdeutlichen, Logik-Fehler aufzudecken oder auszuräumen und Dinge zu vereinfachen.

Vorgehen

  • Identifizieren Sie das erste Ereignis beziehungsweise den ersten Prozess – das ist der Startpunkt.
  • Unterteilen Sie den Prozess in Mikroprozesse (detaillierter Ablauf, Aufgaben, Dokumente, Interaktionen) auf.
  • Kombinieren Sie die Elemente mit Linien, um Verbindungen zwischen den einzelnen Schritten aufzubauen.
  • Suchen Sie nach Möglichkeiten, den Prozess zu optimieren beziehungsweise zu vereinfachen.
  • Die Element der Flowcharts können nach eigener Logik oder nach einem vordefinierten Vokabular beziehungsweise einer UML («Unified Modeling Language») genutzt werden, so dass jeder das Diagramm lesen und verstehen kann.
Tipp

Um hilfreiche und verständliche Site Maps und Flowcharts zu erstellen, ist es wichtig, dass die einzelnen Seiten, Content-Elemente und Tasks mit einem eindeutigen visuellen Vokabular erstellt und Nummerierungs-System beschriftet werden, damit das gesamte Projektteam und alle Stakeholder darauf referenzieren können.