Method and system for determining display position of non-modal popup window based on multi-dimensional analysis

Abstract

The invention discloses a method and a system for determining a display position of a non-modal popup window based on multi-dimensional analysis. The method comprises the following steps of: S1, selecting an orientation meeting popup window display conditions around a target element: acquiring the position and the size of the target element, the size of a page visual area and the size of the non-modal popup window; s2, ranking the areas meeting the display conditions according to user attention; s3, determining a display position: selecting an area which meets popup window display conditions and has the lowest user attention as a final display area of the popup window; and S4, dynamic adjustment: when the screen size changes, dynamically adjusting the width and height of the non-modal pop-up window in real time. According to the method, the optimal display position of the non-modal pop-up window is determined through multi-dimensional data analysis, so that the shielding of key information of a user or the interference of an operation process of the user is avoided, the visual fatigue and cognitive burden of the user are reduced, and the overall user experience is improved.

Description

Technical Field

[0001] The present invention relates to the field of computer information processing technology, and in particular to a method and system for determining a non-modal pop-up window display position based on multi-dimensional analysis. Background Art

[0002] With the rapid development of Internet technology, the user interface design of web pages and applications has become increasingly complex. As one of the key factors to measure the success of a product, user interaction experience has received unprecedented attention. Among them, text prompt non-modal pop-ups provide users with instant information and operation feedback. As one of the important elements of user interaction, its appearance location and method are directly related to the user's experience. However, traditional non-modal pop-ups often use fixed positions to display pop-ups. This method fails to fully consider the user's focus area on the web page, which may cause important content to be blocked, thereby reducing the efficiency of information transmission and user experience.

[0003] In order to solve this problem, it is necessary to develop a system that can adaptively adjust the position of the pop-up window according to the page content and user behavior. This system can intelligently analyze the user's focus area on the current web page and adaptively adjust the position of the pop-up window accordingly to avoid blocking key information. In this way, not only can the user experience be improved, but also the efficient transmission of information can be ensured, thereby improving the usability and user satisfaction of the entire application.

[0004] The information disclosed in this background technology section is only intended to deepen the understanding of the overall background technology of the present invention, and should not be regarded as acknowledging or suggesting in any form that the information constitutes the prior art already known to those skilled in the art. Summary of the invention

[0005] The purpose of the present invention is to provide a method and system for determining a non-modal pop-up window display position based on multi-dimensional analysis, so as to solve the technical problems existing in the prior art.

[0006] In order to achieve the above object, the present invention adopts the following technical solutions: The present invention provides a method for determining a non-modal pop-up window display position based on multi-dimensional analysis, comprising: S1. Select the position around the target element that meets the pop-up window display conditions: obtain the position and size of the target element, the size of the visible area of ​​the page, and the size of the non-modal pop-up window; S2. Ranking the areas that meet the display conditions according to user attention: Perform heat map analysis on the user behavior data returned by the web page heat map analysis tool to obtain user attention data for different areas on the web page; and rank the areas around the target element that meet the pop-up display conditions from high to low according to user attention; S3. Determine the display position: select the area that meets the pop-up window display conditions and has the lowest user attention as the final display area of ​​the pop-up window, and display the non-modal pop-up window; S4, dynamic adjustment: When the screen size changes, the width and height of the non-modal pop-up window are adjusted dynamically in real time; however, when the current area cannot meet the pop-up window display conditions, repeat steps S1-S3 to adjust the position of the pop-up window to ensure that the pop-up window is always displayed in the best position.

[0007] Further, step S1 is specifically as follows: The space where the non-modal pop-up window can be displayed around the target element is divided into 9 areas, namely upper left, upper center, upper right, upper right, right center, lower right, lower left, lower center, lower right, upper left, left center, and lower left; calculate whether these 9 areas meet the following four conditions: the pop-up window can be fully displayed, does not block the target element, the pop-up window is not less than the minimum size, and does not exceed the boundary of the visible area, and record the array consisting of the areas that meet the above display conditions.

