791248 - Add start page alerts

Status: RESOLVED DUPLICATE of bug 651230

(support.mozilla.org :: Knowledge Base Software, task)

Description

[Kadir Topal [:atopal]]

Our previous design had the option to include an alert on the start page that would be used in certain situation or for certain browsers. For example, we need a way to tell users of older plugins etc to update their plugins immediately. Part of this is covered with the Hot Topics, but we are looking for a way to reach people that is much more prominent and will only be used when something requires us to alert users.

Comment 1

[Ricky Rosario [:rrosario, :r1cky]]

Can we get a list of the specific use cases this will be used for? I know we had a way to detect users on unsupported browsers, for example. Instead of using showfor for this like before, this should be built in to our software.

Comment 2

[Verdi [:verdi] Best to slack me]

Actually I think Hot Topics is good for most things. They are very visible. The one thing we lost was the ability to warn people about an out of date Firefox - Hot Topics don't address that. Also having a warning that is sitewide would fix the case that the old warning was only visible on the start page and not everyone starts there.

So maybe this only needs to be a your-firefox-is-out-of-date warning?

Comment 3

[Matt Grimes [:Matt_G]]

Actually I think a global alerts system is definitely something we should consider. The hot topics section is something that could be missed and if we have an important message we want it to be extremely visible. I've seen these global messaging systems used for a lot of things, but here are a few use cases I can see that are more SUMO specific:

* Your browser is out of date. Please update.
* Java version X is no longer secure. Please update.
* Firefox version XX.0.1 was just released to address issue XYZ. Please update immediately.

Comment 4

[Bram Pitoyo [:bram]]

Placement-wise, I think that this alert box should be put up above the Help Topics. Style-wise, I think it should be a callout box with a white background surrounding it. I’m going to put up a few examples in the next round of attachments.

Comment 5

[Bram Pitoyo [:bram]]

Attachment: Start page alert: upgrade Firefox

Green button should be used for any action related to downloading.

Comment 6

[Bram Pitoyo [:bram]]

Attachment: Start page alert: upgrade Java

Comment 7

[Bram Pitoyo [:bram]]

Attachment: Start page alert: check plugins

Blue-colored buttons are used to indicate important informations that aren’t related to search or download.

Comment 8

[Bram Pitoyo [:bram]]

Attachment: Start page alert: survey

For non-important actions, like this hypothetical survey I’ve put up on the front page, we use white-colored buttons.

Comment 9

[Verdi [:verdi] Best to slack me]

The white background makes it look like any other content area. Is there some way to distinguish it from everything else?

Comment 10

[Bram Pitoyo [:bram]]

Attachment: Start page alert: upgrade Firefox (yellow background)

(In reply to Verdi from comment #9)
> The white background makes it look like any other content area.

Maybe we could try using the warning box style: the same one that’s found on article pages?

Comment 11

[Kadir Topal [:atopal]]

Bram, I think that's the right way to go. Also, it might be my monitor, but the contrast in that warning box style is so low that it just looks like a very light yellow. Since this is for really serious warnings, it might be useful for the background stripes to really stand out and draw attention.

Comment 12

[Bram Pitoyo [:bram]]

(In reply to Kadir Topal [:atopal] from comment #11)

Thanks for this feedback! I will investigate the use of a better highlight color.

If I found something awesome, it’s possible that this color will also be applied to the aforementioned article page warning box. The idea is to make the site’s color scheme as consistent and as easy to maintain in the CSS as possible.

For your reference, here are some options from the Style Guide that I will be considering:
http://www.mozilla.org/en-US/styleguide/websites/sandstone/colors/
http://www.mozilla.org/en-US/styleguide/websites/sandstone/buttons/
http://www.mozilla.org/en-US/styleguide/identity/firefox/color/

Comment 13

[Bram Pitoyo [:bram]]

Attachment: Start page alert: upgrade Firefox (yellow background)

This is the start page alert with a more contrasting yellow background.

If we like it, we should use it on the article pages, too, for consistency.

The new background color is #fffad7
The new border color is #faf0cc

And the new stripe background can be found at:
http://people.mozilla.com/~bpitoyo/sumo/warning-stripes.png

Comment 14

[Bram Pitoyo [:bram]]

Attachment: Private browsing article page (yellow background)

Note how the style of the div class "warning-box" has been made consistent with one found on the start page.

Comment 15

[Verdi [:verdi] Best to slack me]

That yellow looks great to me.

Comment 16

[Kadir Topal [:atopal]]

Thanks, Bram! This is great, even on my monitor :)

Comment 17

[Ricky Rosario [:rrosario, :r1cky]]

2012Q4 is in the past. Moving on to the future!

Comment 18

[Ibai Garcia [:ibai]]

With the more limited scope (because of Hot Topics), I'm proposing this to be closed as a duplicated of this other bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=651230

Reopen if there still something else missing.