Arbetsflöden HTML-mallar

Anpassningsbara HTML-mallar för arbetsflöden

Ett team som dokumenterar en godkännandeprocess kan oftast varje steg utantill och förlorar ändå en hel dag på att brottas med layouten. HTML-mallar för arbetsflöden ger den dagen tillbaka. Du bläddrar i samlingen, öppnar en demo vars sektioner redan ligger i logisk följd och ersätter exempeltexten med dina egna etappnamn, ansvariga och statusetiketter. Den underliggande koden är redigerbar, så allt som inte täcks av de visuella kontrollerna kan justeras direkt i källkoden istället.

Etappsektioner som du kan döpa om och ordna om

Det som skiljer dessa layouter från en vanlig innehållsmall är att ordningsföljden är inbyggd från början. Varje block är förberett för att rymma ett steg, och genom att kopiera ett block lägger du till ett steg utan att störa stegen på vardera sidan.

Ett etappblock innehåller oftast några element som är värda att behålla:

• Stegets namn tillsammans med en kort rad som beskriver vad som sker i det;
• Den ansvarige eller det team som ska driva arbetet vidare;
• En statusetikett som exempelvis väntande, under granskning eller slutförd;
• Den efterföljande överlämningen, inklusive eventuella beslut som förgrenar flödet.

Korta godkännanden kontra långa onboarding-arbetsflöden

Två processer av liknande längd kan kräva helt motsatta layouter. En godkännandeprocess bygger på sina beslutspunkter, där godkännande, avslag och revidering skickar samma begäran längs tre olika spår; därför räcker en kompakt mall med fyra synliga steg för att täcka samtliga. Introduktion av nyanställda (onboarding) löper längre och mer linjärt, med start i en förfrågan och en granskning.

Därefter följer installation och godkännande, och först då sätter den nyanställde igång på riktigt. Därför väger repeterbara sektioner och utrymme för förklarande anteckningar tyngre i dessa sammanhang. Tjänsteleverans hamnar däremellan: den rör sig från mottagande till bearbetning, där kvalitetskontroller avgör om arbetet levereras eller skickas tillbaka ett steg.

Kort, tidslinjer och numrerade steg på smala skärmar

Det visuella formatet bör väljas med omsorg. Numrerade steg fungerar utmärkt för korta rutiner, kort lämpar sig för etapper som innehåller flera fält och en vertikal tidslinje håller ihop ett längre flöde utan att trycka ihop det i sidled. Nicepages rutnätselement håller etappkorten justerade i responsiva celler, och guiden för responsiv webbdesign går igenom kontroller för att anpassa innehåll till olika skärmbredder.

Ordningen är det absolut viktigaste att hålla koll på i mobilen, eftersom en rad med etapper förvandlas till en kolumn och sekvensen måste förbli begriplig efter övergången. Beroenden drabbas först när detta sker, eftersom ett steg som ingen kan påbörja ännu ändå kan se tillgängligt ut så snart det tappar kontakten med sina grannar. Öppna en demo på en smal skärm innan du bestämmer dig, och kontrollera att steg fyra fortfarande tydligt uppfattas som steg fyra.