iPadOS 포인터를 위한 디자인

Hello and welcome to WWDC.

Hi everyone. I'm Brandon Walkin, a designer on the Apple design team. I'll be joined later by other designers on the team - Marcos Alonzo, CC Wan, and Dylan Edwards. We're gonna talk about how to design for the new pointer in iPadOS. Today we're going to talk about the design principles behind the new pointer, go behind the scenes and take a look at how it works and the different effects you can use. Then we'll talk about the appearance of the pointer, how to make a custom pointer or shape using Pointer Interactions, and how to make your app work great with gestures on the trackpad. Let's start off with some of the thinking behind the new pointer. The iPad works great with touch. So why would we want to add pointing. Well one of the reasons is ergonomics. Adding trackpad capability, allows people to have a more comfortable experience where they can leave their hands on the same plane as the keyboard instead of having to frequently reach up to touch the screen. We also wanted to make editing text easier. Editing text requires a lot of fine manipulation and since the finger is a course screen input it's more difficult to position the text cursor and make a selection compared to using a trackpad or a mouse. What's the best way to let people control the interface using the trackpad. iPad is unique in that its interface was fundamentally designed for touch. Hit areas are generous, so they can support being easily tapped with the finger. And buttons are spaced further apart to avoid accidental mis-taps. We looked at just bringing the traditional arrow pointer over from the Mac, but that didn't feel quite right on iPadOS where the entire operating system and every app is designed to be used by an input the size of a fingertip. You'd be using a high precision tool to interact with low precision controls. This got us thinking more deeply about the concept of precision. The traditional arrow pointer can move very precisely over the whole screen. This is great for certain tasks. Say you're making a marquee selection to edit a particular section of an image.

Or maybe you're just trying to select some texts from the middle of a paragraph. In these cases it's helpful to have very precise control over where the pointer is on screen, so you can place it just where you want it. But this high level of precision also has some downsides. Most of us are experts at using mice and track pads and aren't conscious of this, but the traditional pointer actually requires a lot of physical dexterity to use. Say you're trying to click a button and you quickly move the pointer there, but end up clicking just a few pixels above the button and nothing happens. Or maybe you end up clicking between two buttons and neither is activated.

Or, say you intend to click the pause button and end up rewinding to the beginning of the track. Let's take a close look at what's happening here. There are two independent layers that are interacting with each other. The interface layer and the pointing layer. The traditional pointer moves at pixel level precision. You can place it on any pixel of the interface but the underlying interface is built out of three button regions. It only cares which of the three playback buttons you click, not the precise pixel coordinate you click on a button. There's an inconsistency between the precision of the pointer and the precision required by the app. So while people generally think about the pointer in terms of giving you increased precision compared to touch. In this case it's helpful to actually reduce the precision of the pointer to match the user interface. This concept of dynamically adjusting the precision of the pointer to match the precision of the interface is called, Adaptive Precision. Let's look at how Adaptive Precision works.

The pointer starts off as a circle. This is its default state when the pointing system isn't aware of any particular level of precision of the interface around it.

It's sized to match a fingertip, since everything you're interacting with on iPad must be usable with touch. When you move the pointer to a group of buttons, the pointer will adjust itself to match the precision of the buttons.

As I move the pointer into the group of buttons, it snaps itself to the button while morphing its shape to the shape of the button. The change in shape indicates its new reduced level of precision. As I move between them the pointer will always snap its up to a button, making it clear exactly which one I'm interacting with. This feedback you get from the pointer reduces the likelihood that you'll miss click. You'll also notice that the pointer highlights the element rather than obscuring it. A traditional pointer is drawn over the entire interface often obscuring the control you're interacting with. We thought it was important to have the controls you're interacting with completely unobstructed. In fact, when the pointer snaps to a control, the pointer actually moves along the z axis from being in front of the app to being behind the buttons icon or label. This lets people see the true color of the icon. The icon on the left with the pointer behind it has the brightness level that the designer intended. Now, let's look at how the pointer interacts with text. You may have run into this issue before, where you try to select some text and you end up selecting the line just above or below the one you're aiming for. Here I'm trying to select the word environment, but I've started my click just slightly too high and selected the line above. Why does this happen? Well, the traditional I-beam pointer moves up and down at pixel level precision letting you click on individual pixels. However, the text view behind it only cares about line-level precision- which specific line of text you're clicking on. Let's zoom in a little closer. There's an invisible boundary just above the line of text where if I move my pointer just a single pixel over the boundary the TextView will think I'm interacting with the line above. This inconsistency between the input precision and the interface precision is what leads people to miss click and select the wrong text. Now, let's unify the precision of the pointer and the TextView together with Adaptive Precision.

