0

I had reported a bug, where the user was able to click a delete action multiple times, i.e. Deleting something multiple times which would result in an error.

I disabled the button upon action, and put a spinner wheel.

Today I was told that this is completely "not normal" and to "stop doing weird things"

What do you think? What are better, more standard options?

enter image description here

4
  • 1
    perhaps irrelevant... why would a confirmation popup need a loading spinner? Whatever is loading should happen prior to the popup showing or after its confirmation. I would expect - click delete button.. confirmation pops up... I click "Yes"... popup disappears and loader shows while deletion takes place...
    – Scott
    Commented May 21, 2021 at 17:40
  • @scott I think it's because the call might fail, for some strange reason
    – JorgeeFG
    Commented May 21, 2021 at 17:58
  • @Scott Based on the description, I think (think) that the screenshot is meant to be after the user clicks yes to delete – i.e., “while deletion takes place”. I probably wouldn’t expect the popup to disappear until after the deletion has completed, but I definitely agree with the person mentioned in the question that the spinner should not be located in the bottom right. It would probably be best placed inside the yes button (with both buttons being greyed out and disabled while the deletion is taking place). Commented May 21, 2021 at 18:01
  • If that's the case, I agree, Inside the Yes button or as an overlay on the entire popup, and centered within the popup. Although I do not feel the popup disappearing and a loader overlay appearing being odd or problematic. Primarily because only a Yes response would initiate any loading, once clicked the popup has no further value, and it would mean the page behind the popup is changing, i.e. loading - the popup isn't loading anything.
    – Scott
    Commented May 21, 2021 at 19:01

3 Answers 3

2

As a commenter said, the spinner is appropriate while the system is processing the request or working to delete the list, because the user expects feedback after taking an action.

The issue with placing it in the bottom right side of the dialog window is that 1) it's not a common place for a user to look to receive feedback, and 2) the Cancel button is presumably still active (the user might want to click on it to try to cancel the action - not sure if that's desirable.)

Consider changing the buttons to "Delete" and "Cancel" to make it really clear to the user what they're going to do. "Cancel" should close the window (the user really should never see a spinner). When "Delete" is clicked, both buttons should become disabled; a spinner is OK if the deletion only lasts a couple of seconds (for longer deletions, use a progress bar). Position the spinner either in the middle of the screen, or on the "Delete" button itself.

1

Others have answered your question regarding the spinner and button states: disable the action button ("Delete") and center align the loader or, better yet, put it directly in the button itself.

Some other tips:

  • Have a contingency plan in case the action fails. How is the user informed? As a prompt? As an overlapping dialog with a mask? In the dialog? The later is likely the best - similar to a form field validation message.
  • Use a darker shade of red for your destructive buttons since #FF0011 on white only has a 4:1 luminosity contrast ratio. You should shoot for at least 4.5:1 (e.g. #EC0B12) according to WCAG. Ensure that the contrast on the spinner is also sufficient to be perceivable by all users.
  • Consider asking the question in the dialog's title rather than in its body (e.g. Delete list?)
  • Consider specifying which list in the body, rather than being ambiguous (e.g. Are you sure you want to delete the "September 4th Contributors" list?
  • Consider explaining the outcome/consequences in the body (e.g. This action cannot be undone).
  • Pay attention to the focus order when the dialog loads. The first focusable element is dictated by the code order and it may be the 'x' in the top right corner, but should probably be the left most action button in the footer ("Delete").
  • Try to avoid colors for the "Cancel" button - stick with shades of grey unless remaining consistent with other UI visual queues or branding elsewhere. Cancel should not be mistaken for the primary call to action.
0

If the process will take a measurable amount of time, you have a new dialog giving the user feedback that the system is performing the delete operation. If you don't want to do that, then once the delete button is clicked the first time, the action buttons should change to reflect a disabled style and prevent the action from being performed by the system.

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.