Project

General

Profile

Feature #2396

Customize the WP Bar to Add Main Site Navigation

Added by Chris Stein over 6 years ago. Updated almost 6 years ago.

Status:
Resolved
Priority name:
High
Assignee:
Category name:
WordPress (misc)
Target version:
Start date:
2013-02-04
Due date:
% Done:

0%

Estimated time:
12.00 h

Description

There are two basic ideas here for the admin bar.
  1. Add in the main site navigation Home | People | Groups | Blogs | Wiki | News | Help | About
  2. Change the part on the far left that reads "CUNY Academc Commons" to the Commons logo

An overall purpose for the change is to reduce the number of different places users must/can turn for navigation. The hope is to be able to make the bar at the top the first place people turn for navigating the Commons.

While this issue has been suggested before by Michael, it came up again as part of issue #404. Much work needs to be done to determine how to mesh the main site navigation with contextual links (like blog related items when you're on a blog, and logged in commons links like My Blogs, My Groups).

2013-08-20_122553.png (13.4 KB) 2013-08-20_122553.png Raymond Hoh, 2013-08-20 03:28 PM

History

#1 Updated by Chris Stein over 6 years ago

While I hoped to do this at some point, it was, until our last meeting, a later stage project. The redesign of the profiles have moved it up because the general consensus for the profiles is that they should have a design that doesn't include the current header on the commons with logo/search/main nav.

I'm going to take some time to think about how to reconfigure the WP Bar and come up with some prototypes. I'm not sure yet on the best way to include the different content. Here are the different types of content that will be in the navigation
  • Main Commons Navigation
  • Logged in navigation (My Blogs, My Commons, My Groups, Notifications of friend requests and messages)
  • Blog Admin (New Post, Manage Comments, Dashboard, Themes...)
  • Log Out

Thoughts and suggestions are welcome of course

#2 Updated by Boone Gorges over 6 years ago

  • Category name set to WordPress (misc)
  • Status changed from New to Assigned
  • Assignee set to Chris Stein
  • Priority name changed from Normal to High
  • Target version set to 1.5
  • Severity set to Critical

Let's keep in mind the issue of navigation bloat, as well. Logged-in users already have 6-10 top-level nav options in the toolbar. Simply adding another half dozen is probably not going to work; instead, we'd like need to reposition or remove some of the current functionality, to keep the overall numbers low.

A side consideration: Right now, the toolbar is recognizable as the WordPress toolbar. This may create a certain level of built-in familiarity with existing users of WP. We may lose this effect if we customize the toolbar very radically.

Assigning to Chris while we're in the design phase. Also, I'll put it into the 1.5 release because the consensus seems to be that this is of a piece with the profile redesign #404, though I'd like to urge that this issue be puntable if it starts to hold up the release.

#3 Updated by Chris Stein over 6 years ago

I've created some prototypes of the redesigned bar

the bar on the Commons Homepage
http://teachingmultimedia.com/commons/portfolio_protoype/wp-bar.html

The bar on a blog
http://teachingmultimedia.com/commons/portfolio_protoype/wp-bar-blog.html

The bar on a portfolio
http://teachingmultimedia.com/commons/portfolio_protoype/wp-bar-portfolio.html

The changes in brief
  • My Commons/My Blogs/ My Groups has been condensed and put on the right with a small user icon and the notifications
  • On the Main Commons site the nav is listed in the bar after the logo
  • On a blog the standard wp bar features are listed in the bar after the logo. The Commons navigation is still available through a dropdown by the Commons Logo

I should also note that this bar is a bit taller than the one we have now so the Commons logo didn't appear too small.

We can talk about this more in the 2/15/13 meeting

#4 Updated by Matt Gold over 6 years ago

Thanks, Chris -- looking forward to discussing this with you today.

#5 Updated by Matt Gold over 6 years ago

Also: is the CAC logo what is driving the height of the nav bar? I think we could make the logo smaller. And I do take Boone's point about working with/from the default WP nav bar.

#6 Updated by Matt Gold over 6 years ago

Many apologies for multiple comments/emails, but I think that this is really promising, Chris.

#7 Updated by Boone Gorges over 6 years ago

  • Status changed from Assigned to Testing Required
  • Estimated time set to 12.00 h

The first pass at this functionality is ready to test on cdev. Reference: https://github.com/castiron/cac/commit/339ec330235cfffd82a3a1f46753ff93a896e14d

As you recall, we decided to go with something like Chris's second mockup above, http://teachingmultimedia.com/commons/portfolio_protoype/wp-bar-blog.html