As the pointer moves over the TextView it morphs from the circle pointer to a beam shape that matches the line height of the text. It's a new level of vertical precision. As you move the pointer up and down it snaps to each line of text making it clear which line you're interacting with. In fact the pointing system makes it impossible to place the pointer in an ambiguous position between two lines. You can give the pointer a different amount of precision for each axis, so when you move horizontally we give you pixel level precision so you can place the insertion point just where you want it and make your selection. So we showed how the pointer snaps the buttons and lines of text. You get both of these behaviors for free if you use our standard UIKit controls. But let's look at an example of when you'd want to use Adaptive Precision in a view that's custom for your app.

Here, we have a scheduling app that lets you manage events over a day view.

You make new events by clicking and dragging on the day view. It's common for these types of interfaces to round the start times of the events to 15 minute intervals. So instead of your click and drag starting a meeting at 9:41 for example which is an odd time to start meeting, it'll round it to a more common start time of 9:45. While this is a helpful behavior, it often results in errors when you're trying to make an event that starts at a certain time. Say you're trying to make an event that starts at 2:30. But the interface ends up interpreting that click as 2:15, resulting in a frustrating experience. Turns out what's happening here is exactly the same issue as with the TextView. Just like with the TextView, the vertical precision of the pointer, is different then the vertical precision of the interface. The pointer is letting you start to drag at any pixel on screen, but the interface only accepts drag starting within fifteen minute blocks. And the boundaries of these blocks aren't exposed to you. So it's not clear what will happen on click. And from a design perspective it may be distracting to visualize these regions using divider lines or hover states. Let's use Adaptive Precision to customize the precision of the pointer to match the day view. Now as you move up and down, the pointer is always snapped to a 15 minute interval, making it clear what time the event will begin. When you move quickly, you can just barely tell that it's snapping. But when you slow down, you really feel it snap to those time blocks. Here Adaptive Precision makes it easy to start an event at just the time you want, and reduces potential errors you'd see with a traditional pointer. So that's Adaptive Precision. Now let's take a look at how the pointer works behind the scenes. When you move the pointer around on screen, you're actually moving two pointers. The one you see on screen and an invisible one, that tracks the true position of the pointer. We call this the model pointer. The model pointer is used to decide which item the pointer is hovering over and it takes advantage of the generous padding that buttons have on iPadOS to make them easier to tap with the finger. Let's see this in action. Once the true pointer position reaches the edge of the button's hit area, it begins to move and resize to highlight the button. This effect of animating the pointer towards the button is called snapping. Now the pointer doesn't actually move to the center of the button at this point, though it may appear that way. The true position of the pointer still remains on the edge of the button. And this is indicated with a parallax effect. We do this so the amount the true pointer position moves on screen is always based on how much movement you apply to the trackpad, making it feel more predictable. As you move the pointer along a set of buttons, the visible pointer will animate to the next button. Once the true pointer position reaches the edge of the button's hit area. Once you lift your finger the pointer centers itself on the control.

This is called recentering. Recentering makes it easier to click the button when you put your finger back down on the trackpad. If you place a traditional pointer near the edge of a button, released your finger and click, it's possible the finger may roll slightly, moving the pointer off of the button. The pointer then auto hides. After a short delay. We found that if the pointer persisted on screen it would remind people to perform their next interaction using the trackpad rather than with touch or the pencil. We want people to feel like they can fluidly move between different inputs without thinking about it.

