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
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
- 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.
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.