8

In a shopping cart, items can have a discount, but if a users asks for an express delivery on a specific item, the discount will change. I need to make them aware of that.

1 item = 1 line. The promotion is displayed on the line and the user can use a checkbox at the end of the line to tell if he wants an express delivery on the item (see mockup below).

cart mockup

The solution I thought of would be to display a pop-up window when the user select the "express" checkbox to tell him the promotion will change. To avoid having a pop-up all the time, a "don't show me this again" checkbox would be available but will it be clicked ?

Improve this question
6
  • 5
    I will add a discount column just next to check box which will calculate and update discount dynamically upfront with some animation(fade in/out) to depict some action on the screen. You can also add tooltip on the discount stating the impact if some one select express delivery.
    – UXbychoice
    Aug 19, 2014 at 9:05
  • Prompting a pop-up right after a user clicks on a checkbox will probably end up in click-aways instead of reading the popup due to 1) popup click away mentality 2) unfamiliar behavior since checkboxes don't evoke popups in general.
    – Alexej Froehlich
    Aug 19, 2014 at 9:21
  • Apologies for not answering the actual question, it's a little difficult to know whether the "discard this message" would be noticed without seeing the layout of that error, if you have a wireframe of that it'd be good to see! :)
    – TJH
    Aug 19, 2014 at 9:26
  • 1
    The "no discount" message shouldn't get in the way of the user, which a popup window would do; but the discount column should change enough for the user to notice even if he's focusing on the urgent box. I'd put a nice green icon in the background of the discount column (good things should be green rather than red anyways), which changes to a red icon when urgent is checked. Make sure these icons have easily distinguishable outlines for the benefit of color-blind.
    – Guntram Blohm
    Aug 19, 2014 at 11:39
  • 3
    This isn't an answer to your question, but in general, "don't show this again" checkboxes are horrible UX. They offer the user no idea of how to undo the change or if it's even possible to undo, and thereby make a cautious user scared to use them. A much better design (in general, not for your specific use) is to provide a direct link to the config window where the option can be changed, so the user knows where to go later to manually change it.
    – R.. GitHub STOP HELPING ICE
    Aug 19, 2014 at 14:38

3 Answers 3

Reset to default
7

I think what we can first look at here is any other options besides your popup. A couple that spring to mine quickly are:

1 - A dismissible warning above the cart - offering full cart scope - "Promotional items are no longer discounted when Urgent Delivery is selected". If this isn't prominent enough a dismissible (or, I guess, timed, but personally I don't so much like these) in a more obvious place - i.e. single row context and placed above the row. These should be highlighted using colour or type. (i.e. make it amber, or bold, or something)

2 - if that can't be done, or if you prefer, why not use a bit of iconography in the column where the promo % goes? You could do something like the below which I very quickly but together and isn't very good! If this isn't enough some explanation could be made available via a tooltip/link whatever you see fit

No product discount available

Also, if I might be cheeky, and this is only a personal preference; I think "N/A" or even better "None" is more descriptive than a "-" in the non discounted rows. Or even a blank cell. That's just me though!

Improve this answer
3

In addition to the suggestions offered by TJH, I would suggest another approach: blink the "discount" cell background in a different color when the value changes because of some (intuitively unrelated) other action taken by the user, such as selecting express delivery, to draw their attention to it in a non-intrusive way.

You could also add a message bar somewhere explaining what happened, but please take care that the page doesn't shift around because of it. There are few things more annoying than losing your aim with the mouse because the entire page shifts when you do something, and at least I always find myself wondering whether I ended up clicking in the correct place.

I would even go as far as saying that modal operation should generally be avoided where possible.

Improve this answer
1
  • +1 for the page shifting, especially frustrating on mobiles!
    – TJH
    Aug 19, 2014 at 15:17
2

I suggest that you use modeless feedback, as defined by Alan Cooper in his book About Face 2.0 :

Feedback is modeless whenever information for the user is built into the main interface and doesn't stop the normal flow of system activities and interaction.

There are already some suggestions for modeless feedback e.g. @HEM, but I will give you my suggestion too.

Place "urgent" and "promotion" as close as possible. When the Urgent is changed make a fading flash or blink on the promotion field, change the color and the value of the promotion field, and display a yellow text box just above the labels (do not hide design elements) with the appropriate message e.g. "Urgent does not have promotion". Keep the yellow box for a few seconds and then gradually fade it away. You can display this message only for the first one or two "urgent" clicks of the order.

Similar messages are given at gmail :

gmail message

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.