862361 - Prototype/redesign webmaker-nav for Thimble, Popcorn, Webmaker.org

Status: RESOLVED FIXED

(Webmaker Graveyard :: General, defect)

Description

[inactivate account for kate]

The new webmaker-nav should account for:

- Access to dashboard
- Sign-in/sign-up 
- Tabzilla

We will no longer need a space for badges, although eventually there should be a way to indicate notifications.

The left side might need some re-thinking about functionality that makes sense on a per-app basis.

Comment 1

[Ross Bruniges [:boozeniges]]

So if possible I would recommend not putting any per-app stuff into the webmaker nav, I believe this was one of the failures of the last version; trying to put too much into it.

IMHO - this is a global nav so other than displaying user specific data it should be identical across all the sites using it.

We can have per-app stuff but maybe in a section underneath the nav opposed to in it?

Comment 2

[inactivate account for kate]

Ross, I agree, we probably want to keep this as small as possible. I don't like the navigation stuff on the left side we have right now.

Comment 4

[Mike Beltzner [:beltzner, not reading bugmail]]

Please also see http://webmakerv2.tumblr.com/post/48229730654/here-are-some-initial-wireframes-for-the-next as we'll want these navbars to be consistent with the initial site wireframes

Comment 5

[Cassie McDaniel [:cassiemc]]

Attachment: Progress report for in-tools Nav

Working on this, wrapping my head around the different interfaces for Popcorn and Tools and how the nav fits. Still thinking this through; this attachment outlines some of my thought process and anticipated changes. I've worked more on Thimble (above) than on Popcorn, so far. Old version on the left, proposed new one on the right. Any feedback welcome!

Comment 6

[Ross Bruniges [:boozeniges]]

This is cool Cassie, especially love that the titles now no longer look like links!

