[MGNLGAV-14] Improve styling of google-analytics columns in pages app Created: 25/Jan/16  Updated: 09/Mar/16  Resolved: 08/Mar/16

Status: Closed
Project: Google Analytics Visualization
Component/s: None
Affects Version/s: None
Fix Version/s: 1.0

Type: Improvement Priority: Neutral
Reporter: Milan Divilek Assignee: Antonín Juran
Resolution: Fixed Votes: 0
Labels: usability, ux
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File Google Analytics.module.png     PNG File Screen Shot 2016-01-25 at 09.26.59.png     PNG File attachment-1.png    
Issue Links:
dependency
relation
is related to MGNLGAV-4 Add functionality to compare statisti... Closed
is related to MGNLGAV-22 Improve styling of google-analytics c... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Sprint: Kromeriz 33, Kromeriz 34
Story Points: 3

 Description   

I've had a look at the attached screenshot showing the current status of how GA columns look in Pages and have a designed a solution for how we can improve the overall appearance and legibility of the values in these columns.

Here are my suggestions, which you'll also find visualized in the attached wireframes.

Use of icons

As for the icons, let's do this:

  • We keep on using the icons you've suggested for "increased" and "decreased" (see below as to why).
  • We also color both text and icon (green for increase, red for decrease).
  • We do not show any icon, if a particular value does not show a clear increase or decrease. In such a case, the text also sports the regular black text color.

The icons you've chosen (the double chevrons) actually fit the context well and are not uncommon in financial applications. They have the advantage that we could eventually use a single chevron, if an increase or decrease was only slight, and a double chevron if it was significant. Actual arrows are used as well and are especially well working to indicate trends, but for now we're good. I plan on ordering arrows in a future update of the font, but that's going to take a while.

Labels and alignment

  • Let's align the icons on the left, the values on the right, similar to how we show date and time in datetime columns.
  • If a value gets large, hide the icon first. It's not essential.
  • If it gets even larger, truncate the value on the left, but provide for a tooltip that shows the full value on mouse over (if feasible, also show the tooltip on tap/click, but that's secondary).
  • If a row is selected, show all icons and labels in white.

Make sure you use the typical margins and or paddings we already use in cells.

The alignment changes provide for a calmer appearance and allow to quickly skim the column on the left for specific changes.

Column and value widths

  • The default width of these columns should be rather narrow, but still accommodate typical values easily.
  • Avoid that a column with default width already shows a truncated label. Provide thus for the configuration of a short and long column title label. Show the short one by default, the longer one in a tooltip.


 Comments   
Comment by Andreas Weder [ 25/Jan/16 ]

Linked a follow-up ticket that would allow to hide the GA columns, since they take up a lot of screen width, but are not always important, even if you install the Google Analytics module (see MGNLGAV-16).

Comment by Antonín Juran [ 15/Feb/16 ]

Some of tasks in the ticket could be probably done in UI (for example: If a value gets large, hide the icon first, If a row is selected, show all icons and labels in white...)

Comment by Antonín Juran [ 03/Mar/16 ]

Tasks below are not resolved:

  • If a value gets large, hide the icon first. It's not essential.
  • If it gets even larger, truncate the value on the left.

DIV element doesn't fire a resize event, so isn't possible to handle the event when DIV width is changed.
Tried handle mouseup and mousedown events on DIV element with CSS class v-table-resizer – mouseup event on the element doesn't work.

Comment by Milan Divilek [ 07/Mar/16 ]

Reopen: Please see attached screen (attachment-1.png). This is after clean installation of module. GA-Columns are too wide and it looks weird.
Seems that removing expandRatio (using default value) from column's definitions fixed the issue.

Generated at Mon Feb 12 02:04:30 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.