James Graham [:jgraham] Reporter
	Description • 9 years ago

There seem to be at least three different styles of buttons in use and it's not really clear why. The blue "edit" button, the grey "stop following" button and the flat, white, buttons used elsewhere.

In addition, the buttons are all different sizes and, in the case of the Edit / Stop following buttons, different heights, even though they are on the same line. This looks visually messy (also "Stop following" should have a capital "F").

The text on the buttons also seems to be both bold and using text-shadow, which tends to obscure the letter shapes, making it harder to read.

	:glob ✱ Assignee
	Comment 1 • 9 years ago

(In reply to James Graham [:jgraham] from comment #0)
> There seem to be at least three different styles of buttons in use and it's
> not really clear why. The blue "edit" button, the grey "stop following"
> button and the flat, white, buttons used elsewhere.

this is by-design.

blue buttons are important actions, which is why they are larger and stand out more - "edit" and "save changes".
gray buttons are actions which perform an immediate action or take you to another page.
white buttons perform an "in page" action.

> In addition, the buttons are all different sizes and, in the case of the
> Edit / Stop following buttons, different heights, even though they are on
> the same line. This looks visually messy 

sure, i can play around with making the buttons the exact same size.

> (also "Stop following" should have a capital "F").

totally fixing that one.

> The text on the buttons also seems to be both bold and using text-shadow,
> which tends to obscure the letter shapes, making it harder to read.

we can address that one in bug 1146913.

	James Graham [:jgraham] Reporter
	Comment 2 • 9 years ago

(In reply to Byron Jones ‹:glob› from comment #1)
> (In reply to James Graham [:jgraham] from comment #0)
> > There seem to be at least three different styles of buttons in use and it's
> > not really clear why. The blue "edit" button, the grey "stop following"
> > button and the flat, white, buttons used elsewhere.
> 
> this is by-design.
> 
> blue buttons are important actions, which is why they are larger and stand
> out more - "edit" and "save changes".
> gray buttons are actions which perform an immediate action or take you to
> another page.
> white buttons perform an "in page" action.

So having a couple of styles are probably OK. But there are several problems here:

* The grey next to the blue makes it look like the grey ones are disabled.
* The blue ones being bigger just looks messy; they don't need to be both bigger and a different colour.
* The flat white ones don't look like buttons at all and don't match the (good) use of gradient in the other buttons
* The distinction between what's white and what's grey doesn't make much sense. For example "new bug" creates a popup which is something that happens entirely in-page, although then clicking one of the actions actually causes a navigation. Also, in general the navigation / no navigation distinction is an implementation detail that doesn't need to be exposed to the user.
* Three styles is just confusing; most apps get by fine with one style for enabled buttons and one style for disabled buttons. Some, like GitHub, also have a "this in an important button" style. Having lots more is just adding cognitive burden.

	:glob ✱ Assignee
	Comment 4 • 9 years ago

thanks for the feedback james.

- use two instead of three button styles
- adjust the styling of the minor buttons so they doesn't look disabled
- use consistent font size and padding on major and minor buttons
- move the 'following' button to the 3rd row (between clipboard and expand)
- fix capitalisation on 'stop following' button

To ssh://gitolite3@git.mozilla.org/webtools/bmo/bugzilla.git
   0f2b779..48c23b1  master -> master