In fact there are many places on iPadOS where you can use touch and the pointer simultaneously. For example with one hand you can use the pointer to pick up an app icon, and with the other, you can swipe on the touchscreen to move it to another page. This is a huge advantage to having both input methods available. For your app, think about how users will switch between different inputs, and even try to use multiple at the same time. Now, let's look at how the pointer moves around the screen. The MacOS pointer moves at a speed that you can customize to what feels right for you. But it gets a little extra speed boost with something called an acceleration curve. The acceleration curve moves the pointer a longer distance the faster you move your finger on the trackpad. Here I'm swiping slowly, and swiping quickly, over the same physical distance on the trackpad. We've carefully tuned the acceleration curve on the Mac to work just right and we're using that same curve on iPadOS. But sometimes the boost you get from the acceleration curve just isn't enough to quickly move the pointer to where you want it. For instance, with a traditional pointer, to move it all the way over to the settings icon, I need to perform two separate swipes on the trackpad. I wish I could get there in just one swipe, but if we made the acceleration curve stronger, or increased the speed of the pointer, it could make it hard to control. On iPadOS, we solve this by adding inertia. Inertia makes it easy to move long distances with a small amount of physical input, similar to how you can flick to scroll a long distance on the touch screen. Now with just one flick on the trackpad, I can reach the button. When we were building the pointer we liked being able to flick to target controls. But we found that based on the speed of your swipe, sometimes the pointer would overshoot or undershoot the control.

Wouldn't it be great if the pointer could just figure out which control you were aiming for and move there automatically. Well, the new pointer has something called magnetism that does just that. Magnetism scans the interface to find the control you most likely want to target. Let's go back in time to see how it works. At this point I'm mid-Swipe and my finger is still touching the trackpad. The moment I lift my finger from the trackpad the pointing system immediately calculates where the pointer would have landed if it continued moving with inertia. We know that there isn't a target there, so we start scanning around that position in circles up to a fixed radius. We'll find the nearest target in the direction of your swipe and automatically move the pointer there. Since the settings icon is the closest snappable element to the projected position that is also in the direction of the pointer, we move the pointer there automatically the moment you lift your finger from the trackpad. We put a lot of work into tuning this to feel just right. Ideally people aren't even aware that this is happening. The pointer just magically reads their mind and does the right thing. And what's great is any control in your app that supports pointer snapping gets magnetism for free.

We just learned about why we added a pointer to iPadOS, the power of Adaptive Precision, and went behind the scenes to look at how the pointer works with snapping, recentering, inertia, and magnetism.

Now I'm gonna pass it off to Marcos who's gonna talk about how you can use pointer effects in your app.

Things Brandon. Hi everyone. In this section we're going to have a look at the different pointer effects you can use when adding trackpad support to your apps.

When the iPadOS pointer hovers over an interactive element, both the appearance and the behavior of the pointer and the interactive element become one, bringing focus to the item that is being targeted. We refer to this integration of pointer and the content as a Pointer Effect, and it changes based on context and content type. iPadOS provides 3 pointer effects you can use to bring focus to the interactive elements in your app. So when adding pointer support to your apps, you can use one of the provided effects, you can modify them to suit your app, or design a completely new one if you desire so. The first effect we provide is called Highlight Effect. This effect is used for small controls that don't have a background and it's the default effect for bar buttons and tab bars. For instance, when the pointer hovers over a control it becomes a controlled background by moving behind it while adopting a lighter color. When the control gets selected, its contents scale up and move with the pointer with a gentle parallax effect. A light effect connected to the pointer movement is added on top to highlight the object. And on click, the three layers scale down and move to the object center.

The next effect we provide is the Lift effect. You might want to use it for medium sized elements that already have a background. The pointer transforms into the element, highlighting it without obscuring its contents. Examples of this effect in iPadOS are the app icons or the control center modules. When the pointer approaches a control it disappears behind it. The object appears lifted by scaling up and adding a shadow. And the color of the item bleeds around it and illuminates the background behind it. Let's look at how the effect works when an object gets selected. These are the different layers that are added on top and below the selected element. A soft specular highlight is added on top of the element to illuminate it. The element itself is scaled up and its colors bleed around it covering its surroundings. This light effect is called radiosity. And lastly a shadow is projected under the element to give the illusion the element is floating above the screen.

