Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Several Usability improvements and tweaks #3184

Closed
mattab opened this issue Jun 4, 2012 · 46 comments
Closed

Several Usability improvements and tweaks #3184

mattab opened this issue Jun 4, 2012 · 46 comments
Assignees
Labels
Enhancement For new feature suggestions that enhance Matomo's capabilities or add a new report, new API etc. Major Indicates the severity or impact or benefit of an issue is much higher than normal but not critical.
Milestone

Comments

@mattab
Copy link
Member

mattab commented Jun 4, 2012

I've spent few hours with first time piwik users and here are some thoughts:

General UI misc screens

  • Subtable referrer urls should show full URL on hover?
  • New graph: Day of week (shown when period != day). Linked from Visits per hour report.
  • Calendar: changing month very confusing UX
  • anonymous token auth wont be used message should be lighter
  • Hide token in password reset screen
  • Anonymous/Admin access should be N/A
  • In User management permissions, remove the yellow box by default instead of flashing effect
  • in the keyword widget, goal view, show total revenue, total conversions + show goal? + change icon to ecommerce?
  • Top menu: add "title" element with the feature description (invalidating/updating plugin descriptions?)

All websites dashboard

  • hover title, 50 visits in May 2012 compared to 46 visits (-10%) in April 2012
  • click on sparkline should over graph + overview? or go to stats?
  • Problem: All websites report Actions but call it Pageviews. Report pageviews instead?
@diosmosis
Copy link
Member

(In [6546]) Refs #3184, added ability to specify custom tooltips for datatable labels & modified Referers>Websites table to show full referer url as the tooltip. Also tweaked tooltip CSS style.

@diosmosis
Copy link
Member

Attachment: Patch for 'visits by day of week' report.
3184.diff.tar.gz

@diosmosis
Copy link
Member

I uploaded a patch for the visits by day of week report. It wasn't a straightforward change, though, so a review might be a good idea.

Some notes on the patch:

  • Added the ability to show every x-axis tick on a bar garph.
  • I disabled the report for multiple sites & date ranges, since the operation would become rather complicated.
  • Added AddRowsWithLabel filter which adds empty rows for labels that don't exist in the data table.
  • Modified the DbStats plugins to show every tick for the overview report.

Let me know what if it's ok to commit.

@mattab
Copy link
Member Author

mattab commented Jul 25, 2012

Since this patch is beyond the simple UX improvement I created a new ticket please commit there: #3275

Code review

  • 'VisitTime_VisitsByDayOfWeek' => 'Visits by day of week',
    Please capitalize Day of Week
  • the new filter AddRowsWithLabel I think is not necessary: it would be easier to implement it as a private function in the calling code (I think the code could be simpler just to attest this use case...
    • ... it would be better even if we didn't have to fill in the blanks first. The code could just assume zeros for Mon-Sun and then fill in the days for which we have values, do you see what I mean?
  • in the test output file, the labels are the numbers not the day name?
  • does it load fine when period=year on a busy DB? we can try it on the demo after the next RC
  • $dateRange = $oPeriod->getDateStart()->toString().','.$oPeriod->getDateEnd()->toString();
    Here when looking at a month report, i think it could pay to show the repartition by Day of Week based on the first 28 days of the month.
    • otherwise (unless we are looking at "weekly" reports) some days will always have bigger stats and it might be confusing?
  • nice refactoring in makePeriodFromQueryParams !

@mattab
Copy link
Member Author

mattab commented Jul 27, 2012

  • added ability to specify custom tooltips for datatable labels & modified Referers>Websites table to show full referer url as the tooltip. Also tweaked tooltip CSS style.

VERY nice change, well done... also I really like that it only shows on the span, much better this way!

@diosmosis
Copy link
Member

Attachment: Patch for date selector changes.
3184_dateselector.diff.tar.gz

@diosmosis
Copy link
Member

I put up a preliminary patch for the changes to the date selecting widget. It works, but I'm going to review it from a performance perspective. Either way, it's good to review :)

@mattab
Copy link
Member Author

mattab commented Jul 29, 2012

Code review calendar ux

  • Very nice changes... from the demo you sent me it looks really amazing!
  •       firstOfViewedMonth = new Date(viewedYear, viewedMonth, 1),
    
  •       lastOfViewedMonth = new Date(viewedYear, +viewedMonth + 1, 0);
    

the + in front of viewedMonth is the unary plus symbol

Did you put it because it was needed, ie. can the viewedMonth be a string?

