@mattab opened this Issue on June 4th 2012 Owner

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 commented on July 24th 2012 Member

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

@diosmosis commented on July 27th 2012 Member

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

@diosmosis commented on August 1st 2012 Member

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

@diosmosis commented on August 27th 2012 Member

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

@diosmosis commented on July 24th 2012 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 commented on July 24th 2012 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 commented on July 25th 2012 Owner

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 commented on July 27th 2012 Owner
  • 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 commented on July 27th 2012 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 commented on July 29th 2012 Owner

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 commented on August 1st 2012 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 commented on August 2nd 2012 Member

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

@diosmosis commented on August 2nd 2012 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 commented on August 2nd 2012 Member

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

@mattab commented on August 2nd 2012 Owner

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 commented on August 2nd 2012 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 commented on August 2nd 2012 Owner

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

@diosmosis commented on August 2nd 2012 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 commented on August 3rd 2012 Member

Commit [6656] refs this issue.

@mattab commented on August 3rd 2012 Owner

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 commented on August 5th 2012 Owner

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 commented on August 5th 2012 Owner

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 commented on August 6th 2012 Member

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

@diosmosis commented on August 7th 2012 Member

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

@diosmosis commented on August 7th 2012 Member

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

@diosmosis commented on August 7th 2012 Member

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

@diosmosis commented on August 7th 2012 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 commented on August 7th 2012 Member

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

@diosmosis commented on August 19th 2012 Member

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

@diosmosis commented on August 19th 2012 Member

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

@diosmosis commented on August 19th 2012 Member

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

@diosmosis commented on August 26th 2012 Member

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

@diosmosis commented on August 27th 2012 Member

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

@diosmosis commented on August 27th 2012 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 commented on August 30th 2012 Member

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

@mattab commented on September 3rd 2012 Owner

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 commented on September 3rd 2012 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 commented on September 3rd 2012 Owner
// 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 commented on September 3rd 2012 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 commented on September 4th 2012 Owner

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 commented on September 5th 2012 Member

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

@diosmosis commented on September 6th 2012 Member

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

@diosmosis commented on September 6th 2012 Member

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

@diosmosis commented on September 7th 2012 Member

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

@mattab commented on September 9th 2012 Owner

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

@diosmosis commented on October 3rd 2012 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 on October 3rd 2012
Powered by GitHub Issue Mirror