[K7] Side nav interaction adjustments #29978

ryankeairns · 2019-02-04T18:49:11Z

📓 This PR previously contained some initial work on adding a 'pin collapsed' button, but due to time and underlying complexity (mostly on the design/interaction side), we need to push that off. That said, the seemingly minor adjustments made by this PR provide some immediate relief for users who have reported inadvertent hovers coupled with a slow-to-close nav.

Summary

This PR adjust the K7 side nav interaction in the following ways based upon internal feedback and personal observations:

increase delay before expanding (prevent nav expanding if I accidentally/momentarily move over it)
remove delay before collapsing (when I mouse out, collapse the nav more immediately)
increase speed of the collapse animation (...and do it quickly)

~~This PR also adds a new footer link to the bottom of the side nav. This will provide users the to keep the side nav in a collapsed state.~~ This has been deferred, see note above.

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
This was checked for keyboard-only and screenreader accessibility

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature addition or change that requires a release note and was labeled appropriately

elasticmachine · 2019-02-04T18:49:13Z

Pinging @elastic/kibana-design

elasticmachine · 2019-02-04T19:10:18Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-02-04T19:38:03Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

ryankeairns · 2019-02-04T20:50:25Z

@legrego here is the K7 side nav PR where we're making some tweaks. There is no EUI build yet, so to run this you have to link EUI. Also, the 'pin closed' feature has not yet been hooked up... but you can follow along here :)

elasticmachine · 2019-02-05T00:37:30Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

ryankeairns · 2019-02-05T16:26:36Z

src/ui/public/chrome/directives/header_global_nav/components/header.tsx

@@ -254,6 +256,7 @@ class HeaderUI extends Component<Props, State> {
              'navDrawer',
              this.state.isCollapsed ? 'collapsed' : 'expanded'
            )}
+            style={{ transitionDuration: '90ms', transitionDelay: '150ms' }} // TODO Change defaults in EUI


This is ugly, I know, but it gets us out of an EUI dependency/build/update in order to get this in for FF.

I think we've been told we can no longer use style tags directly on components for security reasons. Am I correct @chandlerprall ?

I'll remove this if we squeeze in one more EUI build and Kibana update before FF.

I'm curious to hear that answer, regardless, but I'll be removing this from the PR as a change is coming on the EUI side.

elasticmachine · 2019-02-05T16:55:10Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

cchaos

Feels better to me. TY!

alexfrancoeur

I was able to take this PR for a spin this afternoon. My thoughts and feedback can be found below:

The delayed hover action definitely helps with mistakenly interacting with it. Most of the time, the menu will not expand if I've accidentally navigated over it. However, when I'm purposefully navigating to click on something, I'm surprised when the navigation expands out. It actually ends up disorienting me a bit and I forget where I'm clicking for a brief second. Sometimes, it will also expand just as I've clicked it.
Removing the delay when navigating away from the nav works well. It's a much more seamless experience with the with the faster collapse.

After trying to do my normal workflows (using a mouse pad, not mouse) I ran into the problem mentioned in my first observation numerous times. I imagine our users will as well. Hovering is complex and I'm worried that it may be impossible to tweak the experience to get it "just right". If it's too fast, you accidentally expand the nav more often. If it's too slow, it can surprise you. Given that everyone navigates differently, I think it would be very hard to find that middle ground. I'm beginning to think this is why we moved away from hover in 5.x. That all being said, I know that there is an effort to introduce pinning capabilities for 7.0 (after FF). I'd like to pose the question as to whether or not this should be the default experience. I was hopeful that these changes would improve my experience, but am still a bit concerned around having hover be part of the day-to-day workflows (and inherently, initial experience for new users)

ryankeairns · 2019-02-05T18:30:54Z

@alexfrancoeur I think we're feeling the same and @snide has expressed the same thought about moving away from the hover-to-expand. All that said, it seems as though the adjustments in this PR provide enough relief that we should go ahead with them.

Following FF, we'll take a step back, evaluate the feedback, and come up with some alternatives. Does that sound good to you? In other words, keep iterating.

ryankeairns · 2019-02-05T18:38:03Z

The inline styles have been removed. If you pull this now then you won't see the quick collapse animation. I'll rebase and correct that once #30116 is merged.

cjcenizal · 2019-02-05T19:06:22Z

It sounds like we're all mostly aligned, I just wanted to echo @alexfrancoeur's impressions and add that we should probably be concerned about users possibly perceiving the removal of pinning as a regression, since the UI has offered this function since 5.0. Something to keep an eye on as we gather feedback during the beta period.

