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
Recommend
HTML head tag meta to achieve refresh redirection
Copy code The code is as follows: <html> &l...
CentOS7 network configuration under VMware virtual machine (host wireless Internet access)
This is the first time I used the CentOS7 system ...
Supplementary article on front-end performance optimization
Preface I looked at the previously published arti...
Detailed explanation of three ways to import CSS files
There are three ways to introduce CSS: inline sty...
Example of troubleshooting method to solve Nginx port conflict
Problem Description A Spring + Angular project wi...
Solution to Apache cross-domain resource access error
In many cases, large and medium-sized websites wi...
Web interview: The difference between MVC and MVVM and why Vue does not fully comply with MVVM
Table of contents Difference between MVC and MVVM...
Specific use of Docker anonymous mount and named mount
Table of contents Data volume Anonymous and named...
uniapp project optimization methods and suggestions
Table of contents 1. Encapsulate complex page dat...
React ref usage examples
Table of contents What is ref How to use ref Plac...
Detailed explanation of four solutions for implementing in-line scrolling on mobile devices
Discovering Needs If only part of an area is allo...
Solve the problem that ifconfig and addr cannot see the IP address in Linux
1. Install the Linux system on the virtual machin...
Generate OpenSSL certificates in Linux environment
1. Environment: CentOS7, Openssl1.1.1k. 2. Concep...
HTML code text box limit input text box becomes gray limit text box input
Method 1: Set the readonly attribute to true. INPU...
Understand CSS3 Grid layout in 10 minutes
Basic Introduction In the previous article, we in...