@diosmosis opened this Pull Request on April 23rd 2019 Member

Fixes #5711

Still a WIP

@diosmosis commented on April 27th 2019 Member

FYI @mattab / @tsteur ready for an initial UX review. Comparisons should be integrated in the following ways:

-> html table (including actions table + support for subtables)
-> evolution graphs
-> bar graphs
(not pie graphs, since it's not possible to show multiple serieses)
(not sparklines since we'd have to color code different comparisons, which would be confusing w/ evolution graphs since they have their own colors)
-> row evolution/overlay/transitions/segmented visitor log (they display on comparison rows and parameters should change appropriate for the specific compared period/segment)
NOTE: there is one issue here when the table is too big. When there are too many rows, maxNumRowsToHandleEvents blocks row actions from displaying. Since comparing multiplies the amount of rows, it can happen often.

Remaining todo:

  • [ ] see if we can eliminate need for maxNumRowsToHandleEvents
  • [ ] fix random UI issues (eg, normal subtables have a huge label column)
  • [ ] UI tests
  • [ ] other in source todo
@mattab commented on July 9th 2019 Member

After using feature for 1-2 hours here is below all the feedback I could think of. Looking forward to the next iterations and getting this beautiful feature in Matomo 3.11.0.

Feedback

  • It will be a game changer for day to day real use of Matomo! :rocket: :rocket: Lots of work left but hope below is helpful (ping me on chat to clarify anything)
  • When opening Matomo, and then the calendar, clicking "Compare" checkbox, nothing happened.
    • Expected instead, that the previous period would be automatically automatically selected. (comparisons period selectors in other products would similarly select the previous period and let user change it.). For example: while viewing "June 2019" and checking "Compare" i'd expect it to automatically change the month to the previous period ie. "May 2019", and ideally also show a message explaining what is happening Click on the period to compare with June 2019. (maybe on hover on the calendar after Compare was checked)
    • When period is "Date range" and user clicks "Compare", two new input fields would be displayed to let the user easily keyboard-input the start and end date date to compare against. (important to have keyboar support as it can be confusing to use calendar for people)
    • If period is "Date range" then the previous period of the same number of days would be pre-selected. The two new input fields start-end date range compare would be pre-set to this date range.
  • After selecting a period to compare, a block is displayed that reads April 2019 (big white block with close icon) while the calendar reads May 2019 (small grey box). We'd want the periods being compared to be listed next to each other. Maybe Dates + Segments blocks could be all on the sae line (and remove Expected a consistent display of the dates being compared "April 2019 vs May 2019" (sorted in chronological order).
    • Somehow the new block "April 2019" would need to display using the same font-size/color/importance as "May 2019" and ideally closer to each other visually.
    • Currently it is possible to compare days to weeks to months. Lets restrict to only compare the same periods together. Comparing custom periods can be done clicking "date range" first.
    • Not sure how we could best display the elements being compared in general, but ideally the "current period" and "Current segments" would be displayed using the same design as the dates & segments being compared.
  • For the user experience of comparing a new segment. Reckon it is quite hard to know and to click on the small icon. Ideally we would improve this but not sure how to, do you maybe have ideas?
  • Visits log, Real-time visits, Real-time map: guess these can't support date or segment comparisons. in GA you can only look at one segment at a time as well. On these pages where comparison is not possible, can we instead remove the date/segment compare elements (icons, blocks) to visually feedback users these reports are not supported. For example currently on the Real-time page, and the Real-time map page, the calendar is hidden when the page loads. We could maybe at the same time hide the comparison blocks from the page.
    • Same issue with reports: Transitions, Users Flow, Campaign URL builder, Multi Attribution, Funnels, Forms Real-time, Media Real-time, Heatmaps, Session Recordings, Cohorts. <- need to remove the compare feature on these pages.
  • How would the exporting of the comparison data work? Ideally when people click Export buttons we'd export the data from all the compared periods. Haven't checked how the API output looks like currently in the branch? would it support our standard formats: JSON, XML, CSV, etc.

    • Sparklines text would need to mention both periods being compared, like GA does eg. show the % difference (red/green) and then show, for each metric under evolution graph, a metric for each period/segment being compared. It's not needed to show the lines in the sparkline graphs in MVP maybe,
      • important to have the text and metric value for each period/segment. How could it look like? Here is our current sparklines design with a red/green evolution number:
        Screenshot from 2019-07-09 23-23-40.
    • Here in GA how they display the metrics when comparing 2 dates: Screenshot from 2019-07-09 17-38-51
    • Comparing 2 days and 2 segments (the sparkline image + text is duplicated for each Segment being compared)
      Screenshot from 2019-07-09 23-27-07

    • implementing a beautiful comparison view for Sparklines is important because Sparklines are used everywhere (in all Overview screens) and so this will benefit heaps of pages & reports.
    • For example Goal reports, Visitor Overview, Media overview, Form overview, detailed form report,
    • (maybe later we decide to show several sparklines mini-graphs but it is not needed for now and the text display of the compared KPIs and % evolution will be tons of value compared to showing 2+ lines in sparkline mini graphs)
  • Pie charts: ideally we would show the pie charts one after/above one another as this is the only way and also very valuable. It lets us see the information at once.
  • Same with historical bar graphs. They are readable when there are up to 3 series (dates and/or segments) being compared. Above this ideally bar graphs would be split and displayed above each other (useful visual comparison).

Do-able:

Screenshot from 2019-07-09 22-35-56

Not do-able:

Screenshot from 2019-07-09 22-35-47

  • Regarding bar charts, ideally the tooltip on a given hovering, would show the tooltip of all dates/segments being compared. Currently tooltip looks like this:
    onlyone

Expected it to display the 3 values (also the other 2 periods being compared at this part of the graph)

  • The evolution graph metric tooltip on hover, does not show the "current date" being compared against eg.:
    Screenshot from 2019-07-09 17-45-38
  • In the report table, the current date is not displayed in Grey like other compared elements:
    Screenshot from 2019-07-09 21-59-56

  • Compare icon is missing next to "All Visits" when a segment is selected. So it seems not possible to compare an opened segment to "All Visits" segment.

  • Maybe the calendar hover color could also change from grey and black to lighter green and green, showing that we're selecting a different period?

  • Comparing segments failed here with error The segment condition 'visitCount&lt' is not valid.).

  • Whenever two periods are being compared in the calendar, for example comparing May and June 2019, would expect the evolution graph to default the graph to view the data day by day. (ie the feature Change period below the evolution graph). So that we can see on a graph, the 2 months day by day. Same when comparing weeks or years or any period. this is eg. how GA works.
    • the tooltip would need to include the date being shown I think? currently it looks like below (demo2 link reproduce)

Screenshot from 2019-07-09 22-19-01

  • There is a new (+205%) data point in the reports on hover. Could we add the description help text that explains where the number is from, on hover on the tooltip? it currently can say eg. 100 visits represents Y of Y with Z and we could append a text would need to explain and give the numbers used to process ratio) eg. "this is an evolution of +229.5% compared between May 2019 (xyz visits) and June 2019 (100 visits)."
  • Data not displayed on Search Engines & Keywords page

  • reports label is empty in reports in the Campaigns page
  • some reports error eg. Pages Following a Site Search - demo2 reproduce url

  • Goal metrics are not displayed when compared (reproduce url

  • it should be prevented to add the same period/segment twice to the comparison eg (July used twice).:
    Screenshot from 2019-07-09 23-05-08

  • tried paging through the sub-table in a custom report (reproduce url) and got error Comparing segments/periods with subtables only works when the comparison idSubtables are supplied as well.

  • Cohorts report (reproduce url) fails with `Please specify a value for 'cohorts'. when comparing periods

  • when multiple dates are selected, always order the dates chronologically to prevent mis-ordered periods eg:

Screenshot from 2019-07-09 23-06-55

  • The Change period feature and some icons are a bit broken:
    Screenshot from 2019-07-09 22-19-01

  • Important: Table comparison when 2 date ranges are being compared (or 2-3-4-n segments). The table can be more compact and easier to scan the data if we could compress the rows from the current view:
    Screenshot from 2019-07-09 22-12-00

to this:
Screenshot from 2019-07-09 22-12-46

it's still important to display the row with the date range label, when we compare dates And segments at the same time. But when we only compare dates, or segments, then the rows can be compressed.

@tsteur commented on July 17th 2019 Member

@diosmosis did quickly look through the code and left a few notes. Awesome feature and don't have many comments on the code so far :) will look again once finished.

fyi getting this warning:

/plugins/CoreVisualizations/JqplotDataGenerator/Evolution.php(192): Warning - Declaration of Piwik\Plugins\CoreVisualizations\JqplotDataGenerator\Evolution::initChartObjectData($dataTable, $visualization) should be compatible with Piwik\Plugins\CoreVisualizations\JqplotDataGenerator::initChartObjectData($dataTable, Piwik\Plugins\CoreVisualizations\JqplotDataGenerator\Chart $visualization) - Matomo 3.10.0
  • Maybe we could also add a new challenge to the Tour plugin to motivate a user to try a date comparison for example. You could add a challenge under plugins/Tour/Engagement, register the challenge in plugins/Tour/Engagement/Challenges.php and mark it as completed when eg compareDates parameter is set similar to here: https://github.com/matomo-org/matomo/blob/3.11.0-b2/plugins/Tour/Tour.php#L43-L57

  • there seems to be an issue with the evolution graph buttons... I think I commented somewhere, where a quote was maybe not correctly placed... maybe it's that... see screenshot :

image

  • Not sure if it was mentioned before but in an evolution graph where I compared two dates, it was only showing data for one date, but not the other. Since the 2 dates are close to each other, they maybe should have shown some data? see screenshot: (maybe it'll be fixed when fixing the other notice I mentioned above)

image

  • The export URL doesn't include the comparison parameter by the looks

  • From @mattab feedback

For the user experience of comparing a new segment. Reckon it is quite hard to know and to click on the small icon. Ideally we would improve this but not sure how to, do you maybe have ideas?

I actually found this a quite good solution without cluttering the UI etc. just the icon would maybe need to be changed.

  • From @mattab fedback re pie charts and bar graphs. Let's be realistic and keep it simple keeping in mind the 80/20 rule. let's not have different views depending on how many things are being compared and go for one solution only. Either show them all next to each other or all in one graph.
Powered by GitHub Issue Mirror