Upgrade the UI with iOS 13

In WWDC 2019, Apple unveiled iOS 13 featuring Dark Mode, Apple Sign In, Performance Optimizations and more. From one of the keynotes, Modernizing Your UI for iOS 13, I picked three UI improvements that I thought were worth taking notes on. Although they are subtle changes, these incremental updates can get users to take and dismiss actions a tiny bit faster.

Sheets

The modal presentation style was updated from what was previously known in the UIModalPresentationStyle.pageSheet and .formSheet styles. Instead of filling the entire screen, the new sheet style leaves a gap at the top and sets the scaled-down view of the former page behind. This way, it gives users a sense of context of where they are in the application. The top rounded corners of the sheet signify that users can dismiss it by dragging it downward. The new style is defined with UIModalPresentationStyle.automatic, which is the default state.

When multiple sheets are opened, the new sheet will appear over the previous sheet | WWDC 2019
In iPad, sheets do not take up the full width by default. Though it varies with readable width depending on users’ accessibility settings preference | WWDC 2019
PopUp automatically changes its style to sheets when the available width is narrower | WWDC 2019

When users try to interact with modal, there are multiple APIs that are helpful for handling different conditions. For example, although sheets get dismissed as users pull down as default behavior, sheets won’t get dismissed when a user alters the content without saving or deleting. In this instance, the sheets present contextually relevant actions first.

When users try to dismiss from a composer from the share sheet, users cannot dismiss without either saving or deleting the draft | WWDC 2019

The isModalInPresentation is a property in UIViewController and when it is set to true, the modal cannot be dismissed. The presentationControllerDidAttemptToDismiss method may be called in this case as users pull down the sheet and releases, so desired actions can be presented in this method.

Available callback methods to prepare various interaction states for dismissing sheets. For example, DidDismiss is going to be called when a dismiss interaction completes | WWDC 2019

Gestures

In iOS13, some gesture improvements are available without rewriting existing older applications. Multi-selection can be instantly available with 2-finger drags in table and collection views. If users’ devices are connected to hardware keyboards, multi-selection can be accessed by holding the shift key.

Use 2-finger drags to multi-select items in a list view | WWDC 2019
Use 2-finger drags to multi-select items in a grid view | WWDC 2019

3-finger gestures drastically improve productivity in iOS 13. For example, users can undo by swiping toward their left, and redo by swiping toward their right with three fingers. In addition, users can now pinch-in to copy and pinch-out to paste text using three fingers.

Use 3-finger pinching-in to copy and pinching-out to paste text (Original image: LEAF&CORE)

Context Menus

Context menus, supported in iOS13, give people access to content preview and contextually relevant commands without leaving the current view. The concept is similar to Peek and Pop, supported on devices with 3D touch, but it is enhanced providing a smoother experience.

Context menus consist of rich preview and contextually relevant commands | WWDC 2019

With UIContextMenuInteraction, context menu provides a rich preview and optional nested actions with available gestures beyond 3D touch. Users can access context menu with 3D touch, haptic touchlong press, and right click for MacOS.

Nested menus example by Anupam Chugh | iOS 13 Context Menus and SF Symbols

With UITargetedPreview and UITargetedDragPreview, drag animations, preview, or background can be customized. For example, a custom icon can be shown instead of preview sheet.

Context menu gets seamlessly dismissed as a drag action initiates | WWDC2019

Follow on Medium: https://medium.com/@takuma.kakehi/upgrade-the-ui-with-ios-13-587328d389a5

References

Modernizing Your UI for iOS 13 | WWDC 2019

iPadOS Redefines the iPad | Leaf & Core

iOS 13 Context Menus and SF Symbols | Anupam Chugh

Leave a comment

Your email address will not be published. Required fields are marked *