9

There's a screen in our app where the user performs a batch action to list some products on their online store. In the UI, they select the products from a list and click a 'list' button.

During this batch action, things can go wrong (e.g. they can't list the product because it's missing some information such as a price). So, some products list ok, others don't.

I'm wondering how to communicate this to the user? At the moment, it reports an error, listing the products that couldn't be connected. But, I feel this is unclear, because it fails to mention that some products were listed successfully.

I've attached some ideas Ive had below. There's other instances in the app where we do this and the page ends up looking like a traffic light, with success, warning and error messages. It's all very unclear!

enter image description here

Improve this question

3 Answers 3

Reset to default
10

I would go with option three: show both as separate messages.

The reason is that it makes it clear to the user that there are two distinct system states as a result of their action.

One of Jakob Nielsen's 10 Usability Heuristics is visibility of system status:

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Because there are two status messages (one for success, and one for failure) it is much clearer to have them displayed as separate elements. Each message has different visual qualities so the user can quickly tell what happened without having to read a block of text and parse its meaning.

Users don't really read text, they scan. A green box means "success" even if the text says partial success, and vice versa for a red box. So if you show a green box, then the user may just assume everything succeeded.

A fourth option you might consider if you really wanted to have a single message is to introduce a third state:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

In either case, the key is to make it very clear that there IS a problem in the event of a partial or total failure state.

Improve this answer
3
  • 2
    +1 For the fact that you use icons to help color-blind users identify the meaning of each message.
    – Pep López
    Dec 11, 2012 at 18:43
  • 1
    So this is the approach we currently use (we say 'warning/success/error' instead of icons). The issue is the page always looks confusing and lacks clear direction. My preference is still to show the error and not the success message, simply because the user hasn't successfully completed their task. The challenge is then describing that some results were successful in the message.
    – Jon
    Dec 12, 2012 at 10:41
  • How many items are typically included in a batch? You could list them and show a status for each item and then a link or instructions for how to modify each item to get it valid. A lot of that all depends on the capabilities of your system. Messaging aside, currently when a product isn't listed does the user have to completely re-enter the item or is it persisted in the system just not published to the customer?
    – Charles Wesley
    Dec 12, 2012 at 16:27
1

I don't like any of your three options. They all require your user to do work if they want to see the available information. Don't make your user work. Go with the secret fourth option:

Change the design so that the user doesn't have to click to display things manually in the first place. Instead of displaying a message about what information wasn't populated fully, just include the partial results at the end of the list of normal results. If one of the fields didn't return information, just note that failure in the corresponding place of the display, possibly with an option the user can click for an explanation.

I mean something like the following:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Edit: I've presented this in a table above because that was the quickest way to make the mockup, but I'm thinking of something like appears on Amazon.com, where you have a box associated with each product and it doesn't stand out if something's missing from that box. For example in this screenshot of Amazon you'll notice that the second entry has no image and the third entry has no author and no price for the new book (only used), but they all fit together seamlessly. enter image description here

Improve this answer
5
  • 1
    I would argue that this solution actually requires the user to do more work. You would be forcing them to look through the list to find the ones with issues, rather than just listing them for the user to read easily. Even if they were all grouped together at the end of the list, the user would have to scan the whole list to figure out where these start and risk missing some. Maybe some clear highlighting would help. Also consider if there are a lot of columns in this table, then it would be more difficult to find the value that didn't load correctly.
    – sacohe
    Dec 11, 2012 at 18:59
  • @sacohe Why would the user be specifically trying to find the ones with issues? It makes more sense to push those out of sight, by putting them at the end of a long list where the user likely won't get to them.
    – Graham Herrli
    Dec 11, 2012 at 19:04
  • 1
    I may be misunderstanding the OP but that seems to be the whole point of the error message. The user performed an operation, parts of it failed, and they would want to know what failed. Other users shouldn't see this, but the requestor of the action would want to know.
    – sacohe
    Dec 11, 2012 at 19:09
  • 1
    Maybe the OP can clarify this? @Jon is there an explicit need to emphasize to the user what elements of data weren't returned?
    – Graham Herrli
    Dec 11, 2012 at 19:18
  • Thanks for the response. So, there are more complex scenarios in the app where it's necessary to message which elements are invalid (e.g. perhaps the SKU for the product wasn't unique, or no cost price has been entered so it may effect your accounting). The UI pattern we follow lists all the items in a table (similar to your original mockup). I hadn't though about changing the display for each row effected, but it does make sense. Perhaps highlight in red the rows effected, add the help text you included (e.g. description not loaded - why) and still display the error message at the top.
    – Jon
    Dec 12, 2012 at 10:35
0

To much colors don t help, it renders the message confuse . What is the more importante information for the user. ...i think it is What is wrong.

So you can imagine a solution between the grey grid as shown and your proposal with color.

This solution let the good lines visible in grey (i agree, don t force your user to click to see details) and add red symbol on the lines with error to help the user easely and rapidly identify the bad processed lines.

You can even imagine a status filter on the top of the grid to help your user to filter only on error lines

Improve this answer

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.