Opened 23 months ago

Closed 20 months ago

Last modified 19 months ago

#3184 closed New feature (fixed)

Several Usability improvements and tweaks

Reported by: matt Owned by: capedfuzz
Priority: major Milestone: 1.8.4 - Piwik 1.8.4
Component: UI - UX (AngularJS, twig, less) Keywords:
Cc: Sensitive: no

Description

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?

Attachments (4)

3184.diff.tar.gz (4.6 KB) - added by capedfuzz 21 months ago.
Patch for 'visits by day of week' report.
3184_dateselector.diff.tar.gz (4.0 KB) - added by capedfuzz 21 months ago.
Patch for date selector changes.
3184_dateselector.diff.tar.2.gz (4.3 KB) - added by capedfuzz 21 months ago.
New patch for this issue.
3184_allwebsites.diff.tar.gz (3.5 KB) - added by capedfuzz 20 months ago.
Patch for all websites title tooltip.

Download all attachments as: .zip

Change History (49)

comment:1 Changed 23 months ago by matt (mattab)

  • Component changed from Core to UI - UX (tpl, js, css)

comment:2 Changed 21 months ago by capedfuzz (diosmosis)

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

Changed 21 months ago by capedfuzz (diosmosis)

Patch for 'visits by day of week' report.

comment:3 Changed 21 months ago by capedfuzz (diosmosis)

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.

comment:4 Changed 21 months ago by matt (mattab)

Since this patch is beyond the simple UX improvement I created a new ticket please commit there: http://dev.piwik.org/trac/ticket/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 !

comment:5 Changed 21 months ago by matt (mattab)

  • 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!

Changed 21 months ago by capedfuzz (diosmosis)

Patch for date selector changes.

comment:6 Changed 21 months ago by capedfuzz (diosmosis)

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

comment:7 Changed 21 months ago by matt (mattab)

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!

Changed 21 months ago by capedfuzz (diosmosis)

New patch for this issue.

comment:8 follow-up: Changed 21 months ago by capedfuzz (diosmosis)

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.

comment:9 Changed 21 months ago by capedfuzz (diosmosis)

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

comment:10 Changed 21 months ago by capedfuzz (diosmosis)

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

comment:11 Changed 21 months ago by capedfuzz (diosmosis)

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

comment:12 in reply to: ↑ 8 ; follow-up: Changed 21 months ago by matt (mattab)

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

comment:13 in reply to: ↑ 12 Changed 21 months ago by capedfuzz (diosmosis)

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?

comment:14 Changed 21 months ago by matt (mattab)

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

comment:15 Changed 21 months ago by capedfuzz (diosmosis)

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.

comment:16 Changed 21 months ago by capedfuzz (diosmosis)

Commit [6656] refs this issue.

comment:17 Changed 21 months ago by matt (mattab)

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.

comment:18 Changed 21 months ago by matt (mattab)

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?

comment:19 Changed 21 months ago by matt (mattab)

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

comment:20 Changed 21 months ago by capedfuzz (diosmosis)

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

comment:21 Changed 21 months ago by capedfuzz (diosmosis)

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

comment:22 Changed 21 months ago by capedfuzz (diosmosis)

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

comment:23 Changed 21 months ago by capedfuzz (diosmosis)

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

comment:24 Changed 21 months ago by capedfuzz (diosmosis)

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

comment:25 Changed 21 months ago by capedfuzz (diosmosis)

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

comment:26 Changed 21 months ago by matt (mattab)

  • Owner set to capedfuzz

comment:27 Changed 20 months ago by capedfuzz (diosmosis)

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

comment:28 Changed 20 months ago by capedfuzz (diosmosis)

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

comment:29 Changed 20 months ago by capedfuzz (diosmosis)

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

comment:30 Changed 20 months ago by capedfuzz (diosmosis)

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

comment:31 Changed 20 months ago by capedfuzz (diosmosis)

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

Changed 20 months ago by capedfuzz (diosmosis)

Patch for all websites title tooltip.

comment:32 follow-up: Changed 20 months ago by capedfuzz (diosmosis)

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?

comment:33 Changed 20 months ago by capedfuzz (diosmosis)

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

comment:34 in reply to: ↑ 32 Changed 20 months ago by matt (mattab)

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%

comment:35 Changed 20 months ago by capedfuzz (diosmosis)

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

comment:36 follow-up: Changed 20 months ago by matt (mattab)

// 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?

comment:37 in reply to: ↑ 36 Changed 20 months ago by capedfuzz (diosmosis)

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?

comment:38 Changed 20 months ago by matt (mattab)

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

comment:39 Changed 20 months ago by capedfuzz (diosmosis)

  • Resolution set to fixed
  • Status changed from new to closed

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

comment:40 Changed 20 months ago by capedfuzz (diosmosis)

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

comment:41 Changed 20 months ago by capedfuzz (diosmosis)

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

comment:42 Changed 20 months ago by capedfuzz (diosmosis)

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

comment:43 Changed 20 months ago by matt (mattab)

  • Priority changed from normal to major
  • Summary changed from Piwik list of small changes to improve UX to Several Usability improvements and tweaks

comment:44 Changed 20 months ago by matt (mattab)

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

comment:45 Changed 19 months ago by capedfuzz (diosmosis)

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

Note: See TracTickets for help on using tickets.