How to beat the UI / UX of such a prototype?

Question

JavaScript

Until I started to implement it, and in order not to redo it, I decided to ask you.
There can be more than 1 such block. In each block, there is a "Header" and a table type.
For example, "line3", when you click on the line, namely the checkbox, the line-variant "line3" is selected and an additional info-block under the line is opened. If you select "line1" through the checkbox, then the info block will be displayed under it and will move the lines lower, like a slideDown. The content in the info block is different, from forms to text.

Tables always have sorting, but with an additional info block it will complicate everything and I want to avoid it.

How to beat ux, are there any principles, rules for building an interface for such a case?
Please share links if they exist. Thank you!

Answer 1

Still, it depends on the problem statement, i.e. if the prototype is yours and it can be corrected, then I would correct some points. And if the prototype is approved, and you need to draw the interface, then you don’t even have to talk about convenience :)
In essence: the headings on the left confuse me the most, but if the table is not very wide, and the headings are one word, then this is an option. If we are talking about the web, then on the tubes you still have to make headings above the table, so why pull?)
I don’t see any problems with the text under the table, the main thing is the styles: the text of the infoblock cannot be separated by a line (border) from the line, otherwise the belonging will be lost. For this reason, the table must be without vertical borders, otherwise it will be terrible. The text of the infoblock itself can be enclosed in some kind of "bubble", which will point to the line. And then everything will look decent even if there are 100 lines (you can still close the info block when opening another, but if they are large, the page will twitch).
In terms of interaction, the behavior of the checkbox is a bit illogical. As a rule, the user must first see a hint, and then make a choice. If this is not a test, then you can display the infoblock as a tooltip when hovering over the checkbox, and by clicking "spread" the line and leave the infoblock visible.
Advice could be more specific if there was an understanding of what kind of product, where it is used, by whom :)

Answer 2

Where is the UI/UX? Fucking uncomfortable crap.
So you are really asking how to do what a UI (User Interface - beauty) / UX (User experience - convenience / simplicity ) designer must be able to do?

How to beat ux, are there any principles, rules for building an interface for such a case?

Just gesture, not a question))) Jeff Raskin tells you something? Woe interfacers.
Why do you undertake to "beat" what you do not know how to "beat".
The task of UX is to do so in order to avoid the mess that you have on the screen. Fuck the guy who gave you this wireframe and calls himself U Xer .
ps
Sorry, but it just turns me out of those who proudly call themselves someone, although they don’t even understand who it is. Even if it's not the author.

Answer 3

Use the state and when something changes in it, everything is redrawn. An array will do just fine.
It would be nice to screw React (or another UI library) here to make it easier to interact with the DOM.
But you can write everything yourself :-)