Several Usability improvements and tweaks

mattab commented 12 years ago

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 12 years ago

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

diosmosis commented 12 years ago

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

diosmosis commented 12 years ago

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

diosmosis commented 12 years ago

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

diosmosis commented 12 years ago

(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 12 years ago

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 12 years ago

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 12 years ago

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 12 years ago

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 12 years ago

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 12 years ago

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 12 years ago

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

diosmosis commented 12 years ago

(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 12 years ago

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

mattab commented 12 years ago

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 12 years ago

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 12 years ago

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

diosmosis commented 12 years ago

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 12 years ago

Commit [6656] refs this issue.

mattab commented 12 years ago

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 12 years ago

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 12 years ago

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 12 years ago

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

diosmosis commented 12 years ago

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

diosmosis commented 12 years ago

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

diosmosis commented 12 years ago

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

diosmosis commented 12 years ago

(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 12 years ago

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

diosmosis commented 12 years ago

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

diosmosis commented 12 years ago

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

diosmosis commented 12 years ago

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

diosmosis commented 12 years ago

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

diosmosis commented 12 years ago

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

diosmosis commented 12 years ago

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 12 years ago

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

mattab commented 12 years ago

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 12 years ago

(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 12 years ago

// 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 12 years ago

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 12 years ago

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 12 years ago

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

diosmosis commented 12 years ago

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

diosmosis commented 12 years ago

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

diosmosis commented 12 years ago

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

mattab commented 12 years ago

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

diosmosis commented 12 years ago

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

matomo-org / matomo

Several Usability improvements and tweaks #3184