Network behaviour

[nilshoerrmann]

There are two possible toolbar behaviours:

1. It opens the network by clicking its background or the Symphony Network title.
2. It opens the network on hover (Vimeo style).

Votes?

[allen]

My default would be to vote for "open on hover". However, if the hover state for "click to open" is very clear, then I'd be good with either.

[nilshoerrmann]

Reopening, see #40.

/cc @brendo

[nilshoerrmann]

Opening on hover

• advantage: there is no need for a toggle, the network opens unobtrusively and introduces itself
• disadvantage: the network might open when you don't expect it (while moving from the bottom to you browser's toolbar for example)

Opening on click

• advantage: the network opens on request only when you want to open it
• disadvantage: the network it hidden and can be overseen – we'd need a visual toggle

---

We have tried both options while working on Factory and while none is perfect the hovering worked best for me. @brendo: The opening on hover is delayed by half a second so it doesn't open instantly/accidentally. Maybe it would help to increase the delay?

Would be nice to have feedback by the others: @allen, @alpacaaa, @bauhouse, @nickdunn, @johannahoerrmann, @lewiswharf

[brendo]

Yeah maybe the delay would help, or perhaps if it opened over the content below? The animation feels a little jerky when all the content is pushed down, as if there is a bounce.

I'm happy to let this stay as is until we get some more hands on deck testing and giving a run through, could just be me :)

[johanna]

Hi, I have no idea why I was added to this team/project, and I don't find
any way to leave in the Github settings. Did you mean to add someone else?

/Johanna

---

Med vänliga hälsningar / Best Regards

Johanna Eriksson

http://johannas.info
+46(0)735 255 044

On Tue, Dec 18, 2012 at 10:23 AM, Brendan Abbott
[email protected]:

Yeah maybe the delay would help, or perhaps if it opened over the content
below? The animation feels a little jerky when all the content is pushed
down, as if there is a bounce.

I'm happy to let this stay as is until we get some more hands on deck
testing and giving a run through, could just be me :)

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/9#issuecomment-11479042.

[nilshoerrmann]

@johanna: That's interesting, we have a @johannahoerrmann in our team and I cannot see you in our team's member list. Very sorry about that! Maybe it's a Github issue?

@allen: Could you please have a look and solve this issue? Thanks!

[allen]

I made a mistake of adding the wrong Johanna, but it was immediately rectified though.

[allen]

@johanna given that you've replied to this issue, I believe you're now automatically subscribed. If you unsubscribe from this issue, you shouldn't get any more notifications since you're no longer part of the member list.

[s-e]

Third option: You could have the best of both worlds with a "pin" button to prevent collapse on mouseout?

Just as an aside to Brendan's point about the jerkiness. I think the slide animation is a bit aggressive at the moment. Might just be a personal taste thing but I think it's a little jarringly fast.

[lewiswharf]

The more I think about it the more I am convinced that the pulldown on over is not necessary. The information it reveals seems secondary to me. It was fun at first, but now it doesn't have anything to the experience.

What about something like this where the user would click on the red bar to expand it? Perhaps you could even experiment with the on hover with the red bar in the picture below and not on the black network bar (with a delay on the red, at least the pulldown wouldn't drop when the intention is to click on a network link).

[bauhouse]

Also, it would be good to consider what happens to the network drawer on small screens. Hover does not work on mobile devices and the styles and JS are forcing the height of the drawer to dimensions that do not accommodate the change in height on small screens.

[andrewminton]

Is it worth using a session cookie for persistent state of drawer expand/collapse? Or is this intended behaviour once the framework is released. I find the hover open close a bit of a non event and gets in the way when you just want to click on the top nav items, seeing as the content is secondary. Click to expand and retain state seems to make sense for smaller screens as well, due to lack of hover states.

[bauhouse]

I was discussing this issue with Allen yesterday, and we agreed that the behaviour of the network navigation drawer is causing some usability issues, such as flickering/flashing of the navigation drop down as you navigate from one page to another (test it out here).

Also, on the mobile phone I tested (iPhone 4S), the network navigation menu does not work well, because there is no hover state. Tap works to open the drawer and toggle between the user profile and the About Symphony content, but the drawer is not opening to the correct height for this content. Also, this interaction is not very intuitive on a phone, since the user avatar does not communicate what the drawer will do. It seems very confusing to me.

Allen had suggested that the "on click" behaviour being used by the Zurb Foundation demo seems to work better.

This is a really important feature of the responsive web design and user experience, so it's really important to make sure this works well across devices.

[lewiswharf]

@bauhouse the Zurb navigation "on click" example is my preference as well. The more I experience the current navigation drawer behavior, the more I find it getting in the way of navigation.