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