Uploaded image for project: 'Product Roadmaps'
  1. Product Roadmaps
  2. MMF-763

Revamped Issues page



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


      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.


      Here's an interactive prototype to make it clearer :

      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.



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

          Issue Links



              fabrice.bellingard Fabrice Bellingard
              stas.vilchik Stas Vilchik (Inactive)
              0 Vote for this issue
              3 Start watching this issue