[0008] A non-modal pop-up window display position determination system based on multi-dimensional analysis, the non-modal pop-up window display position determination system comprises a page element information acquisition module, a position calculation module, a heat map analysis module, a pop-up window display module and a pop-up window size adaptive adjustment module; wherein, The page element information acquisition module is responsible for acquiring information about key elements on the page, including the position and size of the target element, the size of the visible area of ​​the page, and the size of the non-modal pop-up window; The position calculation module: divides the area where the non-modal pop-up window is displayed around the target element into 9 blocks, namely, upper left, upper middle, upper right, upper right, right middle, lower right, lower left, lower middle, lower right, upper left, left middle, and lower left; calculates whether the pop-up window can be fully displayed in these 9 areas respectively, and if the pop-up window can meet the following four conditions in a certain area: fully displayed, not blocking the target element, not less than the minimum size of the pop-up window, and not exceeding the boundary of the visible area, then the area is recorded, and an array consisting of the areas that meet the display conditions is returned; The heat map analysis module: deploys a heat map analysis tool on the HTML page to collect user behavior data in multiple dimensions; analyzes the user's attention area on the web page, and obtains the user's attention data on the web page through the heat map analysis technology; sorts the areas in the area array returned by the position calculation module according to the user's attention level, and returns the area with the lowest attention level; The pop-up window display module displays the pop-up window in the area with the lowest attention returned by the heat map analysis module; so that the pop-up window is presented to the user in the most appropriate position, which not only meets the user's operating habits and visual trajectory, but also does not block key information and interfere with the user's reading and operation of the page content; The pop-up window size adaptive adjustment module: when the visible window size of the page changes, the width and height of the pop-up window are first adjusted in real time according to the size of the visible window until the current area can no longer meet the pop-up window display conditions.

[0009] Furthermore, the size of the non-modal pop-up window is preset or the width and height of the DOM element in the pop-up window content slot are calculated to dynamically determine the size of the pop-up window.

[0010] By adopting the above technical solution, the present invention has the following beneficial effects: 1) Improve user experience: Determine the optimal display position of non-modal pop-up windows through multi-dimensional data analysis to avoid blocking key user information or interfering with user operation processes, thereby reducing user visual fatigue and cognitive burden and improving the overall user experience.

[0011] 2) Reduce user disgust: Avoid placing non-modal pop-ups in areas where users pay close attention. This can reduce users' disgust and resistance to pop-ups and increase users' acceptance of pop-up content.

[0012] 3) Optimize interface layout: This method takes into account the size of the visible area of ​​the page and the position of the target elements, which helps to keep the interface neat and beautiful, and avoids interface congestion or imbalance caused by improper pop-up window positioning.

[0013] 4) Strong adaptability: This method can dynamically adjust the pop-up window position according to the user's focus area, adapt to the browsing habits and preferences of users on different web pages, and provide a more personalized user experience.

[0014] 5) Enhance the efficiency of information transmission: Placing non-modal pop-up windows in a position where users pay the least attention can reduce interference with users' current tasks, allowing users to naturally notice pop-up information without interrupting their current operations, thereby improving the reception rate and understanding of information. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] In order to more clearly illustrate the specific implementation methods of the present invention or the technical solutions in the prior art, the drawings required for use in the specific implementation methods or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some implementation methods of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0016] Figure 1 A block diagram of a system for determining a non-modal pop-up window display position through multi-dimensional analysis provided by an embodiment of the present invention; Figure 2 A flowchart of a method for determining a non-modal pop-up window display position through multi-dimensional analysis provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0017] The technical solution of the present invention will be described clearly and completely below in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0018] The specific implementation of the present invention is described in detail below in conjunction with the accompanying drawings. It should be understood that the specific implementation described here is only used to illustrate and explain the present invention, and is not used to limit the present invention.

[0019] Combination Figure 1 As shown, this embodiment provides a non-modal pop-up window display position determination system based on multi-dimensional analysis, including a page element information acquisition module, a position calculation module, a heat map analysis module, and a pop-up window display and pop-up window size adaptive adjustment module.

