0

If some string like "Now executing cronjob...", "REST call made", "Authorization successful", "Cronjob complete", etc. need to be shown every 1-2 second, what UI elements would you use? I looked at the Material-UI libraries and there's no component for showing transient elements rapidly like that. Most information are shown for 5-6 seconds with the notification UI elements used on most Material-UI components. Also, do you have sources that supports your suggestions?

1
  • 3
    What's the larger context this constant transient element lives in? What is the user engaged in while this message keeps showing up? This forum works best when you provide some visuals showing the larger context (and your efforts so far), so the community can help with more specific answers.
    – Mike M
    Mar 17, 2023 at 12:29

2 Answers 2

1

You can try SnackBar which is a flow-on-top UI indicating some running background tasks and it doesn't block the user's interaction with the rest of the UI.

On desktop, you can position them on the bottom right if it doesn't clash with any existing elements like the Intercom bubble etc, and you might want to color them green for Success/Complete states.

1
  • 1
    It won't display information in real-time. Since it's not made for that.
    – Sayaman
    Mar 17, 2023 at 2:10
1

The app that I work on mainly uses stacking system status and progress indicators in the top-right corned of the main viewing area. These can stack up to 5 items depending what the user is doing, and those items range from blips which just show a system status for a couple seconds to progress bars that can display for minutes.

This works well for my users as they rarely need to pay attention to these elements, so a status fading away in a couple seconds is never an issue. However if there was an operation they were waiting for a completed status on, we've trained them to monitor this area be keeping the transient notices with the progress bars which they will watch sometimes. One niche about my user community is that they're basically all expert users.

enter image description here

enter image description here

AutoCAD also does something similar. They has transient notices rolling up above their command input field which is located at the bottom middle of the screen. Same concepts, they have expert users trained to check that area for quick statuses as they're often looking there for responses to their commands. enter image description here

I have another app that I work on that also does something similar. The difference here is each notice would be attached to an action. This app does use Material 3 Snackbar to achieve this, which you can use without an action attached. (This absolutely can be used to display information in real time, you may just want the elements to stack if multiple notices could be presented simultaneously)

There are lots of UI Elements that can be used to display info statuses like this in real time. Knowing which is best is going to require knowing what your users are doing, what they'll do with that information, and what volume of real time statuses will be displayed.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.