elasticmachine · 2019-02-05T19:15:55Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

ryankeairns · 2019-02-05T19:30:56Z

I've opened a new issue to track ongoing work that addresses the feedback above. More improvements to come for the new side nav - #30121

ryankeairns added Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. WIP Work in progress v7.0.0 Feature:Home Kibana home application labels Feb 4, 2019

ryankeairns mentioned this pull request Feb 4, 2019

[WIP] Adjust interaction settings, add pin collapse elastic/eui#1515

Closed

10 tasks

ryankeairns force-pushed the rk/pin-side-nav branch from 767cfd3 to f4702cc Compare February 4, 2019 19:26

cjcenizal self-requested a review February 4, 2019 20:32

side nav interaction adjustments

bf9467d

ryankeairns force-pushed the rk/pin-side-nav branch from f4702cc to bf9467d Compare February 4, 2019 23:34

remove pinning button, close even faster

4b6488d

ryankeairns requested review from snide, cchaos and alexfrancoeur February 5, 2019 16:11

ryankeairns commented Feb 5, 2019

View reviewed changes

ryankeairns mentioned this pull request Feb 5, 2019

Speed up collapsing animation for EuiNavDrawer elastic/eui#1524

Merged

10 tasks

cchaos approved these changes Feb 5, 2019

View reviewed changes

alexfrancoeur reviewed Feb 5, 2019

View reviewed changes

remove inline styles

0f3b09f

ryankeairns removed the WIP Work in progress label Feb 5, 2019

ryankeairns changed the title ~~[WIP][K7] Side nav interaction adjustments, ability to keep collapsed~~ [K7] Side nav interaction adjustments, ability to keep collapsed Feb 5, 2019

ryankeairns changed the title ~~[K7] Side nav interaction adjustments, ability to keep collapsed~~ [K7] Side nav interaction adjustments Feb 5, 2019

ryankeairns merged commit 3d45d8d into elastic:master Feb 5, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[K7] Side nav interaction adjustments #29978

[K7] Side nav interaction adjustments #29978

ryankeairns commented Feb 4, 2019 •

edited

Loading

elasticmachine commented Feb 4, 2019

elasticmachine commented Feb 4, 2019

elasticmachine commented Feb 4, 2019

ryankeairns commented Feb 4, 2019 •

edited

Loading

elasticmachine commented Feb 5, 2019

ryankeairns Feb 5, 2019 •

edited

Loading

cchaos Feb 5, 2019

ryankeairns Feb 5, 2019

ryankeairns Feb 5, 2019

elasticmachine commented Feb 5, 2019

cchaos left a comment

alexfrancoeur left a comment

ryankeairns commented Feb 5, 2019 •

edited

Loading

ryankeairns commented Feb 5, 2019

cjcenizal commented Feb 5, 2019

elasticmachine commented Feb 5, 2019

ryankeairns commented Feb 5, 2019

[K7] Side nav interaction adjustments #29978

[K7] Side nav interaction adjustments #29978

Conversation

ryankeairns commented Feb 4, 2019 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented Feb 4, 2019

elasticmachine commented Feb 4, 2019

💔 Build Failed

elasticmachine commented Feb 4, 2019

💔 Build Failed

ryankeairns commented Feb 4, 2019 • edited Loading

elasticmachine commented Feb 5, 2019

💔 Build Failed

ryankeairns Feb 5, 2019 • edited Loading

Choose a reason for hiding this comment

cchaos Feb 5, 2019

Choose a reason for hiding this comment

ryankeairns Feb 5, 2019

Choose a reason for hiding this comment

ryankeairns Feb 5, 2019

Choose a reason for hiding this comment

elasticmachine commented Feb 5, 2019

💚 Build Succeeded

cchaos left a comment

Choose a reason for hiding this comment

alexfrancoeur left a comment

Choose a reason for hiding this comment

ryankeairns commented Feb 5, 2019 • edited Loading

ryankeairns commented Feb 5, 2019

cjcenizal commented Feb 5, 2019

elasticmachine commented Feb 5, 2019

💚 Build Succeeded

ryankeairns commented Feb 5, 2019

ryankeairns commented Feb 4, 2019 •

edited

Loading

ryankeairns commented Feb 4, 2019 •

edited

Loading

ryankeairns Feb 5, 2019 •

edited

Loading

ryankeairns commented Feb 5, 2019 •

edited

Loading