Next

See a list below of some small UX quirks / amends. Individually each one is quite minor, but collectively they will have a positive impact on the overall UX.

Graph Pages

• Please set a min-height on the chart/nav containing element, as to avoid the jump between sections.
• The navigation shouldn't disappear when a new chart is being fetched. It should always be visible even when chart data is being fetched from the API.

• A minimum y axis threshold should be set for any chart where a negative value doesn't make sense. For example, the earning charts, logically shouldn't display negative values in the y-axis. Rather the y axis should start at zero.
• When displaying currency values in the y-axis, let's format these accordingly. e.g. 0.5 becomes $0.50 etc. This will make the values a lot easier to scan and interpret.

• The time-range select menu (top-right) doesn't align correctly with the below chart (Refer to original designs here -> https://invis.io/KWU1X9IEB2U#/385304955_Analytics_-Desktop_Refactor-_A)

• The select menu layout, in particularly spacing, doesn't match the designs. Please see below. I would consider adding a min-width value so the width of the select doesn't vary as the selected values change.

• The width of the navigation area is currently quite narrow. It should be increased to match the width of the designs.

• Ensure consistent spacing. Note that the spacing to the left of the chart and nav should be equal.

• I've made a very minor design update to the chart, which looks and feels much better. Please refer to https://invis.io/KWU1X9IEB2U#/385304955_Analytics_-Desktop_Refactor-_A - All data points should be displayed by default. White circle with blue border. When active/hovered it turns solid blue.

• The line thickness should be 1px. Implementation seems to be around 2px

• There should be spacing between the y axis labels and chart. In the current implementation there are flush with one another.

Trending

Please refer to below screenshot

• A: Values should be centre aligned. Currently they are left aligned

• B: Ensure spacing left and right matches design. Current implementation looks very tight.

• C: Spacing between metrics should be increased to match designs

• D: Content should be positioned in the middle to match designs.

• E: Select menu should be flush with the containing element below.

• If possible, the font weight throughout the table should be 300. This is Light

changed milestone to %Pro Beta #release

changed the description

Following on from our call yesterday @ottman and @jotto141 - see the above first pass CR on the analytics charts. Lots of little amends, but when completed will greatly improve the overall look and feel.

@omadrid - if you want to discuss any of the above, please let me know, and I'd be happy to chat.

cc @markeharding @xander-miller

assigned to @omadrid

added scoped labels

mentioned in merge request front!614 (merged)

added scoped label

added scoped label and automatically removed label

marked the task Ensure consistent spacing. Note that the spacing to the left of the chart and nav should be equal. as completed

marked the task I've made a very minor design update to the chart, which looks and feels much better. Please refer to - All data points should be displayed by default. White circle with blue border. When active/hovered it turns solid blue. as completed

marked the task The line thickness should be . Implementation seems to be around as completed

marked the task There should be spacing between the y axis labels and chart. In the current implementation there are flush with one another. as completed

marked the task A: Values should be centre aligned. Currently they are left aligned as completed

marked the task B: Ensure spacing left and right matches design. Current implementation looks very tight. as completed

marked the task C: Spacing between metrics should be increased to match designs as completed

marked the task D: Content should be positioned in the middle to match designs. as completed

marked the task E: Select menu should be flush with the containing element below. as completed

marked the task If possible, the font weight throughout the table should be . This is as completed

marked the task When displaying currency values in the y-axis, let's format these accordingly. e.g. becomes etc. This will make the values a lot easier to scan and interpret. as completed

marked the task The width of the navigation area is currently quite narrow. It should be increased to match the width of the designs. as completed

marked the task The select menu layout, in particularly spacing, doesn't match the designs. Please see below. I would consider adding a value so the width of the select doesn't vary as the selected values change. as completed

• Haven't done set the minimum y-axis threshold because that's only happening for you in the charts where there isn't any data. When I tell the y-axis to be in 'non-negative' mode, it removes the 0-line which makes things look wrong.

• Also haven't changed the loading behavior (chart disappearing on api fetch) as per convo with @markeharding - there were some changeDetection issues so this is going on the backburner for the time being.

marked the task Please set a on the chart/nav containing element, as to avoid the between sections. as completed

added scoped label and automatically removed label

closed via commit front@f03e30f6