How to tell a user about an error after clicking a button?

Question

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: Transition (both buttons are white until we get a response from the server): Successful:

---

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?

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.

Answer 1

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:

^{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?