When designing B-end products, product managers and designers always quarrel over a question: Is there anything else you can put in the limited page space? The pop-up window can be large or small, and can generate infinite space outside the current two-dimensional page, and can do almost everything that the page can do. At the same time, for development, add an <alert> and a sentence to the html. Then you can generate the simplest prompt pop-up b2b data window. Yes, in product design, pop-up windows are really "convenient"!
Perhaps because of this, pop-ups are probably one of the most abused common controls in product design. If the user opens a link or button is filled with layers of pop-up windows, the user will feel that your product is too complicated and difficult to use! What's worse, some products will pop up various "prompts" and "warnings" rudely, and also need to force users to click or close them - maybe the designer thinks that this kind of "warm reminder" is "user-centric" , but in many cases we can remind the user in a more gentle way (such as toast, hover layer, orange text next to the input box, etc.). Knowing what types of popups and what they can do can help us make better decisions when designing.
A pop-up window is an “information container displayed on the page”, which extends the dimension and depth of the page beyond the plane space of the x and y axes. It is a more flexible information container than the page. There will be many types of subdivisions, but there is no clear and unified name. In the web design before the popularity of mobile applications, there were dialog boxes (Dialog), alert boxes (Alert), pop-up layers, pop-up boxes, pop-up layers (popup), bubbles... Now, because of the trend of responsive design and multi-platform unity Next, there are even Android's toast prompts, Actionbars, and ios's transparent indication layer (HUD) and are also counted as a kind of "pop-up window". At the same time, the types and usages of non-modal floating layers and windows vary widely; in view of this, I will focus here on the traditional "pop-up windows" that we commonly use in B-end products (PC-end).
Taking the function and purpose as the dimension, the author divides the pop-up window into three types: information display, task, and feedback.
1. Information display
1. to explain or explain
Generally triggered by the user, including graphic information, a few will have simple operation buttons, such as "confirm", "understood" and so on. Typical scenarios include: welcome interface, operation instructions, help, function guidance, number fetching instructions, viewing details, previewing or viewing larger images...
This kind of pop-up window is generally used to supplement the content of the page. The user can expand the pop-up window on the current page by clicking the icon or text button. For example, business introduction, chart fetching instructions, operation instructions and guidance, etc., such information is often closely related to the current page and belongs to the current context, so it is not suitable to use jump pages, side by side tabs or secondary pages. Form to express, because this will undoubtedly deepen the page level and increase the cognitive burden of users. Especially for some very important operation instructions or guidance, you can even use page turning or tabs in the pop-up window to expand the display space of the pop-up window.