There are a number with the discount screen, some of them can be solved by tweaking but most of them are related to the options available being not sufficient for the usecases people image. I think long term we need to consider whether we can either work on fixing the rules UI or find a way to expand the functionality here.
In terms of functional issues I tried to solve:
Because there is no visual signage, people are surprised there is a date picker.
People are a bit confused by the % off, enabled/disabled buttons. They visually don’t give the idea you can click them.
I did this by slightly changing the visual styling and adding a radio button in the clickable area, this should give the affordance we need and icon in the date field.
I am not totally happy with the visual styling, the styling of radio buttons create an imbalance. However, for now I am satisfied with pushing this further - I will revisit the styling if I find the time.
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | Capture d’écran 2012-08-09 à 10.33.25.png | 59.59 KB | cookiz |
| discounts.psd | 10.37 MB | Bojhan | |
| discounts.jpg | 155.42 KB | Bojhan |
Comments
Comment #1
aleighs commentedI think moving forward with this as a layout is fine. I'm a bit skeptical of the status being floated to the right of the title, I think that is very uncommon and could be easily missed. Unless we have tested this pattern before, I'd prefer to see it aligned left.
Originally this was going to be a highly designed screen with icons for each of the options etc. Obviously we don't have time to design something like that at this point.
So we have two options :
1) Just leave it as a default form, meaning not a lot of design. No gray/blue backgrounds on the radio options
- Just make the design change of making sure there is a date-picker icon in the date fields (let's make sure this is the same date picker icon as used elsewhere on the site)
2) We move forward with this, and I agree, I think it would work best with them aligned horizontally. The main thing is that the design pattern we implement be extensible to at least 4 options, since that what was originally spec'd out.
I'd also wonder if changing the labels might help here. Instead of having the euro and percent sign, would it make more sense to have "Dollar amount off" and "Percentage off"
Comment #2
bojanz commentedTagging.
Assigning to Bojhan so that he replies.
Comment #3
Bojhan commentedAhh sorry, I thought you where going to implement following allison's pointers. I wanted to create a new position for the enabled/disabled select list, it doesn't make much sense at the bottom of the page - lets revisit this issue later.
I would vote going for 1).
1) I agree with allison her comments, I struggled making the backgrounds work - its such a unique element. The date-picker, definitely needs to be there - I used the jQuery picker.
The $ and % should be easier to scan, than textual representations.
Comment #4
Bojhan commentedCode :)
Comment #5
cookiz commentedAccording to this issue I've update the UI for Commerce_discount #1719330: Redesign discount screen
and update our admin theme to fit this fresh update.
https://code.drupalcommerce.org/292
Comment #6
bojanz commentedMerged the current code.
Changes needed:
1) "Choose discount type" should be the same size as "Choose offer type"
2) The icons in the date pickers should be as on the design (and the date pickers on the order page should be the same, if they are not)
Comment #7
Bojhan commented1) I am not sure about this one, it should then also have a
. It looks quite wierd when there are two types of headings.
2) You can just use jQuery UI icons and grayscale them. If this doesn't work, let me know.
Comment #8
cookiz commentedhttps://code.drupalcommerce.org/297
New screen.
Comment #9
cookiz commentedComment #10
bojanz commentedMerged.
Comment #11.0
(not verified) commentedUpdated issue summary.