Clearer UI design needed

[batjko]

Issue description

I am going through the tutorial and find it really hard to comprehend the UI. No doubt it makes sense for those who are used to it or perhaps have used similar tools in the past (although even then, I am not sure this works as well as it could).

For example, this is quite a mess, UX-wise:

It's impossible to read anything clearly, the boundaries of each block are barely visible and seemingly overlapping and simply very chaotic.

There is no clear separation between the list of files and the graph section; they just sort-of flow into each other.

The font color is too dark so not the easiest to read. And there are separate pieces of information stuffed together into the same box, separated by ellipses, and again it's not clear what is what and how the different bits and bobs are related to each other.

I kept trying to highlight a section in the graph by clicking and dragging across it (you know, like a "brush" in a lot of chart libraries) but it does nothing. This is fine, but I'm sure I'm not the only one with that expectation.

The interactivity of the different bars in the graph is not at all obvious, because the on-hover dropdown is very subtle and again the colors are not well separated and the box is overflowing partially, but not clearly, so hard to differentiate at first sight:

Also, the fact that you have to click on the chart in order to get back to the default view (after expanding) is very unexpected behaviour and confused me at first (I read it in the tutorial, but if one has to read the docs to grasp an interaction, that's already bad UX).

Now, I'm not a designer at all, and I don't want to poo poo the product, which is extremely helpful (kudos :+1:). I just wanted to log a bit of frustration with the UI, as I start to familiarize myself with it. Cheers.

[AlanSl]

Hi Patrick, thanks for the detailed feedback. We're mid-way through a design and UX update, and will definitely take your comments on board.

Can you please provide some details of your OS, browser and screen resolution? There are some differences in rendering of colours on Canvas between environments, and the lines in your screenshots look slightly thinner and feinter than what I've seen in our testing, so I want to make sure the new UI is definitely tested in that environment too.

The documentation walkthrough is currently based on a slightly older version of the UI than the latest release, so, apologies about any confusion caused by differences here between screenshots and the latest version of the tool. The docs will all be updated when the latest UI updates land. Those UI updates will also include an in-tool interactive walkthrough that explains key concepts without having to navigate to documentation pages.

Regarding going back after expanding - a "Contract" button should appear where you expand. Is that showing? If it is, I'll add a note to make sure it is more prominent and persistent in the new design. If there isn't, that might be a bug - can you please upload a sample using clinic upload 123.clinic-flame where 123.clinic-flame is the generated data directory, and post a link to the upload here.

The "brush" idea you discuss (zooming by dragging across the page) sounds like a good one. Can you post it as a feature request issue on https://github.com/nearform/node-clinic-flame ?

[batjko]

Hi @AlanSl,

Thank you for your comprehensive response. This was me on Chrome (latest) for Linux (Ubuntu 18.10, 64bit). I can see now that it looks somewhat different than in other screenshots I've seen (e.g. in this project's README) which are indeed less cluttered and look a bit neater.

Regarding going back after expanding - a "Contract" button should appear where you expand. Is that showing?

Yes, I can see the contract button now that you've pointed it out, so I paid attention to it. Again, it could just be my inexperience in tools like this or the fact that the colors in my version (my browser/OS setup) didn't make the visual differentiation particularly easy, but it would perhaps be nice if a more obvious way could be found.

I'll open a ticket about the brush on the other repo.

[DylanC]

@batjko - The font colour has been resolved in the latest release. (dark shadow on expanded sections also improved) Your other points may still be relevant here.