Solved

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

  • 30 August 2019
  • 7 replies
  • 199 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

    • Next Button [list]
    • Navigation: Opens my drop-down menu from the top-navigation
  • 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

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




    • Overlaid on top-navigation button

      • 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]
  • If user clicks on top-navigation




    • Hotspot does not disappear

      • 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]
  • Step 3: Tooltip



    [/list]
    icon

    Best answer by alextran 3 September 2019, 20:28

    View original

  • 7 replies

    Badge +2
    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 +3
    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.


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


    Badge +2
    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!


    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