[0020] The page element information acquisition module is responsible for obtaining the information of key elements on the page, including the position and size of the target element (which can be an icon, button, link, etc.), the size of the visible area of ​​the page, and the size of the non-modal pop-up window. The size of the non-modal pop-up window can be pre-set or the width and height of the DOM element in the pop-up content slot can be calculated to dynamically determine the size of the pop-up window. In addition, in order to prevent the pop-up window from being too large to be fully displayed in the visible window, it is necessary to limit the maximum size of the pop-up window, such as limiting the maximum width and height of the pop-up window to no more than 80% of the page body. At the same time, the minimum size of the non-modal pop-up window is limited. When the width or height of the pop-up window is less than the minimum size, it will affect the information display and user reading, and will not meet the most basic display conditions of the pop-up window.

[0021] The position calculation module divides the area where the non-modal pop-up window is displayed around the target element into 9 blocks, namely top left (the pop-up window is above the target element and the left side is aligned with the left side of the target element), top middle (the pop-up window is above the target element and the horizontal coordinate of the center point is the same as the horizontal coordinate of the center point of the target element), top right (the pop-up window is above the target element and the left side is aligned with the right side of the target element), top right (the pop-up window is to the right of the target element and the top side is aligned with the top side of the target element), right middle (the pop-up window is to the right of the target element and the vertical coordinate of the center point is the same as the vertical coordinate of the center point of the target element), bottom right (the pop-up window is to the right of the target element The pop-up window is located on the right side of the target element and the bottom is aligned with the bottom side of the target element), bottom left (the pop-up window is below the target element and the left side is aligned with the left side of the target element), bottom middle (the pop-up window is below the target element and the horizontal coordinate of the center point is the same as the horizontal coordinate of the center point of the target element), bottom right (the pop-up window is below the target element and the right side is aligned with the right side of the target element), top left (the pop-up window is on the left side of the target element and the top side is aligned with the top side of the target element), left middle (the pop-up window is on the left side of the target element and the vertical coordinate of the center point is the same as the vertical coordinate of the center point of the target element), bottom left (the pop-up window is on the left side of the target element and the bottom side is aligned with the bottom side of the target element). Calculate whether the pop-up window can be fully displayed in these 9 areas respectively. If the pop-up window can meet the following four conditions in a certain area: fully displayed, not blocking the target element, not less than the minimum size of the pop-up window, and not exceeding the boundary of the visible area, then record the area and return an array of areas that meet the display conditions.

[0022] Heatmap analysis module deploys heatmap analysis tools such as Crazy Egg, Hotjar, Heatap, etc. on HTML pages to collect data on user behaviors in multiple dimensions such as clicks, scrolling, mouse movements, and dwell time. Analyze the user's attention areas on the web page and obtain the user's attention data on the web page through heatmap analysis technology. Sort the areas in the area array returned by the location calculation module according to the user's attention level, and return the area with the lowest attention level.

[0023] The pop-up display module displays the pop-up window in the area with the lowest attention returned by the heat map analysis module. This allows the pop-up window to be presented to the user in the most appropriate position, which not only meets the user's operating habits and visual trajectory, but also does not block key information and interfere with the user's reading and operation of the page content.

[0024] The pop-up window size adaptive adjustment module first adjusts the width and height of the pop-up window in real time according to the size of the visible window when the page visible window size changes (such as rotating the screen or adjusting the browser window size) until the current area can no longer meet the pop-up window display conditions.

