The regular submit buttons of seven theme are almost white. While this looks nice, they could be a bit darker to stand out more from the background.

CommentFileSizeAuthor
#13 Icon-lighter.png6.07 KBeigentor
#14 icon-darker.png9.38 KBeigentor
#5 buttons-darker-font.patch594 byteseigentor
#5 buttons.png892 byteseigentor
#5 Screenshot-458.jpg27.37 KBeigentor
#5 Screenshot-457.jpg27.06 KBeigentor
submit-button.png44.31 KBeigentor
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

heather’s picture

heather CreditAttribution: heather commented
Title: Submit buttons of seven do not jumb to the eye enough » Submit & Save buttons light grey, not noticeable

I thought a different title might help?

Light grey often denotes disabled functionality. This may mislead the user.

eigentor’s picture

eigentor CreditAttribution: eigentor commented

Some of the bottons are blue (upper right save button on node form). Is there an explicit concept as to which button gets blue and which doesn't? Apart from making the gray buttons a little darker, IMHO the main submit button should always be blue.

seutje’s picture

seutje CreditAttribution: seutje commented

subscribe

I wouldn't go for blue, as this would clash with the rest of the theme, but it could definitely use some depth

in addition, when making a button disabled in seven, NOTHING changes, it looks the same, and when u click it, it'll look exactly like it would look if one was to click it without it being disabled, xcept nothing happens... huge WTF!

see style.css lines 552-584, mainly:

input.form-submit {
    color: #5a5a5a;
}

input.form-submit:active {
  background: #666;
  color: #fff;
  border-color: #555;
  text-shadow: #222 0px -1px 0px;
}

unfortunately the :disabled pseudo selector is CSS3 and obviously won't work in all browsers, and neither will [disabled] so I'm affraid we'll need to slap a class on disabled inputs if we don't do that already

Bojhan’s picture

Bojhan CreditAttribution: Bojhan commented
Status: Active » Closed (works as designed)

This seems by design? I dont think this will really be a problem

eigentor’s picture

eigentor CreditAttribution: eigentor commented
Status: Closed (works as designed) » Active
FileSize
Screenshot-457.jpg27.06 KB
Screenshot-458.jpg27.37 KB
buttons.png892 bytes
buttons-darker-font.patch594 bytes

Well, for me this still should be optimized. When you scan across the page, you hardly notice the buttons. Actually people find them, but it would help to find them more easily.

Replace buttons.png in themes/seven/images with attached file and apply the patch to make the button text a little bit darker accordingly gives the second screenshot. This is a rather soft change, for me personally it could be even more.

I still lobby for blue (only if there is one main save button), but a least a darker grey.

Before

Before

eigentor’s picture

eigentor CreditAttribution: eigentor commented
Status: Active » Needs review

set status to needs review

Dries’s picture

Dries CreditAttribution: Dries commented

I don't see a difference in the screenshots in #5? In a lot of the administration screens, the buttons are not the main 'attraction' so it might be OK for them not to stand out. For example, on the screens you used, the focus is not on the filters, but on the table below the filter.

seutje’s picture

seutje CreditAttribution: seutje commented

I'd just like to point out this might cause a lot of annoyance for people who do a lot of fancy js stuff with their forms, as disabled buttons look exactly the same as enabled ones

or should I make a separate issue for that?

Bojhan’s picture

Bojhan CreditAttribution: Bojhan commented
Status: Needs review » Closed (works as designed)

As said before, and Dries hereby confirmed it - this is really by design.

eigentor’s picture

eigentor CreditAttribution: eigentor commented

@bojhan, please stop closing this issue. It won't be cluttering the issue queue that badly. You don't find it that important, I do. If five more people comment that this is nitpicking and useless, I am fine. But not as only three people have commented, I'd like to have some more eyes on this.

There are examples of forms where the submit button stands out very much, some make it even red. Lots of possibilities from invisible to dominant.

Even though mark may have made them like this in his layout, they may not be optimal. Especially in the small nitty-gritty typography and single elements like these the final implementation may differ from the layout and for good reason.

@seutje actually I think there is a look for disabled buttons: the delete button on the node add/edit form looks to me like a disabled button could look like. But probably a seperate issue would be good since this needs a little code to enable themers to give a disabled button a different look. Or is the disabled state already there in code and nust needs the button?

@dries well I deliberately made the difference not very strong, could do more. Maybe my old CRT screen is tricking me again because it has lower contrast and more difference in midtones. Ah, now being on a notebook screen the original buttons look darker - well still we should optimize them across screen types. Some have softer gamma...

Yes, maybe I did not choose a good example and should rather choose one with one submit button at the end of a big form, there the button can use more weight. Still probably we should stick to one grey and the blue not to confuse people. Maybe not. Have to study different web applications how they handle buttons and if more than two colors are justified or confusing.

eigentor’s picture

eigentor CreditAttribution: eigentor commented
Status: Closed (works as designed) » Active
mcrittenden’s picture

mcrittenden CreditAttribution: mcrittenden commented

I agree with Bojhan that this is not an issue. They're big and round and have large text, so that alone should be enough for them to say "click me". But that's just another opinion, and user testing might prove me completely wrong.

eigentor’s picture

eigentor CreditAttribution: eigentor commented
FileSize
Icon-lighter.png6.07 KB

O.K. this probablay a bit of an edge case because probably more than 80% of the people will be on a TFT screen that shows the original button darker and hardly a difference between the two.

Hard data: in the darkest spot the old button is #ededed and on the darker one #dadada

So if TFT onviewers do not see a difference anyway: commit the image provided in #5 and tht slight css change and I am fine :)

To give you an impression of how it looks on my screen, and sure quite some more: wide gamut, professional graphics screen or just different gamma setting. With a growing trend since color display of screens becomes better and better.

I tried to mimick it by egaggerating the color difference a bit:

Original

Proposed Solution

eigentor’s picture

eigentor CreditAttribution: eigentor commented
FileSize
icon-darker.png9.38 KB

the other image...

mr.baileys’s picture

mr.baileys
Primary language Dutch
Location 🇧🇪 (Ghent)
CreditAttribution: mr.baileys commented

Not a duplicate but related to this issue: #544398: Delete buttons look disabled in Seven theme even though they're not

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented
Status: Active » Closed (won't fix)

With many months of no updates and no significant UX issue endorsed I think we can close this out. Time will tell of course, possibly, so perhaps at some later stage (D8) we might revisit this issue.