The specular light is used to highlight the selected object but it has a second purpose. The position of the light shows the actual position of the pointer under the hood. As you can see with a dash circle here. the specular light shows you where the pointer is and connects your gestures with the movement on the screen. The strength of the light is based on the object size too. It gets bigger and brighter for bigger elements where the position of the pointer is harder to see. And gets smaller or it's not visible at all for smaller objects that don't require it. This is automatically done by the system, so you don't have to worry about it. The last effect we provide is called Hover. It is generally used for larger objects that would behave poorly if the pointer were to morph into their shape. When the pointer hovers over an object that uses this effect, the object changes its appearance to show its being focused and the cursor retains its default shape and remains visible on top of the object. This effect is highly customizable and it can be just a scale of the object and a shadow to lift it, a color tint added to the object, or any combination of the three. So how do you use a different effect. Let's have a look at how to pick the best effect for your app and how to use it. The main rule when picking a pointer effect is to try the Automatic Effect first. When using the Automatic Effect the system uses a combination of rules like the object type and location, and the object size and shape to decide the best effect for it. These rules can change in the future, so using the Automatic Effect ensures your app will always look good. Using the Automatic Effect is very easy. Just pick "automatic" when assigning a UIPointerEffect to your interactive element.

For more technical and implementation details check out the talk "Build for the iPadOS Pointer Interactions" from this year's WWDC. Well the automatic effect is not always the right solution. Like in this example from the books app. The bookmark icon on the right has its own background and seems like the Lift effect should be the appropriate one for it. But because it's in a toolbar next to other buttons that use a Highlight effect it feels out of place and we shouldn't use it. The right thing to do in this case is to use the Highlight effect. The Highlight effect will make the button look consistent with the other buttons around it. You should try to be consistent with designing the size of your objects too. Like in this example, we have three buttons side by side, but their highlight background size is not consistent.

This discrepancy will look bad when the pointer moves over them. So make sure the objects in the same group have a consistent size between them.

For toolbar sized buttons like in this example we recommend using a height of 37 points. Effect consistency is not always the right choice though. For instance, when we were designing the pointer behavior for segmented controls, we arrived at the conclusion that mixing effects was the right thing to do in this situation. So even though day and month use the Highlight effect and get a rounded rectangle around them when focused, using the highlight effect for the selected option looks out of place. In general you should try to avoid the highlight effect around rectangular objects. The right thing to do in this case is to use the Lift effect so the selected option appears lifted above the control around it. The hit region of the object will determine the area your Pointer Effect is active and you should make sure it's the right size. 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. So try to find a region that feels comfortable. In general it works well to add about 12 points of padding around elements that include a bezel.

And about 24 points around elements without a bezel. An extended hit region will also make your apps more comfortable when using the touch screen.

A common issue when defining your hit region is leaving a gap between objects. This will make the pointer morph back into the circular shape between them, creating an unnecessary animation. So make sure your hit region extends between your objects leaving no gap between them. That way the pointer will flow nicely between them. This change will make your apps work much better with touch too. A common problem when adopting the Lift effect is the extended shadow around it because your app was not designed for the extended size of the object the shadow might get clipped by other UI elements around it. So make sure that the objects that adopt the Lift effect are on top of their surrounding layers to ensure the shadow is rendered correctly.

Next we're going to have a look at how to customize and combine the pointer effects in your app. When using the Highlight and Lift effects you can specify the size and corner radius of your object. If your object has a circular shape or the corner radius is not 8 points it is very important that you provide the correct corner radius. Otherwise it will not render correctly.

When using the Hover effect your object can scale up or have a shadow when it is highlighted, like we see in this example. Both the scale effect and the shadow can be turn on and off so you can pick the right combination that matches your app design. But in general we don't recommend using the shadow if you're not scaling your object. Another effect you can combine with Hover is tinting. You can use it to highlight objects you don't want to scale as you can see here for notifications. When tinting is turned on it will add a special material on top or below the object and change its color. This material can be dark or light depending on your dark mode settings.

When using the Hover effect you can provide a custom shape for your pointer too. The pointer will morph from the full circle into the provided shape when it hovers over your object like the I-beam pointer we use for text on iPadOS. Custom pointers can show you extra information about a specific region on the screen or a change in the pointer behavior. We're going to learn a lot more about custom pointers in the next section. If we visualize the actual position of the pointer we can see how the I-beam tries to stay in the center of the text field. This effect is called snapping and creates a magnetic attraction that pulls the pointer to the center of the object.

