Workflows HTML-Vorlagen

Anpassbare Workflow-HTML-Vorlagen

Ein Team, das einen Freigabeprozess dokumentiert, kennt normalerweise jeden Schritt auswendig und verliert dennoch einen Tag mit dem Kampf gegen das Layout. Workflow-HTML-Vorlagen holen diesen Tag zurück. Sie durchstöbern die Sammlung, öffnen eine Demo, deren Abschnitte bereits aufeinanderfolgen, und ersetzen den Beispieltext durch Ihre eigenen Phasennamen, Verantwortlichen und Statusbezeichnungen. Das zugrunde liegende Markup ist bearbeitbar, sodass alles, was die visuellen Steuerelemente auslassen, stattdessen direkt im Quellcode angepasst werden kann.

Phasenabschnitte, die Sie umbenennen und neu anordnen können

Was diese Layouts von einer gewöhnlichen Inhaltsvorlage unterscheidet, ist ihre integrierte Reihenfolge. Jeder Block ist darauf vorbereitet, einen Schritt aufzunehmen, und das Duplizieren eines Blocks fügt einen Schritt hinzu, ohne die Schritte auf beiden Seiten zu beeinträchtigen.

Ein Phasenblock enthält in der Regel einige Elemente, die man beibehalten sollte:

• Den Schrittnamen samt einer kurzen Zeile, die beschreibt, was darin geschieht;
• Den Verantwortlichen oder das Team, das für das Vorantreiben der Arbeit zuständig ist;
• Eine Statusbezeichnung wie „Ausstehend“, „In Prüfung“ oder „Abgeschlossen“;
• Die anschließende Übergabe, einschließlich jeder Entscheidung, die den Ablauf verzweigt.

Kurze Freigaben im Vergleich zu langen Onboarding-Workflows

Zwei Prozesse ähnlicher Länge können gegensätzliche Layouts erfordern. Ein Freigabeprozess lebt von seinen Entscheidungspunkten, an denen Genehmigen, Ablehnen und Überarbeiten dieselbe Anfrage auf drei verschiedene Pfade leiten; daher deckt eine kompakte Vorlage mit vier sichtbaren Schritten alle ab. Das Onboarding verläuft länger und flacher und beginnt mit einer Anfrage und einer Überprüfung.

Einrichtung und Freigabe folgen, und erst dann beginnt der neue Mitarbeiter tatsächlich, weshalb wiederholbare Abschnitte und Platz für erläuternde Notizen in diesen Bereichen wichtiger sind. Die Servicebereitstellung liegt dazwischen: Sie reicht von der Aufnahme bis zur Bearbeitung, bei der Qualitätsprüfungen darüber entscheiden, ob die Arbeit freigegeben wird oder eine Phase zurückgeht.

Karten, Zeitleisten und nummerierte Schritte auf schmalen Bildschirmen

Das visuelle Format sollte gezielt gewählt werden. Nummerierte Schritte lassen sich bei kurzen Abläufen gut lesen, Karten eignen sich für Phasen mit mehreren Feldern, und eine vertikale Zeitleiste hält einen langen Pfad zusammen, ohne ihn seitlich zu stauchen. Das Nicepage-Gitter-Element hält Phasenkarten in responsiven Zellen ausgerichtet, und der Leitfaden für responsives Webdesign behandelt Steuerelemente zur Anpassung von Inhalten an verschiedene Bildschirmbreiten.

Auf Smartphones muss besonders auf die Reihenfolge geachtet werden, da aus einer Reihe von Phasen eine Spalte wird und die Abfolge diesen Wechsel überstehen muss. Abhängigkeiten leiden darunter zuerst, da ein Schritt, den noch niemand starten kann, plötzlich verfügbar wirkt, sobald er seine Nachbarn verliert. Öffnen Sie eine Demo auf einem schmalen Bildschirm, bevor Sie sich festlegen, und prüfen Sie, ob Schritt vier weiterhin als Schritt vier lesbar ist.