New design for Nodes Modal

[dvidotti]

close #703

[vpetersson]

@dvidotti can we modify this instead such that they start to render top to bottom. I'm thinking something like a 3 or (rows) by 10 column or similar and pagination if needed.

[dvidotti]

https://www.loom.com/share/c106727e9c314c0ea91d9bb0d5035e69

@vpetersson I'm trying to understand better your request so I would like to present some points:

How it works now:

This modal supports 4 columns and it has a max-height and a fixed width. When the number of nodes is bigger than supported by the modal size, it has a vertical scroll as you can see in the video above.

To make more than 4 columns we would need to decrease padding and font-size, this would break readability. Another option would be to increase the modal size, but this breaks the design pattern for modals.

When you say render top-to-bottom you mean having this:

Instead of this:

Or you just mean to align the list-items to the top, like this:

When you say:

"I'm thinking something like a 3 or (rows) by 10 column or similar and pagination if needed."

Do you mean remove the scroll and change for pagination with a click inside the modal?

[vpetersson]

Do you mean remove the scroll and change for pagination with a click inside the modal?

Yes, I'm thinking a click for pagination, but no scroll (scroll in modal is a bad UX).

Also, we have far too much whitespace vertically. We can cut out on that and fit a lot more data.

[a-martynovich]

Why is scroll in modal a bad UX?
Pagination is bad UX in my opinion. Everything should be scrollable infinitely.

[vpetersson]

“When I look at something, I should be able to discover what operations I can do [...] When [discoverability] is not there, well, you don't know how to use something.” – Don Norman, Director of the Design Lab at University of California, San Diego

Both on mobile and on macOS, scroll bars are hidden. It's entirely possible that the user will not even know that it is a scrollable item (unless the text is cut off).

Reasonable good article on UX:
https://www.appcues.com/blog/bad-ux-mistakes

The authority (IMHO) on good UI/UX design is Apple's Style Guide. It doesn't have anything to say about this in particular, but just want to put it out there.

[a-martynovich]

Both on mobile and on macOS, scroll bars are hidden

this is fixable.

And then, having a modal in front of everything else, not visually bound to the row, pop up when you click on the row, is not a good UX at all. You don't see which row or column it relates to, so you can't use this data.

[dvidotti]

Both on mobile and on macOS, scroll bars are hidden. It's entirely possible that the user will not even know that it is a scrollable item (unless the text is cut off).

IMO this is the main point of this issue, we might solve this with a visible scroll or a click. I'll test both.

[dvidotti]

@vpetersson , @a-martynovich I made some changes on the modal. They solve the UX problem with the scroll visible, and creat cards to organize better the list-items.
When we have a big name for the node that doesn't fit in the card, we can check them with the hover. Please let me know if this solves our issue.