627932 - design Getting Started/Tour page

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[John Slater]

For now, just a placeholder bug. Kickoff meeting with Sean, Grace, Anthony & me scheduled for next Tuesday.

Comment 1

[Anthony Ricaud (:rik)]

Just so I can run some ideas in my head, we are talking about the new version of http://www.mozilla.com/en-US/firefox/central/ , right ?

Comment 2

[John Slater]

(In reply to comment #1)
> Just so I can run some ideas in my head, we are talking about the new version
> of http://www.mozilla.com/en-US/firefox/central/ , right ?

Exactly. Same basic concept, but we want to use the latest web technology to show off the content in a more engaging and dynamic way. (Tricky part: we'll also need to have a graceful fallback to a non-HTML5 option, because there will be versions of this page for Firefox 4 users and people who are on older browsers.)

Comment 3

[Anthony Ricaud (:rik)]

Yeah, tricky part, I envy the guys doing the in-product pages :)

For inspiration, I really like the Features section on http://panic.com/transmit/ (sadly best viewed in Safari)

Comment 4

[John Slater]

(In reply to comment #3)
> For inspiration, I really like the Features section on
> http://panic.com/transmit/ (sadly best viewed in Safari)

Yep, the Panic stuff is great and is a good reference point for sure. I think we can do even better, though!

Grace sent me a couple of slides to get the content discussion started. Let's plan on reviewing these when we have our kickoff meeting tomorrow.

Comment 5

[John Slater]

Attachment: Getting Started content #1

Comment 6

[John Slater]

Attachment: Getting Started content #2

Comment 7

[John Slater]

Attachment: Getting Started copy #1

Hey Sean. Attached is my first pass at the copy for the Getting Started page. I'm sure there will be edits along the way, but this is definitely close enough for you to, um, get started.

About the schedule: we basically need to have the design and development of this page finished by the end of next week, so it's important to get even a rough prototype over to Anthony as soon as possible.

PMMs, please review this copy doc when you have a chance. It's similar to what we discussed earlier, but I tried to reduce the content when possible (basically linked off to existing pages rather than recreating all the info here).

Comment 8

[John Slater]

Removing the "Fx version" from the bug title. Grace & Mayumi, please correct me if I'm wrong, but didn't we decide on only having one version of this page for now?

Comment 9

[Sean Martell]

Getting Started page design
----------------------------------

PSDs:
http://mozilla.seanmartell.com/engagement/mocodotcom/FINALS/getting-started.psd

Preview JPGs:
http://mozilla.seanmartell.com/engagement/mocodotcom/getting-started.jpg

Feature Hover Tip:
http://mozilla.seanmartell.com/engagement/mocodotcom/getting-started-2.jpg

Feature Description Box:
http://mozilla.seanmartell.com/engagement/mocodotcom/getting-started-3.jpg


---------------------------------- 

Anthony, Potch: the hover mouseovers and popup decription boxes on this page will be the same as the interaction on the firstrun (https://bugzilla.mozilla.org/show_bug.cgi?id=623804) tour section. Probably best to make the code identical to avoid 2x the solutions.

Popups for the tips could use similar CSS to what I coded for Fennec's UI here, perhaps with a little extra love given to the arrow to match proper bevels/shadows:
http://mozilla.seanmartell.com/fennec/fimo/androidUI/index.html

Note: some of the blue popup tips will need to expand downward with the arrow pointing up (opposite of the sync example shown)

questions/concerns/excellent recipe for key lime pie - please contact me.

Comment 10

[Sean Martell]

One other note:  this is the initial design.

Depending on OS and what tooltip they hover over, we'll need to add in many screenshots of the UI in its different states + each OS will need its own dotted line based on UI element placement.

Once the framework gets built, we should make a full list of assets needed and the proper screenshots per tip/feature/OS.

Comment 11

[John Slater]

Thanks Sean.

Re: both FR & GS, I really like the way the little popup descriptions open up on this site: http://desandro.com/portfolio/ - a bit of subtle panache beyond just having it open up all at once.

Also, re: GS, the content is still somewhat in flux. The basic concept is definitely solid, but some of the specific features being called out may change (a bit). Will know for sure tomorrow.

Comment 12

[Anthony Ricaud (:rik)]

Some notes, thinking out loud:

- The blur effect when a popup is open will only work on Firefox 3.6+ (cause it uses SVG filters). And I think it's very distractive. It was used in some Firefox4 betas for the JS alert() function but they switched to a semi-transparent effect. Type 'javascript:alert("foobar")' in today's nightly to try it.

- Do we already have something that behaves like the arrow/popup transition? The Desandro popup looks cool but I feel like the white square should expand into the blue one with a color/shape transition. Maybe we'll need to make the shapes a bit more "squary" to do this kind of transition.

- Should we use a blue shadow for unread arrows, like the one in the "instructions"? Maybe use a glowing effect by expanding and shrinking this shadow?

- Where is the role of the links inside the browser window? (Getting started, Meet the new UI, …) Do something on the current page or go to another page?

- Same question with the links at the bottom.

I'm not sure all the stuff I'm proposing are doing in a "kind-of-cross-browser" way so don't take it for granted.

Comment 13

[Sean Martell]

a few responses:

- I'd like to try the blur effect if we can. There is also a white tint so it isn't full contrast, to fade it back further.

- I don't think we'd need to lose border-radius for the popups to work. I had a go at something similar (http://mozilla.seanmartell.com/popup/) and it should work fine with the arrow appearing.

- for read arrows, their bg color could be changed to a light grey instead of white.

- the links in the browser cause the large white box popup as seen in getting-started-3.jpg

- links at the bottom are alternate on-click ways to open the top nav, redundant interaction method for folk who don't get the hover.

Comment 14

[John Slater]

Thanks guys. Anthony, please proceed full speed ahead as much as you're able to, but I'm also going to set up a quick phone call so we can talk through anything that needs to be discussed in real time.

Comment 15

[Anthony Ricaud (:rik)]

A few notes from yesterday call.

- Let's try to use SVG for the dashed path. It won't be displayed on IE<9 and other old browsers but it will be easy to modify on the fly for various OS screenshots.
- Have a kind of JSON to store arrows placement that can also be used for the SVG generation.
- Try to use two PNGs for the arrow: a blue and a white version. When opening/closing an arrow, transition their opacity while changing the shape and colour of the rest of the box.

Comment 16

[John Slater]

Attachment: Getting Started copy #2

New copy doc, changes in red. Sean, let's discuss today. Thanks!

Comment 17

[Anthony Ricaud (:rik)]

A first test with SVG. Drawing paths is really cool.

http://ricaud.me/mozilla/getting-started-svg.html

Comment 18

[John Slater]

very nice!

Comment 19

[Potch [:potch]]

Anthony, that's pretty excellent! Are you generating the svg from the interest points yet? or is that hard-coded?

Comment 20

[Anthony Ricaud (:rik)]

Still hard coded as I was experimenting with path drawing in SVG. We'll need a couple more points to make the curve smoother but I'm pretty happy with this first try.

Comment 21

[Sean Martell]

Latest design tweaks uploaded.

Please review links in comment #9 for updated assets (JPGs and PSDs).

Comment 22

[John Slater]

Thanks Sean! Anthony, let us know if you have any questions.

Comment 23

[John Slater]

Resolving this bug...let's move further discussion to bug 623808. Thanks!