Abstract: The most common pop-ups are the most elusive. I don’t know which type of popover to use in which situation. Especially in the case of “double confirmation”…… Therefore, I intend to sort out the basic knowledge of mobile pop-ups from scratch. Starting from the definition of iOS pop-ups system, I classify mobile pop-ups, and then analyze the application scenarios of each type of pop-ups and points needing attention in the process of using them.
As a mobile component that we often deal with in designing children’s shoes, it is the most elusive thing. All kinds of pop-ups are not clear, and we don’t know what kind of pop-ups should be used in what scenes. This is especially true in situations such as “double confirmation”
Today’s Work Like Alibaba practice sharing, we invite interaction designers from Alibaba TXD Experience Center to bring us the IOS popup system sharing summer.
1 introduction
Some time ago, sorting out mobile components, I found that the most common [popover] is the most “elusive” thing. I don’t know which type of popover to use in which situation. Especially in the case of “double confirmation”…… Therefore, I intend to sort out the basic knowledge of mobile pop-ups from scratch, classify mobile pop-ups based on their definitions, and then analyze the application scenarios of each type of pop-ups as well as points needing attention in the process of using them. I wanted to sort out all the popovers at one time, but I found that popovers in iOS and Material Design have a wide variety of categories and are closely related to each other, so I decided to divide them into four chapters to sort them out carefully:
- Mobile popover basic knowledge analysis series I: iPhone popover system
- Mobile popover basic knowledge Analysis series 2: Android mobile phone popover system (Material Design)
- Mobile popover basic Knowledge analysis series 3: the relationship and difference between iPhone and Android two mobile phone popover systems
- Mobile popover Basic Knowledge Analysis series 4: The relationship and difference between popover systems of mobile phones, tablets and watches
2 noun Explanation
- Pop-ups: Pop-ups are a common way of human-computer interaction, often used for asking, warning and completing a certain insertion task. They are common in web and mobile terminals. Pop-ups allow users to effectively focus on the most urgent information and complete lightweight tasks without leaving the current page.
- Mobile pop-ups: pop-ups applied to mobile devices, including mobile phones, tablets, watches and other mobile devices. In this paper, the learning object is [iPhone] popover system.
- Modality is a view, as defined in the current iOS 10 Human Interface Guidelines: A modal view brings focus, because the user can only do other things after completing the current task or closing a message or view. When a modal view appears on the screen, the user must make a decision (click a button or something) to exit the modal experience. A modal view can occupy the entire screen, the entire superview (such as a surfacing layer), or a portion of the screen. A modal view typically has “finish” and “Cancel” buttons to exit the view. Modality creates focus by preventing people from doing other things until they complete a task or dismiss a message or view. When a modal view appears onscreen, the user must make a choice by tapping a button or otherwise exiting the modal experience. A modal view can occupy the entire screen, an entire parent view, such as a popover, or a portion of the screen. A modal view typically includes completion and cancel buttons that exit the view. As far back as iOS 7 HIG, a modal was placed under the Temporary View category, and the definition was more straightforward: a modal View is a valid View that performs a set of tasks. It appears at the top of all elements and blocks operations on all bottom elements. Modals are a useful view for tasks that require multiple commands or inputs by the user. They appear on top of everything else, and, while open, block interaction with any other interactive elements underneath. In simple terms, a modal view is an overlay of a mask on the original view to isolate all operations in the original view, and then a new layer of view is displayed on the mask to make the user more focused on completing the tasks in the new view.
- Modal popover: A popover using modal view.
- Modeless popover a popover that uses modeless views.
3. Classification of mobile pop-ups
According to whether modal view is used or not, I have classified all the popover types of iOS as follows:
4 Modal pop-ups
4.1 Prompts (Alerts, System Rating and Review)
4.4.1 definition
Dialog boxes are our most common popover type. Dialog box – Alerts:
Dialog boxes carry important information about the current state and often require user response. The dialog box consists of four parts: title, information content (optional), one or more buttons, and text input (optional). Aside from the above optional elements, the appearance of the dialog box is fixed and immutable.
Alerts convey important information related to the state of your app or the device, and often request feedback. An alert consists of a title, an optional message, one or more buttons, and optional text fields for gathering input. Aside from these configurable elements, the visual appearance of an alert is static and can’t be customized.
4.1.2 Common Usage methods
It is used in scenarios such as prompt information, operation confirmation, invitation scoring, and authorization.
— Baidu network disk, wechat, snail sleep, Worktile
Prompts. In addition to the text entry field mentioned in the definition, iOS also provides a component that Prompts by default:
4.1.3 Points needing attention during use
- Headings: Short and informative headings.
- Information content: Do not fill in as required.
- Button:
- Generally, the number of buttons is limited to three. If more buttons are required, you are advised to use Operation List.
- Can use bold, color and other ways to guide the user to make a choice.
- Be specific and precise so that the user understands what happens when they make a choice. Don’t use ambiguous words like “yes” or “no”.
- The button that meets the user’s expectation is placed on the right, and the [Cancel] button is fixed on the left.
- When there are destructive operations, on the one hand, the potentially destructive operation button should be highlighted, and on the other hand, the “Cancel” button should be ensured to ensure that users can safely cancel the destructive operation. (e.g. delete, etc.)
- Supports Home button to close popover.
- Extension components: In special cases, defined extension components can be used. Examples include text entry boxes, scoring components, and so on.
- How to operate: You must select the button to close the popover because you need to get an explicit response from the user. (Clicking on the mask will not close the popover)
4.2 Action Sheets (Action Views)
Definition 2
Action Sheet – Action Sheet
An action list is a special dialog box that responds to an action and displays multiple options associated with the current operation scenario. Used to allow the user to start a task or perform a second confirmation before performing a potentially destructive operation.
An action sheet is a specific style of alert that appears in response to a control or action, and presents a set of two or more choices related to the current context. Use an action sheet to let people initiate tasks, or to request confirmation before performing a potentially destructive operation.
Action view-Activity View
The Action view is the display panel of the app’s quick tasks. Users can click the task on the panel to execute the corresponding task directly.
An activity is a task, such as Copy, Favorite, or Find, that’s useful in the current context. an activity can perform a task immediately, or ask for more information before proceeding. Activities are managed by an activity view, which appears as a sheet or popover, depending on the device and orientation.
4.2.2 Common Usage methods
Action lists are often used for radio operations and for secondary confirmation of delete operations. (Single operation)
— Bilibili, Teambition, Photo, wechat (without native popup)
Action views are often used to share actions. Safari, Dingding, wechat, UC
4.2.3 Points needing attention during use
- Make sure there is a cancel button.
- Highlight potentially destructive action buttons.
- Try to avoid scrolling through the list. If there are too many options, leave visual clues.
- For Operation View, an application icon and an operation name are required to clearly describe tasks.
4.3 Popover, Edit, Home Screen Quick Action with Menus
This will define
Surfaced layer – Popovers
A surfacing layer is a temporary view that appears at the top of the user’s click area. A typical surfacing layer consists of an arrow pointing to where the surfacing layer appears. The surfacing layer may be modal or non-modal.
A popover is a transient view that appears above other content onscreen when you tap a control or in an area. Typically, a popover includes an arrow pointing to the location from which it emerged. Popovers can be nonmodal or modal.
Edit menu – Edit Menus
Users can use long press and double click gestures to evoke “Edit menu” in text, web page, picture and other places. It includes associated editing operations such as copy and paste.
People can touch and hold or double-tap an element in a text field, a text view, a web view, or an image view to select content and reveal edit options, such as Copy and Paste.
Home Screen Quick Action Menus
The shortcut home screen operation menu is the shortcut menu evoked by 3D Touch.
Home screen quick actions are a convenient way to perform useful, app-specific actions right from the Home screen, using 3D Touch.
4.3.2 Common Usage modes
In a strict sense, the surface layer can contain various elements such as [navigation bar, toolbar, TAB bar, table, favorite, picture, map], etc. Therefore, due to the problem of display space, it can only be used in iPad, and corresponding to [full-screen Modal Views] in mobile phone. However, the clear orientation and convenience of the surfaced layer is still very suitable for the menu choice of mobile terminal, so many apps have designed their own small Popovers: wechat, Dingding, mobile Taobao, Alipay
Edit menu, used for editing text and chat notes. — wechat, Dingding, Memo, UC
The shortcut menu on the home screen is a unique interaction mode of iOS. It is used only on the home screen to quickly perform common application tasks. – the iOS home screen
4.3.3 Points needing attention during use
- Displays action options that fit the context and are described with common copywriting.
- Minimize the number of options and show only the most meaningful actions.
- Use standard gestures to evoke menus.
- Automatically adjust the position of the menu according to the location of the arousal.
- For edit Menu:
- Automatically select the associated phrase.
- Do not add the edit button.
- Support undo/redo operations.
4.4 Modal View
4.4.1 definition
A modal view can occupy the entire screen, the entire superview (such as a surfacing layer), or a portion of the screen.
A modal view can occupy the entire screen, an entire parent view, or a portion of the screen.
The Modal view analyzed here, unlike the dialog box, occupies a larger area of the screen and contains more actions internally.
4.4.2 Common Usage Modes
According to the way and scope of occupying the screen, it can be divided into three types: [full-screen, half-screen and central], among which [full-screen, half-screen] often contains complex forms:
This mode is commonly used in scenarios such as “Create and send, select and download”. — netease Mailbox – email writing, Dingding-ding, wechat – message forwarding, Tencent video – caching
Half screen, common in “side navigation, selector” and other scenarios. — Didi Chuxing, Dianping, Mobile Taobao, Alipay
Central, common in “propaganda, guide users” and other scenarios. — Baidu Nuomi, Didi Chuxing, Meituan, Teambition
4.4.3 Points needing attention during use
- Make sure the tasks in the modal view are concise and rigorous so that the user can focus and accomplish the tasks efficiently.
- Provides an obvious and safe way to exit the modal view.
- For [full/half screen] :
- None of the changes will take effect until an explicit button such as save/Confirm/Finish is clicked.
- Modal views are mostly entered from the edge.
- Click on the mask to close the modal view.
5 Modeless pop-ups
5.1 Transparent Indicator Layer (UIProgressHUD)
The specific definition has not been found, but the corresponding Toast is unique to Android. It is said that iOS calls it HUD (Head up Display). Currently no open interface, only used in native system volume keys. However, in many apps, people have been used to use Toast in a broad sense for status reminders: iOS volume button, mobile Taobao, Dianping, Tencent Video
5.2 Notifications
5.2.1 definition
Regardless of whether the phone is locked or in use, the app can deliver important information to the user in the first time through notification.
Apps can use notifications to provide timely and important information anytime, whether the device is locked or in use.
5.2.2 Common Usage modes
Running top banner, after repressing, will expand and call out Action Sheet.
5.2.3 Points needing attention during use
- Provide valuable information to refine.
- Notice how often and when notifications are sent.
- Consider the display details after 3D Touch is repressed, as well as the associated action buttons.
6 References
- Understanding the mobile end bounced, mp.weixin.qq.com/s/9XyiKTiXY…
- The Human Interface Guidelines (iOS 7.06 10201), developer.apple.com/ios/human-i…
- The iOS Design Guidelines (iOS 5.9, 7201, 28), ivomynttinen.com/blog/ios-de…
- Several popup window design pattern (iOS), www.jianshu.com/p/63eb8fad9…
- Practical dry goods! UI designers need to understand the APP popover system, www.uisdc.com/app-popup-u…
Note 1: This article is based on the iOS 11 Human Interface Guidelines, the articles of online masters and the summary of personal experience. Please kindly comment and give your valuable comments or suggestions.
Note 2: If the content involves infringement, please contact the administrator, we will delete the relevant content as soon as possible.
The original link