Let's talk about that "Save" button


#1

Hey guys,

I’m an interactive / UX designer, and i came here to brush up on my coding skills so i can make better interfaces. Recently i noticed you’ve made a callout that dramatically pulls my attention to the “Save” button. At few days ago the implementation had the save button sliding in an out, and things that move or animate to draw your attention on a static screen has a very dramatic effect.

Thankfully you fixed that, as it was basically ruining my ability to concentrate on figuring out how get through some of the challenges.

However, the animation has now been replaced with a constant pulsing. This is also bad.
I think the nature of your site requires a user to concentrate on what they are doing, so I think minimizing distractions on the screen is very important, especially for noobs like me. I already have to completely isolate myself from all stimuli in order to concentrate on learning, so constantly pulling my attention away from that is a bit frustrating.

I’ve literally taped a sticky note over my monitor to help tune it out.

So… how do you do this right?

I assume there is an issue with people not saving their work, losing progress, and getting frustrated. I assume you are doing some sort of tracking either via metrics or surveys to uncover this issue. My first question would be, is the evidence to make this change anecdotal? Or do you have definitive proof that it needs to be addressed. Are you tracking a metric and doing AB testing to see if you are actually improving behavior?

I’m willing to bet people use the save button more, but might suddenly be spending less time on site, or come back less.

Assuming you have quantitative data that indicates you need to call out the save button, here are some other ways to do it:

  1. Have it pulse much less frequently. Like seriously, 10 seconds, 20 seconds. My brain is actively tuning out this thing and spending mental energy. Every pulse interrupts my brain enough to take my out of my thought process. The less is pulses or changes, the better.

  2. Instead of pulsing, you can just have the save button clearly change state once someone begins to make changes to their code. Maybe it goes from gray to green, or maybe the text changes from “Saved” to “Save Changes”. It only needs to change this state once. No need for continued pulsing, as you’ve now drawn the users attention to the fact that their changes have gone from “saved” to needing to be saved.

  3. Like in other IDEs where they have the green or red bars on the left to indicate you’ve made changes as compared to the original, you can indicate in the code itself that changes have been made that need to be saved.

  4. Periodically save user progress automatically, and allow them to step backward through their history. Pretty much like google docs. No need to force them to save more frequently in that case.

  5. Add a user option to disable the callout if none of this sounds good.

Please just don’t make big objects pulse or move in the app. It really does take me out of flow of learning or problem solving.