Details

    • Type: MMF
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Labels:

      Description

      extracted from MMF-703

      Use Case

      As a developer, after an analysis:

      • To understand what to do, I expect to easily navigate between those locations with the display of the location message each time I move
        • I want to quickly know/see if I move onto another file
        • But I want to keep somehow the original “context" of my issue search:
          • I want to be able to move to the next issue once I understood the current one
          • I don't need to access the search filter because I'm currently reviewing issue of 1 single search

      Design proposition

      Multiple locations in a single flow

      This MMF adds new navigation patterns to ease developer’s workflow while browsing issues. In order to make it really efficient, it is important to reduce the current friction in issues navigation, so this doesn’t feel like adding too much complexity. A few quick usability improvements should be made on the overall issues space.

      • Filter facets should be improved with a better pattern for opening facets. Checkboxes are replaced by carets. It opens and closes like a typical accordion component.
      • Usability of the action buttons “Reload” “New Search” and “Bulk Change" on the right should be improved. It currently looks like toggle buttons / tabs which is misleading. Their labels and placements are also not adapted to their role.
        We should have :
        • A “reload” button using a simple icon for reload. It is placed above the list of issues.
        • A “Bulk change” button near the checkbox used to select the whole list
        • A “Clear all filters” button instead of “New Search”, placed above the filters, just like in the project’s page. This will reset the filters to the default ones, and thus should be activated only when custom filters are applied. Otherwise it will stay greyed-out.
      • Selecting an issue to open it and get more details should also be changed to have mouse and keyboard patterns coexisting in a simple way:
        • The keyboard navigation will stay as it is today (up and down to select, right and left to open and go back to issues)
        • A single click should open the issue. On hover, an issue will have a thin red border to signify it’s clickable and selected. No double-click anymore. The arrow in the right should also disappear.
      • After opening an issue and viewing its details in the code viewer, the filter facets should disappear. Indeed, they were leading to errors as they used to send back users to the issues list. They are replaced by a lighter version of the issue boxes, allowing users to quickly navigate between issues without going back to the list each time. It will also be helpful to clearly visualize that you are jumping to another file while browsing secondary issue locations.
      • There is no “return to list” link anymore, users have the natural habit to use the browser’s back button, let’s use this pattern.
      • The issue count should also be displayed on top of the side panel
      • Transition between list view and details view should be subtly animated so the user understands he’s in another mode, and the filters are still available but collapsed in the left.
      • Users can navigate to previous or next issue by using the up and down keyboard arrows. They can also simply click on the issue boxes to select an issue. The code instantly appears on the right, there is no back and forth between list page and code page anymore.
      • Users can still quickly access filters if needed without having to go back to the list with the browser’s back button. They have to click on the filters icon that will slide the filter panel.
      • When multiple locations are available for an issue, there is an indication on the issue box. More details are displayed when hovering the badge.
      • When selecting an issue with multiple locations, the issue box expands to show the list of locations.
      • In the code viewer, each piece of code corresponding to a location is highlighted, and the number of the location is on the left of the highlighted area.
      • When there are a lot of locations, the box can scroll. There should always been at least one issue box on top of the expanded one, and at least one below. That way the user still understands this is a list view on the side panel.
      • You can navigate the locations by
        • Clicking on a location in the expanded issue box
        • Clicking on the location number directly next to the highlighted code
        • Pressing Alt+ up or Alt+down


      • When a location is actively selected, it is highlighted in a darker shade, and shows a tooltip with the explanation message directly on top of it.
      • A location can be unselected and its message hidden by
        • Clicking again on a location in the expanded issue box
        • Clicking again on the location number directly next to the highlighted code
        • Releasing the Alt key if you're using the keyboard nav
      • When using the keyboard nav, pressing the Alt key will instantly select the first location of the flow. That way, the user knows that he is now in the "explore locations mode", and he also knows he has to press the "down" key to start exploring other locations. Pressing the "up" key will make the highlight blink, so that the user understands he cannot go up.

      Prototype

      Here's an interactive prototype to make it clearer :
      https://xd.adobe.com/view/57381fe5-93e5-4be7-bb11-ac43470b0ce1/

      This is a click-only prototype, as the prototyping tool doesn't allow to use keyboard actions as triggers.
      Click anywhere on the prototype to see where the hotspots are.

      Multiple locations in multiple flows

      When there are multiple flows available, we have multiple badges with different colors on the issue box to represent them

      When the issue box is expanded, those badges act like tabs to display the corresponding flows.
      We have a hint on the top right corner to indicate which flow we are currently exploring.
      When using keyboard navigation, pressing "alt+down" when navigating the last location of a flow, will automatically send the user to the first location of the next flow.

      Prototype
      https://xd.adobe.com/view/7eb5c045-f63e-4f5e-9e74-2879f6641faa/

        Attachments

        1. screenshot-3.png
          screenshot-3.png
          170 kB
        2. screenshot-2.png
          screenshot-2.png
          211 kB
        3. screenshot-1.png
          screenshot-1.png
          214 kB
        4. Revamped_UX_Page_02.png
          Revamped_UX_Page_02.png
          138 kB
        5. Revamped_UX_Page_01.png
          Revamped_UX_Page_01.png
          168 kB
        6. reload.svg
          0.7 kB
        7. Multiple_Locations_03.png
          Multiple_Locations_03.png
          189 kB
        8. Multiple_Locations_02.png
          Multiple_Locations_02.png
          140 kB
        9. Multiple_Locations_01.png
          Multiple_Locations_01.png
          258 kB
        10. Multiple_Issue_Locations_V3.png
          Multiple_Issue_Locations_V3.png
          181 kB
        11. Multiple_Issue_Locations_11.png
          Multiple_Issue_Locations_11.png
          187 kB
        12. Multiple_Issue_Locations_11_V2.png
          Multiple_Issue_Locations_11_V2.png
          133 kB
        13. Multiple_Issue_Locations_10.png
          Multiple_Issue_Locations_10.png
          6 kB
        14. Multiple_Issue_Locations_09.png
          Multiple_Issue_Locations_09.png
          185 kB
        15. Multiple_Issue_Locations_08.png
          Multiple_Issue_Locations_08.png
          175 kB
        16. Multiple_Issue_Locations_07.png
          Multiple_Issue_Locations_07.png
          134 kB
        17. Multiple_Issue_Locations_07_V2.png
          Multiple_Issue_Locations_07_V2.png
          181 kB
        18. Multiple_Issue_Locations_06.png
          Multiple_Issue_Locations_06.png
          171 kB
        19. Multiple_Issue_Locations_06_V2.png
          Multiple_Issue_Locations_06_V2.png
          169 kB
        20. Multiple_Issue_Locations_05.png
          Multiple_Issue_Locations_05.png
          170 kB
        21. Multiple_Issue_Locations_05_V2.png
          Multiple_Issue_Locations_05_V2.png
          169 kB
        22. Multiple_Issue_Locations_04.png
          Multiple_Issue_Locations_04.png
          185 kB
        23. Multiple_Issue_Locations_04_V2.png
          Multiple_Issue_Locations_04_V2.png
          183 kB
        24. Multiple_Issue_Locations_03.png
          Multiple_Issue_Locations_03.png
          170 kB
        25. Multiple_Issue_Locations_03_V2.png
          Multiple_Issue_Locations_03_V2.png
          168 kB
        26. Multiple_Issue_Locations_02.png
          Multiple_Issue_Locations_02.png
          198 kB
        27. Multiple_Issue_Locations_02_V2.png
          Multiple_Issue_Locations_02_V2.png
          197 kB
        28. Multiple_Issue_Locations_01.png
          Multiple_Issue_Locations_01.png
          173 kB
        29. Multiple_Flows_06.png
          Multiple_Flows_06.png
          100 kB
        30. Multiple_Flows_06_V2.png
          Multiple_Flows_06_V2.png
          99 kB
        31. Multiple_Flows_02.png
          Multiple_Flows_02.png
          100 kB
        32. Multiple_Flows_02_V2.png
          Multiple_Flows_02_V2.png
          99 kB
        33. Multiple_Flows_01.png
          Multiple_Flows_01.png
          197 kB
        34. Multiple_Flows_01_V2.png
          Multiple_Flows_01_V2.png
          197 kB
        35. filter.svg
          0.6 kB

          Issue Links

            Activity

              People

              • Assignee:
                fabrice.bellingard Fabrice Bellingard
                Reporter:
                stas.vilchik Stas Vilchik (Inactive)
              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: