search

symphonycms / factory

A design framework for the Symphony Network
http://symphonycms.github.com/factory/
Other
17 stars 6 forks source link

Network behaviour #9

Open nilshoerrmann opened 12 years ago

nilshoerrmann commented 12 years ago

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 commented 12 years ago

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 commented 11 years ago

Reopening, see #40.

/cc @brendo

nilshoerrmann commented 11 years ago

Opening on hover

Opening on click

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 commented 11 years ago

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 commented 11 years ago

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 notifications@github.comwrote:

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/symphonycms/factory/issues/9#issuecomment-11479042.

nilshoerrmann commented 11 years ago

@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 commented 11 years ago

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

allen commented 11 years ago

@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 commented 11 years ago

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 commented 11 years ago

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).

factory-pull-down

bauhouse commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

@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.