Givewp: Reports UI / UX Improvements

[DevinWalker]

Issue Overview

When you select a custom date range the user wants to click on "Refresh Reports" when this isn't the correct button.

Possible Solution

Move the placement of the button to the left hand side and update the button text to say "Clear Reports Cache".

Todos

• [ ] Move button
• [ ] Update button text

[mathetos]

I think we should do both.

1. Move the date/filter button to be top-left above the reports. I think that's a more expected position for changing the date range for a chart like this.
2. Change the button text to say "Clear Report Cache". That's what it literally does and I think the word "Refresh" can cause confusion in this case.

[kevinwhoffman]

I agree top-left makes sense for controls, but I think we need to maintain a sense of visual hierarchy. First the user should select the type of report, _then_ they filter the results. If we put the filter first, then the report type gets lost in the top-right corner. I've attempted to address this concern in the following mockups.

Income Over Time - Custom (Current UI)

For comparison, this is the full UI in question. Controls clustered in bottom right are out of sight and create confusion.

Income Over Time - This Month (Proposed UI)

Let's take a step back and look at a revision of the default Reports screen. Controls have been moved to the top left. The report type dropdown that says Income Over Time replaces the redundant title and keeps UI elements to a minimum.

My recommendation for button text is Refresh Reports Data with a possible icon for extra clarity. Many users won't know what a cache is or why clearing it is important. The concept of refreshing the data within the report is easier to grasp and more likely to catch the user's eye if they are wondering why their report is outdated. This button is also separated from the other controls now so that alleviates much of the confusion.

Income Over Time - Custom (Proposed UI)

Once Custom is selected, the date fields appear in place. First the user selects report type, then time period (in this case Custom), then specific dates. From left to right we've established a sequential, visual hierarchy that goes from general to specific. We could clean this up further by replacing the six dropdowns for Month, Day, and Year with two datepicker fields.

We can extend this UI to all four of the major report screens to create a consistent interface across the board. See below.

Donation Forms (Proposed UI)

Donors (Proposed UI)

Payment Methods (Proposed UI)

Thanks for your feedback.

[DevinWalker]

I think this looks great. The one concerning thing for me is not having the report title displayed for a11y reasons. I believe it can actually be there and hidden using the screen-reader-text class built into WP core. Can you make sure it's still there when developing?

[mathetos]

I agree, looks great and will be a better experience for donors. I'd like to add using a Datepicker for the Date range options instead of the three different dropdowns.

[kevinwhoffman]

@DevinWalker We discussed giving each report its own tab to make use of the space made available by other tab changes in 1.8. With Logs and Tools tabs moved elsewhere, we can remove the dropdown navigation and instead give each report its own tab as follows:

• Income
• Forms
• Donors
• Payment Methods
• Export???

Not sure Export makes sense as a tab alongside the other reports, but I also don't think it should be separated too far from the reports themselves. What do you think?

[ramiy]

I agree, separate tabs are more useful then drop-downs.

[mathetos]

@kevinwhoffman I DO think Export should be it's own Tab. It's consistent with the current navigation users experience and it really is a different type of functionality than all the other reports.

[DevinWalker]

@mathetos "Export" is moving out of reports to its own tab in the new "Tools" section

[mathetos]

@DevinWalker I'd argue for keeping it with Reports since each export is a form of Reporting. And that's where our current users already expect to find it.

Ideally (and you and I just discussed this a bit IRL), we'd lose "Exports" all together and just have an Export Button on each individual Report as well as on the Donors page as well. But that can come later. For now, just give Exports it's own vertical tab in 1.8 and we'll iterate later.

[kevinwhoffman]

The Reports tabs are remaining horizontal in 1.8. Here's what that would look like:

Question is whether Export should be the fifth tab next to these Reports tabs, or whether it should be moved to Tools. We're all in agreement that exporting ideally occurs in the context of the report itself, but we're not there yet. To Matt's point, Export functionality has always lived under Reports and moving it to Tools doesn't make it more intuitive or easier to find; it really just serves to clean up the Reports screen. That alone doesn't feel like justification for messing with users' expectations.

My vote is for Export to remain as the 5th tab under Reports until integrated exporting is possible from within the report.

[DevinWalker]

Ok, let's keep it where it's at and then further down the line we can do like shift to exporting based on the report being viewed.