6

Background:

Our user runs an internet shop, based on a SoS platform we provide. In particular we provide a desktop app (Windows), which basically stacks up the shelves of this store by uploading offers from selected suppliers.

The uploading process can be ran in so-called debug mode: it then stops at every single product in the offer, asking for confirmation before it imports the product to the store (if it's not in the store yet), or overwrites its data (if it has been imported already).

The window shows some brief previews and asks for a decision. When user wants to exit the debug mode, they can click "Remember this choice for other products" thereby approving or rejecting all remaining products in the queue. (Kind of like in a file copy dialog box).

Current UI:

enter image description here

So we effectively have 4 options:

  1. [green, no checkbox] Import this product (and keep on asking)

  2. [red, no checkbox] Do not import this product (and keep on asking)

  3. [green, checkbox] Import this product and all the rest

  4. [red, checkbox] Do not import this product nor all the rest


The task:

A new (fifth) option is to be added now: "ignore product".

It allows our user to exclude specific / selected products from being taken into consideration at all.

Once user marks some product as ignored, they won't be bothered about this particular product anymore, regardless of all other settings or choices in the window (until they reset the list of ignored products, but that option is available elsewhere).

The question is: how to present this additional option to the user? So simple, yet difficult...

The sense of this new option must be transparent, but given that the present layout has been 'in the field' for quite a while, we also need to avoid confusing users, since they got used to it.

They used to have a green one vs a red one - and I don't want to make them think now by throwing an extra red one in; why, which one is which? etc.

First project:

Adding another button on the right; grouping old controls in a border to distinguish pre-existing options from the added one:

Adding another button on the right; grouping old controls in a border to distinguish pre-existing options from the added one

Problems:

  • "Ignore this product" actually applies to the product on the left pane (not the one on the right; there may even not be any), so it's obviously placed too far away from it.

  • Also, while it doesn't appear so jarring on the mockup perhaps, the real window got a bit too wide.

Solution:

  • Move the new button to the top. Don't put it next to "old" controls.

Second project:

Problems:

  • It looks odd.

  • It still doesn't make it clear how "Do not update" and "Ignore" are different. ("Do not update" means "...this time". "Ignore" means "not this time, not any time". But this window doesn't seem to be telling you that).

Solution:

  • Leave one red button for a "general negative response"; clicking it will allow user to specify one of two options (old one or new one).

enter image description here

Problems:

  • How to present these two options? On a popup form? A combobox? Some web-style sliding frame?

  • It will require more clicking. Someone who stormed through the debug mode making long series of quick decisions (y/n), now will have to click not once but twice for every "no". The new option is getting in the way.

  • Even more importantly, the checkbox is now isolated from the button whose behavior it alters. The checkbox state only applies to "Don't update now" (the old option), not to "Don't update ever" (or ignore product; the new option). This seems counterintuitive and misleading.

I'm not a UX designer (if I need to tell you that...), but as our team is small, it's up to me to come up with something and my ambition is to find the right solution :)

What would you suggest?

PS.

  1. English wording and names of options are not the main issue here. The primary language of the app isn't English anyway; I just translated the UI ad hoc - someone else will take care of localization later on. Although any suggestions on rephrasing are welcome if they help the case.

  2. The set of options provided (overly complex, one could argue) is not a subject to debate at this point, either.

  3. Here's my mockups in XML, exported from Balsamiq Mockup: http://pastie.org/4642609 - if anyone were kind enough to try and play with it.

I'd really appreciate any comments or insights.

2
  • I see 6 options, not 5: Update/Do not update/Remove, and I see no reason the checkbox can't apply to each of them..
    – Izkata
    Sep 1, 2012 at 5:06
  • @Izkata - well, that's the specification. Removing (ignoring) products is only meant to apply to specific, selected products; no "apply to all" command is available. (It would effectively disable the entire offer). It's obviously debatable, but it's not up to me. Sep 1, 2012 at 11:43

1 Answer 1

4

OK, so, you have

  • 2 short-term decisions for the current product
  • 2 short-term decisions for the current set of products to be imported
  • 1 long-term decision for the current product

Let's rename "Ignore" to "Forget for forever" for a moment, as "ignore" is too close to "Don't update" to me.

BTW, we have a nice balsamiq button up there, and we also have a resident Balsamiq expert ;) So now I simply copy your XML and paste it into the built-in balsamiq. :) In case you need to modify mine, there's an "edit the above mockup" right beneath my image. Thx to Balsamiq for this feature, special to UX.SE :)

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Grouping is easy: fortunately our monitors are two dimensional, so are our pointers, so if anyone wants to make the first options stick, they can easily do so.

Also, the short term decision is more about the current upload rather than the incoming product. Let's put these two under the product already in shop!

As for color code: I'd drop the red for "do not update". I have two reasons for that:

  • Red is a color to be used sparingly, when the operation in question is dangerous. Not updating a product right now doesn't have any dangerous consequences. At most, you lost a few minutes, perhaps half an hour from your life, and have to re-import, right?
    ...
    However, "Forget this product" is really hard to undo: sure,there'll be a menu for that, but it'll be a rarely used feature, you could expect support calls about it as users won't find it (I'm not sure they'll be aware that it does exists), and they'll have to do a re-import after anyway.
  • If we drop this notion, we could also say that from three or more options, there should be only one, single primary action, so that the user knows which one is preferred. Otherwise it just looks like a parrot's feathers, right?

I hope you like this idea, what's your opinion?

1
  • I quite like this solution - I think that's definitely the one to go with if we were designing the thing from scratch. One thing that bothers me is whether this new layout doesn't sort of break "backward compatibility"? Is it obvious for user which option was which before they upgraded the app? You're right about the use of red, too; unfortunately that's crude convention used everywhere in the app. Red simply stands for "no", even if there is nothing warning nor alarming about this "no" . For now I'll wait and see if any other answers come up throughout the weekend, thanks for looking into it Sep 1, 2012 at 12:00

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.