Solved

Force a drop-down menu to expand with "next" click

  • 30 August 2019
  • 7 replies
  • 157 views

I'm having a usability issue that's making it very hard to use PX for guiding a user through a very basic tour.

Here is a video overview to explain:



Basically I'd like to setup a 2 step guide here:

  • Step 1: Dialogue [list]
  • Next Button [list]
  • Navigation: Opens my drop-down menu from the top-navigation
[/list]
  • Step 2: Tool-Tip

    • Points at the second item in the drop-down
    [/list]However, it doesn't seem like I can force a drop-down menu item to open from within PX. Instead I'm having to do the following:

    • Step 1: Dialogue [list]
    • Next Button [list]
    • Navigation: Look for next element
    [/list]
  • Step 2: Hotspot

    • Overlaid on top-navigation button [list]
    • If user clicks on hotspot: [list]
    • Hotspot disappears
    • Sub-menu does not open [list]
    • The user now must click on the sub-menu in order to see the tooltip (Step 3) [list]
    • This is a bad user experience. The user has to click twice in the top-menu.
    [/list][/list]
  • If user clicks on top-navigation

    • Hotspot does not disappear [list]
    • Sub-menu opens
    • Tool-tip does not show
    • If the user now clicks on the hot-spot, the sub-menu disappears and the tool-tip shows up
    [/list][/list][/list]
  • Step 3: Tooltip

    [/list]
    icon

    Best answer by alextran 3 September 2019, 20:28

    View original

  • 7 replies

    Userlevel 5
    Badge
    Hi Lucas,

    Thanks for posting this.

    Achieveing a 2-step guide that you are looking for is very much possible.

    When you are editing in-app, on the left choose your tooltip step from the drop down> Turn the mapper off by from the top right> Open your drop-down on the page> Turn on the mapper> Tag the element on the drop down now pertaining to the tooltip> Don’t forget to Save!

    And there you are!

    Let us know how that goes!

    Cc: @alextran

    Userlevel 7
    Badge
    Welcome to the PX Community @lucas !

    When you have a chance, we recommend Following the PX Topic, so you can stay up to date with PX product tips and conversations!



    When you are editing in-app, on the left choose your tooltip step from the drop down> Turn the mapper off by from the top right> Open your drop-down on the page> Turn on the mapper> Tag the element on the drop down

    Thank you for the response, but I had already completed that step. That is why at 0:50 the tooltip is anchored to the sub-menu.

    However, if I remove the hotspot step (current step 2 in video), and move the sub-menu tooltip to step 2, the PX-Guide doesn't automatically expand the sub-menu on step 2. The user experience instead is:

    1. Dialog opens, user clicks on "Get Started"
    2. Dialog closes
    3. Sub-menu does not automatically open and show the tooltip. User has no indication that they should click the top-menu
    That's why my question title is:

    Can I "force a dropdown menu to expand" specifically after someone clicks the "Get Started" link in a dialog.

    Userlevel 6
    @lucas This is Alex, your Client Outcomes Manager and point of contact at Gainsight PX! You can reach me directly at atran@gainsight.com

    To answer your question, PX doesn't have a way to "force" a dropdown unless a user takes action on it -- in this case, clicking the "Courses" tab.

    My recommendation would be to use a Tooltip step for step #2 so user clicks and then the next step should appear on the sub-menu item.

    In summary:

    1) Dialog

    2) Tooltip to "Courses"

    3) Tooltip to sub-menu item.

    For future technical or break-fix issues, you can contact PX Support at pxsupport@gainsight.com

    Let me know if this solution works for you, Lucas!

    Userlevel 5
    Badge
    Lucas, got it, sorry about the confusion earlier.

    Alex's solution sounds about right + we have 'hover' over in addition to 'click' now as a feature to move to the next step on a Guide, which you may want to consider as well.

    The reason why our app doesn't force a drop down unless a user opens it is it would be mean a PX guide prompting an action on your web-app which would include injecting a javascript, which you'd understand is not idea, hence the current design.

    Thank you, @alextran and @harshibanka,

    Alex, good to meet you. Thank you for the contact info.

    In the meantime I did construct the guide in the way you recommended and this is working satisfactory for me:

    1) Dialog

    2) Tooltip to "Courses"

    3) Tooltip to sub-menu item.

    Harshi, thank you for this idea, I will definitely test this out:

    we have 'hover' over in addition to 'click' now as a feature to move to the next step on a Guide

    I appreciate all the help!

    Userlevel 3
    Hey Lucas,

    I want to throw out that the hotspot beacon step seems to function best as a first step only. I think there might be other clever uses for it, but have yet to explore it.

    Reply