Libertem: 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! :+1:

[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.

[SahanWickramage]

Okay @AnandBaburajan. Thanks :)

[SahanWickramage]

how about something like this? Now the "Browse" button stays on center all the time to keep the consistency. I kept it simple to reduce the cognitive load on the user. And I tried to give a awareness about what is going on and what the user can do about it.

[sk1p]

@SahanWickramage I like the simplicity. Maybe the duplicated logo on the top-left can be removed from the empty state screen? The "footer" element being on the bottom right creates a bit of asymmetry, maybe also center that? As detailed above, the browse button should be a "primary action" and highlighted appropriately. In the interest of time, I think you can start with the PR already

[SahanWickramage]

I'm struggling to implement the one-time rendering of the empty state. Because the empty state should disappear after clicking the "Browse" button for the first time. @sk1p , do you have any suggestions to implement the one-time rendering?

I will fix the footer element. Furthermore, shall we keep the left side LiberTEM logo and replace the center LiberTEM logo with something else? left side logo is always at that place for every time. So disappearing left side logo only for the empty state is a bit tricky and it adds more complexity to code.

So @sk1p, if it is good to keep the left side logo and replace the center logo, do you have any suggestions about an image that can replace the center LiberTEM logo? Or if it is good to keep the center LiberTEM logo, I will remove the left side logo from the empty state.

[sk1p]

do you have any suggestions to implement the one-time rendering?

It doesn't have to be one-time - if the user closes all data sets (and the file browser), they can be shown the empty state again. As for suggestions - have a look at the redux state using redux devtools at the beginning and see how it changes once you click on browse etc. - that should give you an idea what the condition should be for displaying the empty state

Furthermore, shall we keep the left side LiberTEM logo and replace the center LiberTEM logo with something else? left side logo is always at that place for every time.

I'm not sure what to replace it with.

So disappearing left side logo only for the empty state is a bit tricky and it adds more complexity to code.

It should not be too tricky - you can re-use the logic that decides if we are in empty state or not

[uellue]

Hi all, FYI the issue is still open since PR #709 was not finished and closed since it is inactive now. Anybody who would like to address this would be very welcome! Just drop a comment here or in the Gitter chat and we discuss next steps! :-) CC @AnandBaburajan

[faraz16iqbal]

Would be interested in working on this!

[AnandBaburajan]

Would be interested in working on this!

Hi @faraz16iqbal, thank you! You can share your draft design here and the mentors will give you feedback ASAP, but do check out https://github.com/LiberTEM/LiberTEM/issues/656#issuecomment-598230600 which can give you some general feedback. Here's our contributing guide, if you haven't checked already. Feel free to ask any doubts here or at our Gitter chat. Thanks again!

[faraz16iqbal]

@AnandBaburajan can you just tell me if this issue isn't closed because someone seems to have fixed this already

[AnandBaburajan]

can you just tell me if this issue isn't closed because someone seems to have fixed this already

Yes, this issue is still open

[SahanWickramage]

can you just tell me if this issue isn't closed because someone seems to have fixed this already

Hi, @faraz16iqbal. The issue is still open. If you have any doubt just drop a message on Gitter chat.