It increases the precision of the pointer and creates a more comfortable experience when interacting with your app controls. You can use this effect in your apps too. Adding snapping to controls helps you be more precise and simplifies common tasks like grabbing small handlers, as you can see in this example. Just remember you should never enabled snapping if you're not providing a custom pointer. So we just had a look at the three-pointer effects provided by iPadOS, Highlight Lift and Hover. Remember you should try to use the Automatic Effect whenever possible. Be consistent picking the pointer effects and designing your object's shape. Extend your objects hit region to make it more comfortable to use. Remember when using the Lift effect, you have to provide the correct size and corner radius. And if you use the Hover effect you can enable a scale, a shadow, or a tint color for your object. I hope this section gave you a good overview of the different pointer effects provided by iPadOS and how to successfully use them to create a great pointer experience for your apps. That's all for me. I'm going to pass it over to CC who is going to show you how to design a great pointer for your app. Thank you.

Thank you Marcos. Hi everyone. I'm going to talk about the pointer appearance and how to design a custom pointer. First let's look at the pointer material.

The pointer in iPadOS has a material that constantly adapts to the background color smoothly. It provides optimal contrast at all times without being distracting. When the background color changes, so will the pointers color.

This material maintains contrast without obscuring the background. That is because when people are using the iPad with the trackpad we want the pointer to be there to show the location of interaction. But it shouldn't draw too much attention to itself and take away from the content. However, the pointer should indicate intention when it's needed. In this case when the pointer is transformed into a button shape, not only does it change its shape but the color of it also become lighter to provide good legibility to the label. On top of that when people click, the circle scales down and becomes darker to provide a satisfying feedback for the click action. These are examples of the pointers material adapting to its function. And all of these color adaptations are provided by the system automatically. Next, we are going to look at the pointer shape. As Brandon mentioned earlier, the pointer shape is a circle that represents touch. The size of its relates well with the touch-based UI elements. The circle shape provides a perfect foundation for it to transform into any shape. In the previous example the pointer transformed from a circle to a round rectangle to highlight the button. This is our first type of pointer shape transformation - from a circle to a rounded rectangle. And it's not just for buttons. The circle can transform to a vertical bar for an I-beam, a horizontal pill to highlight the top status region, or to highlight a grabber. These are all considered the rectangle type of pointer transformation. The second type of transformation is when the circle morphs into any arbitrary shape.

This can be used to inform people when there is a change of functionality or precision. For example the pointer can turn into a cross shape to indicate an area with higher level of precision. It can also transform into a pair of triangles to inform people the direction of a drag movement or when the command key is held down and the functions of the pointer is modified.

Both of these transformations are available with their corresponding APIs.

If the pointer is going to morph from a circle to a rectangle shape, apply the top API. If it is changing to a more complex shape, use the bottom one.

And check out the talk "Build for the iPadOS pointer" for more details on how to use these APIs. Now, let's talk about how to design a great custom pointer. As we just learned the pointer in iPadOS has many ways to morph it's color and shape. These behaviors provide the pointer with the flexibility to fully adapt to its context at any given moment. When we design a new custom shape for it, we should keep in mind this characteristic of a constant state of transformation. So, how do we design a great custom shape for the pointer. First, make sure your custom shape is simple and easy to understand. The shape of the pointer informs people the action they can take in the current context. For example, in Keynote, the pointer transforms into a pair of arrows that show the direction in which people can drag a selection handle. If people cannot instantly understand your custom pointer, they are likely to waste time trying to figure it out.

Second, you solid shapes as much as possible. Remember the pointer color is constantly changing. A solid shape will maintain legibility and make it easy to read. A shape with strokes will be difficult to read. But if it happens that you cannot use a solid fill shape, use heavy strokes and make sure the stroke weight is thick enough to maintain visual weight. It will be difficult to see the pointer if the stroke is too thin. And don't forget to use a size that is similar to the default pointer. The size of a custom shape should visually balance with the default pointer which is a 19 point circle. In other words if you have a shape that is narrow you may want to make it bigger to maintain a similar visual weight. In this example the cross mark is 24 points compared to the 19 points circle. Keep in mind that the pointer will morphs from its default state to the custom state.