If so it is should be better to do it at time of init variable.

  • Can you please test with IE/FF/Chome/Opera to ensure it's working nicely in all?
  • +1 on testing performance. I can recommend using Firebug (see section Profile JavaScript performance to see if some functions are called too often. for example, sometimes it can be valuable to cache often-called DOM selectors in local variable to reuse the selector rahter than the browser doing the DOM lookup on every mouse move etc.
  • I really like the result on a UX perspective, well done!

@diosmosis
Copy link
Member

Attachment: New patch for this issue.
3184_dateselector.diff.tar.2.gz

@diosmosis
Copy link
Member

I attached a new version of the date selector patch. I've optimized it to the point where calendar.js takes ~1/3-1/4 the time of the datepicker functions themselves. I've tested on chrome, firefox & IE and everything seems to work. There might be some issues w/ selecting a year on firefox, but it should be fixed. Let me know if it's good to commit.

@diosmosis
Copy link
Member

(In [6632]) Refs #3184, hide anonymous user settings if no website visible by anonymous user.

@diosmosis
Copy link
Member

(In [6634]) Refs #3184, hide 'done' div in UsersManager.tpl in HTML not in javascript, and move it to right of table so page doesn't jump when it's toggled.

@diosmosis
Copy link
Member

(In [6635]) Refs #3184, remove unused translation entry.

@mattab
Copy link
Member Author

mattab commented Aug 2, 2012

Replying to capedfuzz:

I attached a new version of the date selector patch. I've optimized it to the point where calendar.js takes ~1/3-1/4 the time of the datepicker functions themselves. I've tested on chrome, firefox & IE and everything seems to work. There might be some issues w/ selecting a year on firefox, but it should be fixed. Let me know if it's good to commit.

Looks good! One more suggestion: when 2 dates are selected in left and right calendars, could you color all dates in between? this would clarify users that the active selection is a range :)

@diosmosis
Copy link
Member

Replying to matt:

Looks good! One more suggestion: when 2 dates are selected in left and right calendars, could you color all dates in between? this would clarify users that the active selection is a range :)

I've thought about this some and I think it's possible but would require modifying the widget to do something similar to what GA does. Right now the two calendars can be for the same month, so if the range is in that one month, we'd either have to show the highlighted range in both, or just one. Either way, it'd be confusing.

The modification to make it more like GA's range picking widget would take some time though. I think it would be better to commit what I've got right now and work on the range selector change in a new ticket. What do you think?

@mattab
Copy link
Member Author

mattab commented Aug 2, 2012

Good point for date ranges within 1 month.
Looks good to me!

@diosmosis
Copy link
Member

I've run into an issue w/ adding the 'Total Conversions' column. Adding it stretches the table out so it overlaps w/ the table next to it. I think there needs to be some sort of UX abstraction to deal w/ a potentially large number of columns. Here are some ideas off the top of my head:

  • Add left/right arrow icons to the second & last table header to cycle through columns. The icons could instead be above the table header, and maybe only show when the mouse hovers over them.
  • Add a right arrow icon to the end of a data table. When clicked, the rest of the page fades to a a darker color and the entire table is shown in a sort-of pop-up. For this idea, could also replace the last column w/ a blank column showing '...'. Hovering over the icon would show a list of the columns that are available.

@diosmosis
Copy link
Member

Commit [6656] refs this issue.

@mattab
Copy link
Member Author

mattab commented Aug 3, 2012

Add a right arrow icon to the end of a data table. When clicked, the rest of the page fades to a a darker color and the entire table is shown in a sort-of pop-up. For this idea, could also replace the last column w/ a blank column showing '...'. Hovering over the icon would show a list of the columns that are available.

I think this could be very nice, but it would actually "push" the other content to the right as it would be nice to still see other reports on the same page, but in darker layer.

Do you mind creating a separate ticket for this new feature? We could think more about it especially how we would use in other reports.

@mattab
Copy link
Member Author

mattab commented Aug 5, 2012

Feedback on the calendar:

  • the "week" highlight should also highlight the days in the week that are in the previous/next month, ie. highlight the full row
  • since we changed the UI that it now requires 2 clicks to change to a week/month, maybe how could we make it more clear that a click on the calendar is required?
    • For example, maybe below the calendar, when a different period was clicked, we could display a little Notice message that says "Please select a $period in the calendar", for example in yellow with a little top arrow?
    • Alternatively, we could add a yellow border to the calendar showing that an action is required?
    • what do you think?

@mattab
Copy link
Member Author

mattab commented Aug 5, 2012

Feedback calendar continued:

  • it makes more sense to color today's date in the calendar, since the data is actually included (even though, sometimes only part of the day will be).
  • today's date is not highlight-able but should be when the mouse is on hover

@diosmosis
Copy link
Member

(In [6683]) Refs #3184, highlight 'today' in period selector.

@diosmosis
Copy link
Member

