Better empty state experience

[sk1p]

See also, for example:

https://www.toptal.com/designers/ux/empty-state-ux-design
https://www.justinmind.com/blog/everything-you-need-to-know-about-empty-state-design/

This is based on a comment from the hackathon in berlin - right now our empty state (after launching the workers / connecting to a cluster) is basically just the browse button kind of shyly hidden away on the top left below the logo - we could make much better use of the empty state.

On one hand, we can present the "browse" action as a much more prominent call to action. On the other hand, we could also put some project-specific links and "actions" there, like "If you are using LiberTEM in your work, please cite us", or "Please star us on GitHub" etc., or "Give us feedback by opening an issue" (wording to be improved).

Some of these could also be put into a permanent footer.

[sk1p]

An example empty state from vscode showing some common keyboard shortcuts:

[sk1p]

See also, the "welcome page" of vscode:

[anandbaburajan]

I'm interested to work on this!

[sk1p]

Nice to hear, @anandbaburajan! Let me know if the ideas given in the issue description are enough to get you started. Also, don't hesitate to add drafts of your design as screenshots to this issue - that way, we can give you quick feedback.

[anandbaburajan]

Let me know if the ideas given in the issue description are enough to get you started.

Yes, and I'll share my drafts here.

[anandbaburajan]

[uellue]

This looks nice! 👍

[sk1p]

Specifically, about the Help section, a challenge is: the docs are changing, and we are not currently shipping them with LiberTEM itself. So a) linking to the online docs may result in dead links after some time, and b) the GUI doesn't know what top-level documentation items are available, the list would have to be maintained manually. I would suggest we keep the number of docs links low, maybe just the main documentation link, and GUI usage, which should be the most important links in this context.

A point about the layout: the empty state layout should be as similar to the "normal" layout, after loading some data. If we want to keep the wide layout, maybe a good point would be that we should also have a wide layout for the layout after loading data.

About the "Get started" and "call to action" section: the content that replaces the placeholder should have roughly the same shape and extent. If the whole right part of the UI is also replaced when clicking browse, the dashed line should represent that, IMHO. Maybe one could put the two-column layout into the dashed line? The left part having the call-to-action, the right part having "auxiliary information" or some sorts. See also: skeleton screens

The call-to-action button itself ("Browse") should have the primary action color, which is blue, like the "apply" buttons. In the non-empty state, the browse button should revert back to the grey color scheme.

Generally, let's also look at it from an information-architecture point of view. I think there will be at least three "slots" where we can put links and information:

• empty state, which is only displayed if no data sets are opened
• footer, which is always below the content
• "information modal box", which is currently accessible via the "i"-icon next to the LiberTEM logo

We have to think about what information can be kept in the footer, and what is only needed on the "empty" state, and what can be "hidden away" to the information modal.

There are a few goals of these links:

• presenting the main action, "browse" in this case
• get feedback, bug reports, contributions from users (github issue link, gitter link, ...)
• get "citations", in form of papers citing our software, or GitHub stars
• help our users in form of documentation
• inform about license details

We need to take care to not make the screen too cluttered. License details, for example, could be hidden in the modal. But maybe we can guide users better to this modal.

Additionally: we actually have a second "empty state", which is if you open a data set, there are no analyses there yet. So we should also guide the user to add their first analysis in a more prominent way. Maybe we can solve this in the same manner.

I know some of this is still a bit general, but I hope this helps! Let me know if you want to discuss any specifics!

[SahanWickramage]

I would like to work on this issue. I will share my design here.

[sk1p]

@anandbaburajan are you still working on this? @SahanWickramage please coordinate with @anandbaburajan who already started working on this to make sure no work is duplicated!

[anandbaburajan]

I planned to continue working on this once I'm done with my GSoC proposal, and I'm still interested.
But @SahanWickramage, if working on this is part of your GSoC proposal, feel free to take this up.
Otherwise, we can definitely talk about collaborating on this!

[SahanWickramage]

I would like to collaborate @anandbaburajan. Since I have not done any PR yet :D and this issue has "good first issue" label on it, so I chose this issue. But I can try another "good first issue". :)

[anandbaburajan]

I meant, we can collaborate, if this isn't your 'mandatory GSoC pull request'. But it is, and I understand, so you can take up this issue completely.

I would like to work on this issue. I will share my design here.

I understand you have your own designs and I think the mentors would prefer to solve this issue in its entirety with a single PR, so please go ahead.