885053 - Create navigation to navigable areas of the site: Groups list, Functional Areas list, ...

Status: RESOLVED INVALID

(Participation Infrastructure :: Phonebook, defect)

Description

[Justin Crawford [:hoosteeno] [:jcrawford]]

We have added some navigable areas to the site, but we haven't built ubiquitous navigation to those areas. In other words, the only way to navigate groups is to go to the logged-in homepage and dive in from there. 

We should make it possible to get to navigable areas through navigation. Or at least consider it and close the bug as invalid if it's not desired now. 

This was patched once: https://bugzilla.mozilla.org/show_bug.cgi?id=844069

But that solution didn't work well, because it always took people to the first page of results, even if they got to a group detail page from the fifth page of results. The browser's back button is better when the functionality required is "back". 

In this bug, we should be thinking about true navigation: in the header, in the footer, in a sidebar?

Comment 1

[Justin Crawford [:hoosteeno] [:jcrawford]]

Groups have changed a lot since this bug was created. Now, in order to create a group, you have to go to the groups page. It may make more sense than ever to be able to get to the groups page from any other page, rather than having to pogo back to the dashboard.

Comment 2

[William Reynolds [:williamr]]

This bug may be a good chance to explore having navigation to other communication platforms and tools. We have recently been talking about mozillians.org becoming a suite of tools, with the current functionality becoming Profiles and Groups.

Other ideas for navigation links
* Air Mozilla
* Bugzilla
* Mozilla Exchange (Yammer instance for Mozillians)
* Planet Mozilla
* PTO (visible to staff only)
* Reps

Other modules that have been mentioned and may get developed in the future
* Task of the Day
* Campaigns
* Events
* Getting started (onboarding)

If this broadens the scope too much, we can discuss on the newsgroup or create another bug.

Comment 3

[Justin Crawford [:hoosteeno] [:jcrawford]]

Attachment: new_nav.jpg

I'd like to keep this bug focused on navigating to important areas of Mozillians.org that already exist. I think we need to figure out how to show navigation on every page that I can use to get to...

/ (dashboard/logged-in homepage)
/groups
/u/username (my profile)
/invite

I think the dropdown we have is probably sufficient for all of this nav; I think we can get rid of "edit your profile" and simply create a button on your profile itself for edit functionality (which resembles the edit UI on groups). I attach a mockup.

In the future, we may wish to expand this list to include:

/skills
/locations

Right now, skills probably isn't an important one to provide in browse; and locations doesn't exist yet. But in the future either one may be a useful browse target like /groups is now.

Comment 4

[William Reynolds [:williamr]]

I like the focus and ideas in comment 3. Nice mockup too!

+1 to moving the "Edit your profile" navigation to a button on your profile itself.

Comment 5

[Wray Bowling [:wbowling]]

I also cast my vote for an "Edit" button on the profile.

On Navigation in general, i'd like to discuss iconography and what these menus mean. I'll attach some images in forward posts in my usual sketchy style with the intention of helping us think outside the box.

The basics of my thinking will be this:
- Things close together are related.
- Lists suggest that items in the list live on the same hierarchal level.
- Three lines stacked means "menu".
- The popularity of logos in the top left.
- Matching the brand of Mozilla's other sites. (Comment 2 is useful)

~

I just did a bunch of sketches and I'm not happy with them collectively. This is going to require some more thought. The best navigation I've ever seen personally, is the one on polygon.com The menu is a horizontal list when the window is wide enough and it collapses into a small button that makes a popup vertical list. Search and a profile button are provided on the same bar. ~ Mozillians is necessarily a site that is much less complex though. Almost the entire site is nothing but user profile + groups + search. There's not a need to be so compact. The Mozilla tab at the top messes up any efforts that would make it compact anyway unless we adopted Polygon's method of moving the nav bar below the header.

Comment 6

[Wray Bowling [:wbowling]]

Attachment: 1 - top-bar ideas.svg

Here's one of the sketches anyway. These are just brainstorms, ie ideas not necessarily worth using.

Comment 7

[Justin Crawford [:hoosteeno] [:jcrawford]]

:wbowling, could you turn these sketches into a concrete recommendation?

Comment 8

[Wray Bowling [:wbowling]]

Attachment: 3---condensed-nav.png

Here I've made a sketch of the mobile nav in portrait(left) and landscape (right). I'm not sure how cool the wider Mozilla would be with us condensing the persona icon into just an arrow with a head, but on mobile it would do us a favor.

On larger screens, the menu button could have "Menu" next to it and the persona log-in button could actually say "log in". These are explorations in trying to accommodate for smaller windows.

The top bar in portrait is meant to sort of read as "Mozillians, by Mozilla" without having to be so blatant.

The second bar in portrait is meant to be a navigational bar that offers the two navigational methods: a menu button next to search. The persona arrow is in there as a shortcut to log in, but after the user is logged in, I think it's fine to not display the arrow at all and just stuff the profile stuff into one menu.

Comment 9

[William Reynolds [:williamr]]

Wray, this is great! Thanks for the sketch. Justin and I have some feedback and a request to try out this new navigation.

- Let's keep the "Sign In" text next to the Persona icon. That text is preferred, plus it is the way that new users to the site will create a profile.

- I suggest we display the "Sign In" button in the header, since that is the primary action most users need to take when they are not logged in. Once a user is signed in, we can show the Log Out link in the menu. 

- Can you create static pages showing this in both the logged in and logged out views? It doesn't need to be functional, but it would allow us to see the layout on different screen sizes and try the interactions. You can hack on the existing static code if that's helpful.

Comment 10

[Justin Crawford [:hoosteeno] [:jcrawford]]

Bump! Is this on anyone's radar? Since the last comment, :giorgos reported and submitted a PR (bug 1000869) that adds /groups to the menu. Is this bug still valid?

Comment 11

[Wray Bowling [:wbowling]]

I think that was a good first step. As more of these areas of the site come online, we can continue to place items into that single dropdown menu.

About the only difference in these sketches is moving the search bar into the top bar as well, but it's not a change really worth making now while there's not these other large sections that users will jump around between.

I appreciate that :giorgos stuck with such a simple solution. :)

Comment 12

[Greg Cox [:gcox]]

This is an RFE specific to mozillians, which is decom'ed.
If this is found to pertain to people.mozilla.org then please open a new issue.