v15.2 Adjustable Notification Duration in Umbraco

[jbppraxis]

We would like to request the ability to customize the duration of various notifications in Umbraco.

For example, the "Save Successful" notification currently remains visible for approximately 6–7 seconds. While this duration might work for some scenarios, we would prefer to reduce it to better fit our workflow and enhance productivity.

Having the flexibility to adjust notification durations (e.g., via configuration settings) would be a small but impactful improvement, as it would allow teams to tailor the user experience to their specific needs.

If such a feature already exists, please let us know how to configure it.

[markadrake]

I second that @jbppraxis!

If you don't mind me blowing the scope of your request:

• Many configuration values like this are locked behind the dev process; it would be great if a UI were provided and this value was stored in the DB.
• Then this setting could be per user. I will be the first to admit that I usually do not pay attention and miss reading notifications.
• Are there any cases of a notification of such high importance that they should not have a timer and can only be dismissed after acknowledgment? (I'm thinking of publishing errors here.)

[nielslyngsoe]

@markadrake good points, as @mjpraxis also suggested maybe the error-notification should not close automatically?

[nielslyngsoe]

Hi @jbppraxis Interesting, May I ask if its purely a question of getting things off screen, in other words lowering the duration? Or do you also have a case where you like to increase the duration?

[jbppraxis]

Hi @nielslyngsoe
Actually, it's both. We want success notifications to disappear from the screen very quickly. However, there are some notifications we would like to stay visible for a while. For example, when pressing "Save and Publish," if a validation fails, the notification should remain visible for longer.

[nul800sebastiaan]

I was thinking about this recently and while I love the toasts for a quick check, indeed, errors I would like to inspect for longer. In fact, it would be great to have a list of recent notification in some kind of notification center, could be in the space when I click my avatar:

Initially, I don't think it needs to be something complicated that stores notifications for later, I'm sure it can use localstorage in the browser instead. That would make it useful quite quickly, I can keep working, clear notifications and find them later again.
In the notification center however, each one should have some more meta data - just "Published" is not useful, so it would be a link to the published node, probably with a time/date on it so we can remember how long ago we did something.

I know, I'm making it sound easy, but there's probably quite a bit of engineering to do, might even be possible as an extension (I don't know if extensions can listen to the notifications toasts being spawned?).

Anyway, just some fun thoughts I had recently!

[mjpraxis]

Hi @jbppraxis Interesting, May I ask if its purely a question of getting things off screen, in other words lowering the duration? Or do you also have a case where you like to increase the duration?

If it was possible to define a duration for each type of notification level it would be nice

Example may not have the exact levels used in Umbraco ;-)
Info = 2s
Warning = 4s
Alert = 6s
Fatal = 0s (indefinitely)

[nielslyngsoe]

@mjpraxis good idea, would be nice to see in action. Should be fairly simple to set different duration based on the type of notification.

[Luuk1983]

@nul800sebastiaan I really like this idea. The notifications are a pain and are always in the way. If you have multiple notifications, they stack very fast. The Umbraco 13 ones were more annoying because they sometimes covered the publish button, so that's a win for 15 ;)

I like the idea of a notification center. You have to have a 'bell' icon somewhere with the number of notifications. However, I don't think you want to have every single notification in there ramping up that number. Because in that case, nobody will read them anymore.

For me, there doesn't have to be a notification for when saving and publishing was a success because the button tells me. To be fair, the 'failed' state of a uui-button should be red imho, because it's hard to spot a check or a cross on a green button.

So not sure what the correct solution is yet, but the notifications could be improved for sure and I think the controls could convey information a bit better so you might not need a notification for every action.

[nul800sebastiaan]

Yeah makes sense! I do think it's relevant to save all toasts. I might want to quickly check if I did publish a node (and did it actually succeed) or did I only tap Save. That way I don't have to go all the way back to the node and open the info tab.

Could be a default filter on warnings and errors and you could remove the filter to see all events.

[mjpraxis]

Agree with @Luuk1983 the notification when save&publish is a overload of informations.
A spinner in the button, 2 notification ("Saved" + "Published") and a check-mark in the button
If everything i a success the green button + check-mark should be enough.

Only show notifications if something went wrong.

[Luuk1983]

Maybe we need to look at this from a mobile device approach:

Have a number of possible notifications and select what notifications should give a popup and what notifications shouldn't. Also select what notifications would add an 'unread' number to some kind of notification drawer. I do think that a notification drawer should have all the notifications, but at least make them filterable.

This way you can customize it to your liking.

[bjarnef]

Something like a notification drawer could be useful: https://www.patternfly.org/2022.05/components/notification-drawer/design-guidelines/

But also considering this for custom implementation.
Often used in project/kanban boards e.g. regarding mentions, tasks assigned, etc.

Not sure if it make sense that current notifications/toasts show up in this drawer.
I guess in would end up with many save and publish notifications.

Perhaps audit of recent actions by user somewhere in the user overlay panel.

[skttl]

Could be combined with some kind of messaging system, so I could send messages to all users in a specific group, or specific users, that "issue #123 has been fixed", "feature #234 is now available", "content freeze is coming up next friday" etc.

[mjpraxis]

Is it just me or are this discussion evolved to 2 topics?

• Duration of notification popups
• Should there be a kind of messaging system / notification center

A "Notification Center" sounds like a big discussion and not an easy task.

The "Duration" is something else. How do we/umbraco warn users that something failed. And the notifications is not visible for 6 seconds.
And if you hover on a notification it seems that the timeout is reset and count down from 6 seconds again.

[nielslyngsoe]

Hi @mjpraxis

you are right, but I dont mind. I love to hear all ideas about how to inform the user, notification related or not.

But you are right, notification center is a good idea, one I already was aware about, but as you mention also a bigger project. Where duration of notifications surely is a smaller thing, properly just a line or two of code. — In that regards feel free to make a PR that differentiates the duration based on the notification type. So errors stay longer than success notifications.

Thanks in advance

[enkelmedia]

I raised an issue about this in the old ”Backoffice”-repository during the initial Bellissima development but it seems like it’s gone now.

I think that we need to re-think how we do notifications, how they are shown, when they are triggered and for how long they are shown.

A couple of things I remember from my old issue:

• The toaster design is kind of clumsy, I would appreciate a more discrete notification, especially for success messages.

• Notifications for success is often redundant. The fact that the arrow changes into a checkmark indicates success well in most cases.

• Validation errors and fatal errors works quite nice as is

• the duration could maybe be calculated based on the length of the message and some average read speed to make shorter notification stick for short time.

Would be a great improvement for the UX to spend some time on this.

[nielslyngsoe]

Hi @enkelmedia thanks for commenting, and I agree.

This has never been forgotten though, but also not prioritized. The current notifications originate from the actual fetch calls. Which explains the double/triple notifications when doing advanced actions.

We wanted to make it possible to inform a repository when executing specific calls that it should not fire notifications. In this way the implementation of "Save & Publish" can opt out of the built-in notifications and fire one unified message.

Removing success notifications is also something I wanted(Naturally part of the above feature), and it may become easier once we have a 'unsaved changes' indication, in this way there should be plenty to comfort the user that the data actually is saved. — Also now that we have a proper Discard Changes Dialog the user should feel safe to know if they leave something behind.

Good idea to differentiate on the type of notification, I think this can be done fairly simple already — so if someone likes to have a go at it, feel free to do so :-)

Great to hear your thoughts, please keep them coming :-)