Pointers (iPadOS)

iPadOS 13.4 introduces dynamic pointer effects and behaviors that enhance the experience of using a pointing device with iPad. As people use a pointing device, iPadOS automatically adapts the pointer to the current context, providing rich visual feedback and just the right level of precision needed to enhance productivity and simplify common tasks.

The iPadOS pointing system gives people an additional way to interact with apps and content — it doesn’t replace touch. Some people may continue to use touch only, while others may prefer to use the pointer or a combination of both. Let people choose how to interact with your app, and avoid condensing your interface or making changes that require them to use the pointer.

For developer guidance, see Pointer Interactions.
Enabling Pointer Interactions

Aim to provide a consistent experience, whether people are using touch, a pointing device, or a keyboard. People tend to move fluidly between using touch and a connected input device, and they don’t want to learn different interactions for each mode or for each app they use.

Ensure that all the regions in your app respond correctly when people use familiar gestures with their connected device. For example, if people can manipulate content by swiping a finger on the screen, consider whether it makes sense to let them perform the same action by using two fingers on a trackpad, by clicking and dragging with the pointer, or by moving a mouse wheel. For developer guidance, see UIApplicationSupportsIndirectInputEvents.

Enable a consistent experience when people hold down a modifier key while interacting with objects in your app. For example, if people can duplicate an object by holding down the Option key while they drag it, the result should be the same whether they drag using touch or the pointer.

Distinguish between pointer and finger input only if it provides value. For example, a scrubber can give people an additional way to target a location in a video when they’re using the pointer. In this scenario, people can drag the playhead using either the pointer or touch, but they can hover and click a precise seek destination using the pointer.

Let people use hover to reveal and hide controls that automatically minimize or fade out. For example, people can reveal the minimized Safari toolbar by hovering the pointer over it (the toolbar minimizes again when the pointer moves away). People can also hover the pointer to reveal or hide playback controls while they watch a full-screen video.
Play
Pointer Shape and Content Effects

iPadOS integrates the appearance and behavior of both the pointer and the element it’s hovering over, bringing focus to the item people are targeting. You can support the system-provided pointer effects or modify them to suit your app.

By default, the pointer’s shape is a circle, but it can display a system-defined or custom shape when it hovers over specific elements or regions. For example, the pointer automatically uses the familiar I-beam shape when it hovers over a text-entry area.
Play

With a content effect, the UI element or region beneath the pointer can also change its appearance when the pointer hovers over it. Depending on the type of content effect, the pointer can retain its current shape or transform into a shape that integrates with the element’s new appearance.

iPadOS defines three content effects that bring focus to different types of interactive elements in your app: highlight, lift, and hover.

The highlight effect transforms the pointer into a translucent, rounded rectangle that acts as a background for a control and includes a gentle parallax. The subtle highlighting and movement bring focus to the control without distracting people from their task. By default, iPadOS applies the highlight effect to bar buttons, tab bars, segmented controls, and edit menus.
Play

The lift effect combines a subtle parallax with the appearance of elevation to make an element seem like it’s floating above the screen. As the pointer fades out beneath the element, iPadOS creates the illusion of lift by scaling the element up while adding a shadow below it and a soft specular highlight on top of it. By default, iPadOS applies the lift effect to app icons and to buttons in Control Center.
Play

Hover is a generic effect that lets you apply custom scale, tint, or shadow values to an element as the pointer hovers over it. The hover effect combines your custom values to bring focus to an item, but it doesn’t transform the default pointer shape.
Play
Pointer Magnetism

In addition to bringing focus to elements through pointer transformations and content effects, iPadOS can also help people target an element by making the element appear to attract the pointer. People can experience this magnetic effect when they move the pointer close to an element and when they flick the pointer toward an element.

When people move the pointer close to an element, the system starts transforming the pointer’s shape as soon as it reaches an element’s hit region. Because the hit region typically extends beyond an element’s visible boundaries, the pointer begins to transform before it appears to touch the element, creating the illusion that the element is pulling the pointer toward it.
Play

When people flick the pointer toward an element, iPadOS examines the pointer’s trajectory to discover the element that’s the most likely target. When there’s an element in the pointer’s path, the system uses magnetism to pull the pointer toward the element’s center.

By default, iPadOS applies magnetism to elements that use the lift effect (like app icons) and the highlight effect (like bar buttons), but not to elements that use hover. Because a hover-enabled element doesn’t transform the default pointer shape, adding magnetism could be jarring and might make people feel that they’ve lost control of the pointer.

The system also applies magnetism to text-entry areas, where it can help people avoid skipping to another line if they make unintended vertical movements while they’re selecting text.
Supporting Standard Pointers and Effects

