By Howard Pinsky
Hey, everyone – I’m Howard Pinsky – and today we’re going to take a look at creating fun and styled page indicators that you can use within your onboarding experiences.
Here are a few screens that I built out during an Adobe Live stream, and I may want to add visual indicators to let users know which step they’re currently on, and how many there are. Starting off with the inactive dots, the Ellipse tool can be used to create a perfect circle, then I’ll pull a color from the design, like this pink, then pull the opacity back a touch to create an inactive feel.
With one in place, the others can be created either by duplicating them over manually, or popping them into a repeat grid and dragging out as many as you need – and to add room for the animation to take place, they should be relatively spaced out from each other. Great, before moving on to the active dot, let me quickly name this grid.
Alright – now you may be thinking, to make the process easier, you can copy one of the circles to use as the active indicator – and if you’re not looking to stylize the animation, you can certainly do that, but to help when elongating takes place, we’re going to use a rectangle, instead. Once it’s been drawn out over top of one of the existing circles, the corners can be completely rounded to disguise it as an ellipse. Since this will be element that will indicate the active screen, I’ll use the highlight color here.
Now, a decision needs to be made. If you simply want the ellipse to move to its next location, you can pop these elements on each screen and shift the active dot over, but since we want to add a touch of fun to the interaction, let’s move on.
As you saw in the preview, when the transition takes place, the active indicator briefly expands then contracts into place. To accomplish this, we need to get creative with masks. Here’s what we’re going to do.
Since the mask will follow the same shape as the rounded rectangle, we can quickly duplicate it then select both objects in the layers panel. Once selected, under the object menu, choose Mask with Shape. This will take the bottom most layers and mask them inside the shape at the top. Next, we need to extend the mask a touch. So selecting the up-most layer, pull the left edge out to the left, about 4 times the size of the ellipse. Now, why are we doing this? In short, it will allow us to temporarily stretch out the indicator during the transition.
Now that the first position is complete, I’ll quickly group these elements then copy and paste them onto the second artboard where I can make the necessary changes. First, the mask group will be shifted over to line up overtop of the second ellipse, then we’ll want to reverse the two elements within it. The visible shape will be pulled out, then the mask will be pulled back in to once again make a perfect circle.
Great, finally, for the third screen, we can simply paste the first set of indicators and shift active mask over to the final position.
Alright, let’s wire this up. Switching over to prototype mode, I’ll select the button at the bottom then drag the handle over to the second artboard. Within the properties inspector we’ll want to make sure that tap is selected – at least for this interaction, then auto-animate is the chosen action to ensure we have a smooth transition. For the easing options, In-Out should look pretty nice, and to allow us to enjoy the animation, a duration around 0.8 will do the trick.
Now, the moment of truth. Launching the preview window, clicking on the “Next” button will kick off the transition and reveal our animation, and because of how our masks were set up, we’re left with a fun look to our indicators.
Before we wrap up, if you want to get even more stylized with the animation, on the second artboard, stretch out the visible shape within the mask quite a bit more than you originally did, and now when the prototype is previewed one more time, there’s a slight wind up before it shoots over to the right.
And there you have it. A simple but fun interaction that you can add to your onboarding flows. For more tips & tricks just like this, head on over to LetsXD.com and I’ll see you all soon.
Animated page indicators help users understand the current context at any given time, especially when the system is busy doing work. A wait-animation progress indicator helps provide a system status for users to simulate that a process is running or content is still loading.
