Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Several Usability improvements and tweaks #3184

Closed
mattab opened this Issue · 46 comments

2 participants

Matthieu Aubry Benaka
Matthieu Aubry
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?
Benaka
Collaborator

(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.

Benaka
Collaborator

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

Benaka
Collaborator

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.

Matthieu Aubry
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 !
Matthieu Aubry
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!

Benaka
Collaborator

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

Benaka
Collaborator

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 :)

Matthieu Aubry
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!
Benaka
Collaborator

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

Benaka
Collaborator

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.

Benaka
Collaborator

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

Benaka
Collaborator

(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.

Benaka
Collaborator

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

Matthieu Aubry
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 :)

Benaka
Collaborator

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?

Matthieu Aubry
Owner

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

Benaka
Collaborator

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.
Benaka
Collaborator

Commit [6656] refs this issue.

Matthieu Aubry
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.

Matthieu Aubry
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?
Matthieu Aubry
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
Benaka
Collaborator

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

Benaka
Collaborator

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

Benaka
Collaborator

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

Benaka
Collaborator

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

Benaka
Collaborator

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

Benaka
Collaborator

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

Benaka
Collaborator

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

Benaka
Collaborator

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

Benaka
Collaborator

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

Benaka
Collaborator

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

Benaka
Collaborator

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

Benaka
Collaborator

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

Benaka
Collaborator

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?

Benaka
Collaborator

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

Matthieu Aubry
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%
Benaka
Collaborator

(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.
Matthieu Aubry
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?

Benaka
Collaborator

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?

Matthieu Aubry
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 :))

Benaka
Collaborator

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

Benaka
Collaborator

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

Benaka
Collaborator

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

Benaka
Collaborator

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

Matthieu Aubry
Owner

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

Benaka
Collaborator

(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.

Matthieu Aubry mattab added this to the 1.8.4 - Piwik 1.8.4 milestone
Benaka diosmosis was assigned by mattab
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.