If the custom pointer is too small it may get lost. And if there is a big size difference between the two states the transformation can become jarring and distracting. Now when you design your custom pointer, make sure the shape communicates its intention as directly as possible. Here's an example. Say if you're designing an app to read and highlight text. Instead of using a marker pen glyph as the custom highlight pointer, a better solution is to show the marker tip shape. In this case the shape not only informs people the height of the text selection but also resembles the I-beam, which implies all the system behaviors of adaptive position and snapping. The shape of the marker tip has the same anchor points as the circle, resulting in a nice transition between the two shapes. Speaking of anchor points, when designing a custom pointer, we should also make sure the anchor point matches well. If your custom shape is a circle, a simple geometric shape, or a symmetrical shape, it's natural to see the point of interaction as the center of these shapes. If the shape is directional or with a specific focus area, we will need the anchor point set to match the intent.

However it also means the transformation will appear to be off-centered.

It would be nice to think of other ways to indicate these functions and maintain the center anchor point as much as possible for a nice experience.

In this example instead of using an eyedropper glyph as our custom pointer, we can use a target shape for precise color sampling. Lastly a couple of things to keep in mind when designing a custom pointer. Make sure you apply standard pointer behaviors on your custom pointer. For example if buttons in a custom navigation bar don't use the standard highlight effect, people might think they are broken. Apply similar functions to similar pointers.

For example, if your app helps people draw, every drawing area in your app should have a similar pointer experience - so that people can apply the knowledge they gain in one area to the others. Last but not least, try not to create unnecessary custom pointers. People notice when the appearance of the pointer changes and they expect the change to be useful. Creating a purely decorative pointer effect can distract and even irritate people without providing any practical value. All right. We just learn about the pointer of material, pointer shape, and how to design a great custom pointer. I'm sure you can create a pointer that makes your app feel native and intuitive when people experience it with a trackpad. Now, I'm going to pass it to my colleague Dylan. He is going to talk about Pointer Interactions. Thanks CC. Let's talk about all the new interactive behaviors your app can gain with the pointer. Let's start by talking about increasing precision in your app. The presence of a pointer means that people can now interact with your app with much greater precision than previously possible with the finger. So how do we let them take advantage of this without redesigning our apps entirely.

We can use the pointer to do finer grained selection as well as adding quicker interactivity to smaller elements of your interface. A great example of finer grained selection is the text editing experience on iOS. As shown here, you can use the low precision input of your finger to perform text selection on a word boundary and then use the drag handles to carefully adjust your selection. But with the high precision input of the pointer this interaction is a bit different. As Brandon described, the narrow beam pointer makes it easy to see exactly where you're selecting, while we also snap it to the current line and grow its height to match the line height, reducing the ambiguity of its position. Because of this high precision and low ambiguity afforded by the pointer, we can begin selecting with character level precision immediately.

Consider places in your app where you might need a more precise pointer, or where you can use snapping to aid people in navigating your UI, and strive to always use a pointer that matches the precision necessary for the current task, defaulting to the circle when necessary. You can find another case of this type of precise input here in Numbers. Using our finger we can tap to select a column header, and then drag a finger on the exposed drag handle to resize a column. But with the precision of pointer input, we can actually expose a control that isn't available with the finger. Rather than selecting a column to expose a resize handle, we can move the pointer directly to the small divider between columns and begin dragging, again avoiding the need to first make an imprecise selection to achieve our goal. It's important to note that neither of these examples adds new functionality for the pointer, but rather they use the added precision to make this functionality easier to use with the pointer. You should avoid updating your app's layout, increasing density, or introducing features that only work with the pointer, but instead use the pointers precision to make using your app quicker and more intuitive. The pointer clearly enables new possibilities with precise input, but that's only half the story. The pointer system really shines when you make great use of adaptive precision. Let's take a look at how you can make your larger, low precision interfaces work wonderfully with the pointer too. Adopting pointer effects and places where high precision isn't necessary still can vastly improve the experience of your app. A great example is the interface in Reminders for creating a new list. These are approximately finger sized targets- a UI that already works great with the finger- but adding the Lift effect to these creates a fun and easy-to-use picker that gives exactly the amount of precision required. Consider places in your app that adjacent controls can use pointer effects to gain great visual feedback and snapping behaviors. As Marcos described previously, in cases of even larger UI that may behave poorly with a morphing pointer, you can still adopt a Hover effect. This isn't just for show. It can provide a lot of information about precision.

