Screen space is precious on a mobile device. That’s why special navigation patterns have been developed to display relevant app content in the most efficient way. We recently showed you 7 commonly used mobile navigation patterns including typical use cases. You can quickly build those navigations with Pidoco, and we’ll take a closer look at one of them today: the slider.
The slider is a great way to depict progressive or closely related content on a minimum of screen estate by displaying successive parts of the content in the same section of the screen, often while keeping the rest of the screen static (much like in a typical module tab pattern). Based on natural gestures you can swipe to the left or right and see content that is only displayed when your slider is in a specific position. For instance, take a transportation app where you can use the slider to switch from one transportation option to the next (e.g. car, train, bus or airplane etc.). To avoid a fiddly navigation, not more than 7 options should be used.
The slider consists of the following parts: Usually a horizontal bar that acts as a visualization of the sliding process. Several elements (e.g. bubbles, round shapes, rectangles) on the bar represent the specific slider states, each of which is connected to specific content.
And here’s how it goes …
1. Setting up the project
For this post, I will use a transportation app with three transportation options as example. To build our slider, we will need several layers that will contain the content specific to each of the three slider positions. Everything around the slider will remain static, so we will use a page for all that content. So, let’s create a new project as well as one page and the three required layers in the beginning. (Hint: Don’t forget to give your layers unique names.)
We commence with the start page and add the static content. Here I added a status bar and a title bar as well as some text and an image. The slider will be positioned at the bottom of the page, so we will leave some space there and continue with the layers.
Adding the static content to the start page
2. Creating the slider
2.1. Building the basic structure
Now let’s create our slider. First, we go to the layer panel, select the first layer from the list and start editing. The slider will go to the bottom of the app and will have one element for each option. Here I used three round shapes for each slider position, added some labels and a line to connect the three options.
Building the basic structure of the slider on the first layer
2.2. Customizing the slider
Now we can customize the basic slider and add the specific content for every position that is only displayed when the user moves the slider. Here I added some information about travel distance and duration.
For a better visualization of the selected option the current slider position can be highlighted. That’s why I used a bigger round and green shape and an icon.
Adding highlighting element to the basic structure of the slider
2.3. Adding interactions
Finally, we can make the slider interactive. To do so, add an Action area to the inactive slider positions and right-click to open the context menu. Select the “Interactions” tab and add a new interaction. In the Interaction dialog that opens, select the pairing “When the user swipes”, select the desired direction (left or right), and set the reaction “change layer visibility” to only show the layer for the selected slider position and to hide the other layers.
Adding interactions to the slider to create the swipe effect
2.4. Completing the slider
Now we just copy the entire slider with its interactions to the other previously created layers to paste it there. By default, the slider will conveniently be copied to the same position. Finally, we only have to adjust the reactions (which layer to show) within the Interaction dialog as well as the highlighting of the slider.
3. Simulation
Voilà! To test your slider, just open the Pidoco app on your mobile device (available via Google Play or the App Store) and start the simulation of your project by selecting it from the project list.
And if you need a little inspiration, here’s what my project looks like.
That’s it! You have successfully created your first slider! Do you need help? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.
Happy Prototyping!