@matt Created the ticket #3305 for the 'showing many columns in DataTables' issue.

@diosmosis
Copy link
Member

(In [6693]) Refs #3184, add ability to set tooltip for links in top bar.

@diosmosis
Copy link
Member

(In [6696]) Refs #3184, highlight whitespace when appropriate in period selector when period == week

@diosmosis
Copy link
Member

(In [6697]) Refs #3184, color period selector whitespace when week is selected, and change period when whitespace is clicked for week & year periods.

@diosmosis
Copy link
Member

(In [6698]) Refs #3184, make cursor a pointer when hovering over week/year periods that use period selector whitespace.

@diosmosis
Copy link
Member

(In [6828]) Refs #3184, display tooltips for top bar links.

@diosmosis
Copy link
Member

(In [6829]) Refs #3184, show N/A for anonymous user + admin access in Users Manager tab.

@diosmosis
Copy link
Member

(In [6830]) Refs #3184, make sparkline in All Websites dashboard a link to individual site's dashboard.

@diosmosis
Copy link
Member

(In [6875]) Refs #3184, change current period when date selector's selected period is clicked again.

@diosmosis
Copy link
Member

(In [6877]) Refs #3184, add tooltip for selected period in period selector.

@diosmosis
Copy link
Member

Attachment: Patch for all websites title tooltip.
3184_allwebsites.diff.tar.gz

@diosmosis
Copy link
Member

The all websites 'hover title' item was a bit more complex than I anticipated. I've uploaded a patch, could you do a quick review?

@diosmosis
Copy link
Member

(In [6888]) Refs #3184, underline selected period in period selector when it can be clicked & refactor 'change period' tooltip showing code.

@mattab
Copy link
Member Author

mattab commented Sep 3, 2012

Replying to capedfuzz:

The all websites 'hover title' item was a bit more complex than I anticipated. I've uploaded a patch, could you do a quick review?

Looks good! Only suggestion is:

  • Could you prepend + to the percentage when it's a positive change? ie.+847% instead of 847%

@diosmosis
Copy link
Member

(In [6912]) Refs #3184, added tooltip to All Websites Dashboard's total summary that describes total visit evolution.

Notes:

  • Added tooltip to sparkline in all websites dashboard.
  • Added several new DataTable metadata entries to MultiSites::getAll/One result.

@mattab
Copy link
Member Author

mattab commented Sep 3, 2012

// NOTE: no easy way to set last period date metadata when range of dates is requested.
//       will be easier if DataTable_Array::metadata is removed, and metadata that is
//       put there is put directly in Piwik_DataTable::metadata.

Do we not need the ability to set the matedata to the Array itself? if not, then please let's make the change if easy enough?

@diosmosis
Copy link
Member

Replying to matt:

// NOTE: no easy way to set last period date metadata when range of dates is requested.
//       will be easier if DataTable_Array::metadata is removed, and metadata that is
//       put there is put directly in Piwik_DataTable::metadata.

Do we not need the ability to set the matedata to the Array itself? if not, then please let's make the change if easy enough?

The metadata in DataTable_Array is the metadata for each DataTable it holds. For example, the Array returned from an IndexedByDate query will associate idSite w/ Piwik_Site instances:

'0' => new Piwik_Site(0),
'1' => new Piwik_Site(1),
...

along w/ other info like the period.

If the information is set in DataTable::metadata, however, then there's no need for DataTable_Array::metadata.

I've made the change in my local branch for #3124, however, I don't think it's that high a priority. What do you think?

@mattab
Copy link
Member Author

mattab commented Sep 4, 2012

If the change improves or does not worsen memory usage, and if it simplifies the code a bit, it would be nice if you could commit it (technical debt is best avoided when possible :))

@diosmosis
Copy link
Member

(In [6920]) Fixes #3184, show pageviews in all websites dashboard instead of actions.

@diosmosis
Copy link
Member

(In [6931]) Refs #3184, fixing build.

@diosmosis
Copy link
Member

(In [6933]) Refs #3184, fixing build.

@diosmosis
Copy link
Member

(In [6937]) Refs #3184, fix ApiGetReportMetadata_yearTest.

@mattab
Copy link
Member Author

mattab commented Sep 9, 2012

(In [6950]) Refs #3184 fixes sparklines for Pageviews

@diosmosis
Copy link
Member

(In [7092]) Refs #3184, fix firefox period selector issue when double clicking the selected period and make sure double clicking period selector labels doesn't select the text.

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Enhancement For new feature suggestions that enhance Matomo's capabilities or add a new report, new API etc. Major Indicates the severity or impact or benefit of an issue is much higher than normal but not critical.
Projects
None yet
Development

No branches or pull requests

2 participants