Am wondering if maybe the breadcrumb style separation between webmaker and thimble is working. Wonder if we need the 'back to' text (a bit confusing if you've come to the page directly) and if we could drop the tool logo into the same bar at the title?

This might work to allow us to make the logo a bit more prominent and enforce the fact that the thing that they're making is made with the specific tool.

Comment 7

[Ross Bruniges [:boozeniges]]

Also wondering about the removal of tabzilla. It's certainly a big pain in the **** in regard to the screen real-estate it uses but does the site feel 'Mozilla' enough without it?

Comment 8

[Cassie McDaniel [:cassiemc]]

Brilliant, thanks for the ideas Ross. Like it. Re. Tabzilla, It was getting busy up there in the header. If we remove the breadcrumb idea / move the tool logo next to title (I like that idea, would preserve the Mozilla-ness as we can make it a bit bigger and would be front and centre), that might give us more room; still, I wanted to make sure we keep that top nav bar as narrow as possible, and tabzilla sits a little bit tall.

Can anyone confirm if Tabzilla is required? I saw yesterday when posting this that it is listed above as a requirement from Kate, but in speaking to Kate day before yesterday she said maybe not so much.

Comment 9

[David Humphrey (:humph)]

CC'ing DavidA for some insight into "is Tabzilla required."  I know that Mozilla was trying to unify exposure to the top-level properties it has using this--Webmaker actually gets quite a bit of traffic as a result of it being used elsewhere.  I'm not clear on whether it has to be used, in what form (i.e., can it be stripped down a bit), etc.  David?

Comment 10

[Ross Bruniges [:boozeniges]]

http://www.mozilla.org/en-US/styleguide/websites/sandstone/tabzilla/ - provides no options for stripping it down.

So I don't believe Tabzilla is explicitly required - for instance the Firefox Marketplace don't use it (https://marketplace.firefox.com/) but my question was more around does the site look Mozilla enough without it? Are there other places that we can put the Mozilla logo more prominently?

Right now the only mention of Mozilla is in the tool logo (pretty small) and in the @mozilla in the footer - this might be intentional but being part of Mozilla is a big draw and if we're not using it all that we can that feels like a possible missed opportunity...

Comment 11

[Cassie McDaniel [:cassiemc]]

I hear you Ross. As you mention, Mozilla is on the tool logo, which is legible, which will be in the top centre of the page if we move it as you suggested. Can try to make it a bit bigger. Let's come back to this question upon next iteration, or if DavidA has input.

Comment 12

[Cassie McDaniel [:cassiemc]]

Attachment: Tools navbar v2

Updated comps. Still need to finalize the icons, and what happens when you click on certain things. But this version incorporates Tabzilla and seems to work for both tools. Feedback bar is now on the side.

Thoughts?

Comment 13

[David Ascher (:davida)]

tl;dr: IMO, tabzilla not critical, strong Mozilla association needed.

I don't speak with authority on this topic.  It seems to me that the primary purpose of Tabzilla is to facilitate cross-site navigation for people interested in what Mozilla is doing.

I can imagine that the current implementation of that goal conflicts with the need to present the webmaker offering, at the very least from a shared real-estate point of view.

My suggestion is to think about what the user might want, and to accommodate both the user who wants to know what Webmaker is, where they are, where they should go next, etc., as well as who Mozilla is and what they do.  My own take is that Tabzilla is a tool in that endeavor, not a diktat from a deity.

In particular, as long as the Mozilla association is clear, and that e.g. clicking on a Mozilla label leads to a useful place to find out more about Mozilla, that's likely ok.  If a naive user comes to the site and ends up not knowing that this is a Mozilla thang, and that there's no way for them to get to other Mozilla sites they might reasonably be interested in, then that wouldn't be ok.

I will say that on this mockup, the m brand in the top left is very much not Mozilla's -- it's Webmaker's logo.  Mozilla shows up in the tool name. Which begs the question -- would we host non-mozilla tools?  (don't know the answer).

The above is an IA point. Tabzilla serves related but distinct purpose, which is brand homogeneity.  In this (as in many Mozilla projects), there is brand conflict.  We want to promote a nascent Webmaker brand, with the sewn m logo; and we do want to leverage and build the broader Mozilla brand.  I do feel that the proposed mocks somewhat stumble on that point.

As a non-fictional example -- we'll be going in places and telling the Mozilla story using parts of the story that draw from the Webmaker tools, and part from the FirefoxOS story, building on an existing brand trust which emerges out of the Mozilla and Firefox brands.  Having the mozilla wordmark fairly prominently displayed in the tools feels like a win for all, as long as it can not "get in the way".

I'm not a designer, but part of me wonders whether there's a way to do breadcrumbs which represent that:

mozilla > webmaker > thimble

(but don't take that literally -- we don't want people who want to "go to the home page" to end up on the mozilla.org home page).

Comment 14

[Cassie McDaniel [:cassiemc]]

David, thanks for the thoughts. Helpful. Do the revised comps do this a little better? Note they do include tabzilla.

Comment 15

[David Ascher (:davida)]

Sure, the revised comps do that better (obviously, given you kept (a sligthly weird) version of tabzilla ;-).  But for example it's not IMO a strict requirement that it be a big tab -- maybe we can introduce the "explore mozilla" functionality of tabzilla with a less big visual element, if the tab feels wrong. Make sense?

Comment 16

[Cassie McDaniel [:cassiemc]]

From what Ross told me, he didn't think Tabzilla could be shortened, heightwise. I'm sure for branding reasons of tabzilla itself there is a benefit to maintaining that continuity.

The wonky version I have in the mock is my attempt to recreate it in photoshop which actually brings up a good question – are there vector files for this somewhere? I couldn't find any. Devs are of course using the true version :)

Otherwise makes sense, and maybe worth coming back to in the next major iteration of our prototype. Thanks again!

Comment 17

[Cassie McDaniel [:cassiemc]]

From what Ross told me, he didn't think Tabzilla could be shortened, heightwise. I'm sure for branding reasons of tabzilla itself there is a benefit to maintaining that continuity.

The wonky version I have in the mock is my attempt to recreate it in photoshop which actually brings up a good question – are there vector files for this somewhere? I couldn't find any. Devs are of course using the true version :)

Otherwise makes sense, and maybe worth coming back to in the next major iteration of our prototype. Thanks again!

Comment 18

[Cassie McDaniel [:cassiemc]]

Attachment: Tools nav further functionality

Expanding on the functionality of the page, what happens when buttons are clicked. Ross, ping me tomorrow if you want to go through it but hopefully is self-explanatory. I've tried not to reinvent functionality where possible; the feedback tab is a bit of an exception, as it's no longer a nav button but a side tab, so I think this expandability is more expected than a lightbox. Layout is very similar though. 

The PSD is on Drive / production / Tools-navigation-v3.psd. Layers are more organized and grouped, and those folders highlighted yellow are the pages you see in this pdf.

Comment 19

[Mike Beltzner [:beltzner, not reading bugmail]]

Note: Ross is gonna have to pick this up next week. Hopefully some quick iterations with Cassie while they're co-located!

Comment 20

[Ross Bruniges [:boozeniges]]

Attachment: https://github.com/mozilla/login.webmaker.org/pull/67/files

Comment 21

[Pomax]

Comment on attachment 751784 [details]
https://github.com/mozilla/login.webmaker.org/pull/67/files

looks good, land it.

Comment 22

[[github robot]]

Commits pushed to master at https://github.com/mozilla/login.webmaker.org

https://github.com/mozilla/login.webmaker.org/commit/f9b9d1e9d357fd728914fd01b58defb4c48161fb
Fix bug 862361 - some better styles for the webmaker nav and a few HTML changes to accomodate it

https://github.com/mozilla/login.webmaker.org/commit/6d9e9ecdb54aec036d73dd159e0bfc8c56fe1971
Merge pull request #67 from rossbruniges/styled-users

Fix bug 862361 - some better styles for the user-nav