Workflows HTML-Vorlagen

Anpassbare Workflow-HTML-Vorlagen

Ein Team, das einen Genehmigungsprozess dokumentiert, kennt zwar in der Regel jeden Schritt auswendig, verliert aber dennoch einen ganzen Tag mit der Gestaltung des Layouts. Mit den Workflow-HTML-Vorlagen sparen Sie sich diese Zeit. Sie durchsuchen die Sammlung, öffnen eine Demo, deren Abschnitte bereits sequenziell ablaufen, und ersetzen den Beispieltext durch Ihre eigenen Phasennamen, Verantwortlichen und Statusbezeichnungen. Das zugrunde liegende Markup ist editierbar, sodass alles, was die visuellen Steuerelemente auslassen, direkt im Quellcode bearbeitet werden kann.

Phasenabschnitte, die Sie umbenennen und neu anordnen können

Diese Layouts unterscheiden sich von herkömmlichen Inhaltsvorlagen durch ihre integrierte Sequenz. Jeder Block ist für einen Schritt vorbereitet, und durch das Kopieren eines Blocks wird ein weiterer Schritt hinzugefügt, ohne die angrenzenden Schritte zu beeinträchtigen.

Ein Phasenblock enthält üblicherweise einige wichtige Elemente:

• Den Schrittnamen und eine kurze Beschreibung des Ablaufs;

• Den Verantwortlichen oder das Team, das für die Weiterbearbeitung zuständig ist;

• Eine Statusbezeichnung wie „Ausstehend“, „In Prüfung“ oder „Abgeschlossen“;

Die anschließende Übergabe, einschließlich aller Entscheidungen, die den Prozess unterbrechen.

Kurze Genehmigungsprozesse vs. lange Onboarding-Workflows

Zwei Prozesse ähnlicher Länge können unterschiedliche Layouts erfordern. Ein Genehmigungsprozess basiert auf seinen Entscheidungspunkten: Genehmigen, Ablehnen und Überarbeiten leiten dieselbe Anfrage durch drei verschiedene Zweige. Daher deckt eine kompakte Vorlage mit vier sichtbaren Schritten alle diese Schritte ab. Das Onboarding ist länger und flacher und beginnt mit einer Anfrage und einer Überprüfung.

Es folgen Einrichtung und Genehmigung, und erst dann beginnt die eigentliche Arbeit des neuen Mitarbeiters. Deshalb sind wiederholbare Abschnitte und Platz für unterstützende Notizen in diesen Bereichen besonders wichtig. Die Leistungserbringung liegt dazwischen und verläuft von der Annahme bis zur Bearbeitung. Qualitätsprüfungen entscheiden hier, ob die Arbeit freigegeben oder in eine andere Phase zurückverwiesen wird.

Karten, Zeitleisten, nummerierte Schritte auf schmalen Bildschirmen

Die Wahl des visuellen Formats lohnt sich. Nummerierte Schritte sind für kurze Abläufe gut lesbar, Karten eignen sich für Phasen mit jeweils mehreren Feldern, und eine vertikale Zeitleiste strukturiert einen langen Prozess, ohne ihn horizontal zu quetschen. Das Nicepage-Grid-Element sorgt dafür, dass die Phasenkarten in responsiven Zellen ausgerichtet bleiben. Der Leitfaden für responsives Webdesign beschreibt die Steuerelemente zur Anpassung von Inhalten an unterschiedliche Bildschirmbreiten.

Die Reihenfolge ist auf Smartphones besonders wichtig, da eine Zeile von Phasen zu einer Spalte wird und die Abfolge dabei erhalten bleiben muss. Abhängigkeiten sind dabei als Erstes betroffen, da ein Schritt, den noch niemand starten kann, weiterhin als verfügbar angezeigt wird, sobald seine Nachbarschritte verschwinden. Öffnen Sie vor der endgültigen Veröffentlichung eine Demo auf einem schmalen Bildschirm und prüfen Sie, ob Schritt vier weiterhin als solcher erkannt wird.