The Calendar app often has events much larger than a finger. While you might think such a course UI doesn't need to adapt to the pointer, this is actually an excellent place to add a Hover effect to indicate interactivity and disambiguate in cases of overlapping events. Now I'd like to share how the unique characteristics of pointer input can accelerate some of the interactions in your app. The pointers presence on the screen serves as a great indicator of intent. We can use this new information to speed up interactions that previously would have required a tap. Now that we know the position of the pointer we know that hovering over a region means a person is likely to interact with it and our app can respond proactively.

For instance the Books app makes use of the hover position of the pointer to control the visibility of its toolbars. We can hide the bar interface while reading to reduce distraction but immediately reveal it when the pointer moves over it, removing the need for a click to hide and show. The pointers movement, or lack thereof, can also be a helpful hint to update our UI. In a full screen experience, or immediate playback, you might wish to automatically hide UI after a period of inactivity. In these cases, pointer movement is a clear indication that someone wants to interact with your interface, and can be used to reveal your controls. Because pointing devices can scroll with a dedicated gesture or scroll wheel, your app can instantaneously respond to a click and drag to implement things like instantaneous drag-and-drop, or drag select, as we see here in Pages. Previously, these interactions required you to press and hold and wait with your finger to disambiguate between scrolling with a single finger and dragging on the content. Now let's take a step beyond the way the pointer interacts with your app, and think about how the people using your app interact with the trackpad itself through gestures. While one finger interaction is largely reserved for pointing and clicking, and three finger gestures are reserved by the system for actions like multitasking, your app can make use of two finger gestures on the trackpad. We'll automatically enable two fingers scrolling for scroll views, but you may wish to provide more custom interactions. Be sure to design your trackpad gestures with a relationship to your touch screen gestures to create a consistent experience across input modes. When adding gestures to the trackpad, we should always treat them as happening relative to the pointer in your app. This means that gestures should be performed on the view under your pointer. In this example, the pointer is moved between the left and right scroll views, and the scroll gesture is always performed on the appropriate view. Taking this a bit further let's take a look at how two-finger gestures behave in maps. As expected, the map scrolls with two fingers when the pointer is above it, and the card scrolls when the pointer is above it. But maps also allows using two fingers to zoom and rotate. This brings us to another detail about gestures behaving relative to the pointer- as we zoom and rotate, the view remains anchored to the pointer. This keeps the pointer in a fixed position relative to the map below, no different than if I'd perform this gesture with my fingers on the touch screen centered on the pointer. Because the two-finger gestures are intended to act relative to the pointer, it follows that you should be able to use these gestures directly on a focused element. Think about places in your app that allowed dragging with the finger today that could be adapted to a two-finger trackpad drag. Another capability of trackpads and mice is the ability to offer a secondary click. This can be exposed via two-finger click on a trackpads, a secondary button on a mouse, or even holding the control key and clicking, but the important fact that these all have in common is that they're all fast and just about as easy as a regular click. This means we can instantaneously perform an action that would have otherwise required a long press or a special mode to distinguish it from a regular tap with the finger. By default, we use this to immediately show context menus. This is an accelerator for an action that would have otherwise required a long press. You'll get this for free in your app but in your custom interfaces you may want to consider the places that an accelerated or alternate action is appropriate for a secondary click. So we've learned a lot today. We've learned about adaptive precision, how to customize the pointer and its effects, and how to make use of pointer interactions and gestures in your app. These are all small pieces when viewed individually- adopting pointer effects to provide the right amount of precision and improve ergonomics, integrating hover to let your app respond to intent, responding fluidly to two finger gestures, accelerating interactions with secondary click, and applying custom pointer shapes that allow precision while using snapping to improve accuracy. But these small pieces combine to form a whole powerful functional system that allows you to build a highly responsive, understandable interfaces combining unprecedented precision with ease of use. We hope you take what you've learned today to elevate your already excellent touch screen apps and make them even more powerful with the pointer. Thank you.