Design of pop-up windows and floating layers in web design

In the trend of gradual transition from traditional Software to Webware, design patterns and technologies have undergone dual changes and advancements. We advocate that the tasks on the page should correspond to clear user groups and that the tasks should be few and precise. Back to our traditional back-end software system, we are facing system and process reengineering. It is natural for us to think of migrating the design ideas in Web services to the backend software system. In most cases, this will make the system more lightweight, more clearly structured, and provide insight into and optimization of the software's user base.
However, do improvements that help improve usability need to be made in software systems? Let me share an example today.

The background is:
1. A page contains a main task and several branch tasks as well as the page information architecture required to complete the main task.
2. There are many user roles and a large amount of information, but the page area is limited and can only display the information required for the main tasks.
We face one of these challenges:
1. When making a decision on the main task, it is necessary to view the details of the branch tasks under certain conditions to support the decision.
2. When making decisions on branch tasks, it is necessary to view the main task information under certain conditions to support the decision.

At the beginning, we naturally categorize and organize the information required for the task, making the page more structured. A large number of presentation layer scripting languages are used in the hope of making the page slimmer and the operation smoother. As can be seen from the picture, the previous page jump is changed to a mask floating layer popping up on the current page. At this point, we discovered that we had overlooked a problem. After the page uses the floating layer, the relationship between the main task and the branch task changes from parallel to inclusive. The branch task is in the position of the main task in other system environments, and there is no inclusive relationship between the tasks. In a page as long as 3 screens, the floating layer can achieve free information combination, information comparison and free movement in the previous parallel relationship structure. However, when the amount of information is complex, moving the floating layer, dragging the scroll bar, and the floating layer covering some information make users frown during environmental testing. Because the previous habits of parallel structure, free opening and hiding, irregular contrast and dragging between primary and secondary tasks can no longer be continued. At this point, if the problem of the system structure itself is not taken into consideration, the use of the pop-up layer here can allow users to be more free and unrestrained, and also reduce the system adjustment costs brought about by business expansion and tension. The floating layer commonly used nowadays will restrict the usage process.
Measure whether a feature that can improve the usability of a software system is suitable for a software system. It is not only necessary to examine it from the perspective of usability, but also to have a deep understanding of factors such as system structure, user habits and technical costs. If it is a Web service product, it needs to be measured more thoroughly.

<<: Let's talk in depth about the principle and implementation of new in JS

>>: Attributes and usage of ins and del tags