[0025] Combination Figure 2As shown, the present invention also provides a method for determining a non-modal pop-up window display position based on multi-dimensional analysis, comprising four steps of selecting a position around a target element that meets pop-up window display conditions, ranking the areas that meet the display conditions according to user attention, determining a display position, and dynamically adjusting, as follows: Select the position around the target element that meets the conditions for pop-up window display: Use the getBoundingClientRect() method to obtain the distance from the upper left corner of the target element to the top and left of the visible window (targetTop, targetLeft) and the width and height of the target element (targetWidth, targetHeight). Use the window.innerWidth() and window.innerHeight() methods to obtain the width and height of the visible window (windowWidth, windowHeight). Also use getBoundingClientRect() to obtain the distance from the upper left corner of the non-modal pop-up window to the top and left of the visible window (modalTop, modalLeft) and the width and height of the pop-up window (modalWidth, modalHeight). Limit the minimum width and height of the non-modal pop-up window to (minModalWidth, minModalHeight). Divide the space around the target element where the non-modal pop-up window can be displayed into 9 positions, namely top left, top center, top right, top right, top right, bottom right, bottom left, bottom center, bottom right, top left, top left center, and bottom left. Specifically, "upper left" means that the pop-up window is above the target element (modalTop=targetTop-modalHeight-10px, where 10px is the distance between the non-modal pop-up window and the target element) and the horizontal coordinate of the left border is the same as the horizontal coordinate of the left border of the target element (modalLeft=targetLeft). Next, calculate whether these 9 areas meet the following four conditions: the pop-up window is fully displayed, does not block the target element, and the pop-up window is larger than the minimum size and does not exceed the visible area boundary. Taking the "upper left" area as an example, determine whether the "upper left" position meets the full display conditions by judging whether the distance between the upper boundary of the target element and the upper boundary of the visible window (targetTop-10px) is greater than or equal to the pop-up window height (modalHeight) and whether the distance from the left boundary of the target element to the right boundary of the visible window (windowWidth-targetLeft) is greater than or equal to the pop-up window width (modalWidth) and whether the pop-up window width and height (modalWidth, modalHeight) are greater than the limited minimum width and height (minModalWidth, minModalHeight). The same goes for other directions. Return an array of areas that meet the display conditions.

[0026] Areas that meet the display conditions are ranked according to user attention: Get the user behavior data returned by the web page heat map analysis tool, and combine the mouse click heat map, mouse movement heat map, and user attention heat map to obtain the user attention data for each area on the page. Sort the areas that meet the four pop-up display conditions in the previous step from high to low according to user attention, and return the area with the lowest attention.

[0027] Determine the display location: Select the area that meets the pop-up display conditions and has the lowest user attention as the final display area of ​​the pop-up, and display the non-modal pop-up.

[0028] Dynamic adjustment: When the size of the page visible area changes (such as rotating the screen or resizing the browser window), first dynamically adjust the width and height of the pop-up window in real time until the current area does not meet the above four display conditions, and repeat steps 1-3 to re-select the pop-up window position to ensure that the pop-up window is always displayed in the best position. For example, if the current pop-up window is in the "upper left" position of the target element, the distances from the upper left vertex of the pop-up window to the upper side and left side of the visible window are (modalTop, modalLeft) = (targetTop - modalHeight - 10px, targetLeft). When the user moves the right boundary of the browser visible window to the left until the distance from the left boundary of the target element to the right boundary of the visible window is less than or equal to the width of the non-modal pop-up window but greater than or equal to the minimum width of the non-modal pop-up window (minModalWidth ≤ windowWidth - targetLeft ≤ modalWidth), keep the left and lower boundaries of the pop-up window unchanged (modalLeft = targetLeft, modalTop + modalHeight = targetTop - 10px), and the abscissa of the right boundary is equal to the abscissa of the right boundary of the visible window (modalLeft + modalWidth = windowWidth), and the height of the Dom element in the content part of the pop-up window increases adaptively to meet the full display condition. When the distance from the left boundary of the target element to the right boundary of the visible window is less than the minimum width of the non-modal pop-up window (i.e., windowWidth - targetLeft < minModalWidth) or the upper side of the pop-up window exceeds the upper boundary of the visible window (modalTop < 0), discard the current position and repeat steps S1-S3 to recalculate and select an optimal display position. Similarly, if the current pop-up window is in the "upper left" position of the target element and the user moves the upper boundary of the browser window down at this time. When the distance from the upper boundary of the target element to the upper boundary of the visible window is less than or equal to the height of the pop-up window but greater than or equal to the minimum height of the pop-up window (minModalHeight ≤ targetTop - 10px ≤ modalHeight), keep the lower and left boundaries of the pop-up window unchanged (modalTop + modalHeight = targetTop - 10px, modalLfet = targetLeft), and the ordinate of the upper boundary is equal to the ordinate of the upper boundary of the page (modalTop = 0), and the width of the Dom element in the content part of the pop-up window increases adaptively. When the distance from the upper boundary of the target element to the upper boundary of the visible window is less than the minimum width of the non-modal pop-up window (i.e., targetTop < minModalHeight) or the right boundary of the pop-up window exceeds the right boundary of the visible window (modalLeft + modalWidth > windowWidth), discard the current position and repeat steps S1-S3 to recalculate and select an optimal display position.

