Toolbar Design and Improvements

[devmount]

I'm not very happy with the current design of the toolbar in ThirdStats. @Eagle3386 and @koobs already had great ideas for improvements (#188, #273) and I want to use this discussion to summarize and collect all ideas to design a new, usable and intuitive toolbar for ThirdStats.

Current state

Currently the toolbar looks like this (wide viewports > 1750px):

or this (medium viewports <= 1750px)

or this (small viewports)

Existing ideas

I'm aware of the following improvement ideas and debatable points (no specific order, enumerated for referral):

1. Prefill date range filter fields with border dates (date of earliest email and today)
2. Highlight date range input font color, if it differs from border dates
3. Adding date pickers for both date input fields
4. Quick-selection buttons for date ranges of whole years
5. Display clear-filter-buttons only when a value is set
6. Filter-fields vs Select-fields (should drop-downs be seen and handled as filter or list of possible actions? See Dont display clear selection (X) icon unless there is a value in the related control #273 (comment))

New ideas

As the current layout has reached it's limit in horizontal space, fresh ideas on how to implement the toolbar are welcomed and encouraged! Keep in mind, that the toolbar should be easy to access, easy to understand and it must be clear and obvious for the user which values are currently set/filtered.

I'm happy about every idea, thought and contribution on this! 💚

[koobs]

Related, documenting your "design system" (framework, standards, rules, principles, decisions etc) will be good for all our future selves

[devmount]

Totally agree. As I don't want to make things too complicated, I think of a simple style-guide markdown file we can work on together.

[Eagle3386]

Regarding the last idea, as @koobs already suggested in the linked comment, keeping a consistent UI is probably at utmost importance towards clear & intuitive UX. Therefore I'd like to encourage a reorganization like so:

1. Account selection is normally already done upon entering ThirdStats as its TB toolbar icon opens an overlay allowing for specific account or overview of all accounts stats. Therefore this toolbar element is of less importance than contact, date or folder & should be moved between the Data collected X days ago label & the export icon button.
2. Speaking of that very label, I'd like to suggest more usable, relative date info, i. e. 39 days should be displayed as 1 month, 1 week, 1 day or maybe even more relative like almost 1.5 months ago.
3. Contact & folder drop-downs should be next to each other as it not only seems more logical, but also more intuitive to either filter for a date range or a contact/folder - but I can't find a definitive choice for myself whether date range or contact/folder should be first.
4. That refresh button next to the account drop-down is a bit misleading regarding UX as all other controls only offer a clear button to their right. Besides automatic refreshes (either every now & then or upon X mails processed by TB), forcing a refresh is something I'd expect within the "export / settings icon area" & given my first suggestion within this comment, it would suit that idea even more.
5. Labels should be simplified, e. g. by removing the word "Mails", etc. - suggestions: Total. Unread. Received. Monthly. Daily & Junk.
6. Those percentages that are zero-only, i. e. 42.00% of total should show up as 42% of total only.

[koobs]

I have notes on standardised terminology, graph consistency and other principles I'll put up tomorrow to chew through

[devmount]

@Eagle3386 Great suggestions, many thanks for this! As soon as I had time to pour them into a mockup image, we can discuss them further to find the final decision.

@koobs Awesome, looking forward to your notes. I'll let you know, when I created a style-guide.md for you to PR your notes in.