I have this problem.

I'm working with an application that has a live and nonlive mode. It's used in a live show (control lights), so people usually make modifications but they are not supposed to be automatically saved so the show doesn't get messed up. Every time someone makes a modification in the file it has a button that says changes blind, which now is a light that beeps (gif), so notify the user that he made changes in the file and they are "pending" until the user pushes the change forward to be applied (in that case the light will turn in blue). Before this light there was a big arrow that pointed to the button. Users are complaining that the new small beeping light alert is not noticeable enough. I would like to have some suggestions on how I could solve this problementer image description here


4 Answers 4


Couple of suggestion

  1. Keep the 'apply change' button in blue colour ( refer bootstrap primary button colour). Initially keep the button as greyed or disabled visual treatment. When user makes the change in the page, then give blue colour to the button. This is like acknowledging the user that changes need to apply.

    1. In the current design I can see multiple colour, so screen is not visually balanced with colours. In this case it's hard to make out the 'apply change' button to standout. So it's better to keep the **auto save ** option.

I agree there needs to be a more visual indication of the change. Perhaps that component breaks out of the bottom bar to draw extra attention to it. Something like this:

enter image description here

An additional improvement would be to make the transition to the active state animated, or have the yellow bar pulse.

Once the changes have been applied it would return to normal.

  • I see now the 2 buttons to the right of the state are related. In that case the 3 components (state, dropdown and apply button) would be raised with the highlighted border. May 17, 2016 at 2:39

It's small and dark. Instead, why don't you change the background colour/color of the "changes" label, that would effective hightlight it.

  • That wouldn't meet accessibility standards, how would a screenreader work?
    – Midas
    May 16, 2016 at 20:57
  • You keep the "blind" label as well, and you could write "pending" next to it, you could highlight "pending" as well May 16, 2016 at 20:58
  • I think this is sort of a asynchronous state interaction pattern? It seems that just changing text will not be enough :( . May 16, 2016 at 22:52

Well the option is not easy see it. Maybe an better approach will be have an compact menu with some simple actions, so the user could enter to an process: start action -> configure -> done.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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