UX for handling delays in server response

Question

I have a website that takes between 1-20 seconds to respond to user actions due to problematic server, and the request sometimes fails to do the task and needs to be retried.

While the server obviously has issue and we're trying to fix it, I wonder what kind of UX design I can make in the client side that can help mitigate a bit of the problem.

To simplify the case, let's assume I have a list of task that I displayed:

• Go to the market [x]
• Clean up my room [x]
• Do my homework [x]

I have two approaches in mind:

1. After clicking the delete button ([x]), I will make an http call to the server to delete the task, I will wait until the server response (can take to 20 seconds) then I will remove the task from the list.

2. After clicking the delete button ([x]), I will immediately remove the task from the list while making an http call to the server to delete the task, if it successful, the user won't notice anything, but if it failed, I'll pop up a message saying 'it's failed' and refresh the page.

What approach is better? Is there any other approach that I can use assuming the API Service can't be fixed?

Answer 1

If a task is being performed, then DO NOT give the user a feeling of completion.

This can create problems. At any point of time, if the user feels like the task is done then they might close the page prematurely. Or if the user thinks that the button isn't working they might refresh the page.

Have you ever noticed how SE handles requests? If not, here's what you should do:

1. Let the user click on the [x] button.
2. Show a loading icon.
3. After 20 seconds (or whatever cut-off time you have) show SUCCESS or FAILURE.

Answer 2

Personally I would be upfront and honest with your users. If a task takes time then say so, whatever the reason.

This helps in two ways, the trust issue in that something is happening. If you leave feedback simply to a spinner, then the user may think the program is frozen.

Secondly you're managing their expectations.