1

I'm sending an AJAX request to refresh the blog page with posts that apply to certain a category. How do I tell a user that his request failed? Should I tell him exactly why it failed(error, internet connection lost, etc)?

Here are the states buttons are:

Initial: enter image description here Transition (both buttons are white until we get a response from the server): enter image description here Successful: enter image description here


Is it too subtle to just color a button red for 2 seconds and then switch back to the initial state? What should do instead? enter image description here

By default there are latest posts on the page (ALL) and when a user chooses different category, all posts get removed and replaced by the ones from a particular category.

My client is a photographer and so if the visitor of the site is interested only in weddings, he should be able to sort the blog posts for weddings only.

If it fails the old posts stay on page.

4
  • So, once they push the button and it fails, what does the content below look like? Do you have a wider picture?
    – Mike M
    Sep 21, 2017 at 13:33
  • Can you give more info on your app. Why the users need constantly updated categories? What they are looking for? Are the categories frequently updated and how frequently? Sep 21, 2017 at 14:11
  • What failure are you trying to cater for? Lack of posts in that category of a failure to retrieve the posts that may not be recoverable? Sep 21, 2017 at 15:22
  • I updated my question
    – Open up
    Sep 21, 2017 at 16:39

1 Answer 1

3

Like any other error, be clear to the user what happened and ideally give them a path to recovery if possible.

You're focusing on the button state, but it sounds like what the user needs is the result of the button push: they are expecting content below on the page.

The button hasn't failed; it's the system state as a result of the button.

I don't know what the rest of the view looks like, but here's a shot that places the error prominently in the area I assume (correct me if I'm wrong) they are looking to load with their choice:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

You might want to read: Error message guidelines, from Nielsen Norman:

Established wisdom holds that good error messages are polite, precise, and constructive. The Web brings a few new guidelines: Make error messages clearly visible, reduce the work required to fix the problem, and educate users along the way.

In your mock above, you are using color as the sole indicator. That leaves color blind users thinking that the button is in an active state (like it's pressed), since they may not be able to see Reds.

Try an icon, plus a helpful error message. It needs to be noticeable.

Users will want to understand what happened, and how to move forward (if they can). Differentiate what type of error this is.

Remember, when users don't see any change on the page, or when the content below disappears they may ask themselves:

  • what happened?
  • was it my fault?
  • if it's the systems fault, when will it correct itself?
  • are there no 'Nature' blog posts? (which means no results is different than failure to load; it's not an error)
  • what do I do now?

Your Answer

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

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