[Design-team] Fedora Community navigation rethinking

[Paul W. Frields]

On Thu, Dec 10, 2009 at 11:18:06PM -0500, Máirín Duffy wrote:
> So the Fedora Community navigation is going to need some rethinking. I
> haven't yet written up the usability test results but there was
> definitely a lot of confusion shown through the tests - and we weren't
> really 100% happy with it to start:
> 
> - The left nav tabs take up precious screen real estate, yet they are
> top-level global nav and thus are not used as often as other navigation.
> 
> - It seemed the majority of users in the usability tests did not even
> note the tabs going across the top.
> 
> - Many users in the tests also did not realize the right sidebar
> secondary nav (1) was even there (2) if they saw it, they didn't think
> it was related to the center content (eg nav for package details)
> 
> At FUDcon in Toronto this past weekend I showed the navigation to Diana
> and we had a discussion about it, and she showed me some UI she has
> worked on that I think is a great inspiration for making the Fedora
> Community navigation a whole lot better to work with.
> 
> On the FUDbus back home I started trying some of her ideas -on the left,
> the nav bar could slideback and slide out on demand, and I tried making
> the right navbar look more 'navigation-y' rather than like it is little
> ads or something not relevant to the content.
> 
> I've attached my inkscape mocks (I can't uplaod them to the wiki at the
> moment because of the outage) - what do you think? (WARNING: these are
> way rough and were done on a bus ;-) )

My untrained observations:

* Getting the left navbar out of the way is smart.  The cramped middle
  area can breathe a bit more now.

* The expanding navbar is a good way to solve this, but I think it
  needs to be more apparent it's a menu.  Can it be labeled with text,
  even vertically-oriented if needed to save space, to achieve that
  purpose?  I've noticed sites using an expanding element for
  comments, where the expander is labeled "Give us Feedback" or "Make
  a Comment," and it's apparent what the element is for.  I'm not sure
  how to label properly in this case, though.

* In the SVG, I think the third option (i.e. the second "after"
  version) makes it clearer that what I'm seeing in the main area
  comes from a specific choice I've made on the right.  Do you think
  that mental connection might be even easier if the choice on the
  right has a sort of figurative arrow shape on its left side,
  pointing to the middle area?  I tried my hand, but please excuse the
  crummy alignment and my failure to get angles correct:

  http://pfrields.fedorapeople.org/images/mockups/fcomm-with-arrow.png

* What differentiates the expanding navbar from the choices at the top
  in this third mockup?  Is the idea that the page tabs at the top are
  kind of a sub-grouing of what the expanding navbar provides, and the
  things on the right are completely contextual with whatever you're
  viewing in the middle?

-- 
Paul W. Frields                                http://paul.frields.org/
  gpg fingerprint: 3DA6 A0AC 6D58 FEC4 0233  5906 ACDB C937 BD11 3717
  http://redhat.com/   -  -  -  -   http://pfrields.fedorapeople.org/
  irc.freenode.net: stickster @ #fedora-docs, #fedora-devel, #fredlug