Known issues:
- Toolbar is not showing up as redesigned on the Dashboard. I'll look into it
- the CAC logo at the upper left looks bad (has a black background, etc). I don't have a vector version to do proper transparency. This can be swapped out later
- My Sites and My Groups (under the top-left user menu) list in a long vertical list. On the production site, there's some logic to make them cascade into multiple columns, but I've disabled it for now.
- The toolbar is a bit bigger than the old one, and I haven't yet made space for it everywhere. So you'll see it looks bad on some themes (http://cunypie.cdev.gc.cuny.edu/). Want to be settled on the general design before accomodating the height.
- The background colors are difficult to distinguish on the main site (they blend in with the site background). Chris, I'd like your suggestions on how to move forward on this.

Hopefully this functional mockup will help us to move toward a final design. If you have specific suggestions, please leave them here, and Chris and I can work together to turn them into a list of action items. Thanks.

#8 Updated by Boone Gorges almost 6 years ago

Could I ask one or more members of the team to have a look at the issues above and make a comment or two about the current implementation of the admin bar on cdev? Thanks.

#9 Updated by Matt Gold almost 6 years ago

Looking back at this after some time, here are some thoughts:

-- we wanted to have the CAC logo appear in the top nav primarily for the new profile section. I think it makes sense for that section. But on other parts of the site, like groups, what we'll now have is the CAC logo repeated in the nav bar and the header. And then, the logo will also appear in subdomain blogs, where it may form a poor contrast with a blog's design or color scheme. Are we sure it makes sense for the logo to appear in the nav across all of these areas of the site?

-- I would like to show this to our designer to see whether he has any thoughts about the visuals

-- I'm not a fan of the blue text on the drop downs; that text should probably be white for the sake of contrast/readability

I think we should put this on our agenda to talk through on Friday.

#10 Updated by Boone Gorges almost 6 years ago

Moving it to Friday for discussion is problematic, because it's currently slated for the 1.5 release on Thursday.

I can remove the feature altogether for the release, but it'll take some adjustment (at least in the profile section, which has been built with the new admin bar in mind).

#11 Updated by Matt Gold almost 6 years ago

Hmmm. Okay. Let's keep it in the release and iterate, then, based on our discussion on Friday.

I do think that the submenu text color should be changed immediately, though. Is there any other low-hanging fruit in my notes that we can discuss pre-release?

#12 Updated by Boone Gorges almost 6 years ago

  • Status changed from Testing Required to Assigned
  • Assignee changed from Chris Stein to Boone Gorges

The blue color is easy to change.

The only other specific item I can tease out of your previous comment is that you don't like how the CAC logo appears on every page. But this doesn't seem low-hanging to me, as I'm not sure what the alternative is, and moreover I would argue that it's confusing to have the admin bar changing in large ways from page to page.

#13 Updated by Matt Gold almost 6 years ago

Yes, agree that's not low-hanging fruit and also agree that a changing nav bar is not ideal. But neither is having the CAC logo repeat twice for any user who is visiting a group, so I think we should hash this out on Friday.

#14 Updated by Boone Gorges almost 6 years ago

Looks like the blue links were caused by a recent upgrade to WP. Fixed in https://github.com/castiron/cac/commit/0c611f3d562ab58c8a99fda21f92642552bfd36c

#15 Updated by Chris Stein almost 6 years ago

OK, yes let's hash this out on Friday. In addition to the things that have been talked about already, on touch screens it would be good to only expand the menu when you click on the logo (right now it goes to the home page).

#16 Updated by Dominic Giglio almost 6 years ago

I also agree that the blue text doesn't work very well and the duplication of the logo is a little weird. It feels like overkill. Maybe we could just use text in the logo section of the admin bar like in a Twitter Bootstrap navbar. It can still be a hover menu but it won't have such a large logo. We could even condense the title a little to CUNY Commons?

#17 Updated by Matt Gold almost 6 years ago

Thanks, Chris and Dom (Chris, good point about touchscreens).

Dom, I like your idea of seeing how it would look without a logo but just with the words "CUNY Academic Commons" (don't think we should shorten it to CUNY Commons for branding reasons - we want to be consistent). Boone, would it be possible to test out going back to the words "CUNY Academic Commons" instead of the logo so that we could see how it looks, or would that require too much time?

#19 Updated by Matt Gold almost 6 years ago

Thanks, Boone. I have to say that I think this is the way to go -- much less obtrusive, much more subtle, which I think is what you want in a sitewide nav bar. And it avoids the problem of the repeated logo noted above.

What do others think?

One note: If we decide to go with text instead of a logo, I'd love to have a screenshot or two of the version with the logo in various parts of the site (homepage, member profile, group, subdomain blog, wiki) so that we could show the subcommittee our process.

#20 Updated by Dominic Giglio almost 6 years ago

I think the text is much better. It fits better with the look of the rest of the toolbar.

#21 Updated by Raymond Hoh almost 6 years ago

How about a smaller version of the logo in the adminbar?

I've attached a mockup.

#22 Updated by Matt Gold almost 6 years ago

Really interesting thought, Ray. I'd say that it points to a possible future iteration but that we should stick with text for now. We should also consider/discuss, for the future, a possible black/white/gray version, since I think that the repetition of the color is part of the problem. Ideally, I'd like to get all of these ideas into the hands of our graphic designer to see what he can do with it. But I love this creative thinking, Ray.

#23 Updated by Boone Gorges almost 6 years ago

  • Status changed from Assigned to Reporter Feedback

For the purposes of this release, are we agreed on the current state of things, as seen at http://cdev.gc.cuny.edu/members? Perhaps we can close this ticket and discuss other enhancements in a ticket pegged to a different release.

#24 Updated by Matt Gold almost 6 years ago

Sounds good. Micki, can you please add this to our team meeting agenda for Friday?

#25 Updated by Boone Gorges almost 6 years ago

  • Status changed from Reporter Feedback to Resolved

Great, thanks, Matt.

Also available in: Atom PDF