When possible, enable the system-provided content effects. People quickly become accustomed to the content effects they see throughout the system and generally expect their experience to apply to the apps they use. To provide a consistent user experience, adhere to the design intent of each effect. Specifically:

Use highlight for a small element that has a transparent background.
Use lift for a small element that has an opaque background.
Use hover for large elements and customize the scale, tint, and shadow attributes as needed (for guidance, see Customizing Pointer Shapes and Effects).

Prefer the system-provided pointer appearances for standard buttons and text-entry areas. You can help people feel more comfortable with your app when the pointer behaves in ways they expect.

Add padding around interactive elements to create comfortable hit regions. You might need to experiment to determine the right size for an element’s hit region. If the hit region is too small, it can make people feel that they have to be extra precise when interacting with the element. On the other hand, when an element’s hit region is too large, people can feel that it takes a lot of effort to pull the pointer away from the element. In general, it works well to add about 12 points of padding around elements that include a bezel; for elements without a bezel, it works well to add about 24 points of padding around the element’s visible edges.

Diagram of a button that has a blue rounded rectangular bezel. The button is centered on top of a shaded rectangle that extends beyond the button by the same distance on all sides. Centered on each side, a red callout indicates the distance from the button to the edge of the shaded rectangle. Each callout is labeled with the number twelve to show the recommended twelve points of padding.

Diagram of a glyph centered on top of a shaded rectangle that extends beyond the glyph by the same distance on all sides. Centered on each side, a red callout indicates the distance from the glyph to the edge of the shaded rectangle. Each callout is labeled with the number twenty-four to show the recommended twenty-four points of padding.

Diagram of a button without a bezel, centered on top of a shaded rectangle that extends beyond the button by the same distance on all sides. Centered on each side, a red callout indicates the distance from the button to the edge of the shaded rectangle. Each callout is labeled with the number twenty-four to show the recommended twenty-four points of padding.

Create contiguous hit regions for custom bar buttons. If there’s space between the hit regions of adjacent buttons in a bar, people may experience a distracting motion when the pointer reverts briefly to its default shape as it moves between buttons.

Specify the corner radius of a nonstandard element that receives the lift effect. With the system-provided lift effect, the pointer transforms to match the element’s shape as it fades out. By default, the pointer uses the system-defined corner radius to transform into a rounded rectangle. If your element is a different shape — if it’s a circle, for example — you need to provide the radius so the pointer can animate seamlessly into the shape of the element. For developer guidance, see UIPointerShape.roundedRect(_:radius:).
Customizing Pointer Shapes and Effects

Prefer system-provided pointer effects for custom elements that behave like standard elements. When a custom element behaves like a standard one, people generally expect to interact with it using familiar pointer interactions. For example, if buttons in a custom navigation bar don’t use the standard highlight effect, people might think they’re broken.

Use pointer effects in consistent ways throughout your app. For example, if your app helps people draw, every drawing area in your app should enable a similar pointer experience so that people can apply the knowledge they gain in one area to the others.

Avoid creating gratuitous pointer and content effects. People notice when the appearance of the pointer or the UI element beneath it changes, and they expect the changes to be useful. Creating a purely decorative pointer effect can distract and even irritate people without providing any practical value.

Keep custom pointer shapes simple. Ideally, the pointer’s shape signals the action people can take in the current context without drawing too much attention to itself. For example, Keynote transforms the pointer into a pair of arrows that show the directions in which people can drag a selection handle. If people don’t instantly understand your custom pointer shape, they’re likely to waste time trying to discover what the shape means.

Partial screenshot of a custom pointer in Keynote as it hovers over a blue resize handle on the top edge of an image. The custom pointer transforms the default shape into two small gray triangles, one that points up and one that points down.

Consider enhancing the pointer experience by displaying custom annotations that provide useful information. For example, you could display X and Y values when the pointer hovers over a graphing area in your app. Keynote uses annotations to display the current width and height of a resizable image.

Partial screenshot of a custom pointer in Keynote as it hovers over a blue resize handle on the right edge of an image. Above the pointer is a small annotation that displays the image’s width and height values against a dark background.

Avoid displaying instructional text with a pointer. A pointer that displays instructional text can make an app seem complicated and difficult to use. Instead of providing instructions, prioritize clarity and simplicity in your interface, so that people can quickly grasp how to use your app whether they’re using the pointer or touching the screen.

Consider the interplay of shadow, scale, and element spacing when defining custom hover effects. In general, reserve scaling for elements that can increase in size without crowding nearby elements. For example, scaling doesn’t work well for a table row because a row can’t expand without overlapping adjacent rows. For an element that has very little space around it, consider using a hover effect that includes tint, but not scale and shadow. Also, it doesn’t work well to use shadow without including scale, because an unscaled element doesn’t appear to get closer to the viewer even when its shadow implies that the element is elevated above the screen.