Alex Faaborg [:faaborg] (Firefox UX) Reporter
	Description • 17 years ago

Do we want to refresh the appearance of messages shown in the content area (no internet connection, RSS preview, SLL errors, browsing an FTP server) in Firefox 3?

Also, do we want to theme these messages for each platform, beyond the yellow exclamation point triangle icon being used?

Personally I'm in favor of transitioning all of these messages to door-hanger notifications off of the favicon button, to be more consistent with where Firefox addresses the user.  But since we probably aren't going to do that, do we want to consider a visual refresh of content area messages?

	Alex Faaborg [:faaborg] (Firefox UX) Reporter
	Comment 4 • 17 years ago

I should note that I think the new FTP interface is fantastic, I'm just talking about our choice of visual elements that are consistent across the messges:

-background color
-forground color
-curved edges

etc. 

	Daniel Veditz [:dveditz]
	Comment 5 • 17 years ago

the plain-gray backgrounds are boring, can't we make these pretty? Here's an extreme example, but maybe even just a nice solid background color would be nice.

	Nelson Bolyard (seldom reads bugmail)
	Comment 6 • 17 years ago

Thanks, Dan!  Pastels make me want to run away screaming.

	Alex Faaborg [:faaborg] (Firefox UX) Reporter
	Comment 10 • 17 years ago

I was thinking about maybe trying to use SVG to do extremely large high res single color icons in the background, with a slight transparency on the message.  I'll try a quick mockup.

	Alex Faaborg [:faaborg] (Firefox UX) Reporter
	Comment 11 • 17 years ago

Here is what I was thinking of, although I would probably reduce the contrast between the large icon and background even more.

	Alex Faaborg [:faaborg] (Firefox UX) Reporter
	Comment 12 • 17 years ago

I a little wary of using the Firefox logo since the most common content area message is "can't connect to server".  We have also apparently added a bunch of SLL errors in content area messages. Constantly showing the huge logo directly next to failing feels like bad move for the brand.

	Dão Gottwald [:dao]
	Comment 15 • 17 years ago

The problem with transparency is that (after assigning a native color like -moz-field) you would have to get the computed style and convert the background color from rgb($r,$g,$b) to rgba($r,$g,$b,0.7).

	Dão Gottwald [:dao]
	Comment 16 • 17 years ago

(In reply to comment #15)
> The problem with transparency is that (after assigning a native color like
> -moz-field) you would have to get the computed style and convert the background
> color from rgb($r,$g,$b) to rgba($r,$g,$b,0.7).

OK, this is solvable with theme-only code (i.e. -moz-binding with a data: URL).

	Dão Gottwald [:dao]
	Comment 17 • 17 years ago

I think I like the more vibrant Firefox logo better.

It's nice to have a visual clue that separates feeds from similar browser-generated pages, but IMHO the normal-sized feed icon in the foreground already does that better than a faint background image would.

	Alex Faaborg [:faaborg] (Firefox UX) Reporter
	Comment 18 • 17 years ago

What about something like the iso series icons by Tom Nulens http://www.istockphoto.com/file_closeup/style_and_design/icons/icon_sets/2761968_media_communication_iso_series.php?id=2761968

I really like how he turns normally flat icons into three dimensional shapes.

Background image aside, the corners for the Web feed page should be either rounded or straight, mixing feels odd.  Also, I'm personally not a big fan of the yellow.

	Daniel Veditz [:dveditz]
	Comment 19 • 17 years ago

Another problem with using the logo in this way is that putting things on top of the logo and using the logo in washed-out colors both seem to violate our own trademark logo-use guidelines. The logo was my first thought, too, but I went with the Gran Paradiso poster instead to avoid these issues. Plus, it seemed a shame to let such a nice image go to waste once we shipped.

Doesn't necessarily need to be a background image, but there needs to be some design element and color to these pages.

The feed page is more complex and more focused on the content, it doesn't need quite as much work (something like the Gran Paradiso poster might be too distracting).

	Alex Faaborg [:faaborg] (Firefox UX) Reporter
	Comment 23 • 17 years ago

>netError with fading curve

Beltzner and I have been discussing various metaphors we could use for online and offline applications, and I've been arguing for the use of the day/night metaphor.  So for instance the popup notification for allowing a web app to store offline data might contain an icon of a crescent moon (a little bit of day during the night).  Obviously you can be online at night, but it's just a metaphor to nature folks :)  I should note that beltzner still doesn't like the idea that much.

Anyway, the reason I'm bringing this up is because I really like the netError with a fading curve.  It is reminiscent of an eclipse, and the entire back of the planet is dark.  Perhaps we could use the grey color scheme you have here for XP, and actually use black with white light for OS X and Vista?

	Dão Gottwald [:dao]
	Comment 24 • 17 years ago

(In reply to comment #23)
> Obviously you can be online at night, but it's just a
> metaphor to nature folks :)

Windows 95 or something like that used the night metaphor for shutdown, as far as I remember. With that in mind, I think your idea *could* work out, although I'm not convinced that it *will*.

> Perhaps we could use the grey color scheme you have here
> for XP, and actually use black with white light for OS X and Vista?

Can you specify this? I actually used pure black and white, but not at full opacity.

I must say, even though it was only a sketch, I'm a little bit in love with the globe in its present form. The blue shine feels refreshing and it seems do well on all current browser-generated pages. The curve wouldn't work for feeds and FTP, I think.

	Dão Gottwald [:dao]
	Comment 25 • 17 years ago

using the Luna theme this time

	Dão Gottwald [:dao]
	Comment 27 • 17 years ago

not necessarily the final appearance but good as a starter, imho.

	Alex Faaborg [:faaborg] (Firefox UX) Reporter
	Comment 28 • 17 years ago

I think this is looking really good.  Out of curiosity, could we see what a monochrome globe looks like, using only colors in a range similar to the background?

	Dão Gottwald [:dao]
	Comment 29 • 17 years ago

(In reply to comment #28)
> I think this is looking really good.  Out of curiosity, could we see what a
> monochrome globe looks like, using only colors in a range similar to the
> background?

I could create such an image quite easily for a specific background, but in general the background color depends on the OS theme. Let me know if you'd like to see a mockup anyway.

	Mike Beltzner [:beltzner, not reading bugmail]
	Comment 30 • 16 years ago

Comment on attachment 284616 [details]
netError with globe (content background less transparent)

I think that the graphic just adds visual complexity without actually adding any information.

What we want to do here is actually improve the ability for the user to discern the important information from drill-down detail, and promote the actions. We also want to make it look like a system dialog, so perhaps some degree of OS-specific styling is appropriate (and now easier thanks to things like border-image).

I think the best way to approach this is with judicious use of:

 - font size & weight
 - spacing
 - fore and ground shading

	Johnathan Nightingale [:johnath]
	Comment 31 • 14 years ago

Dup'ing this off to the newer bug since that one links to updated mockups, and has an updated list of pages impacted.