[WIP] Productivity analytics - UX debt fixes

Working Google Doc

The list of immediate usability issues related to the latest release of productivity analytics.

Disable scroll to Zoom functionality on charts

  • User context:
    • When the user is scrolling across charts, this manipulates the chart data - zooming in and out
  • Usability problem:
    • Embedded scrolling on sub-components of a page is a big no-no. The user will unintentionally manipulate chart data when they actually intend to get to the bottom of the page.
  • Solution:
    • Remove the scroll to zoom in/zoom out effect on charts
    • Keep the chart area scroll bar below the chart as the only method for manipulating data on the chart

Analytics button in side panel menu

  • User context:
    • User is navigating between dashboards using Analytics side panel menu
  • Usability problem:
    • Analytics looks and behaves like a button which is not useful and confusing
  • Solution:

Chart/Table Labels

  • User context:
    • Reviewing my dashboard, I want to understand data easily
  • Usability problem:
    • Merge Requests dashboard title easily mistaken for Time to Merge chart/widget title
    • Menu says Productivity Analytics, but the page title is Merge Requests and only contains Merge Request data?
    • Time to Merge
      • Days to Merge more accurate and consistent with x axis lable than time to merg
      • Number of Merge Requests more intuitive than Merge Requests (and more consistent with other labels - see chart three)
      • Days to Merge likely more intuitive than Days
    • Time from first…
      • Time from first commit to first comment might be easier to understand than Time from first commit until first comment (and more consistent with other selections)
    • Time from first… and Number of…
      • Not all data has been process yet… (without more explanation this undermines value/confidence - maybe a link or info icon to more information)
    • List
      • List should be description of data displayed
      • Lacks empty state
  • Solution:

Clear chart data & filters

  • User context:
    • User is filtering data in charts by clicking on bars
  • Usability problem:
    • The user can easily get lost when zooming in or out of the chart - leaving a filter applied without them being able to see where it is
  • Solution:
    • Add a “Clear chart filters” button in the top right hand corner of the charts (styled as an inline link)

Chart data selection

  • User context:
    • User is filtering data in charts by clicking on bars
    • I select very small item in a chart, and forget it's selected because it's so small
    • I share the dashboard with someone else, and they don't notice what is selected or that it's effecting the data
  • Usability problem:
    • No way to multi-select items in one interaction e.g. drag-to-select
    • No visual difference between appearance of charts that can be clicked-to-filter vs one that can’t
    • Reinforce and highlight what chart data is selected
  • Solution:
    • Potential solutions:
    • Reinforce what is selected in title or blur - or use dismiss-able tags with dismiss all option

Chart data - Visual relationship between top and bottom graphs

  • User context:
    • When the user is manipulating data on the top chart, and the bottom chart data is linked
  • Usability problem:
    • There is a linked loading animation, but may not be immediately clear
  • Solution:
    • Design required

Selecting groups, projects and filters

  • User context:
    • User is selecting groups, projects and filters
  • Usability problem:
    • User is able to select entities that are not relevant (i.e. projects and groups without data, non-relevant labels, etc)
    • Dropdowns are narrow (when extra horizontal space is wasted between Search or Filter and Timeframe
    • Truncated selections do not have tooltips to reveal selected item title
    • If/when exported, users would not be able to see what is selected
    • Unable to select specific timeframes, like milestone range, quarter, month, etc.
    • Why does Timeframe have a label when other dropdowns do not. Is it necessary?
  • Solution:

De-selecting groups, projects & filters

  • User context:
    • When the user has a group, project and filters selected but wants to to look at some new data, the chart data and dropdown values do not clear entirely
    • This issue is partially covered in Cannot remove project selection
  • Usability problem:
    • This makes it confusing and unclear what filters are applied
    • No clear way of removing filters
  • Solution:
    • When de-selecting group -- clear all chart data, the dropdown value, projects
    • Design required: Reset button?
      • Group and project dropdowns are only there because we couldn't use filters for them at the time of implementation. This should be revisited and group and project dropdowns should be changed to filters in the search bar.
  • Additional questions
    • When de-selecting group -- should we clear filters too? Or would users want to keep these filters applied across group level?

#MR indicator in group and project dropdown

  • User context:
    • When the user is browsing through projects and groups, the dropdown only shows their titles
  • Usability problem:
    • Often you will click on a group without knowing whether there is any data there or not
  • Solution:
    • Add an #MR indicator next to title to show whether there is data??

Search bar & drop-down width

  • User context:
    • [add image]
  • Usability problem:
    • Hard to immediately read titles within drop-downs
  • Solution:
    • The search box should fill whatever the remaining width is and we should extend the width of groups and projects dropdowns. The minimum should be so that the placeholder fits in whole. Right now, it gets truncated Select a proj....
    • Also, why is the Choose a group dropdown so large when no group is selected, but shrinks down in width once a group is selected? I think they should be the same width in both states.

Empty state copy

  • User context:
    • Empty state immediately when user arrives on productivity analytics page
  • Usability problem:
    • The wording in the empty state dialogue is passive and does not match the microcopy within the “Choose a group” dropdown.
  • Solution:
    • Change copy in empty state from:
      • “Start by choosing a group to start exploring the merge requests in that group. You can then proceed to filter by projects, labels, milestones, authors and assignees.”
    • to:
      • “Choose a group to start exploring the merge requests in that group. You can then proceed to filter by projects, labels, milestones, authors and assignees.”

Avatar size in bottom list

  • Problem:
    • Hard to see who the contributor is in the list with current avatar size (14x14px)
  • Solution:
    • Use a larger (24x24px?) avatar

Productivity & cycle analytics icons

  • Problem:
    • These icons probably aren’t the best metaphor for the functionality of the tools
  • Solution:
    • Change icons
    • Design required
Edited by Brandon Labuschagne