Saving

Save buttons are one of the most used UI elements within our software but historically they're unintelligent and inconsistent, especially when the system attempts to communicate success/failure back to the user.

A Pulsar save button should communicate the system's current saving state to the user in-situ without relying on methods like flash messages, which typically only appear at the top of the page, to communicate whether or not something actually happened.

Modes & Loops

Normal save

See the Pen docs - buttons - title case by Pulsar (@pulsar) on CodePen.

• Button disabled while save action in progress
• Changes in width and colour should be quickly animated

Longer-than-expected save

If we encounter a slower than usual response, we can take the opportunity to reassure the user that we're aware of it, and that we're still working.

See the Pen docs - interactions - saving longer than expected by Pulsar (@pulsar) on CodePen.

Failed save

See the Pen docs - interactions - saving failed by Pulsar (@pulsar) on CodePen.

• Should be accompanied by an alert, or blocking modal confirming the error

Auto save

See the Pen docs - interactions - saving autosave by Pulsar (@pulsar) on CodePen.

• Button should not change size to minimize distraction while the user is working
• Button should fade between all states