Auto saving dashboard layout

#1

Proposing a different ux for saving dashboard widget layout changes.

com-video-to-gif

Take it for a spin here https://deploy-preview-3653–redash-preview.netlify.com


Motivation

Currently when in dashboard edit mode, there are “Apply Changes” and “Cancel” buttons which are inconsistent (only apply to resize and drag - not to added / deleted widgets) and buggy (there is a scenario causing widget overlap).

43

The Proposition

Ditch cancellability and embrace auto-save, ala-Google Docs.
One button to switch off edit mode, next to it a save status indicator.

58

How it works

Each layout change marks a dirty state “Saved*” and triggers a server save to each changed widgets, debounced by 1 second, then the asterisk disappears.

Any error saving yields a notification and dirty indication persists.

Different variation experiments:

  1. A longer debounce delay and a manual “Save” button - saving manually is simply unnecessary and doesn’t need to be on the mind of those editing the dashboard.
  2. Three indicator states “Save*”, “Saving”, “Saved” - the “Saving” state is too quick and the text is jumpy.
  3. Spinner when saving - calls needless attention.

The version implemented eventually is the least distracting and simplest.

Let me know what you think.

1 Like

#2

Maybe show the “Saved” notification for a short period of time and hide it after?

0 Likes

#3

I didn’t consider that cause without a save button, the user must have a clear indication that the current state has been saved, and temporary won’t do - the indication is designed to be non-distracting when editing but informative when done.

(For instance, in save-as-you-type forms that have no apply/save buttons, I’m never really sure it’s synced to server and find myself refreshing just to make sure…)

0 Likes

#4

@arikfr lmk if you have any more reservations from this UX proposition.
This is a crucial matter for the dashboard grid to react migration.

0 Likes

#5

I’m good with the direction. I have some reservations about the implementation, because I feel that the “* Saved” variant isn’t clear enough (not visually appealing :)).

Maybe “Saving…” while it’s in unsaved state and “Saved.” when it’s saved?

0 Likes

#6

not visually appealing :slight_smile:

My idea is for it to not call attention. There’s no point in it being noticeable imo.

Maybe “Saving…” while it’s in unsaved state and “Saved.” when it’s saved?

I tried that, but the “Saving” state is too quick and the text jumps and calls attention. I can make a demo for you to test if you want.

0 Likes

#7

Maybe we need to save less often. Check out the behavior in Google Docs – it seems like they keep the “Saving…” text for a few seconds.

0 Likes

#8

Maybe we need to save less often

The saving http request itself won’t take longer though.

it seems like they keep the “Saving…” text for a few seconds

Perhaps delaying it on purpose for the same reason. But why would you even want the user to notice it? All that matters is that when the user glances at the save indication - they know it’s saved.

0 Likes

#9

I don’t mind the user noticing it as much as something about the “Saved *” bugs my OCD :slight_smile:

Unless we add a delay to it to make sure multiple actions get only a single save. Also sometimes a single action can cause multiple widgets to update -> multiple HTTP requests that might take some time to finish.

0 Likes

#10

I don’t mind the user noticing it as much as something about the “Saved *” bugs my OCD :slight_smile:

I’ll update and ping you.

make sure multiple actions get only a single save

The save is debounced and then it’s 1 http request per widget with a fresh calculated diff (meaning all widget changes are “batched”).

0 Likes

#11

@arikfr updated to:

com-video-to-gif

Here’s the Netlify preview, lmk if this feels more natural.

(Btw, the animation is css only :stuck_out_tongue:)

0 Likes

#12

PR ready https://github.com/getredash/redash/pull/3653

0 Likes