The popbox is an important interaction mode, mainly used to complete the two functions of information transfer and user feedback. Cartridges are common, but not every designer understands the concept of cartridges 100%. This article is a simple sorting and summary of the frame system, hoping to solve some doubts in our minds.
What we call a bullet frame is a very general concept. All dialog boxes, floating layer, prompt bar we are used to call the frame, in fact, we can be divided into two types: modal frame and non-modal frame.
Modal boxes
The biggest difference between modal and modeless cartridges is whether user interaction is enforced. The modal frame interrupts the user’s current operation flow. If the user does not operate the frame, other functions cannot be used. From this aspect, we can see that the advantages and disadvantages of modal frame are very obvious: the advantage is that it can get the user’s visual focus well, while the disadvantage is that it interrupts the user’s current operation process. The modal frame is a kind of weight feedback and is used for important operations. Modal bounced types with common Dialog box Dialog/Alter, action bar (Actionbar/Actionsheet/ActionView) and floating layer (Popover/Popup). Since many iOS and Android components are now common, I’ll cover only one that is too similar in the following articles.
dialog
A dialog box is usually used for users to perform an important or risky operation. In this case, a dialog box is displayed to prompt the user, and the user can make a judgment according to the prompt. It usually appears in the middle of the screen, blocking the main content of the interface.
At present, there are various design styles of dialog boxes, which can be used for information entry and marketing promotion.
Action bar
In my opinion, the action bar is an improved version of a dialog box, since both alert and dialog generally have only two buttons. The action bar can provide multiple function buttons, and the display style is more variable.
But there are exceptions. Some action bars only have two options. Take netease Cloud Music as an example. When you want to delete a song, the “confirm deletion” prompt is completed through the action bar (as shown in the left picture). In fact, it is completely possible to use the dialog box here (as shown in the right picture). I don’t know why the designer of netease Cloud Music uses the action bar here. But my personal guess is that the action bar is located at the bottom of the screen, so it is relatively unobserved.
The floating layer
Floats are translucent temporary views that surface when the user clicks on a control or an area of the interface. The float layer is similar to the action bar in that it can show the user multiple functional options. However, the floating layer can appear anywhere on the screen, giving the user a more oriented cue.
A summary can be made: without regard to information entry, dialog boxes are suitable for users to make decisions, while action bars and floats are suitable for users to make choices, and floats are more oriented than action bars.
Modeless spring frame
Compared with modal cartridges, the biggest difference of modeless cartridges is that they do not force user interaction, nor do they pop up a translucent background layer. Modeless cartridges will disappear by themselves after staying for a period of time. Therefore, compared with modal frame, modeless frame belongs to lightweight feedback and will not cause too much interference to users. Common modeless cartridges are Toast (HUD) and snackbar.
Toast
After a user completes an operation, Toast is used to inform the user of the operation result or status change. Toast is actually an Android component. IOS has a similar HUD, the most common of which is the prompt for volume adjustment. However, the boundary between iOS and Android is breaking down and Toast is now widely used in iOS interface design. If we look at the design specifications provided by Android, toast has the following characteristics:
1 only appears at the bottom of the screen
2 Can only play text
3 Modeless spring frame
However, we will find that some toasts can be displayed anywhere on the screen, and ICONS can also be added, so dogmatism kills people. I remembered one thing the front end said to me, “If you can design it, we can theoretically build it, but we’ll probably hack people.”
In fact, the real toast can appear anywhere on the screen, and icon can be added. Even the color of the background layer can be changed. So I think designers should not only look at the design specifications, but also spend some time talking to developers.
The advantage of Toast is that it does not interrupt the current operation process of users and is a lightweight feedback method. The disadvantage is that it is easy to be ignored by users, and it is not suitable for displaying too much information and may disappear before the user finishes reading it. In order to improve the readability of information and enhance the aesthetic feeling of style, toast now adopts the combination style of text and icon.
Snackbar
The Snackbar is generally composed of text and function buttons. Users can click the button to interact. Even if the user does not click the Snackbar, it will automatically disappear and is generally located at the bottom of the screen. In a popular sense, snackbar can be regarded as toast with icon.
Snackbar, I’ll put it at the end, because it’s very special. Although snackbar is a modeless cartridge, it also has some characteristics of modal cartridge. Snackbar, for example, also has buttons for user interaction; In addition, the snackbar usually appears at the bottom of the screen, much like the Action Sheet in the Action bar.
If you don’t understand what it says, that’s okay. Let me make a summary for you: modeless popbox emphasizes information prompt, modal popbox can not only information prompt but also for user interaction; Toast is a lightweight frame type, and Snackbar has the best of everyone. Of course, I’m fine with you saying it doesn’t look like it.
Optimization of frame system establishment
Above we know several main frame styles and usage, next we will consider how to establish a product frame system or how to optimize the existing product frame system. In fact, the principle of establishing and optimizing the frame system can be summarized in one sentence: if you can display the frame in the interface, don’t use the frame; if you can use the non-modal frame, don’t use the modal frame.
Any popbox, even the lightest toast, will cause interference to the user. From a user experience perspective, the less disruption there is to a process, the better. In the picture below, for example, users may not understand the technical terms “pace interval” and “pace stability,” so they click on the “question mark” icon.
At this point we have three solutions:
1 Display through a new interface. However, as we can see, the explanation information is not much and does not need to be presented through a new page.
2. Use a dialog or float layer. In this case, we cannot use toast because the toast time is too short for the user to finish reading.
3 Display it on the current screen.
In fact, options 2 and 3 seem to me to be good solutions. However, considering the reduction of user interference and operation steps, I think plan 3 is better here.
Polymorphic button
In addition, the use of polymorphic buttons can also help us to relieve the pressure of the cartridge. For example, in the payment interface of Alipay, the “Pay now” button can jump to the state of successful payment. At this time, there is no need to use pop-ups to prompt users.
Establish priorities
Information with different priorities should be given different visual weights, so the modal popbox with the highest visual weight should show the important content. So we need to prioritize the information that needs to be displayed, so that the really important information can use the modal frame. Only low frequency and reasonable use, users will take it seriously. Overuse can give users a “Wolf is crying” mentality.
conclusion
Because many terms of interaction design are not unified at present, many people have great differences in the definition of the type of popbox. This article is a summary from my personal point of view, I hope it can help you. If you have any ideas, please leave a message or send a private message.