4

Preface

I'm working on designs for a web application where users can create data-processing workflows that get executed asynchronously from the server. Most of the time workflows will run in perpetuity unless an error is encountered or the user disables it. When a user enables a workflow it may or may not be executed immediatedly; warnings and errors generated during workflow execution are added to log which can be retrieved via API. The ideal state is that there are no enabled workflows in a faulty state, errors are the exception.

Since workflows are executing asynchronously the user could be working in any part of the application when a warning or error is generated.

There is a dedicated log page available from the main navigation where users can go to view and filter through all application logs.

Question

How can I provide feedback to users that workflows are encountering warnings or errors, regardless of where they are in the application, and then direct them to fix the issue?

What we tried

Approach Aversion
Display a toast card for each warning or error There could be multiple workflows in an failing state and each individual one could throw tens of warnings/errors in a short period of time easily overwhelming toast card timing.
Use the browser's Notification API Only works in HTTPS contexts which our application isn't guaranteed to do. Users may never see the the prompt based off of their browser settings.
Add a sticky panel to the bottom of the viewport to display the log at all times This consumes a ton of space and drastically reduces the working viewport height. It feels very reminiscent of an old Win32 app, complete with split panels.
Add the log to the contextual sidebar We have a contextual sidebar that only appears when needed. It displays lists of objects to be used with some complex in-line controls. Adding the log here means the panel would appear on all pages and clutter the purpose/intent of the panel.

1 Answer 1

3

You can add a notification area to the most persistent part of the UI, and indicate when there's an error, warning or other process they need to be aware of.

A pattern you'll see is a notification indicator, often on the upper right of the persistent 'chrome' of the UI: in this case, the upper right of the navbar.

enter image description here

You can have this enumerate with the number of errors / warnings, and it can prompt a dedicated panel that opens up, showing the status of processes.

I've seen it often expressed as a slide in panel, so users can still stay in the view they are currently in. There, they could find:

  • a severity level (warning vs error)
  • timestamp
  • summary
  • a link to go to the problem (if that applies)
  • an action (?) if they can restart or cancel a process (I don't know if this is relevant to your use case)

This way you have access from anywhere in the app, which sounds like one your requirements.

You can experiment with both placement and visibility to find the right mix of awareness but not interfere with normal use of the app.

1
  • This is spot on and definitely fulfills my requirements. I'll hold off for a little bit before accepting to see if I get any other answers.
    – user150078
    Aug 18, 2021 at 12:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.