0

I can't think of great examples on the net (comparisons to draw, that is). You've seen the feature before though. You are making an edit to something--say, a setting. And when you make the change, there is a quick transparent modal with the 'loading' circle animation (or a flashing disk or something), and the word 'Saving', or something similar. This appears on screen for maybe half a second, one second? Then it goes away, and there is a fade-out box near the saved feature that says 'Saved', or 'Successful', and it fades out over 5 seconds or something...

So, despite sounding like a teenage girl in the explanation (like, totally), have I explained it well enough?

My question here is, what are implementation ideas/examples for this? I'm looking both at user experience patterns/thoughts, and also implementation thoughts.

We're on DOJO framework, so really we can do anything from an animated GIF and CSS transitioned box to something fancy and javascript-y (as long as it's doable within DOJO--I don't want to use jQuery, for example).

Thanks for your contributions!

Improve this question
2
  • 1
    We can't really reel off lots of examples of save animations, that's not really what a Q&A site is for. Nor can we suggest explicit DOJO examples - UX as a field is technology-agnostic. However we can help with the question about whether what you currently have is suitable. What are your reservations about doing it the way you have described?
    – JonW ♦
    Jul 11, 2013 at 14:38
  • This is what I need Well, thanks to the great associated posts feature here, I was actually able to find what I need in the post above! Thanks!
    – Mike Earley
    Jul 11, 2013 at 15:18

1 Answer 1

Reset to default
0

Oh! well, I was formulating my suggestions post .. :) Here's what I drew so-far:

Following are some points that I could think of, for the 'Save Animation':

  1. No. of steps that do the 'Save' for each edit
  2. Frequency of edits
  3. Toggle switch for Autosave feature (required)
  4. The type of edit process:
    • Step critical (Each step should be saved)
    • Feature Integrity critical (Entire edit or nothing should be saved)

I found your idea of an Autosave Feature, totaly awesome

Apart from a usual preloader for denoting Ajax activity and then displaying a fading out label saying 'Saved', you can also:

  • Highlight the record/edit step label with a green color with a smooth transition(fade-in green may be)
Improve this answer

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