[0029] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or replace some or all of the technical features therein with equivalents. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for determining a non-modal pop-up window display position based on multi-dimensional analysis, characterized in that: include: S1. Select the position around the target element that meets the pop-up window display conditions: obtain the position and size of the target element, the size of the visible area of ​​the page, and the size of the non-modal pop-up window; S2. The areas that meet the display conditions are ranked according to user attention: the user behavior data returned by the webpage heat map analysis tool is used for heat map analysis to obtain the user attention data of different areas on the webpage; And sort the areas around the target element that meet the pop-up display conditions from high to low according to user attention; S3. Determine the display position: select the area that meets the pop-up window display conditions and has the lowest user attention as the final display area of ​​the pop-up window, and display the non-modal pop-up window; S4, dynamic adjustment: When the screen size changes, the width and height of the non-modal pop-up window are adjusted dynamically in real time; however, when the current area cannot meet the pop-up window display conditions, repeat steps S1-S3 to adjust the position of the pop-up window to ensure that the pop-up window is always displayed in the best position.

2. The method for determining the display position of a non-modal pop-up window based on multi-dimensional analysis according to claim 1, characterized in that: Step S1 is specifically as follows: Divide the space around the target element where the non-modal pop-up window can be displayed into 9 areas, namely top left, top center, top right, top right, right center, bottom right, bottom left, bottom center, bottom right, top left, left center, and bottom left; Calculate whether these 9 areas meet the following four conditions respectively: the pop-up window can be fully displayed, does not block the target element, the pop-up window is not less than the minimum size, and does not exceed the boundary of the visible area. Record the array consisting of the areas that meet the above display conditions.

3. A non-modal pop-up window display position determination system using the non-modal pop-up window display position determination method based on multi-dimensional analysis according to any one of claims 1-2, characterized in that: The non-modal pop-up window display position determination system includes a page element information acquisition module, a position calculation module, a heat map analysis module, a pop-up window display module and a pop-up window size adaptive adjustment module; wherein, The page element information acquisition module is responsible for acquiring information about key elements on the page, including the position and size of the target element, the size of the visible area of ​​the page, and the size of the non-modal pop-up window; The position calculation module: divides the area where the non-modal pop-up window is displayed around the target element into 9 blocks, namely, upper left, upper middle, upper right, upper right, right middle, lower right, lower left, lower middle, lower right, upper left, left middle, and lower left; calculates whether the pop-up window can be fully displayed in these 9 areas respectively, and if the pop-up window can meet the following four conditions in a certain area: fully displayed, not blocking the target element, not less than the minimum size of the pop-up window, and not exceeding the boundary of the visible area, then the area is recorded, and an array consisting of the areas that meet the display conditions is returned; The heat map analysis module: deploys a heat map analysis tool on the HTML page to collect user behavior data in multiple dimensions; analyzes the user's attention area on the web page, and obtains the user's attention data on the web page through the heat map analysis technology; sorts the areas in the area array returned by the position calculation module according to the user's attention level, and returns the area with the lowest attention level; The pop-up window display module displays the pop-up window in the area with the lowest attention returned by the heat map analysis module; so that the pop-up window is presented to the user in the most appropriate position, which not only meets the user's operating habits and visual trajectory, but also does not block key information and interfere with the user's reading and operation of the page content; The pop-up window size adaptive adjustment module: when the visible window size of the page changes, the width and height of the pop-up window are first adjusted in real time according to the size of the visible window until the current area can no longer meet the pop-up window display conditions.

4. The non-modal pop-up window display position determination system according to claim 3, characterized in that: The size of the non-modal pop-up window is pre-set or the width and height of the DOM element in the pop-up window content slot are calculated to dynamically determine the size of the pop-up window.

Images